/* ============================================================
   CLOKK — Marketing Site
   Staff scheduling, sorted.
   ============================================================ */

:root {
  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-alt:  #F0F4F9;
  --primary:      #1A6BBF;
  --primary-dark: #155FA0;
  --accent:       #4A90D9;
  --accent-pale:  rgba(74,144,217,.10);
  --ink:          #0B1220;
  --ink-2:        #1F2937;
  --muted:        #4B5563;
  --muted-2:      #6B7280;
  --line:         #E5E7EB;
  --line-soft:    #EEF2F6;
  --success:      #16A34A;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
  --shadow-md: 0 4px 14px rgba(17,24,39,.06), 0 2px 6px rgba(17,24,39,.04);
  --shadow-lg: 0 20px 50px rgba(26,107,191,.18), 0 8px 20px rgba(17,24,39,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(32px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin: 14px 0 14px;
  color: var(--ink);
}
.section-head p {
  color: var(--muted);
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary);
  background: var(--accent-pale);
  padding: 6px 12px;
  border-radius: 999px;
}

.accent { color: var(--primary); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(26,107,191,.28);
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26,107,191,.34);
}
.btn-secondary {
  background: #fff;
  color: var(--primary);
  border-color: var(--line);
}
.btn-secondary:hover {
  border-color: var(--primary);
  background: var(--accent-pale);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--surface-alt); }

.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-full { width: 100%; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  color: var(--ink);
  flex-shrink: 0;
}
.nav-logo { height: 32px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-demo {
  color: var(--primary) !important;
  font-weight: 600 !important;
}
.nav-signin {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--ink) !important;
  font-weight: 600 !important;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, #E5E7EB);
  background: #fff;
  transition: all .15s ease;
}
.nav-signin i { width: 16px; height: 16px; }
.nav-signin:hover {
  border-color: var(--primary);
  color: var(--primary) !important;
  background: var(--accent-pale);
}
.nav-cta {
  background: var(--primary);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(26,107,191,.22);
  transition: all .18s ease;
}
.nav-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  color: #fff !important;
}
.nav-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top right, rgba(74,144,217,.12), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(26,107,191,.08), transparent 60%),
    #fff;
}
.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--accent-pale);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-title {
  font-size: clamp(42px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -2px;
  margin-bottom: 20px;
  color: var(--ink);
}
.hero-sub {
  font-size: 19px;
  color: var(--muted);
  max-width: 540px;
  margin-bottom: 32px;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
}
.trust-avatars { display: flex; }
.trust-avatars span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #fff;
  margin-left: -8px;
}
.trust-avatars span:first-child { margin-left: 0; }
.hero-trust p {
  font-size: 14px;
  color: var(--muted-2);
}

/* Honest credibility list — replaces the placeholder trust avatars. */
.hero-credibility {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 0;
  margin: 0;
}
.hero-credibility li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.hero-credibility li i {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
}

/* Phone mockup */
.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-mockup {
  position: relative;
  perspective: 1200px;
}
.phone-frame {
  width: 300px;
  height: 610px;
  background: #0B1220;
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: rotate(-2deg);
  transition: transform .3s ease;
}
.phone-mockup:hover .phone-frame { transform: rotate(0deg); }
.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 28px;
  background: #0B1220;
  border-radius: 0 0 18px 18px;
  z-index: 2;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: #F0F4F9;
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mock-header {
  background: var(--primary);
  color: #fff;
  padding: 42px 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mock-logo { height: 26px; width: auto; }
.mock-bell {
  position: relative;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-bell svg { width: 18px; height: 18px; color: #fff; }
.mock-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--primary);
}
.mock-body { padding: 18px; }
.mock-greet {
  font-size: 13px;
  color: var(--muted-2);
}
.mock-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--ink);
}
.mock-banner {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  padding: 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(26,107,191,.3);
}
.mock-banner > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mock-banner-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.mock-banner-title {
  font-size: 13px;
  font-weight: 600;
}
.mock-banner-sub {
  font-size: 11px;
  opacity: .85;
}
.mock-banner svg { width: 20px; height: 20px; }
.mock-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.mock-shift {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.mock-shift-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.mock-shift-row strong { color: var(--ink); }
.mock-chip {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .5px;
}
.mock-chip-day   { background: #FEF9C3; color: #854D0E; }
.mock-chip-arvo  { background: #FFE4E6; color: #9F1239; }
.mock-chip-night { background: #1E293B; color: #fff; }
.mock-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted-2);
}
.mock-role {
  font-size: 11px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.mock-shift-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mock-status {
  font-size: 10px;
  font-weight: 600;
  color: #EF4444;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mock-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   HERO — AUTO-DRAFT ANIMATION
   A cursor slides up, clicks "Auto-Draft", and the weekly roster
   populates with a staggered cascade. Pure CSS (no JS) — every
   sub-element runs the same 10s loop with a negative initial
   animation-delay so all iterations stay in sync across the page's
   entire lifetime. See the draft-chip delay formula below.
   ============================================================ */
.draft-demo {
  --loop: 10s;
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(17,24,39,.15), 0 12px 30px rgba(26,107,191,.12);
  overflow: hidden;
  transition: transform .3s ease;
}
.draft-demo:hover { transform: translateY(-4px); }

.draft-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #F9FAFB;
  border-bottom: 1px solid var(--line-soft);
}
.draft-chrome-dots { display: flex; gap: 6px; }
.draft-chrome-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E5E7EB;
}
.draft-chrome-dots span:nth-child(1) { background: #FCA5A5; }
.draft-chrome-dots span:nth-child(2) { background: #FCD34D; }
.draft-chrome-dots span:nth-child(3) { background: #6EE7B7; }
.draft-chrome-url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
  color: var(--muted-2);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
}

.draft-app {
  position: relative;
  padding: 20px;
  background: #fff;
}

.draft-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.draft-toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.draft-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.draft-sub   { font-size: 11px; color: var(--muted-2); }

.draft-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  cursor: default;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(26,107,191,.25);
  overflow: hidden;
  animation: draft-btn-press var(--loop) infinite ease-out;
}
.draft-btn-wand {
  width: 14px; height: 14px;
  animation: draft-btn-wand-wiggle var(--loop) infinite ease-out;
  transform-origin: center;
}
.draft-btn-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 140%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: draft-btn-ripple var(--loop) infinite ease-out;
}
@keyframes draft-btn-press {
  0%, 18%  { transform: scale(1);   box-shadow: 0 4px 10px rgba(26,107,191,.25); }
  20%      { transform: scale(.94); box-shadow: 0 2px 4px rgba(26,107,191,.2); }
  24%      { transform: scale(1);   box-shadow: 0 4px 10px rgba(26,107,191,.25); }
  100%     { transform: scale(1); }
}
@keyframes draft-btn-wand-wiggle {
  0%, 19%, 26%, 100% { transform: rotate(0deg); }
  21% { transform: rotate(-22deg); }
  23% { transform: rotate(22deg); }
}
@keyframes draft-btn-ripple {
  0%, 19%  { transform: translate(-50%, -50%) scale(0);   opacity: .7; }
  22%      { transform: translate(-50%, -50%) scale(.5);  opacity: .55; }
  34%      { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
  100%     { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

.draft-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.draft-row {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  gap: 4px;
  align-items: stretch;
}
.draft-row--head {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 2px;
}
.draft-role-label {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-right: 6px;
}
.draft-day {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--muted-2);
  text-align: center;
  padding: 4px 0;
}
.draft-day--wknd { color: var(--accent); }
.draft-cell {
  height: 30px;
  background: #F3F4F6;
  border: 1px dashed rgba(156,163,175,.45);
  border-radius: 6px;
  overflow: hidden;
}
.draft-chip {
  --chip-bg: linear-gradient(135deg, #60A5FA, #3B82F6);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chip-bg);
  color: #fff;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(17,24,39,.10);
  opacity: 0;
  transform: scale(.4) translateY(6px);
  animation: draft-chip-pop var(--loop) infinite ease-out;
  /* Negative delay trick: every chip still loops every 10s at the exact
     same wall-clock cadence as the cursor/button. Staggered cascade starts
     at t = (d-1)*0.08s + 2s after the cursor clicks. */
  animation-delay: calc((var(--d) - 1) * 0.08s + 2s - var(--loop));
}
.draft-chip--day   { --chip-bg: linear-gradient(135deg, #60A5FA, #3B82F6); }
.draft-chip--arvo  { --chip-bg: linear-gradient(135deg, #FBBF24, #F59E0B); color: #7C2D12; }
.draft-chip--night { --chip-bg: linear-gradient(135deg, #475569, #1E293B); }

@keyframes draft-chip-pop {
  0%   { opacity: 0; transform: scale(.4) translateY(6px); }
  4%   { opacity: 1; transform: scale(1.12) translateY(-2px); }
  8%   { opacity: 1; transform: scale(1) translateY(0); }
  48%  { opacity: 1; transform: scale(1) translateY(0); }
  56%  { opacity: 0; transform: scale(.75) translateY(0); }
  100% { opacity: 0; transform: scale(.4) translateY(6px); }
}

/* Animated cursor — starts off-screen bottom-right, slides up to the
   Auto-Draft button, presses down, then drifts away. */
.draft-cursor {
  position: absolute;
  top: 38px;
  right: 60px;
  opacity: 0;
  transform: translate(80px, 160px);
  filter: drop-shadow(0 2px 6px rgba(17,24,39,.3));
  pointer-events: none;
  z-index: 3;
  animation: draft-cursor-move var(--loop) infinite cubic-bezier(.4, 0, .2, 1);
}
@keyframes draft-cursor-move {
  0%   { opacity: 0; transform: translate(80px, 160px); }
  3%   { opacity: 1; transform: translate(80px, 160px); }
  18%  { opacity: 1; transform: translate(0, 0) scale(1); }
  20%  { opacity: 1; transform: translate(0, 3px) scale(.82); }
  24%  { opacity: 1; transform: translate(0, 0) scale(1); }
  42%  { opacity: 1; transform: translate(8px, 14px); }
  54%  { opacity: 0; transform: translate(70px, 100px); }
  100% { opacity: 0; transform: translate(80px, 160px); }
}

/* Status bar — transitions from "21 open shifts" (red) → "Roster complete" (green) */
.draft-status {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.draft-status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #EF4444;
  flex-shrink: 0;
  animation: draft-status-dot var(--loop) infinite ease-out;
}
@keyframes draft-status-dot {
  0%, 22%  { background: #EF4444; box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
  28%      { background: var(--success); box-shadow: 0 0 0 7px rgba(22,163,74,.25); }
  55%      { background: var(--success); box-shadow: 0 0 0 0 rgba(22,163,74,0); }
  70%, 100% { background: #EF4444; box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.draft-status-text {
  position: relative;
  flex: 1;
  min-height: 16px;
}
.draft-status-empty,
.draft-status-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity .2s ease;
}
.draft-status-empty {
  animation: draft-status-empty var(--loop) infinite;
}
.draft-status-full {
  color: var(--success);
  font-weight: 600;
  opacity: 0;
  animation: draft-status-full var(--loop) infinite;
}
@keyframes draft-status-empty {
  0%, 22%  { opacity: 1; }
  27%, 62% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes draft-status-full {
  0%, 22%  { opacity: 0; }
  27%, 62% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* Respect reduced motion — show the fully-populated end state, no motion. */
@media (prefers-reduced-motion: reduce) {
  .draft-cursor { display: none; }
  .draft-btn,
  .draft-btn-wand,
  .draft-btn-ripple,
  .draft-status-dot,
  .draft-status-empty,
  .draft-status-full,
  .draft-chip { animation: none !important; }
  .draft-chip { opacity: 1; transform: none; }
  .draft-status-empty { opacity: 0; }
  .draft-status-full  { opacity: 1; }
  .draft-status-dot   { background: var(--success); }
}

/* ============================================================
   LOGOS STRIP
   ============================================================ */
.logos {
  padding: 40px 24px;
  background: var(--surface-alt);
  text-align: center;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.logos-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

/* Industries strip — replaces the old .logos plain-text row. */
.industries {
  padding: 56px 24px;
  background: var(--surface-alt);
  text-align: center;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.industries-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted-2);
  margin-bottom: 28px;
}
.industries-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px 28px;
}
.industries-row li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.industries-row li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.industries-row li i {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ============================================================
   FEATURES
   ============================================================ */
.features {
  padding: 100px 0;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: all .2s ease;
}
.feature-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-pale);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}
.feature-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how {
  padding: 100px 0;
  background: var(--surface-alt);
}
.how-grid {
  display: grid;
  grid-template-columns: 1.1fr minmax(260px, 320px);
  gap: 72px;
  align-items: center;
}
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  position: relative;
}
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 18px;
  row-gap: 4px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  text-align: left;
  position: relative;
}
.step-num {
  grid-row: 1 / span 2;
  font-size: 34px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -1px;
  opacity: .55;
  line-height: 1;
  padding-top: 2px;
}
.step h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}
.step p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.how-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.how-visual .phone-mockup { perspective: 1200px; }
.how-visual .phone-frame {
  width: 260px;
  height: 530px;
}
.how-visual-caption {
  font-size: 13px;
  color: var(--muted-2);
  text-align: center;
  max-width: 240px;
  line-height: 1.4;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing {
  padding: 100px 0;
}
.billing-toggle {
  margin: 24px auto 0;
  display: inline-flex;
  padding: 4px;
  background: #f1f4f8;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.billing-opt {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.billing-opt:hover { color: var(--ink); }
.billing-opt.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20, 30, 48, 0.12);
}
.billing-save {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(26, 107, 191, 0.12);
  color: var(--primary);
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all .2s ease;
}
.price-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.price-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}
.price-desc {
  font-size: 14px;
  color: var(--muted-2);
  min-height: 42px;
  margin-bottom: 18px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.price-num {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.price-unit {
  font-size: 15px;
  color: var(--muted-2);
  font-weight: 500;
}
.price-features {
  list-style: none;
  margin-bottom: 24px;
  flex-grow: 1;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  padding: 7px 0;
}
.price-features li svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 3px;
}
.price-card--featured {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}
.price-card--featured:hover {
  border-color: var(--primary);
  transform: scale(1.02) translateY(-2px);
}
.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 5px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-card--enterprise {
  background: linear-gradient(160deg, #0B1220 0%, #1F2937 100%);
  color: #fff;
  border-color: #0B1220;
}
.price-card--enterprise:hover { border-color: var(--accent); }
.price-card--enterprise h3,
.price-card--enterprise .price-num { color: #fff; }
.price-card--enterprise .price-desc { color: rgba(255,255,255,.7); }
.price-card--enterprise .price-amount { border-bottom-color: rgba(255,255,255,.12); }
.price-card--enterprise .price-features li { color: rgba(255,255,255,.9); }
.price-card--enterprise .price-features li svg { color: var(--accent); }
.price-card--enterprise .btn-secondary {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.price-card--enterprise .btn-secondary:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section {
  padding: 100px 0;
  background: var(--surface-alt);
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-item:hover { border-color: var(--accent); }
.faq-item--open {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq-chev {
  width: 18px; height: 18px;
  color: var(--muted-2);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq-item--open .faq-chev {
  transform: rotate(180deg);
  color: var(--primary);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
}
.faq-item--open .faq-a {
  max-height: 400px;
  padding: 0 22px 20px;
}
.faq-a p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta {
  padding: 80px 0 120px;
}
.cta-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 60px 48px;
  text-align: center;
  max-width: 760px;
  /* Centre the card itself inside .section-inner — without this the
     card hugs the left edge of the section once it stops filling the
     full width of the container. Shorthand to make sure both axes
     get auto regardless of any later override. */
  margin: 0 auto;
}
/* Belt-and-braces for the per-section overrides further down — the
   how-it-works final CTA and personalised contact card both apply
   their own .cta-card rule, so we make sure those don't accidentally
   reset the auto margins. */
.hiw-final-cta .cta-card,
#contact .cta-card {
  margin-left: auto;
  margin-right: auto;
}
/* The eyebrow's default brand-on-pale palette disappears against the
   gradient CTA card. Switch to a white-on-translucent-white pill so
   it reads cleanly against the dark background. */
.cta-card .eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  margin-bottom: 14px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.cta-card h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 14px;
}
.cta-card > p {
  font-size: 17px;
  opacity: .9;
  max-width: 560px;
  margin: 0 auto 34px;
}
/* Sits between the section copy and the contact form — invites
   the user to the live demo before they fill out a form. */
.cta-try-row {
  display: flex;
  justify-content: center;
  margin: -8px auto 28px;
}
.cta-try-row .btn {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-try-row .btn:hover {
  background: rgba(255,255,255,.22);
}
.cta-form {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
/* Single-column rows (textarea spans full width). */
.cta-form .form-row:has(> textarea) {
  grid-template-columns: 1fr;
}
.cta-form input,
.cta-form select,
.cta-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.14);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  backdrop-filter: blur(6px);
  transition: all .15s ease;
}
.cta-form textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}
.cta-form input::placeholder,
.cta-form textarea::placeholder { color: rgba(255,255,255,.75); }
.cta-form select option { color: var(--ink); }
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255,255,255,.22);
}
.cta-form .btn-primary {
  background: #fff;
  color: var(--primary);
  margin-top: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.cta-form .btn-primary:hover {
  background: #fff;
  color: var(--primary-dark);
  transform: translateY(-1px);
}
.form-note {
  text-align: center;
  font-size: 13px;
  opacity: .8;
  margin-top: 14px;
}
.form-legal {
  text-align: center;
  font-size: 12px;
  opacity: .65;
  margin-top: 10px;
  line-height: 1.55;
}
.form-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-legal a:hover { opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #0B1220;
  color: rgba(255,255,255,.7);
  padding: 60px 24px 30px;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand { color: #fff; }
.footer-logo {
  height: 32px;
  width: auto;
  margin-bottom: 12px;
}
.footer-brand p {
  font-size: 14px;
  color: rgba(255,255,255,.6);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-cols h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.footer-cols a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  padding: 4px 0;
  transition: color .15s ease;
}
.footer-cols a:hover { color: #fff; }
.footer-base {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

/* ============================================================
   PERSONALISED / WHITE-LABEL PAGE
   ============================================================ */

/* Active link state in nav.
   Uses text-decoration so the underline tracks the actual text width
   (the previous absolute-positioned ::after used hardcoded left/right
   offsets that don't adapt to the link's text content, leaving the
   underline either floating wider than the text or sitting offset). */
.nav-links a.is-current {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Hero -------------------------------------------------------- */
.brand-hero {
  position: relative;
  padding: 96px 24px 80px;
  text-align: center;
  background:
    radial-gradient(900px 420px at 50% -120px, var(--accent-pale), transparent 70%),
    var(--bg);
  overflow: hidden;
}
.brand-hero::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.brand-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}
.brand-hero h1 {
  font-size: clamp(36px, 5.4vw, 60px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.05;
  margin: 16px 0 18px;
  color: var(--ink);
}
.brand-hero-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 30px;
  line-height: 1.65;
}
.brand-hero-sub strong { color: var(--ink); font-weight: 600; }
.brand-hero-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Brand switcher ---------------------------------------------- */
.brand-switcher {
  padding: 100px 0 80px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface-alt) 100%);
}

/* Auto-rotator meta — dot indicator + current brand caption */
.brand-rotator-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 48px auto 0;
  max-width: 480px;
  text-align: center;
}
.brand-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.brand-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: width .55s cubic-bezier(.4,0,.2,1), background-color .55s cubic-bezier(.4,0,.2,1);
}
.brand-dot.is-active {
  width: 32px;
  background: var(--primary);
}
.brand-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 48px;       /* prevent layout jump as text changes width */
  line-height: 1.25;
}
.brand-current-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.3px;
  transition: color .35s ease;
  /* CLS guard: longest brand name ("Coastal Hotel Group") sets the floor */
  min-width: 200px;
  text-align: center;
  display: inline-block;
}
.brand-current-tag {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-2);
  min-width: 180px;
  text-align: center;
  display: inline-block;
}

/* Stage = phone mockup + spec strip side by side -------------- */
.brand-stage {
  /* DEFAULT theme — overridden by [data-brand="X"] below */
  --bs-bg:           #F5F8FB;
  --bs-fg:           #0B1220;
  --bs-fg-muted:     #4B5563;
  --bs-accent:       #1A6BBF;
  --bs-accent-2:     #4A90D9;
  --bs-accent-text:  #FFFFFF;
  --bs-accent-soft:  rgba(74,144,217,.14);
  --bs-card-bg:      #FFFFFF;
  --bs-card-border:  #E5E7EB;
  --bs-divider:      #EEF2F6;
  --bs-radius:       18px;
  --bs-radius-sm:    12px;
  --bs-radius-pill:  999px;
  --bs-font:         'Outfit', sans-serif;
  --bs-display-font: 'Outfit', sans-serif;
  --bs-frame:        #1F2937;
  --bs-bell-bg:      var(--bs-accent-soft);
  --bs-bell-fg:      var(--bs-accent);

  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(260px, 1fr);
  gap: 36px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
}

/* THEMES — swap CSS variables based on data-brand */
.brand-stage[data-brand="clokk"] {
  --bs-bg:#F5F8FB; --bs-fg:#0B1220; --bs-fg-muted:#4B5563;
  --bs-accent:#1A6BBF; --bs-accent-2:#4A90D9; --bs-accent-text:#FFFFFF;
  --bs-accent-soft:rgba(74,144,217,.14);
  --bs-card-bg:#FFFFFF; --bs-card-border:#E5E7EB; --bs-divider:#EEF2F6;
  --bs-radius:18px; --bs-radius-sm:12px;
  --bs-font:'Outfit',sans-serif; --bs-display-font:'Outfit',sans-serif;
  --bs-frame:#1F2937;
  --bs-bell-bg:rgba(74,144,217,.14); --bs-bell-fg:#1A6BBF;
}
.brand-stage[data-brand="star"] {
  --bs-bg:#0B0B0F; --bs-fg:#F5F2E8; --bs-fg-muted:#9B9789;
  --bs-accent:#C9A227; --bs-accent-2:#D9B649; --bs-accent-text:#0B0B0F;
  --bs-accent-soft:rgba(201,162,39,.18);
  --bs-card-bg:#15151B; --bs-card-border:rgba(201,162,39,.22); --bs-divider:rgba(201,162,39,.12);
  --bs-radius:6px; --bs-radius-sm:4px;
  --bs-font:'Outfit',sans-serif; --bs-display-font:'Playfair Display',serif;
  --bs-frame:#0B0B0F;
  --bs-bell-bg:rgba(201,162,39,.18); --bs-bell-fg:#C9A227;
}
.brand-stage[data-brand="cafe"] {
  --bs-bg:#FBF6EE; --bs-fg:#3A2A1A; --bs-fg-muted:#7A6A55;
  --bs-accent:#C0623A; --bs-accent-2:#E2956A; --bs-accent-text:#FFFFFF;
  --bs-accent-soft:rgba(192,98,58,.14);
  --bs-card-bg:#FFFDF8; --bs-card-border:#E8DCC6; --bs-divider:#EFE5D2;
  --bs-radius:22px; --bs-radius-sm:16px;
  --bs-font:'Outfit',sans-serif; --bs-display-font:'Outfit',sans-serif;
  --bs-frame:#3A2A1A;
  --bs-bell-bg:rgba(192,98,58,.14); --bs-bell-fg:#C0623A;
}
.brand-stage[data-brand="hotel"] {
  --bs-bg:#F5F2EC; --bs-fg:#1E2D44; --bs-fg-muted:#65728A;
  --bs-accent:#1E2D44; --bs-accent-2:#9C7C3A; --bs-accent-text:#F5F2EC;
  --bs-accent-soft:rgba(156,124,58,.16);
  --bs-card-bg:#FFFFFF; --bs-card-border:#DAD4C8; --bs-divider:#E6E0D2;
  --bs-radius:8px; --bs-radius-sm:6px;
  --bs-font:'Outfit',sans-serif; --bs-display-font:'Outfit',sans-serif;
  --bs-frame:#1E2D44;
  --bs-bell-bg:rgba(156,124,58,.16); --bs-bell-fg:#9C7C3A;
}
.brand-stage[data-brand="pulse"] {
  --bs-bg:#0F172A; --bs-fg:#F1F5F9; --bs-fg-muted:#94A3B8;
  --bs-accent:#22D3A8; --bs-accent-2:#22D3A8; --bs-accent-text:#0F172A;
  --bs-accent-soft:rgba(34,211,168,.14);
  --bs-card-bg:#1E293B; --bs-card-border:rgba(34,211,168,.22); --bs-divider:rgba(255,255,255,.06);
  --bs-radius:14px; --bs-radius-sm:10px;
  --bs-font:'Outfit',sans-serif; --bs-display-font:'Outfit',sans-serif;
  --bs-frame:#020617;
  --bs-bell-bg:rgba(34,211,168,.14); --bs-bell-fg:#22D3A8;
}

/* Phone frame */
.brand-stage-frame {
  position: relative;
  width: 320px;
  height: 640px;
  background: var(--bs-frame);
  border-radius: 44px;
  padding: 14px;
  margin: 0 auto;
  box-shadow:
    0 30px 70px rgba(11,18,32,.22),
    0 12px 30px rgba(11,18,32,.12),
    inset 0 0 0 2px rgba(255,255,255,.06);
  transition: background .35s ease;
}
.brand-stage-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 22px;
  border-radius: 0 0 14px 14px;
  background: var(--bs-frame);
  z-index: 2;
}
.brand-stage-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: var(--bs-bg);
  color: var(--bs-fg);
  font-family: var(--bs-font);
  padding: 32px 18px 18px;
  overflow: hidden;
  transition: background .35s ease, color .35s ease;
}

/* Phone-mockup elements (.bp-*) ------------------------------- */
.bp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 16px;
}
.bp-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bp-logo-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--bs-accent), var(--bs-accent-2));
  box-shadow: 0 0 0 2px var(--bs-bg), 0 0 0 3px var(--bs-accent-soft);
}
.bp-logo-text {
  font-family: var(--bs-display-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--bs-fg);
}
.bp-bell {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--bs-radius-sm);
  background: var(--bs-bell-bg);
  color: var(--bs-bell-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bp-bell-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bs-accent);
  color: var(--bs-accent-text);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bs-bg);
}

/* Greeting */
.bp-greet { padding: 6px 2px 16px; }
.bp-greet-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bs-fg-muted);
  margin-bottom: 2px;
}
.bp-greet-name {
  font-family: var(--bs-display-font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.5px;
  margin-bottom: 2px;
  color: var(--bs-fg);
  line-height: 1.15;
}
.bp-greet-sub {
  font-size: 13px;
  color: var(--bs-fg-muted);
}

/* Open shifts banner */
.bp-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--bs-radius);
  background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-2) 100%);
  color: var(--bs-accent-text);
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.bp-banner-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  font-family: var(--bs-display-font);
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bp-banner-text { flex: 1; min-width: 0; }
.bp-banner-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 1px;
}
.bp-banner-sub {
  font-size: 11px;
  opacity: .85;
}

/* Section heading */
.bp-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--bs-fg-muted);
  margin: 4px 2px 8px;
}

/* Shift card */
.bp-shift {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border);
  border-radius: var(--bs-radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: background .35s ease, border-color .35s ease;
}
.bp-shift--mine {
  border-color: var(--bs-accent);
  box-shadow: 0 0 0 1px var(--bs-accent), 0 4px 12px var(--bs-accent-soft);
}
.bp-shift-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.bp-shift-day {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bs-fg);
}
.bp-chip {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 3px 8px;
  border-radius: var(--bs-radius-pill);
  background: var(--bs-accent-soft);
  color: var(--bs-accent);
}
.bp-chip--alt {
  background: var(--bs-accent);
  color: var(--bs-accent-text);
}
.bp-shift-time {
  font-size: 11.5px;
  color: var(--bs-fg-muted);
  margin-left: auto;
}
.bp-shift-role {
  font-size: 12.5px;
  color: var(--bs-fg);
  margin-bottom: 8px;
  line-height: 1.4;
}
.bp-shift-role span:first-child { font-weight: 600; }
.bp-shift-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bs-divider);
}
.bp-shift-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--bs-fg-muted);
}
.bp-shift-status--mine {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bs-accent);
}
.bp-shift-btn {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--bs-radius-sm);
  background: var(--bs-accent);
  color: var(--bs-accent-text);
  cursor: pointer;
}

/* Spec strip — what's actually different per brand */
.brand-stage-spec {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.bs-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.bs-spec-row:last-child { border-bottom: 0; }
.bs-spec-key {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-2);
  flex-shrink: 0;
}
.bs-spec-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  line-height: 1.35;
  /* min-height keeps the row from collapsing during the swipe transition */
  min-height: 1.35em;
}

.brand-switcher-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 640px;
  margin: 56px auto 0;
  line-height: 1.55;
}
.brand-switcher-foot svg {
  flex-shrink: 0;
  color: var(--primary);
  margin-top: 2px;
}

/* What's customisable grid ------------------------------------ */
.brand-customise {
  padding: 100px 0;
}
.customise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.customise-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: all .2s ease;
}
.customise-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.customise-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-pale);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.customise-icon svg { width: 22px; height: 22px; }
.customise-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.customise-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.customise-card code {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  background: var(--surface-alt);
  color: var(--primary-dark);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Side-by-side comparison ------------------------------------- */
.brand-compare {
  padding: 100px 0;
  background: var(--surface-alt);
}
.compare-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  max-width: 880px;
  margin: 0 auto;
}
.compare-card {
  /* Override grid layout from .brand-stage so they stack vertically */
  display: block !important;
  grid-template-columns: none !important;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px 24px 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.compare-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--ink);
  margin-bottom: 24px;
}
.compare-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.compare-frame {
  width: 280px !important;
  height: 540px !important;
}
.compare-card .brand-stage-screen {
  padding: 28px 16px 14px;
  border-radius: 26px;
}

/* Process ----------------------------------------------------- */
.brand-process {
  padding: 100px 0;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.process-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.process-step-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: 10px;
}
.process-step h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
  letter-spacing: -.3px;
}
.process-step p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 10px;
}
.process-step p:last-child { margin-bottom: 0; }
.process-step code {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  background: var(--surface-alt);
  color: var(--primary-dark);
  padding: 1px 6px;
  border-radius: 4px;
}
.process-step-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--primary) !important;
  margin-top: 12px !important;
}

/* Tier card --------------------------------------------------- */
.brand-tier {
  padding: 0 0 100px;
}
.brand-tier-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--accent-pale), rgba(74,144,217,.04));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.brand-tier-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.brand-tier-icon svg { width: 26px; height: 26px; }
.brand-tier-text h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--ink);
  margin-bottom: 4px;
}
.brand-tier-text p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}
.brand-tier-btn { flex-shrink: 0; white-space: nowrap; }

/* Personalised page responsive -------------------------------- */
@media (max-width: 980px) {
  .brand-hero { padding: 72px 20px 64px; }
  .brand-stage {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 360px;
  }
  .brand-stage-spec { width: 100%; }
  .customise-grid { grid-template-columns: repeat(2, 1fr); }
  .compare-row {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 28px;
  }
  .process-grid { grid-template-columns: 1fr; }
  .brand-tier-card {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 16px;
    padding: 26px 24px;
  }
  .brand-tier-btn { justify-self: start; }
}
@media (max-width: 680px) {
  .brand-hero h1 { letter-spacing: -1.2px; }
  .brand-presets { grid-template-columns: 1fr 1fr; }
  .customise-grid { grid-template-columns: 1fr; }
  .brand-stage-frame { width: 280px; height: 560px; padding: 12px; }
  .brand-stage-notch { width: 90px; height: 18px; top: 12px; }
  .brand-stage-screen { padding: 26px 14px 14px; border-radius: 28px; }
  .compare-frame { width: 240px !important; height: 470px !important; }
  .nav-links a.is-current { text-decoration: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }
  .hero-right { order: 2; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-trust { justify-content: center; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    justify-items: center;
  }
  .how-visual { order: -1; }
  .steps {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 640px;
  }
  .price-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .price-card--featured { transform: none; }
  .price-card--featured:hover { transform: translateY(-2px); }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 680px) {
  .nav-menu-btn { display: inline-flex; }

  .nav-links {
    position: fixed;
    top: 64px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 20px;
    background: rgba(255,255,255,.98);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease, padding .22s ease, opacity .18s ease;
    opacity: 0;
    pointer-events: none;
  }
  .nav-links--open {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 10px 30px rgba(17,24,39,.07);
  }
  .nav-links a {
    padding: 14px 12px;
    font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-links a:last-child { border-bottom: none; }
  /* On mobile the Sign in pill flattens to a regular menu item so it
     doesn't fight the vertical menu rhythm. The Try-it-now CTA below
     keeps its pill treatment for emphasis. */
  .nav-signin {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 14px 12px !important;
    justify-content: flex-start;
  }
  .nav-signin:hover { background: transparent !important; }
  .nav-cta {
    margin-top: 10px;
    text-align: center;
    padding: 12px 18px !important;
    border-bottom: none !important;
  }
  body.nav-open { overflow: hidden; }

  .hero { padding: 56px 0 72px; }
  .hero-title { letter-spacing: -1.4px; }
  .phone-frame { width: 240px; height: 490px; }
  .how-visual .phone-frame { width: 240px; height: 490px; }

  .draft-demo { max-width: 100%; border-radius: 14px; }
  .draft-app { padding: 14px; }
  .draft-row { grid-template-columns: 56px repeat(7, 1fr); gap: 3px; }
  .draft-chip { font-size: 9px; padding: 0 2px; }
  .draft-role-label { font-size: 10px; }
  .draft-cell { height: 26px; }
  .draft-btn { padding: 7px 12px; font-size: 11.5px; }
  .draft-cursor { top: 52px; right: 40px; }
  .step { padding: 20px 20px; grid-template-columns: 48px 1fr; column-gap: 14px; }
  .step-num { font-size: 28px; }

  .features, .how, .pricing, .faq-section { padding: 72px 0; }
  .faq-q { padding: 16px 18px; font-size: 15.5px; }
  .faq-item--open .faq-a { padding: 0 18px 18px; }
  .section-head { margin-bottom: 40px; }

  .feature-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }

  .cta { padding: 50px 0 80px; }
  .cta-card { padding: 40px 24px; border-radius: var(--r-lg); }
  .form-row { grid-template-columns: 1fr; }

  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ============================================================
   HOW IT WORKS — DEDICATED PAGE
   A long-form guided tour. Each step alternates copy / demo
   left and right on desktop, stacks vertically on mobile.
   All demos use CSS-only loops (negative animation-delay) so
   they stay synchronized across the page lifetime.
   ============================================================ */

/* --- Hero --- */
.hiw-hero {
  background: linear-gradient(180deg, var(--surface-alt) 0%, #fff 100%);
  padding: 88px 24px 56px;
  text-align: center;
}
.hiw-hero-inner { max-width: 820px; margin: 0 auto; }
.hiw-hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.05;
  margin: 14px 0 18px;
}
.hiw-hero h1 .accent {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hiw-hero-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 28px;
}
.hiw-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}
.hiw-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.hiw-hero-pill svg { width: 14px; height: 14px; color: var(--primary); }
.hiw-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --- Sticky table of contents --- */
.hiw-toc {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.hiw-toc-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 18px;
  align-items: center;
}
.hiw-toc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}
.hiw-toc-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  list-style: none;
  margin: 0; padding: 0;
  /* Keep horizontal scroll on overflow but hide the bar — its thin track
     was reading as a misaligned underline beneath the active pill. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.hiw-toc-list::-webkit-scrollbar { display: none; }
.hiw-toc-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: all .15s ease;
  scroll-snap-align: start;
}
.hiw-toc-list a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--line-soft);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: -.3px;
}
.hiw-toc-list a:hover { background: var(--surface-alt); color: var(--ink); }
.hiw-toc-list a.is-current {
  background: var(--accent-pale);
  color: var(--primary);
  font-weight: 600;
}
.hiw-toc-list a.is-current span {
  background: var(--primary);
  color: #fff;
}

/* --- Step section shell --- */
.hiw-step {
  padding: 90px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hiw-step:last-of-type { border-bottom: none; }
.hiw-step--alt { background: var(--surface-alt); }

.hiw-step-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.hiw-step--reverse .hiw-step-inner > .hiw-step-copy { order: 2; }
.hiw-step--reverse .hiw-step-inner > .hiw-step-demo { order: 1; }

.hiw-step-num {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -3px;
  margin-bottom: 16px;
}
.hiw-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: .2px;
}
.hiw-tag svg { width: 13px; height: 13px; }
.hiw-tag--admin { background: var(--accent-pale); color: var(--primary); }
.hiw-tag--staff { background: #ECFDF5; color: #047857; }

.hiw-step-copy h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 14px;
}
.hiw-step-lede {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.6;
}
.hiw-step-bullets {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hiw-step-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}
.hiw-step-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.hiw-step-bullets strong { color: var(--ink); font-weight: 600; }
.hiw-pill {
  display: inline-block;
  background: #FEF3C7;
  color: #92400E;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: 1px;
}
.hiw-step-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.hiw-step-link:hover { border-color: var(--primary); }
.hiw-step-link svg { width: 16px; height: 16px; transition: transform .15s ease; }
.hiw-step-link:hover svg { transform: translateX(3px); }

.hiw-step-demo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 460px;
}

/* ============================================================
   STEP 01 — Onboarding 4-step demo
   Progress dots advance, slides cross-fade, each slide showing
   the same step's content as the real onboarding. 16s loop.
   ============================================================ */
.onb-demo {
  --loop: 16s;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(17,24,39,.12), 0 8px 20px rgba(26,107,191,.08);
  overflow: hidden;
}
.onb-demo-chrome {
  padding: 22px 22px 0;
}
.onb-demo-dots {
  display: grid;
  grid-template-columns: 32px 1fr 32px 1fr 32px 1fr 32px;
  align-items: center;
  gap: 6px;
}
.onb-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--muted-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--line);
  transition: all .3s ease;
  animation: onb-dot var(--loop) infinite linear;
}
/* Dots highlight in sequence 1 → 2 → 3 → 4 over 16s.
   With keyframe "active 0–22% / inactive 25–100%", a step is active when
   its cycle_pos is near 0. cycle_pos at t = (t − delay) mod 16, so we want
   delay = (N−1) × L/4 (or equivalently delay = −(4−(N−1)) × L/4 with negative wrap). */
.onb-dot[data-step="1"] { animation-delay: 0s; }
.onb-dot[data-step="2"] { animation-delay: calc(0s - var(--loop) * 3/4); }
.onb-dot[data-step="3"] { animation-delay: calc(0s - var(--loop) * 2/4); }
.onb-dot[data-step="4"] { animation-delay: calc(0s - var(--loop) * 1/4); }
@keyframes onb-dot {
  0%, 22%   { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.05); }
  25%, 100% { background: var(--surface-alt); color: var(--muted-2); border-color: var(--line); transform: scale(1); }
}
.onb-line {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.onb-line-fill {
  position: absolute; inset: 0;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  animation-duration: var(--loop);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* Each line fills exactly when the next dot lights up:
   line 1 at 25% (4s, step 2), line 2 at 50% (8s, step 3), line 3 at 75% (12s, step 4). */
.onb-line-fill[data-line="1"] { animation-name: onb-line-1; }
.onb-line-fill[data-line="2"] { animation-name: onb-line-2; }
.onb-line-fill[data-line="3"] { animation-name: onb-line-3; }
@keyframes onb-line-1 {
  0%, 22%  { transform: scaleX(0); }
  25%, 100% { transform: scaleX(1); }
}
@keyframes onb-line-2 {
  0%, 47%  { transform: scaleX(0); }
  50%, 100% { transform: scaleX(1); }
}
@keyframes onb-line-3 {
  0%, 72%  { transform: scaleX(0); }
  75%, 100% { transform: scaleX(1); }
}

.onb-demo-stage {
  position: relative;
  height: 320px;
  margin: 18px 0 0;
}
.onb-slide {
  --slide: 1;
  position: absolute;
  inset: 0;
  padding: 12px 22px 22px;
  opacity: 0;
  transform: translateY(8px);
  animation: onb-slide var(--loop) infinite ease-in-out;
  animation-delay: calc(var(--loop) * (var(--slide) - 1) / 4 - var(--loop));
}
@keyframes onb-slide {
  0%, 1%    { opacity: 0; transform: translateY(8px); }
  3%, 22%   { opacity: 1; transform: translateY(0); }
  24%, 100% { opacity: 0; transform: translateY(-8px); }
}
.onb-slide h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}
.onb-slide-sub {
  font-size: 13px;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.onb-field { margin-bottom: 12px; }
.onb-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.onb-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  min-height: 38px;
}
.onb-input--select {
  justify-content: space-between;
  color: var(--ink-2);
}
.onb-input--select svg { width: 14px; height: 14px; color: var(--muted-2); }
.onb-typewrite {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: onb-type var(--loop) infinite steps(14, end);
}
@keyframes onb-type {
  0%, 1%   { width: 0; }
  10%      { width: 14ch; }
  22%      { width: 14ch; }
  25%, 100% { width: 14ch; }
}
.onb-caret {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  background: var(--primary);
  margin-left: 1px;
  animation: onb-blink 1s infinite steps(2, end);
}
@keyframes onb-blink {
  50% { opacity: 0; }
}
.onb-cta {
  margin-top: 16px;
  background: var(--primary);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 11px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(26,107,191,.2);
}
.onb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.onb-chip {
  --c: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px dashed var(--line);
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.onb-chip svg { width: 11px; height: 11px; }
.onb-chip--filled {
  background: var(--accent-pale);
  border: 1px solid transparent;
  color: var(--primary);
  font-weight: 600;
  animation: onb-chip-pop var(--loop) infinite ease-out;
  animation-delay: calc(var(--loop) * (1 + var(--c) * .15) / 4 - var(--loop));
  opacity: 0;
  transform: scale(.6);
}
@keyframes onb-chip-pop {
  0%, 1%   { opacity: 0; transform: scale(.6); }
  3%       { opacity: 1; transform: scale(1.1); }
  6%, 22%  { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; transform: scale(.6); }
}
.onb-suggest-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted-2);
  margin: 8px 0 6px;
}

.onb-success { text-align: center; padding: 12px 0; }
.onb-success-tick {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #16A34A, #4ADE80);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(22,163,74,.35);
  animation: onb-tick-pop var(--loop) infinite ease-out;
  animation-delay: calc(var(--loop) * 3 / 4 - var(--loop));
}
.onb-success-tick svg { width: 28px; height: 28px; }
@keyframes onb-tick-pop {
  0%, 1%   { transform: scale(0); }
  4%       { transform: scale(1.15); }
  8%, 22%  { transform: scale(1); }
  25%, 100% { transform: scale(0); }
}
.onb-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}
.onb-summary > div {
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 8px 10px;
}
.onb-summary span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted-2);
  margin-bottom: 2px;
}
.onb-summary strong { font-size: 14px; color: var(--ink); }

/* ============================================================
   STEP 02 — Brand cycle demo
   Swatches highlight in turn, the card recolours to match.
   12s loop, 4 brands × 3s each.
   ============================================================ */
.brand-demo {
  --loop: 12s;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  --b-primary: #1A6BBF;
  --b-accent:  #4A90D9;
  --b-text:    #fff;
  animation: brand-cycle var(--loop) infinite ease-in-out;
}
@keyframes brand-cycle {
  0%, 22%  { --b-primary: #1A6BBF; --b-accent: #4A90D9; --b-text: #fff; }
  25%, 47% { --b-primary: #16A34A; --b-accent: #4ADE80; --b-text: #fff; }
  50%, 72% { --b-primary: #F59E0B; --b-accent: #FBBF24; --b-text: #7C2D12; }
  75%, 97% { --b-primary: #BE185D; --b-accent: #EC4899; --b-text: #fff; }
}
.brand-demo-row--swatches {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.brand-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  position: relative;
  transition: transform .3s ease;
}
.brand-swatch--blue   { background: #1A6BBF; }
.brand-swatch--green  { background: #16A34A; }
.brand-swatch--amber  { background: #F59E0B; }
.brand-swatch--rose   { background: #BE185D; }
.brand-swatch::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: var(--b-primary);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .25s ease, transform .25s ease;
}
.brand-swatch--blue,
.brand-swatch--green,
.brand-swatch--amber,
.brand-swatch--rose {
  animation: brand-swatch-active var(--loop) infinite ease-in-out;
}
/* Negative animation-delay rewinds the swatch's pulse so its
   "highlighted" phase (0–22% of brand-swatch-active) lines up with
   the card's matching colour phase (0–22% / 25–47% / 50–72% / 75–97%
   of brand-cycle). Earlier delays had green and rose swapped, so
   the swatches lit up out of sync with the card. */
.brand-swatch--blue  { animation-delay: calc(0s - var(--loop) * 0/4); }
.brand-swatch--green { animation-delay: calc(0s - var(--loop) * 3/4); }
.brand-swatch--amber { animation-delay: calc(0s - var(--loop) * 2/4); }
.brand-swatch--rose  { animation-delay: calc(0s - var(--loop) * 1/4); }
@keyframes brand-swatch-active {
  0%, 22%  { transform: scale(1.18); }
  25%, 100% { transform: scale(1); }
}

.brand-demo-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-md);
  transition: box-shadow .3s ease;
}
.brand-demo-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--b-accent);
  padding: 8px 12px;
  border-radius: 10px;
  width: max-content;
  transition: background .4s ease;
}
.brand-demo-logo-mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--b-text);
  display: inline-block;
  position: relative;
  transition: border-color .4s ease;
}
.brand-demo-logo-mark::after {
  content: "";
  position: absolute;
  top: 1px; left: 50%;
  width: 1.5px; height: 5px;
  background: var(--b-text);
  transition: background .4s ease;
}
.brand-demo-logo-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--b-text);
  letter-spacing: -.3px;
  transition: color .4s ease;
}
.brand-demo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.brand-demo-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  transition: background .4s ease, border-color .4s ease;
}
.brand-demo-stat--accent {
  background: var(--b-primary);
  border-color: transparent;
}
.brand-demo-stat--accent .brand-demo-stat-num,
.brand-demo-stat--accent .brand-demo-stat-lbl { color: var(--b-text); transition: color .4s ease; }
.brand-demo-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.brand-demo-stat-lbl {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--muted-2);
  margin-top: 4px;
}
.brand-demo-btn {
  background: var(--b-primary);
  color: var(--b-text);
  border-radius: 10px;
  padding: 11px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: background .4s ease, color .4s ease;
}

/* ============================================================
   STEP 03 — Invite link / copy demo
   "Copy" button presses, swaps to "Copied" with check, toast slides in
   ============================================================ */
.invite-demo {
  --loop: 8s;
  position: relative;
  width: 100%;
  max-width: 460px;
}
.invite-demo-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-md);
}
.invite-demo-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.invite-demo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 10px 12px;
}
.invite-demo-url {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invite-demo-copy {
  position: relative;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: default;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  animation: invite-copy-press var(--loop) infinite ease-out;
}
@keyframes invite-copy-press {
  0%, 38%   { background: var(--primary); transform: scale(1); }
  40%       { background: var(--primary-dark); transform: scale(.94); }
  44%, 78%  { background: var(--success); transform: scale(1); }
  82%, 100% { background: var(--primary); transform: scale(1); }
}
.invite-demo-copy-i { width: 14px; height: 14px; transition: opacity .2s ease; }
.invite-demo-copy-i--ok {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation: invite-copy-icon-ok var(--loop) infinite ease-out;
}
@keyframes invite-copy-icon-ok {
  0%, 42%   { opacity: 0; }
  44%, 78%  { opacity: 1; }
  82%, 100% { opacity: 0; }
}
.invite-demo-copy > .invite-demo-copy-i:not(.invite-demo-copy-i--ok) {
  animation: invite-copy-icon-default var(--loop) infinite ease-out;
}
@keyframes invite-copy-icon-default {
  0%, 42%   { opacity: 1; }
  44%, 78%  { opacity: 0; }
  82%, 100% { opacity: 1; }
}
.invite-demo-copy-txt {
  display: inline-block;
  animation: invite-copy-txt-default var(--loop) infinite ease-out;
}
.invite-demo-copy-txt--ok {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation: invite-copy-txt-ok var(--loop) infinite ease-out;
}
@keyframes invite-copy-txt-default {
  0%, 42%   { opacity: 1; }
  44%, 78%  { opacity: 0; }
  82%, 100% { opacity: 1; }
}
@keyframes invite-copy-txt-ok {
  0%, 42%   { opacity: 0; }
  44%, 78%  { opacity: 1; }
  82%, 100% { opacity: 0; }
}
.invite-demo-foot {
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 10px;
}
.invite-demo-toast {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  box-shadow: 0 12px 26px rgba(11,18,32,.25);
  animation: invite-toast var(--loop) infinite ease-out;
}
.invite-demo-toast svg { width: 15px; height: 15px; color: #4ADE80; }
@keyframes invite-toast {
  0%, 41%   { opacity: 0; transform: translate(-50%, 20px); }
  46%       { opacity: 1; transform: translate(-50%, 0); }
  72%       { opacity: 1; transform: translate(-50%, 0); }
  78%, 100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* ============================================================
   STEP 04 — Post a Shift demo
   Cursor taps a slot, slot becomes selected, SMS preview slides in
   ============================================================ */
.post-demo {
  --loop: 11s;
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(17,24,39,.13);
  overflow: hidden;
  border: 1px solid var(--line);
}
.post-demo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-alt);
}
.post-demo-head svg { width: 18px; height: 18px; color: var(--primary); }
.post-demo-head h5 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.post-demo-body { padding: 16px 18px 20px; }
.post-demo-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted-2);
  margin: 12px 0 6px;
}
.post-demo-label:first-child { margin-top: 0; }
.post-demo-date {
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.post-demo-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.post-demo-slot {
  text-align: center;
  padding: 10px 6px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--surface-alt);
  position: relative;
  transition: transform .15s ease;
}
.post-demo-slot strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.post-demo-slot span {
  font-size: 10px;
  color: var(--muted-2);
  display: block;
  letter-spacing: .2px;
}
.post-demo-slot--day strong   { color: #1E40AF; }
.post-demo-slot--arvo strong  { color: #92400E; }
.post-demo-slot--night strong { color: #312E81; }
.post-demo-slot[data-slot="2"] {
  animation: post-slot-select var(--loop) infinite ease-out;
}
@keyframes post-slot-select {
  0%, 30%  { background: var(--surface-alt); border-color: transparent; transform: scale(1); }
  35%      { background: #FEF3C7; border-color: #F59E0B; transform: scale(.96); }
  40%, 95% { background: #FEF3C7; border-color: #F59E0B; transform: scale(1); }
  100%     { background: var(--surface-alt); border-color: transparent; transform: scale(1); }
}
.post-demo-role {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.post-demo-role svg { width: 14px; height: 14px; color: var(--muted-2); }
.post-demo-sms {
  margin-top: 14px;
  border: 1px solid var(--accent-pale);
  background: linear-gradient(180deg, #fff 0%, var(--accent-pale) 100%);
  border-radius: 12px;
  padding: 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: post-sms-in var(--loop) infinite ease-out;
}
@keyframes post-sms-in {
  0%, 40%   { opacity: 0; transform: translateY(8px); }
  46%, 95%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(8px); }
}
.post-demo-sms-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.post-demo-sms-head svg { width: 12px; height: 12px; }
.post-demo-sms-body {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
}
.post-demo-btn {
  margin-top: 14px;
  background: var(--primary);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(26,107,191,.25);
  animation: post-btn-press var(--loop) infinite ease-out;
}
@keyframes post-btn-press {
  0%, 90%   { transform: scale(1); box-shadow: 0 6px 16px rgba(26,107,191,.25); }
  93%       { transform: scale(.96); box-shadow: 0 3px 8px rgba(26,107,191,.18); }
  98%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(26,107,191,.25); }
}
.post-demo-cursor {
  position: absolute;
  width: 22px; height: 22px;
  color: var(--ink);
  filter: drop-shadow(0 2px 5px rgba(17,24,39,.3));
  pointer-events: none;
  top: 142px;
  left: 158px;
  opacity: 0;
  animation: post-cursor var(--loop) infinite cubic-bezier(.4,0,.2,1);
}
@keyframes post-cursor {
  0%        { opacity: 0; transform: translate(40px, 80px); }
  10%       { opacity: 1; transform: translate(40px, 80px); }
  28%       { opacity: 1; transform: translate(0, 0) scale(1); }
  32%       { opacity: 1; transform: translate(0, 2px) scale(.85); }
  37%, 88%  { opacity: 1; transform: translate(0, 0) scale(1); }
  92%       { opacity: 1; transform: translate(-30px, 60px) scale(.85); }
  98%, 100% { opacity: 0; transform: translate(-30px, 60px); }
}

/* ============================================================
   STEP 06 — Roster templates demo
   Active row gets a subtle highlight pulse, "Apply" button presses
   ============================================================ */
.tmpl-demo {
  --loop: 9s;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tmpl-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.tmpl-demo-head h5 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.tmpl-demo-head svg { width: 18px; height: 18px; color: var(--muted-2); }
.tmpl-demo-list { padding: 8px; }
.tmpl-demo-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  transition: background .2s ease;
}
.tmpl-demo-row--active {
  animation: tmpl-row-active var(--loop) infinite ease-out;
}
@keyframes tmpl-row-active {
  0%, 25%   { background: transparent; }
  30%, 70%  { background: var(--accent-pale); }
  75%, 100% { background: transparent; }
}
.tmpl-demo-icon { color: var(--primary); width: 18px; height: 18px; }
.tmpl-demo-info strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.tmpl-demo-info span {
  font-size: 11.5px;
  color: var(--muted-2);
}
.tmpl-demo-apply {
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}
.tmpl-demo-row--active .tmpl-demo-apply {
  animation: tmpl-apply-press var(--loop) infinite ease-out;
}
@keyframes tmpl-apply-press {
  0%, 35%  { transform: scale(1); background: var(--primary); }
  40%      { transform: scale(.92); background: var(--primary-dark); }
  44%, 70% { transform: scale(1); background: var(--success); }
  75%, 100% { transform: scale(1); background: var(--primary); }
}
.tmpl-demo-save {
  border-top: 1px solid var(--line-soft);
  padding: 14px 20px 16px;
}
.tmpl-demo-save-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.tmpl-demo-save-row {
  display: flex;
  gap: 8px;
}
.tmpl-demo-input {
  flex: 1;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
}
.tmpl-demo-save-btn {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
   STEP 07 — Staff phone with claim animation
   Shift card transitions: Open → button press → Claimed
   ============================================================ */
.phone-mockup--staff .phone-frame { transform: rotate(2deg); }
.phone-mockup--staff:hover .phone-frame { transform: rotate(0deg); }

.mock-shift--claim { --loop: 10s; position: relative; overflow: hidden; }
.mock-status--open {
  animation: mock-status-open var(--loop) infinite ease-out;
}
@keyframes mock-status-open {
  0%, 50%   { opacity: 1; }
  55%, 100% { opacity: 0; }
}
.mock-status--claimed {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: 0;
  animation: mock-status-claimed var(--loop) infinite ease-out;
}
@keyframes mock-status-claimed {
  0%, 52%   { opacity: 0; }
  58%, 96%  { opacity: 1; }
  100%      { opacity: 0; }
}
.mock-btn--claim {
  animation: mock-btn-claim var(--loop) infinite ease-out;
}
@keyframes mock-btn-claim {
  0%, 40%   { background: var(--primary); transform: scale(1); }
  45%       { background: var(--primary-dark); transform: scale(.92); }
  50%, 96%  { background: var(--success); transform: scale(1); pointer-events: none; }
  100%      { background: var(--primary); transform: scale(1); }
}
.mock-shift-tap {
  position: absolute;
  width: 80px; height: 80px;
  right: -20px;
  top: -20px;
  border-radius: 50%;
  background: rgba(26,107,191,.18);
  transform: scale(0);
  opacity: 0;
  animation: mock-tap var(--loop) infinite ease-out;
}
@keyframes mock-tap {
  0%, 38%  { transform: scale(0); opacity: 0; }
  40%      { transform: scale(.4); opacity: .8; }
  55%      { transform: scale(2); opacity: 0; }
  100%     { transform: scale(2); opacity: 0; }
}

/* ============================================================
   STEP 08 — Availability demo
   Rows appear one after the other, recurring row stays
   ============================================================ */
.avail-demo {
  --loop: 12s;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  padding: 18px 20px 22px;
}
.avail-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.avail-demo-head h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.avail-demo-add {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(26,107,191,.3);
}
.avail-demo-section {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted-2);
  margin: 14px 0 8px;
}
.avail-demo-section:first-of-type { margin-top: 0; }
/* Availability list is shown statically (the loop-and-fade row
   animation here was distracting and out of sync with the rest of
   the page). The same content still tells the story — recurring
   patterns and one-off unavailabilities — without motion. */
.avail-demo-row {
  --ar: 1;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.avail-demo-row:last-child { border-bottom: none; }
.avail-demo-date {
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 8px 0;
  text-align: center;
}
.avail-demo-date strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.avail-demo-date span {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.avail-demo-date--repeat {
  background: var(--accent-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avail-demo-date--repeat svg { width: 18px; height: 18px; color: var(--primary); }
.avail-demo-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.avail-demo-info strong {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.avail-demo-pill {
  display: inline-block;
  width: max-content;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #1E293B;
  color: #fff;
  letter-spacing: .4px;
}
.avail-demo-pill--day { background: #DBEAFE; color: #1E40AF; }
.avail-demo-row--repeat {
  background: linear-gradient(135deg, var(--accent-pale), transparent);
  border-radius: 8px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}

/* ============================================================
   STEP 09 — SMS demo
   iPhone-style notifications slide in stacked
   ============================================================ */
.sms-demo {
  --loop: 10s;
  display: flex;
  justify-content: center;
}
.sms-demo-screen {
  width: 100%;
  max-width: 340px;
  background:
    linear-gradient(180deg, rgba(26,107,191,.4), rgba(26,107,191,.05)),
    #1A6BBF;
  border-radius: 36px;
  padding: 56px 16px 36px;
  min-height: 460px;
  box-shadow: 0 24px 50px rgba(17,24,39,.2), inset 0 0 0 8px rgba(0,0,0,.08);
  position: relative;
}
.sms-demo-time {
  text-align: center;
  font-size: 56px;
  font-weight: 300;
  color: #fff;
  letter-spacing: -2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
  margin-bottom: 38px;
}
.sms-demo-banner {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(17,24,39,.08);
  opacity: 0;
  transform: translateY(-12px);
  animation: sms-banner-in var(--loop) infinite ease-out;
}
.sms-demo-banner--secondary {
  animation-delay: calc(var(--loop) * 0.15);
}
@keyframes sms-banner-in {
  0%, 4%    { opacity: 0; transform: translateY(-12px) scale(.92); }
  9%        { opacity: 1; transform: translateY(0) scale(1); }
  85%       { opacity: 1; transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(-12px) scale(.92); }
}
.sms-demo-banner-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sms-demo-banner-icon svg { width: 26px; height: 26px; }
.sms-demo-banner-icon--bell { background: var(--ink-2); }
.sms-demo-banner-icon--bell svg { color: #fff; }
.sms-demo-banner-body { min-width: 0; }
.sms-demo-banner-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.sms-demo-banner-row strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.sms-demo-banner-row span {
  font-size: 11px;
  color: var(--muted-2);
}
.sms-demo-banner-body p {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.35;
  margin: 0;
  overflow-wrap: break-word;
}

/* ============================================================
   STEP 10 — Payroll page demo
   Period nav, stat counter, per-staff list, total row
   ============================================================ */
.pay-demo {
  --loop: 10s;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pay-demo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.pay-demo-head svg { width: 18px; height: 18px; color: var(--muted); }
.pay-demo-head h5 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.pay-demo-period {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-alt);
}
.pay-demo-period > div {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pay-demo-period strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.pay-demo-period span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted-2);
}
/* Payroll preview is shown statically — the looping arrow pulse and
   count flicker added noise without communicating anything new. The
   numbers and breakdown convey the story on their own. */
.pay-demo-arrow {
  width: 28px; height: 28px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  color: var(--primary);
  border: 1px solid var(--line);
}
.pay-demo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 16px;
}
.pay-demo-stat {
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.pay-demo-stat--accent {
  background: var(--primary);
  color: #fff;
}
.pay-demo-stat--accent .pay-demo-stat-num,
.pay-demo-stat--accent span { color: #fff; }
.pay-demo-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
.pay-demo-stat span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: .5px;
  margin-top: 2px;
  text-transform: uppercase;
}
.pay-demo-list {
  padding: 4px 16px 16px;
}
.pay-demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pay-demo-row:last-child { border-bottom: none; }
.pay-demo-row > div:first-child strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.pay-demo-row > div:first-child span {
  font-size: 11.5px;
  color: var(--muted-2);
}
.pay-demo-amt {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pay-demo-amt strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.pay-demo-amt span {
  font-size: 11.5px;
  color: var(--muted-2);
}
.pay-demo-row--total {
  background: var(--accent-pale);
  margin: 4px -16px -16px;
  padding: 12px 16px;
  border-bottom: none;
  border-top: 1px solid var(--accent);
}
.pay-demo-row--total strong { color: var(--primary); }
.pay-demo-count {
  display: inline-block;
}

/* ============================================================
   RECAP / FINAL CTA
   ============================================================ */
.hiw-recap {
  padding: 90px 0;
  background: #fff;
  border-top: 1px solid var(--line-soft);
}
.hiw-recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 980px;
  margin: 0 auto;
}
.hiw-recap-col {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
}
.hiw-recap-col h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.hiw-recap-col h3 svg {
  width: 20px; height: 20px;
  color: var(--primary);
  background: var(--accent-pale);
  border-radius: 8px;
  padding: 4px;
  box-sizing: content-box;
}
.hiw-recap-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hiw-recap-col li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.hiw-recap-col li svg {
  width: 16px; height: 16px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 4px;
}

.hiw-final-cta {
  padding: 60px 0 100px;
  background: var(--surface-alt);
}
.hiw-final-cta .cta-card {
  text-align: center;
}
.hiw-final-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}

/* ============================================================
   Reduced motion — show end states without animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .onb-dot, .onb-line-fill, .onb-slide,
  .onb-typewrite, .onb-caret, .onb-chip--filled, .onb-success-tick,
  .brand-demo, .brand-swatch,
  .invite-demo-copy, .invite-demo-copy-i, .invite-demo-copy-i--ok,
  .invite-demo-copy-txt, .invite-demo-copy-txt--ok, .invite-demo-toast,
  .post-demo-slot[data-slot="2"], .post-demo-sms, .post-demo-btn, .post-demo-cursor,
  .tmpl-demo-row--active, .tmpl-demo-row--active .tmpl-demo-apply,
  .mock-status--open, .mock-status--claimed, .mock-btn--claim, .mock-shift-tap,
  .avail-demo-row,
  .sms-demo-banner, .sms-demo-banner--secondary,
  .pay-demo-arrow, .pay-demo-count {
    animation: none !important;
  }
  /* End-state visibility */
  .onb-slide { opacity: 1; transform: none; }
  .onb-slide:not(:last-child) { display: none; }
  .onb-chip--filled { opacity: 1; transform: none; }
  .invite-demo-toast { opacity: 0; }
  .post-demo-sms, .avail-demo-row, .sms-demo-banner { opacity: 1; transform: none; }
  .mock-status--claimed { opacity: 1; }
  .mock-status--open { opacity: 0; }
  .mock-btn--claim { background: var(--success); }
}

/* ============================================================
   Responsive — stack on tablet, simplify on mobile
   ============================================================ */
@media (max-width: 980px) {
  .hiw-step { padding: 70px 0; }
  .hiw-step-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .hiw-step--reverse .hiw-step-inner > .hiw-step-copy { order: 1; }
  .hiw-step--reverse .hiw-step-inner > .hiw-step-demo { order: 2; }
  .hiw-step-num { font-size: 52px; }
  .hiw-step-demo { min-height: auto; }
  .hiw-recap-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .hiw-hero { padding: 64px 20px 40px; }
  .hiw-hero h1 { font-size: 38px; letter-spacing: -1.4px; }
  .hiw-hero-sub { font-size: 16px; }

  .hiw-toc { top: 56px; }
  .hiw-toc-inner {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 16px;
  }
  .hiw-toc-label { display: none; }
  .hiw-toc-list a { font-size: 12px; padding: 6px 10px; }
  .hiw-toc-list a span { width: 16px; height: 16px; font-size: 9px; }

  .hiw-step { padding: 56px 0; }
  .hiw-step-num { font-size: 44px; }
  .hiw-step-copy h2 { font-size: 26px; letter-spacing: -1px; }
  .hiw-step-lede { font-size: 15.5px; }
  .hiw-step-bullets li { font-size: 14px; }

  .onb-demo, .post-demo, .tmpl-demo, .avail-demo, .pay-demo,
  .invite-demo, .brand-demo { max-width: 100%; }
  .sms-demo-screen { max-width: 280px; padding-top: 44px; min-height: 380px; }
  .sms-demo-time { font-size: 44px; margin-bottom: 26px; }

  .hiw-recap { padding: 64px 0; }
  .hiw-recap-col { padding: 22px; }

  .hiw-final-cta { padding: 40px 0 70px; }
  .hiw-final-cta-row .btn { width: 100%; justify-content: center; }
}