@font-face{font-family:'Geist';font-weight:400 800;font-style:normal;font-display:swap;src:url('../fonts/geist.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-weight:400 600;font-style:normal;font-display:swap;src:url('../fonts/geistmono.woff2') format('woff2');}

:root{
  /* dark is the default/fallback — used whenever the system has no
     detectable preference, in addition to whenever it explicitly prefers
     dark. Only an explicit light system preference (or the manual toggle)
     switches this. */
  --bg:#09090B; --bg-raised:#131316; --bg-sunken:#0E0E10; --border:#232326; --border-strong:#333336;
  --text:#F5F5F4; --text-muted:#98989E; --text-faint:#6B6B70;
  --accent-fill:#C9FE0C; --accent-ink:#0A1400; --accent-text:#C9FE0C; --accent-soft:rgba(201,254,12,.08);
  --font-display:'Geist',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Geist',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --radius-s:3px; --radius-m:6px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F5F5F4; --bg-raised:#FFFFFF; --bg-sunken:#EDEDEA; --border:#E1E1DC; --border-strong:#CACAC4;
    --text:#0A0A0C; --text-muted:#5E5E66; --text-faint:#8A8A90;
    --accent-fill:#C9FE0C; --accent-ink:#0A1400; --accent-text:#4C7A00; --accent-soft:rgba(76,122,0,.09);
    --shadow-card: 0 1px 2px rgba(10,10,12,.04), 0 8px 24px -12px rgba(10,10,12,.08);
  }
}
:root[data-theme="dark"]{
  --bg:#09090B; --bg-raised:#131316; --bg-sunken:#0E0E10; --border:#232326; --border-strong:#333336;
  --text:#F5F5F4; --text-muted:#98989E; --text-faint:#6B6B70;
  --accent-fill:#C9FE0C; --accent-ink:#0A1400; --accent-text:#C9FE0C; --accent-soft:rgba(201,254,12,.08);
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --bg:#F5F5F4; --bg-raised:#FFFFFF; --bg-sunken:#EDEDEA; --border:#E1E1DC; --border-strong:#CACAC4;
  --text:#0A0A0C; --text-muted:#5E5E66; --text-faint:#8A8A90;
  --accent-fill:#C9FE0C; --accent-ink:#0A1400; --accent-text:#4C7A00; --accent-soft:rgba(76,122,0,.09);
  --shadow-card: 0 1px 2px rgba(10,10,12,.04), 0 8px 24px -12px rgba(10,10,12,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:16.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; text-wrap:balance; color:var(--text)}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent-text); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}

.mono{font-family:var(--font-mono); letter-spacing:.01em}
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); display:flex; align-items:center; gap:.55em; margin-bottom:1.1em;
}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--accent-fill);flex:none}
.wrap{max-width:1440px; margin:0 auto; padding:0 clamp(20px,4vw,48px)}


/* ---- site nav ---- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between; padding:22px clamp(20px,4vw,48px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:500; letter-spacing:-.035em; font-size:1.2rem}
.brand svg{width:26px;height:26px;flex:none}
.nav-links{display:flex; align-items:center; gap:34px; font-size:.92rem; color:var(--text-muted)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--text)}

.nav-drop{position:relative}
.nav-drop-trigger{display:flex; align-items:center; gap:6px; background:none; border:none; padding:0; font:inherit; color:var(--text-muted)}
.nav-drop-trigger:hover{color:var(--text)}
.nav-drop-trigger svg{width:13px; height:13px; transition:transform .15s ease}
/* .nav-drop-panel is the hover HIT AREA — it sits flush against the trigger
   (top:100%, no gap) so the mouse never crosses dead space and loses :hover
   mid-move. The visual gap/shadow/border live on .nav-drop-panel-inner,
   which is free to animate independently without affecting hit-testing. */
.nav-drop-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:280px; padding-top:14px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease; z-index:60;
}
.nav-drop-panel-inner{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-m);
  box-shadow:var(--shadow-card); padding:7px; display:flex; flex-direction:column; gap:1px;
  transform:translateY(4px); transition:transform .15s ease;
}
.nav-drop-panel a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:5px; font-size:.86rem; color:var(--text); text-decoration:none}
.nav-drop-panel a:hover{background:var(--bg-sunken)}
.nav-drop-panel .tag{font-family:var(--font-mono); font-size:.68rem; color:var(--text-faint); flex:none}
.nav-drop:hover .nav-drop-panel, .nav-drop.open .nav-drop-panel{opacity:1; visibility:visible; pointer-events:auto}
.nav-drop:hover .nav-drop-panel-inner, .nav-drop.open .nav-drop-panel-inner{transform:translateY(0)}
.nav-drop:hover .nav-drop-trigger svg, .nav-drop.open .nav-drop-trigger svg{transform:rotate(180deg)}
.nav-right{display:flex; align-items:center; gap:16px}
.nav-cta-wrap{display:flex}
.theme-toggle{display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:none; border:none; padding:0; color:var(--text-muted); flex:none; cursor:pointer}
.theme-toggle:hover{color:var(--text)}
.theme-toggle svg{width:19px; height:19px}
.theme-toggle .icon-moon{display:none}
.theme-toggle.is-light .icon-sun{display:none}
.theme-toggle.is-light .icon-moon{display:block}
.nav-burger{display:none; align-items:center; justify-content:center; width:36px; height:36px; background:none; border:none; padding:0; color:var(--text); flex:none; cursor:pointer}
.nav-burger svg{width:22px; height:22px}
.nav-burger .icon-close{display:none}
.nav-burger.open .icon-menu{display:none}
.nav-burger.open .icon-close{display:block}
@media (min-width:820px){.nav-links{display:flex}}
@media (max-width:819px){.nav-links{display:none} .nav-burger{display:flex}}
/* Below ~400px the brand + theme toggle + "Book a call" + burger no longer fit
   on one row, and the burger was the thing pushed off-screen — which locks the
   visitor out of the menu entirely on a 320/360px phone. The nav CTA is the
   safe thing to drop: the hero has a primary CTA, and the mobile menu carries
   its own "Book a call" item so the conversion path survives. */
@media (max-width:479px){.nav-cta-wrap{display:none}}
@media (max-width:379px){
  .brand{font-size:1.06rem; gap:8px}
  .brand svg{width:22px; height:22px}
  .site-nav{padding:18px 16px}
  .nav-right{gap:10px}
}

.mobile-nav{
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden; background:var(--bg-raised); border-bottom:0 solid var(--border);
  transition:max-height .25s ease;
}
.mobile-nav.open{max-height:600px; border-bottom-width:1px}
.mobile-nav a{
  display:block; padding:14px clamp(20px,5vw,56px); text-decoration:none; color:var(--text);
  border-top:1px solid var(--border); font-size:.95rem;
}
.mobile-nav a:first-child{border-top:none}
.mobile-nav a.mobile-nav-sub{padding-left:calc(clamp(20px,5vw,56px) + 14px); font-size:.9rem; color:var(--text-muted)}
.mobile-nav .mobile-nav-label{
  padding:14px clamp(20px,5vw,56px) 2px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
}
.mobile-nav .mobile-nav-label + a{border-top:none}
.mobile-nav a.mobile-nav-cta{color:var(--accent-text); font-weight:600}
@media (min-width:820px){.mobile-nav{display:none}}

.btn{
  display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:600; padding:12px 22px;
  border-radius:var(--radius-s); border:1px solid transparent; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-fill); color:var(--accent-ink)}
.btn-primary:hover{opacity:.88}
.btn-ghost{border-color:var(--border-strong); color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn-sm{padding:9px 16px; font-size:.82rem}

/* ---- ruler / tick divider ---- */
.tick-rule{
  height:26px; position:relative; margin:0 clamp(20px,5vw,56px);
  background-image:repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 40px);
  background-position:left center; background-size:100% 10px; background-repeat:no-repeat;
}

/* ---- page sections ---- */
.page{display:none}
.page.active{display:block}

section{padding:clamp(52px,7vw,88px) 0}
.section-tight{padding:clamp(36px,5vw,60px) 0}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap}

/* hero */
.hero{padding-top:clamp(28px,3.5vw,48px); padding-bottom:clamp(24px,3.5vw,44px)}
.hero h1{font-size:clamp(2.3rem,3.2vw + 1.1rem,4.1rem); line-height:1.05}
.hero .lede{font-size:1.12rem; color:var(--text-muted); max-width:50ch; margin:22px 0 30px}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap}
.hero-trust{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:16px; font-size:.82rem; color:var(--text-muted)}
.hero-trust span{display:flex; align-items:center; gap:6px}
.hero-trust svg{width:14px; height:14px; flex:none; color:var(--accent-text)}
.cal-trust{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 20px; margin:0 0 22px; font-size:.85rem; color:var(--text-muted); text-align:center}
.cal-trust span{display:flex; align-items:center; gap:7px}
.cal-trust svg{width:15px; height:15px; flex:none; color:var(--accent-text)}

/* hero: copy + integrated clock, sized to sit within one screen.
   The copy column is capped near its own text measure so the headline keeps a
   readable line length instead of absorbing all leftover width — a plain 1fr
   column left ~300px of dead space inside itself, which read as a gap.
   The visual column then takes the remainder out to the content edge and
   centres the dial in it: with an `auto` column the pair huddled left and the
   clock floated mid-page with ~300px trailing behind it, which read as the
   clock sitting in the middle of nothing. Filling the row restores the two
   column band and keeps the headline on the same left edge as the nav, the
   pipeline below it and every section down the page.
   minmax(380px,...) on the visual track, not 1fr: between 980 and ~1080px the
   remainder falls under the dial's own 380px and the stage would overflow the
   wrap. Below that floor the copy column yields instead. */
.hero-grid{display:grid; grid-template-columns:minmax(0,620px) minmax(380px,1fr);
  gap:clamp(24px,3vw,56px); align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}

/* "between the ticks" hero centrepiece — the clock isn't a boxed widget, it's
   the atmosphere of the hero: a borderless dial floating on an accent glow, a
   hand sweeping a shrinking "time to reply" window, and a 3-beat story that
   crossfades in sync on one shared 9s loop. Replay re-triggers it on demand. */
.hero-visual{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; min-width:0}
@media (max-width:980px){.hero-visual{margin-top:8px}}
.tick-stage{position:relative; width:min(380px,78vw); aspect-ratio:1; display:flex; align-items:center; justify-content:center}
.tick-glow{position:absolute; inset:-8%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 46%, var(--accent-soft) 0%, rgba(201,254,12,.05) 34%, transparent 66%);
  filter:blur(6px); animation:tickGlow 9s ease-in-out infinite}
@keyframes tickGlow{0%,100%{opacity:.55} 60%,72%{opacity:1}}
.tick-dial{position:relative; z-index:1; width:78%; height:78%; border-radius:50%;
  border:1px solid var(--border); background:
    radial-gradient(circle at 50% 42%, var(--bg-raised) 0%, var(--bg) 78%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 60px -30px rgba(0,0,0,.9)}
.tick-dial i{position:absolute; top:50%; left:50%; width:2px; height:50%; transform:translate(-50%,-100%) rotate(calc(var(--i) * 30deg)); transform-origin:50% 100%}
.tick-dial i::before{content:""; position:absolute; top:7%; left:0; width:2px; height:8px; background:var(--border-strong); border-radius:1px}
.tick-dial i.h12::before{background:var(--accent-fill); height:12px; width:3px; left:-.5px; box-shadow:0 0 10px var(--accent-fill)}
.tick-sweep{position:absolute; inset:11%; border-radius:50%; z-index:0;
  background:conic-gradient(from -90deg, var(--accent-soft) 0deg, transparent 62deg);
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 55%); mask:radial-gradient(circle, transparent 54%, #000 55%);
  animation:tickSweepArc 9s linear infinite}
@keyframes tickSweepArc{to{transform:rotate(360deg)}}
.tick-hand{position:absolute; top:50%; left:50%; width:3px; height:38%; background:var(--accent-fill); border-radius:2px; transform:translate(-50%,-100%) rotate(0deg); transform-origin:50% 100%; box-shadow:0 0 12px var(--accent-fill); animation:tickSweep 9s steps(12) infinite}
.tick-hub{position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--accent-fill); box-shadow:0 0 10px var(--accent-fill); z-index:2}
@keyframes tickSweep{to{transform:translate(-50%,-100%) rotate(360deg)}}
.tick-count{position:absolute; bottom:24%; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; line-height:1; z-index:1}
.tick-count b{font-family:var(--font-mono); font-size:1.55rem; font-weight:500; color:var(--text); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.tick-count span{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-top:6px}
.tick-story{position:relative; width:100%; min-height:22px; z-index:1}
.tick-line{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-mono); font-size:.9rem; color:var(--text); opacity:0; white-space:nowrap}
.tick-line .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-fill); flex:none; box-shadow:0 0 8px var(--accent-fill)}
.tick-line--1{animation:tickLine1 9s ease infinite}
.tick-line--2{animation:tickLine2 9s ease infinite}
.tick-line--3{animation:tickLine3 9s ease infinite}
@keyframes tickLine1{0%,20%{opacity:1} 27%,100%{opacity:0}}
@keyframes tickLine2{0%,25%{opacity:0} 32%,54%{opacity:1} 61%,100%{opacity:0}}
@keyframes tickLine3{0%,64%{opacity:0} 71%,96%{opacity:1} 100%{opacity:0}}
.tick-philosophy{font-size:.86rem; color:var(--text-muted); max-width:40ch; line-height:1.65}
.tick-philosophy em{color:var(--text); font-style:normal; font-weight:600}
.tick-replay{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.76rem; color:var(--text-faint); background:none; border:none; padding:0 0 0 4px; cursor:pointer; transition:color .15s ease}
.tick-replay svg{width:12px; height:12px}
.tick-replay:hover{color:var(--accent-text)}
@media (prefers-reduced-motion: reduce){
  .tick-hand,.tick-sweep,.tick-glow,.tick-count b{animation:none}
  .tick-line{animation:none; opacity:0}
  .tick-line--3{opacity:1}
}

/* automation flow diagram */
.flow{margin-top:clamp(44px,6vw,68px)}
.flow-caption{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.flow-hint{display:none; color:var(--text-faint); font-weight:400; letter-spacing:.04em; text-transform:none}

/* desktop (default): a fluid row that always fits its container — cards
   shrink together as the viewport narrows, so there is never a scrollbar */
.flow-outer{overflow:visible}
.flow-row{position:relative; display:flex; align-items:center; width:100%; padding-bottom:15px}
.flow-card{flex:1 1 0; min-width:0; width:auto}

.flow-stage{display:flex; flex-direction:column; align-items:center; flex:1 1 0; min-width:0}
.flow-pin{width:1px; height:15px; background:var(--border-strong)}

.flow-arrow{flex:none; width:30px; display:flex; align-items:center; justify-content:center; margin-bottom:15px; color:var(--text-faint)}
.flow-arrow svg{width:16px; height:16px}

.flow-rail{position:absolute; left:0; right:0; bottom:0; height:1px; z-index:0;
  background-image:repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 9px);}
.flow-rail-glow{position:absolute; left:0; right:0; bottom:-4px; height:9px; z-index:0; overflow:hidden; pointer-events:none}
.flow-rail-glow::after{content:"";position:absolute; top:0; left:-18%; width:18%; height:100%;
  background:linear-gradient(to right, transparent, var(--accent-fill), transparent);
  filter:blur(3px); opacity:.85; animation:flowscan 4.2s ease-in-out infinite;}
@keyframes flowscan{0%{left:-18%} 100%{left:100%}}
@media (prefers-reduced-motion: reduce){.flow-rail-glow::after{animation:none; left:40%}}

/* below ~860px, cards would get too narrow to read — switch to a proper
   mobile slider: horizontal scroll-snap, hidden native scrollbar, faded
   edges hinting there's more, small swipe cue. Desktop never scrolls. */
@media (max-width:860px){
  .flow-hint{display:inline-flex; align-items:center; gap:5px}
  .flow-hint svg{width:12px; height:12px}
  .flow-outer{
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, black 22px, black calc(100% - 22px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, black 22px, black calc(100% - 22px), transparent 100%);
    margin:0 -20px; padding:0 20px;
  }
  .flow-outer::-webkit-scrollbar{display:none; height:0}
  .flow-row{width:max-content; min-width:100%; padding-bottom:6px; scroll-snap-type:x mandatory}
  .flow-stage{flex:none; width:208px; scroll-snap-align:center; scroll-snap-stop:always}
  .flow-card{flex:none; width:208px}
  .flow-arrow{scroll-snap-align:none}
  .flow-pin, .flow-rail, .flow-rail-glow{display:none}
  .flow-dots{display:flex}
}
.flow-dots{display:none; justify-content:center; align-items:center; gap:7px; margin-top:14px}
.flow-dots button{width:6px; height:6px; padding:0; border:none; border-radius:50%; background:var(--border-strong); transition:width .25s ease, background .25s ease}
.flow-dots button.active{width:18px; border-radius:3px; background:var(--accent-fill)}

.flow-card{position:relative; z-index:1; max-width:232px; min-height:236px; background:var(--bg-raised);
  border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-card);
  padding:16px 17px; display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  transition:transform .2s ease, border-color .2s ease;}
.flow-card:hover{transform:translateY(-3px); border-color:var(--border-strong)}
.fc-head{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint)}
.fc-head .dot{width:5px; height:5px; border-radius:50%; background:var(--accent-fill); box-shadow:0 0 0 3px var(--accent-soft)}
.fc-time{font-family:var(--font-mono); font-size:.66rem; color:var(--text-faint)}

/* client card */
.fc-lead{display:flex; align-items:center; gap:10px}
.fc-avatar{width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.72rem; font-weight:600; flex:none}
.fc-lead strong{display:block; font-size:.9rem; font-weight:600}
.fc-lead span{display:block; font-size:.74rem; color:var(--text-faint)}

/* agent card — small looping auto-chat, runs through to a booked appointment */
/* fixed-height window — the thread grows and old lines scroll off the top
   automatically, so the card itself never grows taller */
.fc-chat{height:168px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end}
.fc-chat-inner{display:flex; flex-direction:column; gap:5px}
.fc-wrap{max-height:0; overflow:hidden}
.fc-bubble-in, .fc-bubble{display:inline-block}
.fc-bubble-in{align-self:flex-start; max-width:92%; background:var(--bg-sunken); color:var(--text);
  border:1px solid var(--border); border-radius:9px; border-bottom-left-radius:3px; padding:6px 10px;
  font-size:.72rem; line-height:1.3; margin:2px 0;}
.fc-bubble{align-self:flex-end; max-width:92%; background:var(--accent-fill); color:var(--accent-ink);
  border-radius:9px; border-bottom-right-radius:3px; padding:6px 10px; font-size:.72rem; font-weight:500; line-height:1.3; margin:2px 0;}
.fc-bubble.booked, .fc-bubble-in.booked{font-weight:600}
.fc-wrap.in{align-self:flex-start}
.fc-wrap.out{align-self:flex-end}
.fc-typing{display:flex; gap:4px; padding:6px 2px 2px}
.fc-typing span{width:5px; height:5px; border-radius:50%; background:var(--text-faint); animation:typingdot 1.3s infinite ease-in-out}
.fc-typing span:nth-child(2){animation-delay:.16s}
.fc-typing span:nth-child(3){animation-delay:.32s}
@keyframes typingdot{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-2px)}}

/* one shared 13s cycle — every line has its own reveal/collapse window on
   the SAME timeline (no animation-delay), so the whole thread always
   resets together instead of drifting after the first loop */
.fc-wrap.w1{animation:revMsg1 13s ease-in-out infinite}
.fc-wrap.t1{animation:revTyping1 13s ease-in-out infinite}
.fc-wrap.w2{animation:revMsg2 13s ease-in-out infinite}
.fc-wrap.w3{animation:revMsg3 13s ease-in-out infinite}
.fc-wrap.w4{animation:revMsg4 13s ease-in-out infinite}
.fc-wrap.t2{animation:revTyping2 13s ease-in-out infinite}
.fc-wrap.w5{animation:revMsg5 13s ease-in-out infinite}
.fc-wrap.w6{animation:revMsg6 13s ease-in-out infinite}
@keyframes revMsg1{0%,2%{max-height:0} 5%,88%{max-height:46px} 94%,100%{max-height:0}}
@keyframes revTyping1{0%,8%{max-height:0} 11%,15%{max-height:20px} 18%,100%{max-height:0}}
@keyframes revMsg2{0%,16%{max-height:0} 19%,88%{max-height:46px} 94%,100%{max-height:0}}
@keyframes revMsg3{0%,25%{max-height:0} 28%,88%{max-height:46px} 94%,100%{max-height:0}}
@keyframes revMsg4{0%,35%{max-height:0} 38%,88%{max-height:46px} 94%,100%{max-height:0}}
@keyframes revTyping2{0%,43%{max-height:0} 46%,50%{max-height:20px} 53%,100%{max-height:0}}
@keyframes revMsg5{0%,51%{max-height:0} 54%,88%{max-height:46px} 94%,100%{max-height:0}}
@keyframes revMsg6{0%,61%{max-height:0} 64%,88%{max-height:46px} 94%,100%{max-height:0}}
@media (prefers-reduced-motion: reduce){
  .fc-chat{height:auto; overflow:visible}
  .fc-wrap{max-height:none !important; animation:none !important}
  .fc-wrap.t1, .fc-wrap.t2{display:none}
}

/* automate card — one grid cell per service, appearing in turn */
.fc-services{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px}
.fc-svc{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:8px 9px; border-radius:5px;
  background:var(--bg-sunken); border:1px solid var(--border); opacity:0; animation:svcin .4s ease forwards}
.fc-svc svg{width:14px; height:14px; stroke:var(--accent-text); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.fc-svc span{font-size:.66rem; line-height:1.25; color:var(--text-muted)}
.fc-svc:nth-child(1){animation-delay:.5s}
.fc-svc:nth-child(2){animation-delay:1.05s}
.fc-svc:nth-child(3){animation-delay:1.6s}
.fc-svc:nth-child(4){animation-delay:2.15s}
@keyframes svcin{from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.fc-svc{opacity:1; animation:none}}

/* growth card */
.fc-bars{display:flex; align-items:flex-end; gap:5px; height:42px}
.fc-bars i{flex:1; background:var(--border-strong); border-radius:2px 2px 0 0; font-style:normal}
.fc-bars i:last-child{background:var(--accent-fill)}
.fc-metric{display:flex; align-items:baseline; gap:6px}
.fc-metric b{font-family:var(--font-mono); font-size:1.32rem; font-weight:600; color:var(--accent-text)}
.fc-metric span{font-size:.72rem; color:var(--text-faint)}

/* funnel card — tiny wireframe "page" mockup, used on the Funnel service pipeline */
.fc-page{border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--bg-sunken); flex:1}
.fc-page .bar{display:flex; gap:4px; padding:7px 8px; background:var(--bg-raised); border-bottom:1px solid var(--border)}
.fc-page .bar span{width:5px; height:5px; border-radius:50%; background:var(--border-strong)}
.fc-page .body{padding:16px 12px; display:flex; flex-direction:column; align-items:center; gap:8px}
.fc-page .line{height:5px; border-radius:2px; background:var(--border-strong); width:78%}
.fc-page .line.short{width:50%}
.fc-page .cta{margin-top:5px; background:var(--accent-fill); color:var(--accent-ink); font-size:.66rem; font-weight:600; padding:6px 16px; border-radius:4px}

/* reviews card — star rating row, used on the Review Collection pipeline */
.fc-stars{display:flex; gap:3px}
.fc-stars svg{width:16px; height:16px}
.fc-stars svg.on{fill:var(--accent-fill)}
.fc-stars svg.off{fill:var(--border-strong)}
.fc-stars svg.starin{opacity:0; animation:svcin .4s ease forwards}

/* stat strip */
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; margin-top:clamp(48px,7vw,88px)}
.stat{padding:26px 28px; border-left:1px solid var(--border)}
.stat:first-child{border-left:none}
.stat .num{font-family:var(--font-mono); font-size:2rem; font-weight:600; color:var(--accent-text); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:10px}
.stat .num .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-soft)}
.stat .label{font-size:.85rem; color:var(--text-muted); margin-top:6px}
@media (max-width:700px){.stat-strip{grid-template-columns:1fr}.stat{border-left:none; border-top:1px solid var(--border)}.stat:first-child{border-top:none}}

/* service cards */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden}
.svc-card{background:var(--bg-raised); padding:30px 26px; display:flex; flex-direction:column; gap:16px; text-decoration:none; color:inherit; transition:background .15s ease}
.svc-card:hover{background:var(--bg-sunken)}
.svc-card .tag{font-family:var(--font-mono); font-size:.78rem; color:var(--text-faint)}
.svc-card h3{font-size:1.12rem; line-height:1.25}
.svc-card p{color:var(--text-muted); font-size:.92rem; flex:1}
.svc-card .go{font-family:var(--font-mono); font-size:.78rem; color:var(--accent-text); display:flex; align-items:center; gap:6px}
@media (max-width:940px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}
.grid-note{margin-top:22px; font-size:.88rem; color:var(--text-faint); font-family:var(--font-mono)}

/* tick pins — the clock-tick motif from the pipeline, reusable under any
   grid of cards: one pin per column dropping onto a shared rail (set the
   column count with --cols). Hidden once the grid above collapses. */
.pin-row{--cols:4; display:grid; grid-template-columns:repeat(var(--cols),1fr); position:relative; height:15px}
.pin-row i{justify-self:center; width:1px; height:100%; background:var(--border-strong)}
.pin-row::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent)}
@media (max-width:940px){.pin-row{display:none}}

/* how it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:36px}
.step-icon{width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); margin-bottom:18px}
.step-icon svg{width:18px; height:18px}
.step .idx{font-family:var(--font-mono); font-size:.85rem; color:var(--text-faint); border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:16px}
.step h3{font-size:1.15rem; margin-bottom:8px}
.step p{color:var(--text-muted); font-size:.94rem}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* chat mock */
.chat-panel{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-card); padding:28px; max-width:440px}
.chat-panel .chead{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); margin-bottom:18px; text-transform:uppercase; letter-spacing:.08em}
.chat-panel .chead .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-fill)}
.bubble{max-width:82%; padding:11px 15px; border-radius:12px; font-size:.94rem; margin-bottom:10px; line-height:1.4}
.bubble.in{background:var(--bg-sunken); border:1px solid var(--border); border-bottom-left-radius:3px}
.bubble.out{background:var(--accent-fill); color:var(--accent-ink); margin-left:auto; border-bottom-right-radius:3px; font-weight:500}
.bubble.in + .bubble.in, .bubble.out + .bubble.out{margin-top:-2px}
.chat-cap{font-size:.88rem; color:var(--text-muted); margin-top:20px}

/* split layout */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.split.rev .col-a{order:2}

/* trust strip */
.chips{display:flex; gap:12px; flex-wrap:wrap}
.chip{border:1px solid var(--border); border-radius:100px; padding:9px 18px; font-size:.86rem; color:var(--text-muted)}

/* cta band */
.cta-band{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-sunken)}
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:52px clamp(20px,5vw,56px)}
.cta-band h2{font-size:clamp(1.6rem,2.6vw + .5rem,2.3rem)}

/* footer */
footer{padding:50px 0 60px}
.foot-row{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:32px}
.foot-links{display:flex; gap:28px; font-size:.9rem; color:var(--text-muted); flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--text)}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--text-faint); font-family:var(--font-mono)}

/* breadcrumb */
.crumb{font-family:var(--font-mono); font-size:.8rem; color:var(--text-faint); margin-bottom:20px}
.crumb a{text-decoration:none; color:var(--text-faint)}
.crumb a:hover{color:var(--accent-text)}

/* checklist */
.checklist{display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin-top:8px}
.checklist li{list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:.96rem; color:var(--text)}
.checklist svg{flex:none; margin-top:3px; width:16px; height:16px; color:var(--accent-text)}
@media (max-width:700px){.checklist{grid-template-columns:1fr}}

/* brand philosophy */
.philosophy{border-left:2px solid var(--accent-fill); padding:4px 0 4px 24px; margin:34px 0 0; max-width:38ch}
.philosophy .mono{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px}
.philosophy p{font-family:var(--font-display); font-weight:600; font-size:1.4rem; letter-spacing:-.01em; line-height:1.25; color:var(--text)}
.foot-philosophy{font-family:var(--font-mono); font-size:.78rem; color:var(--text-faint); margin-top:6px}

/* guarantee band (service pages) */
.guarantee{background:var(--bg-sunken); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.guarantee-inner{border-left:2px solid var(--accent-fill); padding:2px 0 2px 24px; max-width:62ch}
.guarantee h2{font-size:clamp(1.4rem,2vw + .6rem,2rem); line-height:1.2; margin-bottom:14px}
.guarantee .or{color:var(--accent-text)}
.guarantee .ps{font-family:var(--font-mono); font-size:.85rem; color:var(--text-muted); margin-top:14px}
.guarantee .ps b{color:var(--text); font-weight:600}
.guarantee .integ{font-size:.96rem; color:var(--text-muted); margin-top:10px}

/* principles */
.principles{display:flex; flex-direction:column}
.principle{display:grid; grid-template-columns:110px 1fr; gap:28px; padding:30px 0; border-top:1px solid var(--border)}
.principle:last-child{border-bottom:1px solid var(--border)}
.principle .ptag{font-family:var(--font-mono); font-size:.85rem; color:var(--accent-text); font-variant-numeric:tabular-nums}
.principle h3{font-size:1.2rem; margin-bottom:8px}
.principle p{color:var(--text-muted); font-size:.95rem; max-width:56ch}
@media (max-width:600px){.principle{grid-template-columns:1fr; gap:8px}}

/* contact */
.slots{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 34px}
.slot{font-family:var(--font-mono); font-size:.85rem; border:1px solid var(--border-strong); border-radius:var(--radius-s); padding:11px 16px; display:flex; align-items:center; gap:8px}
.slot .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-fill)}
.form-card{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-card); padding:clamp(24px,4vw,40px)}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{font-size:.82rem; color:var(--text-muted); font-family:var(--font-mono)}
.field input, .field textarea{
  background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius-s); padding:12px 14px;
  font-family:var(--font-body); font-size:.96rem; color:var(--text); resize:vertical;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent-text); outline-offset:1px; border-color:transparent}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.contact-form-msg{display:none; align-items:center; gap:8px; font-size:.88rem; margin-top:14px}
.contact-form-msg.show{display:flex}
.contact-form-msg.ok{color:var(--accent-text)}
.contact-form-msg.err{color:var(--text-muted)}
.contact-form-msg svg{width:16px; height:16px; flex:none}
.contact-direct{margin-top:30px; font-size:.9rem; color:var(--text-muted)}
.contact-direct .mono{color:var(--text)}

/* calendar embed */
.cal-section{border-top:1px solid var(--border)}
.cal-card{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-card); overflow:hidden}
.cal-card .cal-head{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--border); flex-wrap:wrap}
.cal-card .cal-head .chead-title{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint)}
.cal-card .cal-head .chead-title .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-fill)}
.ghl-embed{min-height:640px; display:flex; align-items:center; justify-content:center; background:
  repeating-linear-gradient(45deg, var(--bg-sunken) 0 12px, var(--bg-raised) 12px 24px);
}
/* once a real GHL iframe is dropped in, drop the placeholder centering/
   stripe treatment entirely — the iframe's own (auto-resized) height should
   drive the box exactly, with no leftover gap showing the striped
   background above or below it */
.ghl-embed:has(iframe){min-height:0; display:block; background:none}
.ghl-embed iframe{display:block; width:100%; border:none; min-height:900px}
/* GHL vertically centers its widget content inside the iframe on a
   transparent background, so any floor taller than a given step's real
   content shows up as even space above and below it rather than clipping
   anything — that's the safer failure mode than the alternative. Sized to
   comfortably fit the tallest step (the "enter details" form after picking
   a time), so nothing ever needs to scroll to be reached; overflow:auto on
   the iframe stays only as a last-resort fallback in case a step is ever
   taller than this. Mobile does NOT need more room than desktop here —
   GHL's own widget reflows into a more compact single-column layout on
   narrow viewports rather than a taller one, so it shares the same floor. */
@media (min-width:641px) and (max-width:1023px){
  .ghl-embed iframe{min-height:1000px}
}
.ghl-embed .placeholder{max-width:420px; text-align:center; padding:32px; background:var(--bg-raised); border:1px dashed var(--border-strong); border-radius:var(--radius-m); margin:24px}
.ghl-embed .placeholder .mono{font-size:.78rem; color:var(--accent-text); display:block; margin-bottom:10px}
.ghl-embed .placeholder p{font-size:.88rem; color:var(--text-muted); line-height:1.55}
.ghl-embed .placeholder code{font-family:var(--font-mono); font-size:.78rem; background:var(--bg-sunken); padding:2px 6px; border-radius:3px}

/* client testimonial / demo video slot on each service page */
.video-card{border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-card); overflow:hidden; background:var(--bg-raised)}
.video-embed{min-height:0; aspect-ratio:16/9}
.video-embed .play-btn{width:60px; height:60px; border-radius:50%; background:var(--accent-fill); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px -8px rgba(0,0,0,.4); flex:none; margin:0}
.video-embed .play-btn svg{width:20px; height:20px; fill:var(--accent-ink); margin-left:3px}
.video-hint{margin-top:16px; font-size:.85rem; color:var(--text-faint); max-width:56ch}

.related-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; margin-top:20px}
@media (max-width:820px){.related-strip{grid-template-columns:1fr}}
.related-card{background:var(--bg-raised); padding:22px; text-decoration:none; color:inherit}
.related-card .tag{font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint)}
.related-card h4{font-size:1rem; margin:6px 0 4px}
.related-card span.go{font-family:var(--font-mono); font-size:.75rem; color:var(--accent-text)}

/* ---- live demo page ---- */
/* two-column stage: the phone (the experience) + the behind-the-scenes
   panel (the proof). Phone first on mobile. */
.demo-grid{display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start}
@media (max-width:920px){.demo-grid{grid-template-columns:1fr}}

/* phone-style SMS frame */
.demo-phone{background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:22px; box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; height:640px; max-height:76vh}
.dm-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--bg-sunken); flex:none}
.dm-head .dm-avatar{width:34px; height:34px; border-radius:50%; background:var(--accent-fill); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex:none}
.dm-head .dm-who{line-height:1.25; min-width:0}
.dm-head .dm-who b{display:block; font-size:.92rem; color:var(--text)}
.dm-head .dm-who span{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.68rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em}
.dm-head .dm-who span i{width:6px; height:6px; border-radius:50%; background:var(--accent-fill); flex:none; box-shadow:0 0 6px var(--accent-fill)}
.dm-msgs{flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:4px; scroll-behavior:smooth}
.dm-row{display:flex; flex-direction:column; max-width:82%}
.dm-row.in{align-self:flex-start; align-items:flex-start}
.dm-row.out{align-self:flex-end; align-items:flex-end}
.dm-bubble{padding:9px 13px; border-radius:14px; font-size:.9rem; line-height:1.45; overflow-wrap:break-word; white-space:pre-line}
.dm-row.in .dm-bubble{background:var(--bg-sunken); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px}
.dm-row.out .dm-bubble{background:var(--accent-fill); color:var(--accent-ink); font-weight:500; border-bottom-right-radius:4px}
.dm-row .dm-meta{font-family:var(--font-mono); font-size:.64rem; color:var(--text-faint); margin:4px 4px 8px}
.dm-row.booked-card .dm-bubble{background:var(--bg-sunken); border:1px solid var(--accent-fill); color:var(--text); box-shadow:0 0 20px -8px var(--accent-fill)}
.dm-typing{display:inline-flex; gap:4px; padding:11px 14px; background:var(--bg-sunken); border:1px solid var(--border); border-radius:14px; border-bottom-left-radius:4px}
.dm-typing span{width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:dmBlink 1.2s ease infinite}
.dm-typing span:nth-child(2){animation-delay:.15s}
.dm-typing span:nth-child(3){animation-delay:.3s}
@keyframes dmBlink{0%,60%,100%{opacity:.25} 30%{opacity:1}}
.dm-chips{display:flex; gap:8px; padding:10px 14px 4px; flex-wrap:wrap; flex:none}
.dm-chips button{font-family:var(--font-body); font-size:.8rem; color:var(--text-muted); background:var(--bg-sunken); border:1px solid var(--border); border-radius:99px; padding:7px 13px; cursor:pointer; transition:color .15s ease, border-color .15s ease}
.dm-chips button:hover{color:var(--accent-text); border-color:var(--border-strong)}
.dm-inputrow{display:flex; gap:10px; padding:12px 14px 14px; flex:none}
.dm-inputrow input{flex:1; min-width:0; background:var(--bg-sunken); border:1px solid var(--border); border-radius:99px; padding:11px 16px; font-family:var(--font-body); font-size:.9rem; color:var(--text)}
.dm-inputrow input::placeholder{color:var(--text-faint)}
.dm-inputrow button{width:42px; height:42px; border-radius:50%; border:none; background:var(--accent-fill); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:transform .12s ease}
.dm-inputrow button:hover{transform:scale(1.06)}
.dm-inputrow button svg{width:17px; height:17px}
.dm-note{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--text-faint); margin-top:12px}

/* behind-the-scenes panel */
.demo-side{display:flex; flex-direction:column; gap:18px; position:sticky; top:90px}
@media (max-width:920px){.demo-side{position:static}}
.demo-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden}
.demo-stats .dstat{background:var(--bg-raised); padding:16px 18px}
.demo-stats .dstat b{display:block; font-family:var(--font-mono); font-size:1.25rem; font-weight:500; color:var(--accent-text); font-variant-numeric:tabular-nums}
.demo-stats .dstat span{display:block; margin-top:4px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint)}
.demo-log{background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius-m); padding:18px 20px; min-height:200px; max-height:320px; overflow-y:auto}
.demo-log .dlog-title{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; display:flex; align-items:center; gap:8px}
.demo-log .dlog-title i{width:6px;height:6px;border-radius:50%;background:var(--accent-fill)}
.demo-log .dlog-line{font-family:var(--font-mono); font-size:.76rem; line-height:1.5; color:var(--text-muted); padding:3px 0; border-left:2px solid var(--border); padding-left:12px; margin-bottom:6px}
.demo-log .dlog-line.hot{color:var(--accent-text); border-left-color:var(--accent-fill)}
.demo-log .dlog-line .t{color:var(--text-faint); margin-right:8px}

/* voice demo slot */
.voice-card{border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-card); background:var(--bg-raised); padding:clamp(28px,4vw,44px); display:flex; align-items:center; gap:clamp(20px,3vw,36px); flex-wrap:wrap}
.voice-card .vc-mic{width:64px; height:64px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); display:flex; align-items:center; justify-content:center; flex:none; position:relative}
.voice-card .vc-mic::after{content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--accent-soft); animation:vcPulse 2.4s ease infinite}
@keyframes vcPulse{0%{transform:scale(.9); opacity:0} 40%{opacity:1} 100%{transform:scale(1.25); opacity:0}}
.voice-card .vc-mic svg{width:26px; height:26px}
.voice-card .vc-copy{flex:1; min-width:240px}
.voice-card .vc-copy h3{font-size:1.2rem; margin-bottom:6px}
.voice-card .vc-copy p{color:var(--text-muted); font-size:.92rem; max-width:52ch}
.voice-card .vc-tag{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); border:1px solid var(--border-strong); border-radius:99px; padding:6px 14px; flex:none}
@media (prefers-reduced-motion: reduce){.voice-card .vc-mic::after{animation:none; opacity:0} .dm-typing span{animation:none; opacity:.6}}


/* ==========================================================================
   PHASE 2 — service devices
   The lime accent stays reserved for "the automation working". One extra
   token, --flag, carries negative sentiment (only used by the review sorter)
   so "what hurt" is legible at a glance without turning the palette noisy.
   Declared last on purpose: same cascade order as the tokens at the top.
   ========================================================================== */
:root{--flag:#F2A08A; --flag-soft:rgba(242,160,138,.12)}
@media (prefers-color-scheme: light){:root{--flag:#C2503A; --flag-soft:rgba(194,80,58,.10)}}
:root[data-theme="dark"]{--flag:#F2A08A; --flag-soft:rgba(242,160,138,.12)}
:root[data-theme="light"]{--flag:#C2503A; --flag-soft:rgba(194,80,58,.10)}

/* service-page hero: copy on the left, live device on the right. Unlike the
   home hero (auto-width clock) the device wants a real column it can fill. */
.hero-grid--device{grid-template-columns:minmax(0,1fr) minmax(0,520px); align-items:center}
@media (max-width:1040px){.hero-grid--device{grid-template-columns:1fr}}

/* shared device shell for all four service visuals */
.device{background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:16px;
  box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; min-width:0}
.device-strip{height:3px; background:var(--plat,var(--accent-fill)); flex:none}
.device-note{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--text-faint); margin-top:12px; line-height:1.6}
.device-note b{color:var(--text-muted); font-weight:500}

/* ---------- 1. chat assistant: one AI, every platform ---------- */
/* --plat is the only thing that changes between platforms: the strip, the
   customer's own bubbles, and the channel badge all read from it, so the
   assistant itself stays visibly the same product on all four. */
.chatx{--plat:var(--accent-fill); --plat-ink:var(--accent-ink); display:flex; flex-direction:column; gap:14px; min-width:0}
.chatx[data-plat="whatsapp"]{--plat:#25D366; --plat-ink:#04240F}
.chatx[data-plat="instagram"]{--plat:#E1306C; --plat-ink:#FFFFFF}
.chatx[data-plat="messenger"]{--plat:#0084FF; --plat-ink:#FFFFFF}
.chatx[data-plat="web"]{--plat:var(--accent-fill); --plat-ink:var(--accent-ink)}

.plat-switch{display:flex; gap:6px; flex-wrap:wrap}
.plat-switch button{display:inline-flex; align-items:center; gap:7px; background:var(--bg-raised);
  border:1px solid var(--border); border-radius:99px; padding:8px 14px; font-size:.82rem;
  color:var(--text-muted); transition:color .15s ease, border-color .15s ease, background .15s ease}
.plat-switch button svg{width:14px; height:14px; flex:none}
.plat-switch button:hover{color:var(--text); border-color:var(--border-strong)}
.plat-switch button[aria-selected="true"]{color:var(--text); border-color:var(--pc,var(--accent-fill)); background:var(--bg-sunken)}
.plat-switch button[aria-selected="true"] svg{color:var(--pc,var(--accent-text))}
.plat-switch button[data-plat="whatsapp"]{--pc:#25D366}
.plat-switch button[data-plat="instagram"]{--pc:#E1306C}
.plat-switch button[data-plat="messenger"]{--pc:#0084FF}
.plat-switch button[data-plat="web"]{--pc:var(--accent-fill)}

.chat-frame{height:var(--chat-h,520px); max-height:78vh}
.chat-top{display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--bg-sunken); flex:none}
.chat-top .ct-avatar{width:32px; height:32px; border-radius:50%; background:var(--plat); color:var(--plat-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; flex:none}
.chat-top .ct-who{min-width:0; line-height:1.3; flex:1}
.chat-top .ct-who b{display:block; font-size:.9rem}
.chat-top .ct-who span{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint)}
.chat-top .ct-who span i{width:6px; height:6px; border-radius:50%; background:var(--accent-fill); flex:none; box-shadow:0 0 6px var(--accent-fill)}
.chat-top .ct-chan{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--border);
  border-radius:99px; padding:5px 10px; flex:none}
.chat-top .ct-chan svg{width:12px; height:12px; color:var(--plat)}
@media (max-width:420px){.chat-top .ct-chan span{display:none}}

.chat-body{flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:3px}
.chat-body .dm-row.out .dm-bubble{background:var(--plat); color:var(--plat-ink)}
.chat-foot{flex:none}

/* RAG made visible: every AI answer can show the document it came from */
.src-chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.65rem;
  color:var(--accent-text); background:var(--accent-soft); border:1px solid var(--border);
  border-radius:99px; padding:4px 10px; margin:6px 0 8px; max-width:100%}
.src-chip svg{width:11px; height:11px; flex:none}
.src-chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* the "answers from your own documents" explainer */
.rag-panel{display:grid; grid-template-columns:minmax(0,240px) 34px minmax(0,1fr); gap:0; align-items:center}
@media (max-width:820px){.rag-panel{grid-template-columns:1fr; gap:18px} .rag-arrow{transform:rotate(90deg); justify-self:center}}
.rag-label{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; display:block}
.rag-docs{display:flex; flex-direction:column; gap:8px}
.rag-doc{display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--border);
  border-radius:var(--radius-m); background:var(--bg-raised); font-size:.84rem; color:var(--text-muted);
  transition:border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease}
.rag-doc svg{width:15px; height:15px; flex:none; color:var(--text-faint); transition:color .3s ease}
.rag-doc.is-cited{border-color:var(--accent-fill); color:var(--text); background:var(--accent-soft); transform:translateX(3px)}
.rag-doc.is-cited svg{color:var(--accent-text)}
.rag-arrow{display:flex; align-items:center; justify-content:center; color:var(--text-faint)}
.rag-arrow svg{width:18px; height:18px}
.rag-answer{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-m); padding:18px 20px; min-height:186px; display:flex; flex-direction:column; gap:10px}
.rag-q{align-self:flex-start; max-width:88%; background:var(--bg-sunken); border:1px solid var(--border);
  border-radius:13px; border-bottom-left-radius:4px; padding:9px 13px; font-size:.88rem}
.rag-a{align-self:flex-start; max-width:96%; font-size:.92rem; line-height:1.55; color:var(--text)}
.rag-a.is-typing::after{content:"▍"; color:var(--accent-text); animation:ragCaret .8s steps(2) infinite}
@keyframes ragCaret{50%{opacity:0}}

/* ---------- 2. voice agent: the call, made visible ---------- */
.vs-frame{--plat:var(--accent-fill)}
.vs-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--border); background:var(--bg-sunken); flex:none;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint)}
.vs-top .vs-num{display:flex; align-items:center; gap:8px; color:var(--text)}
.vs-top .vs-num i{width:6px; height:6px; border-radius:50%; background:var(--accent-fill); flex:none; box-shadow:0 0 6px var(--accent-fill)}
.vs-stage{padding:22px 20px 18px; display:flex; flex-direction:column; gap:16px; flex:none; border-bottom:1px solid var(--border)}
.vs-wave{display:flex; align-items:center; gap:3px; height:58px}
.vs-wave i{flex:1; min-width:2px; height:6%; border-radius:2px; background:var(--border-strong);
  transition:height .11s linear, background .3s ease}
.vs-wave[data-who="ai"] i{background:var(--accent-fill)}
.vs-wave[data-who="caller"] i{background:var(--text-faint)}
.vs-meters{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden}
.vs-meter{background:var(--bg-sunken); padding:12px 14px}
.vs-meter b{display:block; font-family:var(--font-mono); font-size:1.1rem; font-weight:500; color:var(--accent-text); font-variant-numeric:tabular-nums}
.vs-meter span{display:block; margin-top:3px; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint)}
.vs-script{flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; min-height:180px}
.vs-line{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:start; font-size:.9rem; line-height:1.5;
  opacity:0; transform:translateY(4px); animation:vsIn .28s ease forwards}
@keyframes vsIn{to{opacity:1; transform:translateY(0)}}
.vs-line .vs-who{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding-top:4px}
.vs-line.is-ai .vs-who{color:var(--accent-text)}
.vs-line .vs-said{color:var(--text-muted)}
.vs-line.is-ai .vs-said{color:var(--text)}
.vs-line .vs-tag{display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-family:var(--font-mono);
  font-size:.62rem; letter-spacing:.06em; color:var(--accent-text); background:var(--accent-soft);
  border:1px solid var(--border); border-radius:99px; padding:3px 9px}
.vs-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-top:1px solid var(--border); background:var(--bg-sunken); flex:none; flex-wrap:wrap}
.vs-btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent-fill); color:var(--accent-ink);
  border:none; border-radius:99px; padding:10px 18px; font-size:.86rem; font-weight:600}
.vs-btn:hover{opacity:.88}
.vs-btn[disabled]{opacity:.45; cursor:default}
.vs-btn svg{width:15px; height:15px}
.vs-hint{font-family:var(--font-mono); font-size:.66rem; color:var(--text-faint)}

/* ---------- 3. review collection: sorting what they said ---------- */
.rev-stage{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:900px){.rev-stage{grid-template-columns:1fr}}
.rev-inbox{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-m); padding:16px 18px; min-height:212px}
.rev-head{display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px}
.rev-head i{width:6px; height:6px; border-radius:50%; background:var(--accent-fill); flex:none}
.rev-card{opacity:0; transform:translateY(6px); animation:vsIn .3s ease forwards}
.rev-stars{display:flex; gap:2px; margin-bottom:8px}
.rev-stars svg{width:14px; height:14px}
.rev-stars svg.on{fill:var(--accent-fill)}
.rev-stars svg.off{fill:var(--border-strong)}
.rev-text{font-size:.9rem; line-height:1.55; color:var(--text-muted)}
.rev-text mark{background:var(--accent-soft); color:var(--text); border-radius:3px; padding:0 3px; box-shadow:inset 0 -1px 0 var(--accent-fill)}
.rev-text mark.bad{background:var(--flag-soft); box-shadow:inset 0 -1px 0 var(--flag)}
.rev-who{font-family:var(--font-mono); font-size:.68rem; color:var(--text-faint); margin-top:10px}
.rev-lanes{display:flex; flex-direction:column; gap:12px}
.rev-lane{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--bg-raised); padding:14px 16px}
.rev-lane h4{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.66rem;
  font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:11px}
.rev-lane h4 i{width:5px; height:11px; border-radius:1px; flex:none}
.rev-lane[data-kind="love"] h4 i{background:var(--accent-fill)}
.rev-lane[data-kind="pain"] h4 i{background:var(--flag)}
.rev-lane .rev-tags{display:flex; flex-wrap:wrap; gap:6px; min-height:26px}
.rev-tag{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; border-radius:99px; padding:5px 11px;
  border:1px solid var(--border); background:var(--bg-sunken); color:var(--text-muted);
  opacity:0; transform:translateX(-6px); animation:revTagIn .3s ease forwards}
@keyframes revTagIn{to{opacity:1; transform:translateX(0)}}
.rev-tag b{font-family:var(--font-mono); font-size:.68rem; font-weight:500; color:var(--text-faint)}
.rev-lane[data-kind="love"] .rev-tag{border-color:var(--accent-soft); color:var(--text)}
.rev-lane[data-kind="pain"] .rev-tag{border-color:var(--flag-soft); color:var(--text)}
.rev-out{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
@media (max-width:900px){.rev-out{grid-template-columns:1fr}}
.rev-draft, .rev-fix{border:1px solid var(--border); border-radius:var(--radius-m); padding:15px 17px; background:var(--bg-sunken); min-height:120px}
.rev-fix{border-left:2px solid var(--accent-fill)}
.rev-draft p{font-size:.88rem; line-height:1.6; color:var(--text)}
.rev-fix p{font-size:.88rem; line-height:1.6; color:var(--text)}
.rev-fix p b{color:var(--accent-text)}

/* ---------- 4. CRM: the whole system on one board ---------- */
.crm-board{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden}
@media (max-width:760px){.crm-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
.crm-col{background:var(--bg-raised); padding:13px 12px; min-height:154px; display:flex; flex-direction:column; gap:10px}
.crm-col > header{display:flex; align-items:center; justify-content:space-between; gap:6px; font-family:var(--font-mono);
  font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint)}
.crm-col.is-active{background:var(--bg-sunken)}
.crm-col.is-active > header{color:var(--accent-text)}
.crm-slot{flex:1; display:flex; flex-direction:column; gap:8px}
.crm-card{border:1px solid var(--accent-fill); border-radius:var(--radius-m); background:var(--bg-sunken);
  padding:10px 11px; box-shadow:0 0 22px -12px var(--accent-fill); animation:vsIn .3s ease forwards; opacity:0}
.crm-card .cc-top{display:flex; align-items:center; gap:8px}
.crm-card .cc-av{width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.62rem; font-weight:600; flex:none}
.crm-card .cc-name{font-size:.8rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-card .cc-meta{font-family:var(--font-mono); font-size:.62rem; color:var(--text-faint); margin-top:7px}
.crm-ghost{border:1px dashed var(--border); border-radius:var(--radius-m); padding:10px 11px; opacity:.5}
.crm-ghost .cc-line{height:5px; border-radius:2px; background:var(--border-strong); margin-bottom:6px}
.crm-ghost .cc-line.short{width:52%; margin-bottom:0}
.crm-feed{background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:16px 18px; min-height:168px; max-height:238px; overflow-y:auto}
.crm-feed .cf-title{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px}
.crm-feed .cf-title i{width:6px; height:6px; border-radius:50%; background:var(--accent-fill)}
.crm-line{display:grid; grid-template-columns:auto auto 1fr; gap:9px; align-items:baseline; font-family:var(--font-mono);
  font-size:.74rem; line-height:1.55; color:var(--text-muted); padding:3px 0; opacity:0; animation:vsIn .3s ease forwards}
.crm-line .t{color:var(--text-faint); font-variant-numeric:tabular-nums}
.crm-line svg{width:11px; height:11px; color:var(--accent-text); align-self:center}
.crm-line.is-done{color:var(--accent-text)}
.crm-apps{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px}
.crm-apps .ca-x{font-family:var(--font-mono); font-size:.74rem; color:var(--text-faint); text-decoration:line-through}
.crm-apps .ca-one{font-family:var(--font-mono); font-size:.74rem; color:var(--accent-text); border:1px solid var(--border-strong); border-radius:99px; padding:5px 12px}

@media (prefers-reduced-motion: reduce){
  .rev-card, .rev-tag, .crm-card, .crm-line, .vs-line{animation:none; opacity:1; transform:none}
  .rag-a.is-typing::after{animation:none}
}

/* the interactive demo phone shares the platform skin with the hero device */
.chatx .dm-row.out .dm-bubble{background:var(--plat); color:var(--plat-ink)}

/* channel chips on the home page — same pill as the "built for" chips, with
   room for a platform glyph */
.chip{display:inline-flex; align-items:center; gap:9px}
.chip svg{width:15px; height:15px; flex:none; color:var(--accent-text)}

/* 4-up step grid (review collection). A class, not an inline style, so the
   mobile collapse can still win. */
.steps--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.steps--4{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.steps--4{grid-template-columns:1fr}}

/* review sorter output panels */
.rev-draft-body, .rev-fix-body{font-size:.88rem; line-height:1.6; color:var(--text)}
.rev-fix-body b{color:var(--accent-text)}
.rev-draft-body:empty::before{content:"— waiting for the first review…"}
.rev-fix-body:empty::before{content:"— watching for patterns across reviews…"}
.rev-draft-body:empty::before, .rev-fix-body:empty::before{
  color:var(--text-faint); font-family:var(--font-mono); font-size:.76rem}

/* FAQ — native details/summary, no JS, and the markup search engines want */
.faq{display:flex; flex-direction:column}
.faq details{border-top:1px solid var(--border); padding:18px 2px}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--text); cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-mono); font-size:1.1rem; line-height:1;
  color:var(--accent-text); flex:none; transition:transform .15s ease}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--accent-text)}
.faq details p{color:var(--text-muted); font-size:.94rem; line-height:1.65; max-width:72ch; margin-top:11px}

/* integrations marquee — the tools travelling past on a measured rail.
   Framed in a panel that sits inside .wrap like every other component, so it
   lines up with the page grid instead of bleeding to the viewport edges, and
   closed with a tick strip: the clock motif, used here to say "these keep
   moving past, on your time". Hover pauses; reduced motion makes it a plain
   wrapped list. */
.tool-rail{position:relative; margin-top:22px; border:1px solid var(--border);
  border-radius:var(--radius-m); background:var(--bg-sunken); overflow:hidden}
.tool-rail-ticks{height:22px; border-top:1px solid var(--border);
  background-image:repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 34px);
  background-size:100% 9px; background-position:left center; background-repeat:no-repeat}
.logo-marquee{position:relative; overflow:hidden; padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)}
/* the source has ONE row; main.js clones it so the -50% loop lands seamlessly,
   and only then adds .is-looping. Without JS you get a static clipped row
   rather than a row that visibly jumps. */
.lm-track{display:flex; width:max-content}
.lm-track.is-looping{animation:lmScroll 46s linear infinite}
.logo-marquee:hover .lm-track, .logo-marquee:focus-within .lm-track{animation-play-state:paused}
@keyframes lmScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.lm-row{display:flex; align-items:center; gap:12px; padding-right:12px}
.lm-item{display:inline-flex; align-items:center; gap:10px; flex:none; white-space:nowrap;
  border:1px solid var(--border); border-radius:99px; padding:10px 18px;
  background:var(--bg-raised); font-size:.9rem; color:var(--text)}
.lm-item svg{width:15px; height:15px; flex:none; color:var(--accent-text)}
.lm-item span{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint)}
@media (prefers-reduced-motion: reduce){
  .logo-marquee{-webkit-mask-image:none; mask-image:none; padding:18px 16px}
  .lm-track{animation:none; width:auto; flex-wrap:wrap; gap:12px}
  .lm-row{flex-wrap:wrap; padding-right:0}
  .lm-row[aria-hidden="true"]{display:none}
}