@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}

/* ═══════════════════════════════════════════════════════════════
   IHERO Desk — tokens
   Navy is the logo's own colour. Signal orange is the one accent:
   notification dots, live indicators, large numerals, hairlines.
   It never carries small text on paper (use --signal-ink for that).
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --paper:#F3F4F7;
  --paper-2:#E8EAF0;
  --card:#FFFFFF;
  --ink:#111828;
  --ink-2:#3A4356;
  --muted:#5A6376;
  --line:#D6DAE3;
  --signal:#FF5A1F;
  --signal-ink:#B93A0B;
  --signal-large:#E6490F; /* 3.6:1 on paper: large numerals only */
  --night:#0B0F1A;
  --night-2:#151C2C;
  --night-line:#252E42;
  --on-night:#EEF0F5;
  --on-night-2:#A3ACBF;
  --bubble-in:#FFFFFF;
  --bubble-out:#DCE4F4;

  --display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Source Sans 3",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --step--1:clamp(.84rem,.8rem + .15vw,.92rem);
  --step-0:clamp(1.02rem,.97rem + .25vw,1.16rem);
  --step-1:clamp(1.2rem,1.08rem + .5vw,1.5rem);
  --step-2:clamp(1.5rem,1.25rem + 1.1vw,2.2rem);
  --step-3:clamp(2rem,1.5rem + 2.3vw,3.4rem);
  --step-4:clamp(2.55rem,1.6rem + 4.3vw,5.4rem);

  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  --header-h:68px;
  interpolate-size:allow-keywords;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:720;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:-.015em;line-height:1.15}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font:500 .74rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.lede{font-size:var(--step-1);line-height:1.45;color:var(--ink-2);max-width:36ch}
.sec{padding-block:clamp(3.75rem,7vw,6rem)}   /* owner flags gaps >~200px on a ~1890×818 screen */
.sec-head{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(36px,4.5vw,56px)}
/* Keyword underline on every section heading (same move as IHERO Media v3, in signal orange):
   a thick line under the key phrase that draws in as its heading arrives. Text stays ink/white;
   finished and static without JS or with reduced motion. */
h2 em{font-style:normal;background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 94%/100% .12em no-repeat;padding-bottom:.02em;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.reveal-on [data-reveal] h2 em,.reveal-on h2[data-reveal] em{transition:background-size 1s var(--ease) calc(var(--d,0s) + .35s)}
.reveal-on [data-reveal]:not(.in) h2 em,.reveal-on h2[data-reveal]:not(.in) em{background-size:0% .12em}
.sec-head p:not(.eyebrow){color:var(--ink-2);font-size:var(--step-1);line-height:1.45;max-width:52ch}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{--bg:var(--ink);--fg:var(--paper);position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px 0 18px;border-radius:999px;background:var(--bg);color:var(--fg);font:600 1.02rem/1 var(--body);text-decoration:none;border:0;cursor:pointer;isolation:isolate;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--signal);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(17,24,40,.55)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .dot{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 rgba(255,90,31,.6);animation:ping 2.4s var(--ease) infinite;transition:background .3s}
.btn:hover .dot{background:var(--paper)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--light{--bg:var(--paper);--fg:var(--ink)}
.btn--light:hover{box-shadow:0 12px 30px -12px rgba(0,0,0,.8)}
.btn--light::after{background:var(--signal)}
.btn--light:hover{color:var(--ink)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:44px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1.5px no-repeat;transition:background-size .4s var(--ease)}
.link:hover{background-size:100% 1.5px}
.link .arr{transition:transform .35s var(--ease)}
.link:hover .arr{transform:translateY(3px)}
.friction{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 .8rem/1.4 var(--mono);color:var(--muted)}
.friction span{display:inline-flex;align-items:center;gap:6px}
.friction span::before{content:"";width:12px;height:1.5px;background:currentColor;opacity:.5}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}70%,100%{box-shadow:0 0 0 10px rgba(255,90,31,0)}}

/* ── Header ──────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;height:var(--header-h);transition:background .35s,box-shadow .35s,transform .45s var(--ease)}
.hdr.scrolled{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.hide{transform:translateY(-100%)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand svg{width:26px;color:var(--ink);transition:transform .5s var(--ease)}
.brand:hover svg{transform:rotate(-6deg) scale(1.06)}
.brand b{display:block;font:700 1rem/1 var(--display);letter-spacing:.02em}
.brand small{display:block;font:400 .72rem/1.3 var(--mono);color:var(--muted);margin-top:3px;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:6px}
.nav a:not(.btn){font-weight:600;font-size:.95rem;text-decoration:none;padding:10px 12px;border-radius:999px;color:var(--ink-2);transition:color .2s,background .2s}
.nav a:not(.btn):hover{color:var(--ink);background:var(--paper-2)}
.nav .btn{min-height:44px;padding:0 18px 0 14px;font-size:.95rem;margin-left:8px}
@media (max-width:900px){.nav a:not(.btn){display:none}}
@media (max-width:420px){.brand small{display:none}.nav .btn span.lbl-long{display:none}}
@media (min-width:421px){.nav .btn span.lbl-short{display:none}}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;padding-block:clamp(28px,5vw,64px) clamp(48px,5vw,72px);overflow:clip}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--line) 1.1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 45%,#000 20%,transparent 75%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.hero-copy{display:grid;gap:24px;justify-items:start;container-type:inline-size}
/* Sized to its column so the three lines always stay three (widest line measured at 9.05em). */
.hero h1{font-size:clamp(2.1rem,10.5cqi,4.8rem);font-weight:760;letter-spacing:-.035em;line-height:.98}
/* On a phone the middle line measured wider than its column and broke in two; a touch smaller keeps three lines. */
@container (max-width:420px){.hero h1{font-size:max(1.9rem,10cqi)}}
@media (max-width:520px){.hero .eyebrow{flex-wrap:wrap;row-gap:5px}}
.hero h1 .ln{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .ln > span{display:inline-block;animation:rise 1s var(--ease) both}
.hero h1 .ln:nth-child(2) > span{animation-delay:.08s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.16s}
.hero h1 .ln:nth-child(4) > span{animation-delay:.24s}
/* "Every" gets the section-heading underline, drawn on load, then 23:47's */
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 92%/100% .1em no-repeat;animation:hero-ul .9s var(--ease) .6s both}
@keyframes hero-ul{from{background-size:0% .1em}}
/* The time is a button: each press moves the example to another hour (night, before opening,
   mid-job, after closing); the small badge shows which, and the digits roll. */
.hero h1 .t{font:inherit;font-family:var(--mono);font-weight:500;letter-spacing:-.06em;font-size:.86em;white-space:nowrap;margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.hero h1 .t-d{position:relative;display:inline-block}
.hero h1 .t-d::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;background:var(--signal);transform-origin:left;animation:draw .9s .95s var(--ease) both}
.hero h1 .t-h,.hero h1 .t-m{display:inline-block}
.hero h1 .t.roll .t-h,.hero h1 .t.roll .t-m{animation:t-roll .5s var(--ease) both}
.hero h1 .t.roll .t-m{animation-delay:.07s}
@keyframes t-roll{from{opacity:0;translate:0 .4em}}
.t-ic{display:inline-grid;place-items:center;width:.52em;height:.52em;margin-left:.16em;border-radius:50%;vertical-align:.34em;background:var(--card);color:var(--signal-ink);box-shadow:inset 0 0 0 1px var(--line),0 8px 16px -10px rgba(17,24,40,.5);transition:background .25s,color .25s,rotate .5s var(--ease),scale .3s var(--ease)}
.t-ic svg{grid-area:1/1;width:56%;height:56%;opacity:0;scale:.5;transition:opacity .3s,scale .4s var(--ease)}
.t[data-hour="0"] .t-ic svg:nth-child(1),.t[data-hour="1"] .t-ic svg:nth-child(2),.t[data-hour="2"] .t-ic svg:nth-child(3),.t[data-hour="3"] .t-ic svg:nth-child(4){opacity:1;scale:1}
.hero h1 .t:hover .t-ic{background:var(--ink);color:#fff;rotate:18deg;scale:1.08}
html:not(.js) .hero h1 .t{pointer-events:none}
html:not(.js) .t-ic{display:none}
.hero h1 .blink{animation:blink 1.1s steps(1) infinite}
.hero .lede{animation:fade .9s .35s var(--ease) both}
/* Three quick promises instead of one long sentence */
.hero-ticks{display:grid;gap:1px;justify-items:start;margin:-8px 0 -4px -6px}
.hero-ticks li{animation:fade .8s calc(.42s + var(--k) * .09s) var(--ease) both}
/* each promise is a button that jumps the phone to its act; the one playing sits in a white pill
   with a line that runs for as long as the act does */
.hero-ticks button{position:relative;display:flex;align-items:center;gap:11px;padding:6px 14px 6px 6px;border:0;border-radius:999px;background:transparent;font:500 var(--step-0)/1.3 var(--body);color:var(--ink);text-align:left;cursor:pointer;transition:background .3s,box-shadow .3s}
.hero-ticks button > span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);transition:scale .35s var(--ease)}
.hero-ticks svg{width:13px;height:13px}
.hero-ticks button:hover{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.hero-ticks button:hover > span{scale:1.1}
.hero-ticks button[aria-current="true"]{background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 14px 26px -18px rgba(17,24,40,.5)}
.hero-ticks button[aria-current="true"]::after{content:"";position:absolute;left:41px;right:16px;bottom:2px;height:2px;border-radius:2px;background:var(--signal);transform-origin:left;animation:ht-run var(--dur,4s) linear both}
@keyframes ht-run{from{transform:scaleX(0)}}
.ht-now{display:none;margin-left:2px;padding:4px 7px;border-radius:999px;background:var(--paper-2);font:500 .56rem/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink)}
.hero-ticks button[aria-current="true"] .ht-now{display:inline-block}
html:not(.js) .hero-ticks button{pointer-events:none}
#mt-now{font-variant-numeric:tabular-nums}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;animation:fade .9s .7s var(--ease) both}
.hero .friction{animation:fade .9s .8s var(--ease) both}
.works{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:18px;border-top:1px solid var(--line);width:100%;animation:fade .9s .9s var(--ease) both}
.works-l{font:500 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.works ul{display:flex;flex-wrap:wrap;gap:6px}
/* the chips are buttons: a channel restarts the example on that channel (the lit one is the one
   playing), the calendar jumps to the booking */
.works button{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 11px 0 9px;border:0;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:500 .8rem/1 var(--body);color:var(--ink);cursor:pointer;
  transition:box-shadow .3s,translate .35s var(--ease),background .3s}
.works button svg{width:15px;height:15px;color:var(--signal-ink)}
@media (hover:hover) and (pointer:fine){.works button:hover{translate:0 -2px;box-shadow:inset 0 0 0 1px #C9CFDA,0 10px 20px -14px rgba(17,24,40,.4)}}
.works button[aria-current="true"]{box-shadow:inset 0 0 0 1.5px var(--signal),0 10px 20px -14px rgba(255,90,31,.7)}
html:not(.js) .works button{pointer-events:none}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes blink{50%{opacity:.2}}

.hero-stage{position:relative;display:grid;place-items:center;min-height:620px;animation:fade 1.1s .2s var(--ease) both}
.hero-stage::before{content:"";position:absolute;inset:6% -10%;background:radial-gradient(closest-side,rgba(255,90,31,.14),transparent 72%);pointer-events:none}
/* Morning summary: what the owner wakes up to, once the booking lands */
.hsum{position:absolute;z-index:4;left:-9%;bottom:7%;width:228px;display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:var(--night);color:var(--on-night);
  box-shadow:0 26px 50px -22px rgba(17,24,40,.6)}
.hsum b{display:flex;justify-content:space-between;align-items:center;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);margin-bottom:2px}
.hsum b span:first-child{display:inline-flex;align-items:center;gap:7px;color:var(--on-night)}
.hsum b i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.hs-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 .82rem/1.2 var(--body);color:var(--on-night-2);padding-top:7px;border-top:1px solid var(--night-line);
  transition:opacity .4s var(--ease),transform .5s var(--ease);transition-delay:calc(.25s + var(--k) * .15s)}
.hs-row strong{font:700 1.15rem/1 var(--display);color:var(--on-night);font-variant-numeric:tabular-nums}
.hs-row strong.hi{color:var(--signal)}
/* Wide screens: chips and summary sit mostly outside the phone, in the gap, so the chat stays readable */
@media (min-width:981px) and (max-width:1299px){.hero-stage .chip--a{left:-12%}}
/* The summary card must never sit on the tappable "Try a message" row: clear of the phone when wide, gone when not */
@media (max-width:1299px){.hero-stage .hsum{display:none}}
.hero-stage .chip,.hero-stage .hsum{pointer-events:none}
@media (max-width:600px){.hero-stage .chip{display:none}}   /* on a phone they cover the chat people are now reading */
@media (min-width:1300px){.hero-stage .chip--a{top:35%;left:auto;right:calc(50% + 140px)}.hero-stage .hsum{left:-39%;bottom:5%}}   /* measured from the phone: only the bezel is touched */
.js .hero-stage .hsum{opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.js .hero-stage .hsum.on{opacity:1;transform:none}
.js .hero-stage .hsum:not(.on) .hs-row{opacity:0;transform:translateX(-8px)}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
/* Channel badges round the phone: WhatsApp, Instagram, website chat, phone. .on = the channel
   the example on screen arrived by. */
.orbs{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--ink);
  box-shadow:0 0 0 1px var(--line),0 16px 30px -16px rgba(17,24,40,.45);transition:background .4s,color .4s,scale .5s var(--ease),box-shadow .4s;animation:float 7s ease-in-out infinite}
.orb svg{width:20px;height:20px}
.orb:nth-child(2){animation-delay:-2s}.orb:nth-child(3){animation-delay:-4s}.orb:nth-child(4){animation-delay:-5.5s}
.orb.on{background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);scale:1.14;box-shadow:0 0 0 6px rgba(255,90,31,.16),0 16px 30px -14px rgba(255,90,31,.7)}
.orb--wa{top:13%;left:-9%}
.orb--ig{top:8%;right:-7%}
.orb--web{top:72%;right:-12%}
.orb--tel{top:59%;left:-13%}
@media (max-width:1180px){.orbs{display:none}}
.rings i{position:absolute;width:340px;aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);animation:ring 6s var(--ease-io) infinite;opacity:0}
.rings i:nth-child(2){animation-delay:2s}
.rings i:nth-child(3){animation-delay:4s}
@keyframes ring{0%{transform:scale(.7);opacity:0}15%{opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* ── Phone mockup (shared) ───────────────────────────────── */
.phone{position:relative;width:300px;max-width:100%;aspect-ratio:300/610;border-radius:46px;background:var(--ink);padding:10px;box-shadow:0 50px 80px -30px rgba(17,24,40,.45),0 20px 30px -20px rgba(17,24,40,.35),inset 0 0 0 1.5px #2A3350}
.phone::before{content:"";position:absolute;top:18px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#05070C;z-index:3}
.screen{position:relative;height:100%;border-radius:37px;background:var(--paper-2);overflow:hidden;display:flex;flex-direction:column}
.chat-top{color:var(--ink);display:flex;align-items:center;gap:10px;padding:52px 16px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:700 .8rem/1 var(--display);flex:none}
.chat-top b{display:block;font:600 .88rem/1.15 var(--body)}
.chat-top small{display:flex;align-items:center;gap:5px;font:400 .68rem/1.2 var(--mono);color:var(--muted)}
.chat-top small::before{content:"";width:6px;height:6px;border-radius:50%;background:#1FA463}
.chat-top .ex{margin-left:auto;font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 7px}
/* hero phone: three bars under the header, one per act of the example; the one playing fills */
.acts{display:flex;gap:4px;padding:7px 14px 0;background:var(--paper-2)}
.acts i{position:relative;flex:1;height:3px;border-radius:2px;background:#CBD1DD;overflow:hidden}
.acts i::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:left}
.acts i.done::after{transform:none}
.acts i.now::after{animation:ht-run var(--dur,4s) linear both}
.phone.driving .acts{visibility:hidden}
html:not(.js) .acts{display:none}
.js .demo .day--x{animation:pop .45s var(--ease) both}
.js .demo .chat{-webkit-mask-image:linear-gradient(180deg,transparent,#000 18px);mask-image:linear-gradient(180deg,transparent,#000 18px)}   /* older bubbles fade out under the bars */
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px 12px 10px;overflow:hidden}
.day{align-self:center;font:500 .62rem/1 var(--mono);color:var(--muted);background:var(--card);border-radius:6px;padding:5px 8px;letter-spacing:.04em}
.msg{max-width:84%;padding:8px 11px 6px;border-radius:14px;font:400 .8rem/1.38 var(--body);color:var(--ink);box-shadow:0 1px 0 rgba(17,24,40,.06);transform-origin:bottom left}
.msg time{display:block;text-align:right;font:400 .6rem/1 var(--mono);color:var(--muted);margin-top:3px}
.msg.in{align-self:flex-start;background:var(--bubble-in);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--bubble-out);border-bottom-right-radius:4px;transform-origin:bottom right}
.msg.out .ai{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#A8340A;margin-bottom:4px}
.msg.sys{align-self:center;max-width:94%;background:var(--ink);color:var(--paper);font:500 .68rem/1.3 var(--mono);border-radius:999px;padding:7px 12px;display:flex;align-items:center;gap:7px;box-shadow:none;transform-origin:center}
.msg.sys::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.typing{align-self:flex-start;background:var(--bubble-in);border-radius:14px;border-bottom-left-radius:4px;padding:11px 12px;display:flex;gap:4px}
.typing.out{align-self:flex-end;background:var(--bubble-out);border-radius:14px;border-bottom-right-radius:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typing 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-3px);opacity:1}}
/* "Try a message": tappable suggestions inside the hero phone; each plays its own conversation */
.sugg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 10px 10px;background:var(--card);border-top:1px solid var(--line)}
.sugg-l{flex:0 0 100%;display:flex;align-items:center;gap:6px;font:500 .58rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink)}
.sugg-l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);animation:ping 2.4s var(--ease) infinite}
.sugg button{font:600 .72rem/1 var(--body);color:var(--ink);background:var(--paper);border:0;border-radius:999px;padding:8px 11px;min-height:30px;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s,box-shadow .25s,translate .3s var(--ease)}
.sugg button:hover{background:var(--ink);color:var(--paper);box-shadow:none;translate:0 -1px}
.sugg button:active{translate:0 0;scale:.97}
.sugg button[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night);box-shadow:none}
html:not(.js) .sugg{display:none}
.chat-input{display:flex;align-items:center;gap:8px;padding:8px 12px 18px;background:var(--card);border-top:1px solid var(--line)}
.chat-input span{flex:1;height:32px;border-radius:999px;background:var(--paper-2)}
.chat-input i{width:32px;height:32px;border-radius:50%;background:var(--ink)}
/* The hero phone's input is real: what the visitor types gets a scripted reply */
.chat-type{padding:8px 10px 16px}
html:not(.js) .chat-type{display:none}
.chat-type input{flex:1;min-width:0;height:34px;padding:0 13px;border:0;border-radius:999px;outline:0;background:var(--paper-2);font:400 .82rem/1 var(--body);color:var(--ink);transition:box-shadow .25s}
.chat-type input::placeholder{color:var(--muted)}
.chat-type input:focus-visible{box-shadow:0 0 0 2px var(--signal)}
@media (pointer:coarse),(max-width:980px){.chat-type input{font-size:16px}}   /* below 16px iOS zooms the page on focus */
.chat-type button{flex:none;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);cursor:pointer;transition:background .25s,color .25s,scale .2s,opacity .25s}
.chat-type button svg{width:15px;height:15px}
.chat-type button:hover{background:var(--signal);color:var(--night)}
.chat-type button:active{scale:.94}
.chat-type.busy button,.sugg.busy button{opacity:.5;pointer-events:none}
.demo-cap{margin-top:12px;max-width:300px;text-align:center;font:400 .7rem/1.45 var(--mono);color:var(--muted)}
html:not(.js) .demo-cap{display:none}

/* ── Hero: pick your business ─────────────────────────────────────────────────────────
   Eight businesses the visitor can put in the example phone (docs/hero_biz.py + BIZ in site.js).
   Up to 980px: a row of icons above the phone, the chosen name in the label. From 981px: a
   column of icons to the right of the phone. From 1440px the column has room for the names.
   While the loop rotates by itself, a line under the one showing runs for the length of a loop. */
.hbiz{position:relative;z-index:5;display:grid;gap:9px;justify-items:center;margin-bottom:16px}
.hbiz-l{display:flex;align-items:center;gap:8px;font:500 .62rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink);white-space:nowrap}
.hbiz-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
.hbiz-l b{font-weight:500;color:var(--ink)}
.hbiz-l b::before{content:"· ";color:var(--muted)}
.hbiz-list{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.hbiz button{position:relative;display:flex;align-items:center;gap:10px;padding:0;border:0;border-radius:12px;background:none;font:600 .86rem/1.15 var(--body);color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hb-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,color .3s,box-shadow .3s,scale .35s var(--ease)}
.hb-ic svg{width:19px;height:19px}
.hb-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.hbiz button:hover .hb-ic{box-shadow:inset 0 0 0 1px var(--ink);scale:1.06}}
.hbiz button:active .hb-ic{scale:.94}
.hbiz button[aria-pressed="true"] .hb-ic{background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);box-shadow:0 10px 18px -10px rgba(255,90,31,.85)}
.hbiz.auto button[aria-pressed="true"]::after{content:"";position:absolute;left:5px;right:5px;bottom:-5px;height:2px;border-radius:2px;background:var(--signal);transform-origin:left;animation:ht-run var(--loop,20s) linear both}
.hbiz-more{display:none}
/* the phone takes the new business: its name, avatar and card come in again */
.hero-stage .screen.swap .chat-top > :not(.ex),.hero-stage .screen.swap .biz{animation:biz-in .5s var(--ease) both}
@keyframes biz-in{from{opacity:0;translate:0 7px}}
.avatar svg{width:17px;height:17px}
@media (min-width:981px){
  .hbiz{position:absolute;top:50%;left:calc(50% + 166px);translate:0 -54%;margin:0;padding:6px;border-radius:19px;background:color-mix(in srgb,var(--card) 80%,transparent);box-shadow:0 0 0 1px var(--line),0 24px 44px -26px rgba(17,24,40,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .hbiz-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hbiz-list{flex-direction:column;flex-wrap:nowrap;gap:5px}
  .hbiz.auto button[aria-pressed="true"]::after{left:auto;right:-5px;top:5px;bottom:5px;width:2px;height:auto;transform-origin:top;animation-name:hb-run}
  .orb--web{top:76%}
  .hero-stage .chip--b{display:none}               /* its side of the phone is the rail's now … */
}
@keyframes hb-run{from{transform:scaleY(0)}}
/* narrow two-column widths: the phone moves over a little to make room */
@media (min-width:981px) and (max-width:1180px){
  .hero-stage{padding-right:40px}
  .hbiz{left:calc(50% + 142px)}
  .hero-stage .chip--a{left:-17%}
}
/* … and from 1300px the "Booked" chip sits on the left, under "Replied", its edge on the bezel */
@media (min-width:1300px){.hero-stage .chip--b{display:flex;top:48%;right:calc(50% + 132px);left:auto}}
@media (min-width:1440px){
  .hbiz{left:calc(50% + 172px);width:172px;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;justify-items:stretch;translate:0 -52%}
  .hbiz-l{position:static;width:auto;height:auto;overflow:visible;clip-path:none;padding-left:6px}
  .hbiz-l b{display:none}
  .hbiz-list{gap:3px}
  .hbiz button{padding:5px 12px 5px 5px;border-radius:16px;transition:background .3s,box-shadow .3s,translate .35s var(--ease)}
  .hb-n{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .hbiz button[aria-pressed="true"]{background:var(--card);box-shadow:0 0 0 1px var(--line),0 18px 30px -20px rgba(17,24,40,.5)}
  /* a small tail on the chosen one, pointing at the phone */
  .hbiz button[aria-pressed="true"]::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;margin-top:-5px;rotate:45deg;background:var(--card);box-shadow:-1px 1px 0 var(--line)}
  .hbiz.auto button[aria-pressed="true"]::after{left:51px;right:14px;top:auto;bottom:5px;width:auto;height:2px;transform-origin:left;animation-name:ht-run}
  .hbiz-more{display:inline-flex;align-items:center;gap:6px;min-height:28px;margin-left:6px;justify-self:start;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s}
  .hbiz-more:hover{color:var(--signal-ink)}
  .orb--ig{top:4%}
  .orb--web{top:89%;right:-6%}
}
@media (hover:hover) and (pointer:fine) and (min-width:1440px){.hbiz button:hover{translate:3px 0}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* Hero chat choreography: JS toggles .on; without JS every message shows. */
.js .demo .msg,.js .demo .typing{display:none}
.js .demo .on{display:block;animation:pop .45s var(--ease) both}
.js .demo .typing.on{display:flex}
.js .demo .msg.sys.on{display:flex}

.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:var(--card);box-shadow:0 18px 40px -18px rgba(17,24,40,.35),0 0 0 1px var(--line);font:500 .78rem/1.25 var(--mono);white-space:nowrap}
.chip small{display:block;font:400 .68rem/1.2 var(--mono);color:var(--muted)}
.chip .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--paper-2);flex:none}
.chip .ic svg{width:16px;height:16px}
.chip--a{top:34%;left:-4%}
.chip--b{top:47%;right:-6%}
.js .hero-stage .chip{opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.js .hero-stage .chip.on{opacity:1;transform:none}
.chip.on{animation:float 6s ease-in-out 1s infinite}
@keyframes float{50%{translate:0 -6px}}

@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-stage{min-height:0;padding-block:24px 8px}
  .chip--a{left:0}.chip--b{right:0}.hsum{left:0}
}
@media (max-width:520px){
  .phone{width:268px}
  .chip{font-size:.7rem;padding:9px 11px}
  .chip .ic{width:26px;height:26px}
  .chip--a{top:40%;left:-2px}.chip--b{right:-2px;top:44%}.hsum{left:-2px;bottom:5%;width:200px;padding:11px 13px}.hs-row{font-size:.74rem}
  .rings i{width:260px}
}

/* ── Reveal on scroll (JS adds .reveal-on; failure leaves all visible) ── */
.reveal-on [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.reveal-on [data-reveal].in{opacity:1;transform:none}

/* ── Problem / numbers ───────────────────────────────────
   Five cards on the same system as the pricing ladder: mono topic label with a dot, a small
   chart that draws the number, the number in the display face, what it means, its source.
   Rows line up across cards (subgrid). The fifth, the sales point, sits on night.
   Charts rest in their final state; JS only adds .reveal-on so they can draw in. */
.stats{border-top:1px solid var(--line)}
.stats .wrap{display:grid;gap:clamp(32px,4vw,48px);padding-block:clamp(3.75rem,7vw,6rem)}
.stats-head{display:grid;gap:18px 64px;align-items:end}
.stats-head .sec-head{margin:0}
.stats h2{max-width:18ch}
.stats-lede{color:var(--ink-2);font-size:var(--step-1);line-height:1.45;max-width:44ch}
.stats-intro{display:grid;gap:12px;justify-items:start}
.stats-intro .stats-lede{padding-bottom:2px}
/* The five sources as chips: pressing one lights its card and replays its chart */
.srcs-l{display:flex;align-items:center;gap:8px;font:500 .64rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.srcs-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.srcs{display:flex;flex-wrap:wrap;gap:6px}
.srcs button{min-height:34px;padding:0 13px;border:0;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:500 .74rem/1 var(--mono);color:var(--ink);cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.srcs button:hover{background:var(--ink);color:var(--paper);box-shadow:none;translate:0 -1px}
html:not(.js) .srcs button{pointer-events:none}
.stat.hot{box-shadow:0 0 0 2px var(--signal),0 26px 50px -30px rgba(255,90,31,.6);translate:0 -4px}
@media (min-width:980px){.stats-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.stats-lede{padding-bottom:6px}}

/* Bento: the missed-calls hero card (left, tall, night) beside a 2x2 of the other four.
   Small cards put the text on the left and the chart on the right, source across the bottom. */
.stat-bento{display:grid;gap:14px}
@media (min-width:1100px){.stat-bento{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}}
.stat-grid{display:grid;gap:14px}
@media (min-width:640px){.stat-grid{grid-template-columns:1fr 1fr}}
.stat{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px 20px 16px;
  transition:translate .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
@media (hover:hover) and (pointer:fine){.stat:hover{translate:0 -4px;box-shadow:0 26px 50px -30px rgba(17,24,40,.35)}.stat:not(.stat--hero):hover{border-color:#C9CFDA}}
.reveal-on .stat[data-reveal]{transition-property:opacity,transform,translate,box-shadow,border-color;transition-duration:.9s,1s,.45s,.45s,.3s;transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s}
.s-label{display:inline-flex;align-items:center;gap:8px;font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
/* "Try yours": the top of a small card swaps the survey's number for a question about the
   visitor (.stat.yours; not .mine, which is the missed-calls block). Both sides share one grid cell, so the card never changes height, and
   the chart underneath answers the question. */
.s-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.s-flip{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 11px 0 9px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:600 .74rem/1 var(--body);color:var(--ink);cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.s-flip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);animation:ping 2.4s var(--ease) infinite}
.s-flip:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.s-flip[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
html:not(.js) .s-flip{display:none}
.s-faces{display:grid}
.s-face{grid-area:1/1;min-width:0;transition:opacity .3s,translate .45s var(--ease),visibility 0s}
.s-back{display:grid;gap:9px;align-content:start;margin-top:14px;visibility:hidden;opacity:0;translate:0 10px;transition:opacity .3s,translate .45s var(--ease),visibility 0s .3s}
.stat.yours .s-back{visibility:visible;opacity:1;translate:0 0;transition-delay:0s}
.stat.yours .s-front{visibility:hidden;opacity:0;translate:0 -10px;transition:opacity .3s,translate .45s var(--ease),visibility 0s .3s}
.s-q{font:600 1rem/1.3 var(--body);color:var(--ink)}
.s-pick{display:flex;flex-wrap:wrap;gap:6px}
.s-pick button{min-height:34px;padding:0 12px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:600 .84rem/1 var(--body);color:var(--ink);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.s-pick button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.s-pick button[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night);box-shadow:none}
.s-ask{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.s-step{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.s-step button{width:32px;height:32px;border:0;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:600 1.1rem/1 var(--body);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,scale .2s}
.s-step button:hover{background:var(--ink);color:var(--paper)}
.s-step button:active{scale:.92}
.s-step output{min-width:2.4ch;text-align:center;font:500 1.1rem/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.s-a{font:400 .92rem/1.4 var(--body);color:var(--ink-2);min-height:2.8em}
.s-a b{color:var(--ink);font-weight:700}
/* the chart's answer */
.stat.yours .bt i,.stat.yours .wday::before{transition-duration:.45s;transition-delay:0s}
.bar-row.dim .bt i{background:#C3C9D6}
.bar-row.chosen .bl,.bar-row.chosen .bv{color:var(--signal-ink);font-weight:700}   /* not .pick: that is the scene's slot picker */
.dots i.me{position:relative;z-index:1;background:var(--signal);transform:scale(1.55);box-shadow:0 0 0 3px rgba(255,90,31,.28);transition-delay:0s}
.dots i.off.me{background:transparent;box-shadow:inset 0 0 0 2px var(--signal),0 0 0 3px rgba(255,90,31,.28)}
.s-label i{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none}
.s-num{margin-top:14px;font:760 clamp(2.5rem,1.9rem + 1.6vw,3.3rem)/1 var(--display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.s-num em{font-style:normal;color:var(--signal-large)}
.s-txt{margin-top:8px;color:var(--ink-2);font-size:.97rem;line-height:1.45}
.s-vis{margin-top:16px;display:flex;align-items:center;min-height:64px;flex:1}
/* "The fix": the automation that answers this number; it also fills what used to be dead space */
.s-fix{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;margin-top:16px;padding:10px 12px;border-radius:14px;background:var(--paper);text-decoration:none;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,box-shadow .3s}
.s-fix small{grid-column:1;font:500 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink)}
.s-fix span:not(.arr){grid-column:1;font:600 .92rem/1.25 var(--body)}
.s-fix .arr{grid-column:2;grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,color .3s,translate .35s var(--ease),box-shadow .3s}
.s-fix:hover{background:#FFF4EE;box-shadow:inset 0 0 0 1px rgba(255,90,31,.45)}
.s-fix:hover .arr{background:var(--signal);color:var(--night);box-shadow:none;translate:3px 0}
.s-src{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font:400 .68rem/1.4 var(--mono);color:var(--muted)}
/* Replay (hover / tap): snap charts back without animating, then let them draw again */
.stat.reset .s-vis *,.stat.reset .s-vis *::before,.stat.reset .big-ring .val,.stat.reset .callflow li,.stat.reset .cf-fix{transition:none!important}

/* chart: two bars */
.bars{display:grid;gap:12px;width:100%}
.bar-row{display:grid;grid-template-columns:52px 1fr 30px;align-items:center;gap:10px}
.bv{font:500 .7rem/1 var(--mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.bl{font:400 .66rem/1 var(--mono);color:var(--muted)}
.bt{height:16px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.bt i{display:block;height:100%;border-radius:99px;background:#C3C9D6;transform-origin:left;transform:scaleX(var(--w));
  transition:transform 1.3s var(--ease) calc(var(--d,0s) + .25s)}
.bt i.hi{background:var(--signal)}
.bt i.lo{background:#C3C9D6}
.bar-row + .bar-row .bt i{transition-delay:calc(var(--d,0s) + .45s)}
.reveal-on .stat:not(.play) .bt i{transform:scaleX(0)}

/* chart: 100 people, filled in order */
.dots{display:grid;grid-template-columns:repeat(25,1fr);gap:4px;width:100%}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--ink);transition:background .35s,transform .45s var(--ease);transition-delay:calc(var(--d,0s) + .25s + var(--i) * 7ms)}
.dots i.off{background:transparent;box-shadow:inset 0 0 0 1.3px #B6BDCB}
.reveal-on .stat:not(.play) .dots i{background:var(--line);transform:scale(.55)}

/* chart: a working week, two days of it admin */
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:100%;height:64px}
@media (max-width:699px){.week{height:54px}}
.wday{position:relative;border-radius:9px;background:var(--paper-2);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px}
.wday::before{content:"";position:absolute;inset:0;background:var(--signal);transform-origin:bottom;transform:scaleY(var(--f,0));transition:transform .9s var(--ease) calc(var(--d,0s) + .3s + var(--i) * .18s)}
.reveal-on .stat:not(.play) .wday::before{transform:scaleY(0)}
.wday span{position:relative;font:500 .62rem/1 var(--mono);color:var(--muted)}
.wday.on span{color:var(--night)}

/* The hero card: night, big answered-call gauge with the number inside, then a missed call
   told in three steps that light in turn, the fix in orange, and the Voice Desk link. */
.stat--hero{display:flex;flex-direction:column;gap:0;background:var(--night);border-color:var(--night);color:var(--on-night);padding:26px;overflow:hidden;
  box-shadow:0 40px 70px -40px rgba(255,90,31,.5)}
.stat--hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 28%,rgba(255,90,31,.2),transparent 45%),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.1px) 0 0/18px 18px}
.stat--hero > *{position:relative}
.stat--hero .s-label{color:var(--on-night)}
.hero-gauge{position:relative;width:min(100%,210px);aspect-ratio:1;margin-top:18px;display:grid;place-items:center}
.big-ring{position:absolute;inset:0}
.big-ring svg{width:100%;height:100%;rotate:-90deg}
.big-ring circle{fill:none;stroke-width:7}
.big-ring .track{stroke:var(--night-line)}
.big-ring .val{stroke:var(--signal);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v));transition:stroke-dashoffset 1.8s var(--ease) .3s}
.reveal-on .stat--hero:not(.play) .big-ring .val{stroke-dashoffset:100}
.stat--hero .s-num{margin:0;font-size:clamp(3.2rem,2.6rem + 1.6vw,4.2rem);color:var(--on-night)}
.stat--hero .s-txt{margin-top:18px;font-size:1.08rem;color:var(--on-night-2);max-width:32ch}
/* the same call, twice: nobody picks up, or the Voice Desk does */
.cf-mode{align-self:flex-start;display:inline-flex;gap:3px;margin-top:20px;padding:4px;border-radius:999px;background:var(--night);border:1px solid var(--night-line)}
.cf-mode button{min-height:32px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--on-night-2);font:600 .82rem/1 var(--body);cursor:pointer;transition:background .25s,color .25s}
.cf-mode button:hover{color:var(--on-night)}
.cf-mode button[aria-pressed="true"]{background:var(--on-night);color:var(--night)}
html:not(.js) .cf-mode{display:none}
.callflow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
html:not(.js) .callflow{margin-top:20px}
.callflow[hidden]{display:none}
.callflow--ok .cf-ic,.mine-ic svg.ok{background:rgba(34,197,94,.18);color:#4ADE80}
.callflow.swap li{animation:pop .4s var(--ease) both;animation-delay:calc(var(--k) * .1s)}
.callflow li{display:inline-flex;align-items:center;gap:7px;font:500 .72rem/1 var(--mono);letter-spacing:.02em;color:var(--on-night);
  background:var(--night-2);border:1px solid var(--night-line);border-radius:999px;padding:7px 11px 7px 7px;
  transition:opacity .45s var(--ease),transform .5s var(--ease);transition-delay:calc(.9s + var(--k) * .45s)}
.callflow li + li::before{content:"→";margin:0 2px 0 -2px;color:var(--on-night-2);order:-1;display:none}
.cf-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,90,31,.16);color:var(--signal)}
.cf-ic svg{width:12px;height:12px}
.cf-fix{display:flex;align-items:center;gap:9px;margin-top:12px;font:600 .92rem/1.35 var(--body);color:var(--night);background:linear-gradient(90deg,var(--signal),#FF8A4C);
  border-radius:14px;padding:11px 14px;transition:opacity .45s var(--ease),transform .5s var(--ease);transition-delay:calc(.9s + var(--k) * .45s)}
.cf-fix svg{width:17px;height:17px;flex:none}
.reveal-on .stat--hero:not(.play) .callflow li,.reveal-on .stat--hero:not(.play) .cf-fix{opacity:0;transform:translateY(8px)}
/* "Calls you miss in a week": the visitor's own number run through the 82% */
.mine{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 14px;margin-top:16px;padding:14px 14px 13px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--night-line)}
html:not(.js) .mine{display:none}
.mine-l{font:600 .95rem/1.3 var(--body);color:var(--on-night)}
.mine-step{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:var(--night);border:1px solid var(--night-line)}
.mine-step button{width:34px;height:34px;border:0;border-radius:50%;background:var(--night-2);color:var(--on-night);font:600 1.15rem/1 var(--body);cursor:pointer;transition:background .2s,color .2s,scale .2s}
.mine-step button:hover{background:var(--signal);color:var(--night)}
.mine-step button:active{scale:.92}
.mine-step output{min-width:2.2ch;text-align:center;font:500 1.15rem/1 var(--mono);color:var(--on-night);font-variant-numeric:tabular-nums}
.mine-ic{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:24px}
.mine-ic svg{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--night-2);color:var(--on-night-2);animation:pop .3s var(--ease) both}
.mine-ic svg.go{background:rgba(255,90,31,.2);color:var(--signal)}
.mine-ic small{font:500 .68rem/1 var(--mono);color:var(--on-night-2);margin-left:4px}
.mine-out{grid-column:1 / -1;font:400 .95rem/1.45 var(--body);color:var(--on-night-2)}
.mine-out b{color:var(--on-night);font-weight:700}
/* the visitor's number goes down into the calculator */
.mine-use{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 12px;border:0;border-radius:999px;background:var(--night);box-shadow:inset 0 0 0 1px var(--night-line);font:600 .8rem/1 var(--body);color:var(--on-night);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.mine-use span{transition:translate .3s var(--ease)}
.mine-use:hover{background:var(--signal);color:var(--night);box-shadow:none}
.mine-use:hover span{translate:0 2px}
.hero-foot{margin-top:auto;padding-top:22px;display:grid;gap:14px;justify-items:start}
.stat--hero .s-src{margin:0;padding-top:12px;border-top:1px dashed var(--night-line);color:var(--on-night-2);width:100%}
@media (max-width:1099px){.hero-gauge{width:170px}}
@media (max-width:699px){.stat--hero{padding:20px}.hero-gauge{width:150px}}

/* ── Calculator: the visitor's own numbers ───────────────
   Sliders + a 3-way choice on the left, the result on night on the right. Everything is
   computed in the browser from what they set (js/site.js); nothing is sent or stored. */
.calc{display:grid;margin-top:2px;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -56px rgba(17,24,40,.45)}
@media (min-width:900px){.calc{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
html:not(.js) .calc{display:none}
.calc-in{padding:clamp(22px,3vw,36px);display:grid;gap:18px;align-content:start}
.calc-tag{display:inline-flex;align-items:center;gap:8px;font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink)}
.calc-tag i{width:8px;height:8px;border-radius:50%;background:var(--signal);animation:ping 2.4s var(--ease) infinite}
.calc h3{font-size:clamp(1.6rem,1.2rem + 1.3vw,2.3rem);letter-spacing:-.03em;line-height:1.05}
.calc h3 em{font-style:normal;background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 94%/100% .12em no-repeat}
.calc-sub{margin-top:-8px;color:var(--ink-2);font-size:1rem}
/* starting points for the sliders */
.calc-pre{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.calc-pre > span{font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.calc-pre button{min-height:36px;padding:0 13px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:600 .86rem/1 var(--body);color:var(--ink);cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.calc-pre button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.calc-pre button[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night);box-shadow:none}
.calc-pre small{flex:0 0 100%;font:400 .68rem/1.4 var(--mono);color:var(--muted)}
.calc-field{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px 14px}
.calc-field label,.calc-seg legend{font:600 1rem/1.3 var(--body);color:var(--ink);padding:0}
.calc-field output{font:500 1.25rem/1 var(--mono);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
.calc-field input[type=range]{grid-column:1 / -1;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;--f:20%}
.calc-field input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--signal) var(--f),var(--paper-2) var(--f))}
.calc-field input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--signal) var(--f),var(--paper-2) var(--f))}
.calc-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--ink);border:4px solid var(--card);box-shadow:0 0 0 1px var(--line),0 6px 14px -4px rgba(17,24,40,.5);transition:scale .2s var(--ease)}
.calc-field input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:4px solid var(--card);box-shadow:0 0 0 1px var(--line),0 6px 14px -4px rgba(17,24,40,.5)}
.calc-field input[type=range]:hover::-webkit-slider-thumb,.calc-field input[type=range]:active::-webkit-slider-thumb{scale:1.12}
.calc-field input[type=range]:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:99px}
.calc-seg{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.calc-seg legend{float:left;margin-right:14px}
.calc-seg label{position:relative;display:inline-flex;cursor:pointer}
.calc-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.calc-seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font:600 .92rem/1 var(--body);color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s,box-shadow .25s}
.calc-seg label:hover span{box-shadow:inset 0 0 0 1px var(--ink)}
.calc-seg input:checked + span{background:var(--ink);color:var(--paper);box-shadow:none}
.calc-seg input:focus-visible + span{outline:2px solid var(--signal);outline-offset:3px}
.calc-out{position:relative;background:var(--night);color:var(--on-night);padding:clamp(22px,3vw,36px);display:grid;gap:12px;align-content:center;justify-items:start;overflow:hidden}
.calc-out::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 15%,rgba(255,90,31,.24),transparent 50%),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.1px) 0 0/18px 18px}
.calc-out > *{position:relative}
.calc-l{font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.calc-big{font:760 clamp(3rem,2rem + 4vw,5rem)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--on-night)}
.calc-big span{background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 96%/100% .08em no-repeat}
.calc-big.bump{animation:bump .35s var(--ease)}
@keyframes bump{40%{scale:1.04}}
.calc-per{margin-top:-4px;font:500 .78rem/1.3 var(--mono);color:var(--on-night);font-variant-numeric:tabular-nums}
.calc-line{color:var(--on-night-2);font-size:1rem;line-height:1.5;max-width:40ch}
/* the yearly loss beside what the plan costs in its first year */
.cmp{justify-self:stretch;display:grid;gap:8px;margin-top:2px}
.cmp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 12px;font:400 .82rem/1.2 var(--body);color:var(--on-night-2)}
.cmp-row span{grid-column:1}
.cmp-row b{grid-column:2;grid-row:1;font:500 .82rem/1 var(--mono);color:var(--on-night);font-variant-numeric:tabular-nums}
.cmp-row i{grid-column:1 / -1;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--signal),#FF8A4C);width:var(--w,100%);min-width:6px;transition:width .5s var(--ease)}
.cmp-row i.cost{background:#56617A}
.calc-pay{justify-self:stretch;display:grid;gap:9px;margin-top:4px;padding:13px 14px;border-radius:14px;background:var(--night-2);border:1px solid var(--night-line);color:var(--on-night-2);font-size:.98rem;line-height:1.45}
.calc-pay b{color:var(--on-night);font-weight:600}
/* the customers a month, one small figure each; the ones that would pay for the plan are white */
.cp-l{font:500 .64rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.cp-ppl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px;min-height:17px}
.cp-ppl i{width:12px;height:17px;flex:none;--c:var(--signal);background:radial-gradient(circle at 50% 4.5px,var(--c) 3.6px,transparent 4.2px),radial-gradient(6px 7.5px at 50% 100%,var(--c) 96%,transparent 100%);animation:pop .3s var(--ease) both;animation-delay:calc(var(--i) * 18ms)}
.cp-ppl i.pay{--c:#fff}
.cp-ppl small{margin-left:4px;font:500 .7rem/17px var(--mono);color:var(--on-night-2)}
.calc-scale{grid-column:1 / -1;display:flex;justify-content:space-between;margin-top:-8px;font:400 .62rem/1 var(--mono);color:var(--muted)}
.calc-out .btn{margin-top:6px}
.calc-note{font:400 .68rem/1.4 var(--mono);color:var(--on-night-2)}
/* year / month / week: which amount the big figure shows */
.calc-top{justify-self:stretch;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.calc-span{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--night-line)}
.calc-span button{min-height:26px;padding:0 11px;border:0;border-radius:999px;background:transparent;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);cursor:pointer;transition:background .25s,color .25s}
.calc-span button:hover{color:var(--on-night)}
.calc-span button[aria-pressed="true"]{background:var(--on-night);color:var(--night)}
/* the sum behind the figure, one chip per input; the chip of the input being moved lights up */
.calc-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;padding-top:16px;border-top:1px dashed var(--line);font:500 .74rem/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.calc-sum span{flex:0 0 100%;margin-bottom:2px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.calc-sum b{padding:7px 9px;border-radius:9px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-weight:500;white-space:nowrap}
.calc-sum b.tot{background:var(--ink);color:var(--paper);box-shadow:none}
.calc-sum i{font-style:normal;color:var(--muted)}
.calc-sum b.lit{animation:cs-lit .6s var(--ease)}
@keyframes cs-lit{30%{background:#FFF4EE;box-shadow:inset 0 0 0 1.5px var(--signal);translate:0 -2px}}
.calc-field.lit output{animation:bump .5s var(--ease)}
/* four answers: they stay on one line beside the question, or all go under it */
.calc:not(.jfind) .calc-in{container-type:inline-size}
.calc-seg--4{gap:8px}
.calc-seg--4 legend{margin-right:10px}
.calc-seg--4 span{padding:0 13px}
@container (max-width:545px){.calc-seg--4 legend{float:none;width:100%;margin:0 0 4px}}
/* ── "Which one is yours?": the row under the five numbers ── */
.pain{display:grid;gap:10px 18px;align-items:center;margin-top:calc(14px - clamp(32px,4vw,48px));padding:14px 18px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 24px 50px -40px rgba(17,24,40,.4)}
.pain-l{display:flex;align-items:center;gap:8px;font:500 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink);white-space:nowrap}
.pain-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
.pain-b{display:flex;flex-wrap:wrap;gap:6px}
.pain-b button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:600 .86rem/1 var(--body);color:var(--ink);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.pain-b button::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #8D97AB;transition:background .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){.pain-b button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}}
.pain-b button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.pain-b button[aria-pressed="true"]::before{background:var(--signal);box-shadow:none}
.pain-out{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font:400 .95rem/1.4 var(--body);color:var(--ink-2)}
.pain-out b{color:var(--ink);font-weight:600}
.pain-out a{display:inline-flex;align-items:center;gap:5px;min-height:28px;font:600 .86rem/1.2 var(--body);color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.pain-out a:hover{text-decoration-color:var(--ink)}
.pain-out a[hidden]{display:none}
.pain-out.tick{animation:tick .45s var(--ease)}
/* the answer has its own line under the buttons, kept open so nothing moves when it arrives */
.pain-out{min-height:3.5em}
@media (min-width:760px){.pain{grid-template-columns:auto minmax(0,1fr)}.pain-out{grid-column:2;min-height:28px}}
/* the card that was picked keeps a ring and a small tag */
.stat.pain-on{box-shadow:0 0 0 2px var(--signal),0 26px 50px -34px rgba(255,90,31,.55)}
.stat.pain-on::after{content:"Yours";position:absolute;z-index:3;top:-10px;left:18px;padding:5px 9px;border-radius:999px;background:linear-gradient(90deg,var(--signal),#FF8A4C);font:600 .58rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night);animation:pop .35s var(--ease) both}

/* ── Scene: one lead, end to end (dark band) ─────────────
   The sticky phone stands on a lit stage (dot grid, signal glow, pulsing rings). Its chat, the
   status chips around it and the five story bars above it all follow the step card being read:
   js/site.js toggles .on on every [data-s] up to the active step. The visitor can also press
   Play (.scene.playing: the page walks itself through the steps), jump with the story bars, and
   pick Sam's slot in step 2, which rewrites every [data-thu] text.
   The scene holds two nights: with the assistant and the same night without it. Each differing
   part is a [data-mode] block, the other one is `hidden`; .scene.without drains the orange. */
.scene [data-mode][hidden]{display:none!important}
.scene{background:var(--night);color:var(--on-night);position:relative}
.scene .eyebrow{color:var(--on-night-2)}
.scene .split-lede{color:var(--on-night-2)}
.scene-intro{display:grid;gap:16px;justify-items:start}
/* The three people in the story: the same avatars label every step card. */
.cast{display:flex;flex-wrap:wrap;gap:6px}
/* the cast are buttons: press one and their line lights in every step card (.scene[data-follow]) */
.cast{align-items:center}
.cast button{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--night-2);border:1px solid var(--night-line);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,background .25s,translate .25s var(--ease)}
.cast button:hover{border-color:#56617A;translate:0 -1px}
.cast button[aria-pressed="true"]{border-color:var(--signal);background:rgba(255,90,31,.14)}
html:not(.js) .cast button{pointer-events:none}
.cast-l{margin-left:6px;font:500 .6rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
/* "Show it for": the story told for the visitor's kind of business (js/site.js, tell()) */
.scb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px}
.scb-l{display:flex;align-items:center;gap:8px;font:500 .62rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.scb-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
.scb-l b{font-weight:500;color:#FF8A57}
.scb-b{display:flex;flex-wrap:wrap;gap:5px}
.scb button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:11px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line);color:var(--on-night);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s,translate .25s var(--ease)}
.scb button svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.scb button:hover{box-shadow:inset 0 0 0 1px var(--signal);translate:0 -1px}}
.scb button:active{scale:.94}
.scb button[aria-pressed="true"]{background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);box-shadow:0 10px 18px -10px rgba(255,90,31,.85)}
/* the same row on a light section ("What it does") */
.scb--light .scb-l{color:var(--muted)}
.scb--light .scb-l b{color:var(--signal-ink)}
.scb--light button:not([aria-pressed="true"]){background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.scb--light button:not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 1px var(--ink)}}
/* the story takes the new business: the phone's header comes in again and the line in the intro lights */
.scene .screen.swap .chat-top > :not(.ex),.scene .screen.swap .biz{animation:biz-in .5s var(--ease) both}
.scene [data-bk="lede"]{transition:color .3s}
.scene [data-bk="lede"].swap{animation:told 1.6s var(--ease)}
@keyframes told{0%,35%{color:#FF8A57}}
.swho li{transition:opacity .3s}
.scene[data-follow="sam"] .swho li:not(.sw-sam),.scene[data-follow="ai"] .swho li:not(.sw-ai),.scene[data-follow="you"] .swho li:not(.sw-you){opacity:.35}
.scene[data-follow="sam"] .swho .sw-sam,.scene[data-follow="ai"] .swho .sw-ai,.scene[data-follow="you"] .swho .sw-you{color:var(--on-night)}
.scene[data-follow] .step.active .swho li{animation:none}   /* the entrance animation would hold every line at full opacity */
.scene[data-follow] .swho .cav{transition:box-shadow .3s}
.scene[data-follow="sam"] .sw-sam .cav,.scene[data-follow="ai"] .sw-ai .cav,.scene[data-follow="you"] .sw-you .cav{box-shadow:0 0 0 3px rgba(255,90,31,.45)}
.js .scene[data-follow] .step:not(.active) .step-card{opacity:.82}   /* so the followed line reads down the whole story */
.cast b{display:block;font:600 .88rem/1.15 var(--body);color:var(--on-night)}
.cast small{display:block;font:400 .64rem/1.25 var(--mono);letter-spacing:-.01em;color:var(--on-night-2)}
.cav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font:600 .8rem/1 var(--body)}
.cav svg{width:15px;height:15px}
.cav--sam{background:var(--bubble-out);color:var(--ink)}
.cav--ai{background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night)}
.cav--you{background:rgba(255,255,255,.07);color:#B4C4FF;box-shadow:inset 0 0 0 1px var(--night-line)}
.cav--none{color:var(--on-night-2);border:1.5px dashed #56617A}
/* With / without switch */
.mode{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--night-2);border:1px solid var(--night-line)}
html:not(.js) .mode{display:none}
.mode-l{padding:0 8px 0 12px;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.mode button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--on-night);font:600 .86rem/1 var(--body);cursor:pointer;transition:background .25s,color .25s}
.mode button:hover{background:rgba(255,255,255,.08)}
.mode button[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night)}
.mode button[data-set-mode="without"][aria-pressed="true"]{background:#D5DAE5}
@media (max-width:520px){.mode{border-radius:22px}.mode-l{flex:0 0 100%;padding:6px 10px 2px}}

.scene-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.scene-phone{position:sticky;top:max(calc(var(--header-h) + 10px),calc(50svh - 372px));display:grid;justify-items:center;gap:10px}
.scene-stage{position:relative;isolation:isolate;width:100%;display:grid;place-items:center;padding:16px 0 14px}
.scene-stage::before{content:"";position:absolute;z-index:-1;inset:-6% -4%;border-radius:32px;transition:opacity 1s;
  background:radial-gradient(closest-side,rgba(255,90,31,.18),transparent 70%) 50% 60%/70% 60% no-repeat,radial-gradient(closest-side,rgba(96,118,255,.16),transparent 72%) 50% 38%/90% 70% no-repeat,radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.1px) 0 0/20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 35%,transparent 85%)}
/* Clock + "you" status above the phone: the time ticks with each step, you sleep at night and
   get on with work by day, and the stage light warms from night to morning. */
.stage-hud{display:flex;justify-content:space-between;align-items:center;gap:12px;width:min(100%,430px)}
.sc-clock{display:flex;align-items:baseline;gap:10px;color:var(--on-night)}
.sc-day{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.sc-time{font:500 2.1rem/1 var(--mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.sc-time.tick,.sc-day.tick{animation:tick .5s var(--ease)}
@keyframes tick{from{opacity:0;transform:translateY(10px)}}
.sc-owner{display:inline-flex;align-items:center;gap:8px;margin:0;font:500 .72rem/1 var(--mono);color:var(--on-night);background:var(--night-2);border:1px solid var(--night-line);border-radius:999px;padding:6px 12px 6px 6px;white-space:nowrap}
.ow-ic{position:relative;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.07);flex:none}
.ow-ic svg{position:absolute;inset:0;margin:auto;width:14px;height:14px;transition:opacity .45s,transform .6s var(--ease)}
.ow-moon{color:#B4C4FF}
.ow-sun{color:#FFB84D;opacity:0;transform:rotate(-90deg) scale(.5)}
.scene-phone[data-tone="day"] .ow-moon{opacity:0;transform:rotate(90deg) scale(.5)}
.scene-phone[data-tone="day"] .ow-sun{opacity:1;transform:none}
.ow-t.tick{animation:tick .45s var(--ease)}
.scene-stage::after{content:"";position:absolute;z-index:-1;inset:-6% -4%;border-radius:32px;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);
  background:radial-gradient(closest-side,rgba(255,176,72,.42),transparent 72%) 50% 45%/92% 84% no-repeat}
.scene-phone[data-tone="day"] .scene-stage::after{opacity:1}
.scene-phone[data-tone="day"] .scene-stage::before{opacity:.55}
/* Play + story bars: one bar per step, each a button that jumps there. While playing, the
   current bar fills over the time the step is held (--dwell, set from site.js). */
.scene-ctrl{display:flex;align-items:center;gap:14px;width:min(100%,430px)}
html:not(.js) .scene-ctrl{display:none}
.sc-play{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:88px;min-height:38px;padding:0 15px 0 12px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night);font:600 .88rem/1 var(--body);box-shadow:0 0 0 0 rgba(255,90,31,.5);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sc-play:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(255,90,31,.9)}
.sc-play:active{transform:scale(.97)}
.sc-play svg{width:13px;height:13px;flex:none}
.sc-play .i-pause,.scene.playing .sc-play .i-play{display:none}
.scene.playing .sc-play .i-pause{display:block}
.scene:not(.playing):not(.played) .sc-play{animation:ping 2.4s var(--ease) infinite}
.sc-steps{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.sc-steps button{display:grid;gap:7px;width:100%;padding:9px 0 5px;border:0;background:none;cursor:pointer;text-align:left;
  font:500 .62rem/1 var(--mono);letter-spacing:.01em;color:var(--on-night-2);transition:color .3s}
.sc-steps i{position:relative;display:block;height:4px;border-radius:99px;background:var(--night-line);overflow:hidden;transition:background .3s}
.sc-steps i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--signal),#FF8A4C);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.sc-steps button.lit i::after{transform:scaleX(1)}
.sc-steps button.cur,.sc-steps button:hover{color:var(--on-night)}
.sc-steps button:hover i{background:#3A4664}
.scene.playing .sc-steps button.cur i::after{transition:none;animation:sfill var(--dwell,3.4s) linear both}
@keyframes sfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.stage-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.stage-rings i{position:absolute;width:300px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,90,31,.4);opacity:0;animation:ring 7s var(--ease-io) infinite}
.stage-rings i:nth-child(2){animation-delay:2.3s}.stage-rings i:nth-child(3){animation-delay:4.6s}
.scene .phone{width:272px;box-shadow:0 60px 90px -40px rgba(0,0,0,.8),inset 0 0 0 1.5px #2A3350}
.scene .chat{background-image:radial-gradient(rgba(17,24,40,.06) 1px,transparent 1.1px);background-size:14px 14px}
.scene .chat-top{color:var(--ink)}
/* the business profile that opens a new chat: fills the screen while there is one message */
.biz{margin-bottom:auto;align-self:center;display:grid;justify-items:center;gap:3px;width:88%;padding:12px 12px 11px;border-radius:14px;background:var(--card);text-align:center;box-shadow:0 1px 0 rgba(17,24,40,.06)}
.biz .avatar{width:34px;height:34px;margin-bottom:3px}
.biz b{font:600 .84rem/1.2 var(--body);color:var(--ink)}
.biz small{font:400 .62rem/1.3 var(--mono);color:var(--muted)}
.biz-h{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:5px 9px;border-radius:999px;background:var(--paper-2);font:500 .62rem/1 var(--mono);color:var(--ink)}
.biz-h svg{width:11px;height:11px}
.msg.sys.mute{background:#3A4356}
.msg.sys.mute::before{background:#9AA3B5}
.msg.out .ai.me{color:var(--ink-2)}
.schip{position:absolute;z-index:6;display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:14px;background:var(--card);color:var(--ink);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);font:500 .76rem/1.25 var(--mono);white-space:nowrap;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.schip small{display:block;font:400 .66rem/1.2 var(--mono);color:var(--muted)}
.schip .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--paper-2);color:var(--signal-ink);flex:none}
.schip .ic svg{width:15px;height:15px}
.schip--a{top:44%;left:-7%}
.schip--b{top:28%;right:-7%}
.schip--c{top:64%;left:-5%}
.schip--d{top:80%;right:-6%}
.js .scene .schip:not(.on){opacity:0;transform:translateY(12px) scale(.94)}
.js .scene .schip.on{display:flex;animation:none}
.scene-caption{font:400 .7rem/1.3 var(--mono);color:var(--on-night-2)}
/* the phone is tappable like a story: right side on, left third back */
.scene-tap{margin-top:-4px;font:500 .6rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.js .scene-stage .phone{cursor:pointer}
.chat .day.tick{animation:tick .45s var(--ease)}
/* each story bar carries its step's time */
.sc-steps small{font:400 .56rem/1 var(--mono);color:var(--on-night-2);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s}
.sc-steps button.cur small{color:#FF8A4C}
.scene.without .sc-steps button.cur small{color:#D5DAE5}
@media (max-width:860px){.scene-tap,.sc-steps button small{display:none}}

/* Step cards on a rail. Each has an icon node on the rail, an orange top line that draws when
   the card is the one being read, and a "who does what" strip: Sam, the AI, you. */
.scene-steps{--rail:56px;--node:38px;position:relative;padding-left:var(--rail)}
.scene-steps::before,.scene-steps .prog{content:"";position:absolute;left:calc(var(--node) / 2 - 1px);top:8px;bottom:8px;width:2px;background:var(--night-line)}
.scene-steps .prog{background:linear-gradient(var(--signal),#FF8A4C);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .15s linear}
.step{min-height:min(50svh,440px);padding-block:20px;display:flex;flex-direction:column;justify-content:center;position:relative}
.step:first-child{min-height:min(40svh,380px)}
.step-ic{position:absolute;z-index:1;left:calc(var(--rail) * -1);top:50%;width:var(--node);height:var(--node);margin-top:calc(var(--node) / -2);border-radius:50%;display:grid;place-items:center;
  background:var(--night-2);border:1.5px solid var(--night-line);color:var(--on-night-2);transition:border-color .4s,background .4s,color .4s,box-shadow .4s,scale .5s var(--ease)}
.step-ic svg{width:16px;height:16px}
.step.done .step-ic{border-color:rgba(255,90,31,.65);color:#FF8A4C}
.step.active .step-ic{background:linear-gradient(135deg,var(--signal),#FF8A4C);border-color:transparent;color:var(--night);box-shadow:0 0 0 6px rgba(255,90,31,.16);scale:1.08}
.step-card{position:relative;overflow:hidden;background:var(--night-2);border:1px solid var(--night-line);border-radius:22px;padding:24px 26px 20px;display:grid;gap:12px;justify-items:start;
  transition:border-color .45s,box-shadow .45s var(--ease),translate .6s var(--ease),opacity .45s var(--ease)}
.step-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--signal),#FF8A4C);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.step.active .step-card::before{transform:scaleX(1)}
.js .step:not(.active) .step-card{opacity:.5;translate:0 8px;cursor:pointer}
.js .step:not(.active) .step-card:hover{opacity:.82;border-color:#3A4664}
.step.active .step-card{border-color:rgba(255,90,31,.45);box-shadow:0 30px 60px -36px rgba(255,90,31,.45)}
.step-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px}
.step .when{font:500 .78rem/1 var(--mono);color:var(--signal);letter-spacing:.04em}
.step .when.tick{animation:tick .45s var(--ease)}
.step-n{font:500 .7rem/1 var(--mono);color:var(--on-night-2);letter-spacing:.08em}
.step h3{font-size:clamp(1.45rem,1.1rem + 1vw,2rem);color:var(--on-night)}
.step p{color:var(--on-night-2);max-width:46ch;font-size:1rem;line-height:1.55}
.swho{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:4px;padding-top:14px;border-top:1px solid var(--night-line)}
.swho li{display:flex;align-items:flex-start;gap:9px;padding-inline:12px;font:400 .88rem/1.3 var(--body);color:var(--on-night)}
.swho li:first-child{padding-left:0}
.swho li + li{border-left:1px solid var(--night-line)}
.swho small{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);margin-bottom:5px}
.swho .cav{width:26px;height:26px;font-size:.72rem}
.swho .cav svg{width:13px;height:13px}
.swho .idle{color:var(--on-night-2)}
.js .step.active .swho li{animation:fade .5s calc(.12s + var(--i) * .09s) var(--ease) both}
/* Step 2: the visitor picks Sam's slot; the phone, the chips and the later cards follow. */
.pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;padding:12px 14px;border-radius:16px;background:rgba(255,90,31,.08);border:1px dashed rgba(255,90,31,.45)}
html:not(.js) .pick{display:none}
.pick-l{flex:0 0 100%;display:flex;align-items:center;gap:8px;font:500 .66rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night)}
.pick-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
.pick button{min-height:38px;padding:0 16px;border-radius:999px;border:1.5px solid var(--night-line);background:var(--night);color:var(--on-night);font:600 .9rem/1 var(--body);font-variant-numeric:tabular-nums;cursor:pointer;
  transition:border-color .25s,background .25s,color .25s,translate .25s var(--ease)}
.pick button:hover{border-color:var(--signal);translate:0 -1px}
.pick button:active{translate:0 0;scale:.97}
.pick button[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);border-color:transparent;color:var(--night)}
.pick-n{font:400 .82rem/1.3 var(--body);color:var(--on-night-2);margin-left:2px}
/* step 2: the first reply of each night, a dot against a bar that keeps growing */
.race{display:grid;gap:8px;width:100%;padding:12px 14px;border-radius:14px;background:var(--night);border:1px solid var(--night-line)}
.race-l{font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.race-row{display:grid;grid-template-columns:124px minmax(0,1fr) auto;align-items:center;gap:10px;font:400 .84rem/1.2 var(--body);color:var(--on-night-2)}
.race-row small{font:inherit;color:inherit}
.race-row b{min-width:5.6em;text-align:right;font:500 .76rem/1 var(--mono);color:var(--on-night-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.race-t{height:10px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.race-t i{display:block;height:100%;border-radius:99px;transform-origin:left}
.race-w .race-t i{width:9px;background:linear-gradient(90deg,var(--signal),#FF8A4C)}
.race-o .race-t i{width:100%;background:#7A859C;transition:transform 2.4s var(--ease) .35s}
.js .step:not(.active) .race-o .race-t i{transform:scaleX(0);transition-duration:0s;transition-delay:0s}
.race--with .race-w,.race--with .race-w b,.race--without .race-o,.race--without .race-o b{color:var(--on-night)}
.race--with .race-w small,.race--without .race-o small{font-weight:600}
@media (max-width:520px){.race-row{grid-template-columns:minmax(0,1fr) auto;gap:5px 10px}.race-t{grid-column:1 / -1;grid-row:2}}

.js .scene .msg,.js .scene .notif,.js .scene .day[data-s],.scene .typing{display:none}
.js .scene .on{display:block;animation:pop .45s var(--ease) both}
.js .scene .msg.sys.on,.js .scene .typing.on{display:flex}
.notif{position:absolute;z-index:5;top:48px;left:10px;right:10px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-radius:16px;padding:10px 12px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);font:400 .72rem/1.35 var(--body);color:var(--ink)}
.notif b{display:flex;justify-content:space-between;font:500 .64rem/1 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.js .scene .notif.on{animation:drop .5s var(--ease) both}
@keyframes drop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.stars{color:var(--signal);letter-spacing:2px}
/* The night without the assistant: same layout, the orange drained to grey */
.scene.without .stage-rings{display:none}
.scene.without .scene-stage::before{opacity:.4}
.scene.without .scene-stage::after{opacity:0!important}
.scene.without .sc-play{background:#D5DAE5;animation:none}
.scene.without .sc-steps i::after{background:#9AA3B5}
.scene.without .scene-steps .prog{background:#56617A}
.scene.without .step .when{color:#C3CADA}
.scene.without .step-card::before{background:#56617A}
.scene.without .step.active .step-card{border-color:#56617A;box-shadow:0 30px 60px -36px rgba(0,0,0,.85)}
.scene.without .step.done .step-ic{border-color:#56617A;color:var(--on-night-2)}
.scene.without .step.active .step-ic{background:#D5DAE5;color:var(--night);box-shadow:0 0 0 6px rgba(213,218,229,.14)}
.scene.without .schip .ic{color:var(--muted)}
.scene.without .se-tag i{background:#9AA3B5}
.scene.without .scene-end::before{display:none}
.scene.without .scene-end h3 em{background-image:linear-gradient(90deg,#9AA3B5,#D5DAE5)}

/* The week added up: closes the scene with the tally, a replay and the ask. */
.scene-end{position:relative;overflow:hidden;margin-top:clamp(24px,3.5vw,44px);display:grid;gap:22px;padding:clamp(22px,3vw,34px);border-radius:26px;background:var(--night-2);border:1px solid var(--night-line)}
.scene-end::before{content:"";position:absolute;right:-10%;top:-60%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,90,31,.2),transparent);pointer-events:none}
.se-top{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 32px}
.se-tag{display:flex;align-items:center;gap:9px;margin-bottom:12px;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.se-tag i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.scene-end h3{font-size:clamp(1.55rem,1.1rem + 1.5vw,2.35rem);line-height:1.12;letter-spacing:-.02em;color:var(--on-night);max-width:21ch}
.scene-end h3 em{font-style:normal;background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 94%/100% .12em no-repeat;padding-bottom:.02em;-webkit-box-decoration-break:slice;box-decoration-break:slice;transition:background-size 1s var(--ease) .4s}
.reveal-on .scene-end:not(.in) h3 em{background-size:0% .12em}
.se-cta{display:flex;flex-wrap:wrap;gap:10px}
.scene-end .btn--line{--fg:var(--on-night);box-shadow:inset 0 0 0 1.5px #3A4664;min-height:52px}
.scene-end .btn--line:hover{color:var(--night)}
.scene-end .btn--line svg{width:16px;height:16px}
html:not(.js) .se-replay{display:none}
/* the two nights side by side: five things, one column each (on phones one row each); the
   night being watched is the lit row, and the row labels switch nights */
.se-vs{position:relative;display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));grid-template-rows:auto auto auto;margin:0;padding:0;list-style:none;border-radius:18px;background:var(--night);border:1px solid var(--night-line);overflow:hidden}
.se-vs > li{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid;min-width:0}
.se-vs > li + li{border-left:1px solid var(--night-line)}
.se-vs > li > *{padding:12px 14px}
.vs-k{font:500 .6rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.vs-w,.vs-o{display:grid;gap:4px;align-content:start;border-top:1px solid var(--night-line);transition:background .4s}
.vs-w b,.vs-o b{font:760 clamp(1.25rem,1rem + .8vw,1.7rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.vs-w b i{font-style:normal;font-size:.7em;margin-left:.06em;color:var(--signal)}
.vs-w small,.vs-o small{font:400 .8rem/1.3 var(--body);color:var(--on-night-2)}
.vs-w b{color:var(--on-night)}
.vs-o b{color:#9AA3B5}
.scene:not(.without) .vs-w{background:rgba(255,90,31,.1)}
.scene.without .vs-o{background:rgba(213,218,229,.09)}
.scene.without .vs-o b{color:var(--on-night)}
.vs-legend button{display:flex;align-items:center;gap:8px;border:0;border-top:1px solid var(--night-line);background:none;color:var(--on-night-2);font:600 .88rem/1.2 var(--body);text-align:left;white-space:nowrap;cursor:pointer;transition:color .25s,background .25s}
.vs-legend button::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px #56617A;transition:background .25s,box-shadow .25s}
.vs-legend button:hover{color:var(--on-night);background:rgba(255,255,255,.04)}
.vs-legend button[aria-pressed="true"]{color:var(--on-night)}
.vs-legend button[aria-pressed="true"]::before{background:var(--signal);box-shadow:none}
.vs-legend button[data-set-mode="without"][aria-pressed="true"]::before{background:#D5DAE5}
html:not(.js) .vs-legend button{pointer-events:none}
.se-vs .vs-col > *{transition:opacity .6s var(--ease) calc(.15s + var(--i) * .07s),transform .7s var(--ease) calc(.15s + var(--i) * .07s),background .4s}
.reveal-on .scene-end:not(.in) .vs-col > *{opacity:0;transform:translateY(12px)}
@media (max-width:900px){
  .se-vs{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .se-vs > li{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .vs-w b,.vs-o b{white-space:normal;line-height:1.05}
  .se-vs > li + li{border-left:0;border-top:1px solid var(--night-line)}
  .se-vs > li > *{padding:11px 12px}
  .vs-w,.vs-o,.vs-legend button{border-top:0;border-left:1px solid var(--night-line)}
  .vs-legend button{white-space:normal;font-size:.8rem}
  .vs-k{align-self:center}
}
.se-note{position:relative;font:400 .68rem/1.4 var(--mono);color:var(--on-night-2)}
@media (max-width:860px){
  .scene[data-follow="sam"] .swho li:not(.sw-sam),.scene[data-follow="ai"] .swho li:not(.sw-ai){display:none}
  .scene[data-follow="sam"] .swho .sw-sam,.scene[data-follow="ai"] .swho .sw-ai{display:flex}
}

@media (min-width:861px) and (max-height:800px){.scene .phone{width:248px}.sc-time{font-size:1.7rem}}
@media (max-width:1180px) and (min-width:861px){.schip{font-size:.68rem;padding:8px 10px}.schip small{display:none}.schip--a,.schip--c{left:-3%}.schip--b,.schip--d{right:-3%}
  .swho{grid-template-columns:1fr;gap:8px}.swho li{padding:0}.swho li + li{border:0}.swho small{display:inline;margin-right:8px}}
@media (max-width:860px){
  .scene-grid{grid-template-columns:1fr;gap:0}
  .scene-phone{top:var(--header-h);z-index:2;padding-block:8px 14px;gap:6px;background:linear-gradient(var(--night) 92%,transparent)}
  .scene-stage{padding:4px 0 0}
  .scene-stage::before,.scene-stage::after,.stage-rings,.schip{display:none!important}
  .stage-hud,.scene-ctrl{width:min(100%,340px)}
  .sc-time{font-size:1.35rem}
  .sc-day{font-size:.64rem}
  .sc-owner{font-size:.62rem;padding:4px 10px 4px 4px}
  .ow-ic{width:20px;height:20px}
  .scene-ctrl{gap:10px}
  .sc-play{min-width:0;width:34px;min-height:34px;padding:0}
  .sc-play-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .sc-steps button{padding:13px 0;gap:0}
  .sc-steps button span{display:none}
  /* a shorter phone, without its input bar, leaves the cards more room to be read under it */
  .scene .phone{width:230px;aspect-ratio:auto;height:clamp(290px,41svh,380px);border-radius:34px;padding:8px}
  .scene .chat-input{display:none}
  .scene .chat{padding-bottom:14px}
  .scene .screen{border-radius:27px}
  .scene .phone::before{top:14px;width:60px;height:17px;margin-left:-30px}
  .scene .chat-top{padding:38px 9px 9px;gap:7px}
  .scene .avatar{width:26px;height:26px;font-size:.66rem}
  .scene .chat-top b{font-size:.78rem}
  .scene .chat-top small{font-size:.58rem;white-space:nowrap}
  .scene .ex{font-size:.48rem;padding:4px 5px;letter-spacing:.06em}
  .scene .notif{top:36px}
  .biz{display:none}
  .scene-caption{display:none}
  .scene-steps{--rail:40px;--node:28px}
  .step-ic svg{width:13px;height:13px}
  .step,.step:first-child{min-height:0;justify-content:flex-end;padding-block:0 64px}
  .step-ic{top:auto;bottom:104px;margin:0}
  .step-card{padding:18px 18px 16px;gap:10px}
  /* under the sticky phone there is room for one line of the strip: keep "You" */
  .swho{grid-template-columns:1fr;padding-top:12px}
  .swho li{padding:0}
  .swho li:not(.swho-you){display:none}
  .swho li + li{border:0}
  .swho small{display:inline;margin-right:8px}
  .pick{padding:10px 12px}
  .pick-n{flex:0 0 100%;margin:0}
  .se-cta,.se-cta .btn{width:100%;justify-content:center}
}
@media (max-width:860px) and (max-height:700px){.scene .phone{width:210px;height:250px}}

/* ── What it does: stacking job cards ────────────────────
   Same move as FinishPro v2's services: on a tall-enough desktop each card sticks under the
   header, a little lower than the last, and settles back (scale .95, dims) as the next slides
   over it. --p (0→1) comes from js/site.js; scale lives in `transform`, the entrance in
   `translate`, so the two never fight. Phones get a plain list that rises in. */
.split-head{display:grid;gap:18px 64px;align-items:end;margin-bottom:clamp(36px,4.5vw,56px)}
.split-head .sec-head{margin:0}
.split-lede{color:var(--ink-2);font-size:var(--step-1);line-height:1.45;max-width:44ch}
@media (min-width:980px){.split-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.split-lede{padding-bottom:6px}}
/* Job index beside the heading: five numbered chips that jump to their card. */
.jobs-intro{display:grid;gap:14px;justify-items:start}
.jobs-intro .split-lede{padding-bottom:0}
.job-nav{display:flex;flex-wrap:wrap;gap:7px}
.job-nav a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px 0 10px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);
  font:600 .88rem/1 var(--body);color:var(--ink);text-decoration:none;transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.job-nav a i{font:500 .68rem/1 var(--mono);font-style:normal;color:var(--signal-ink);transition:color .25s}
.job-nav a:hover{background:var(--ink);color:var(--paper);box-shadow:none;translate:0 -1px}
.job-nav a:hover i{color:#FF8A4C}

.jobs{display:grid;gap:clamp(20px,3vh,32px);--tab:44px}
.job{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:auto;background:var(--card);border-radius:24px;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(17,24,40,.45);transform-origin:50% 0;transform:scale(calc(1 - .05 * var(--p,0)));
  transition:opacity .9s var(--ease),translate 1s var(--ease)}
.job::after{content:"";position:absolute;inset:var(--tab) 0 0;z-index:5;background:var(--night);opacity:calc(var(--p,0) * .22);pointer-events:none}
.reveal-on .job:not(.seen){opacity:0;translate:0 40px}
@media (min-width:1000px){.job{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:var(--tab) 1fr}}
/* Stack only when there is room for the card plus the four title tabs peeking above it */
@media (min-width:1000px) and (min-height:760px){
  .job{position:sticky;top:calc(var(--header-h) + 14px + var(--i) * var(--tab));
    min-height:min(580px,calc(100svh - var(--header-h) - 14px - 4 * var(--tab) - 18px))}
}
@media (min-width:1000px) and (max-height:759px){.job{min-height:520px}}

/* Title tab: the part of each card that stays visible in the stack, like a folder tab */
.job-tab{grid-column:1 / -1;display:flex;align-items:center;gap:14px;height:var(--tab);padding:0 clamp(16px,2vw,24px);background:var(--night);color:var(--on-night);
  border-bottom:1px solid var(--night-line);min-width:0}
.jt-n{font:500 .78rem/1 var(--mono);letter-spacing:.06em;color:var(--signal)}
.jt-t{margin:0;font:650 1rem/1.2 var(--display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-tab .job-tag{flex:none}
.jt-m{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:500 .72rem/1 var(--mono);color:var(--on-night-2);white-space:nowrap}
.jt-m svg{width:14px;height:14px;color:var(--signal)}
.jt-ic{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:none;background:rgba(255,90,31,.16);color:#FF8A4C}
.jt-ic svg{width:14px;height:14px}
.jt-in{display:none;align-items:center;gap:6px;min-height:28px;font:500 .72rem/1 var(--mono);color:var(--on-night-2);white-space:nowrap;text-decoration:none;transition:color .25s}
a.jt-in:hover{color:var(--on-night);text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:4px}
/* previous / next job, at the end of every title tab */
.jt-nav{display:inline-flex;gap:4px;margin-left:8px;flex:none}
html:not(.js) .jt-nav{display:none}
.jt-nav button{width:28px;height:28px;border-radius:50%;border:1px solid var(--night-line);background:var(--night-2);color:var(--on-night);display:grid;place-items:center;cursor:pointer;transition:border-color .25s,background .25s,translate .25s var(--ease)}
.jt-nav svg{width:13px;height:13px}
.jt-nav button:hover:not(:disabled){border-color:var(--signal);background:var(--signal);color:var(--night)}
.jt-nav button:disabled{opacity:.35;cursor:default}
.jt-in svg{width:14px;height:14px;color:var(--signal)}
.jt-in::before{content:"";width:1px;height:14px;background:var(--night-line);margin-right:6px}
@media (min-width:1200px){.jt-in{display:inline-flex}.job-foot .job-in{display:none}}
.jt-seg{display:inline-flex;gap:4px;margin-left:6px}
.jt-seg i{width:16px;height:3px;border-radius:99px;background:var(--night-line)}
.jt-seg i.on{background:var(--signal)}
@media (max-width:640px){.jt-m,.jt-seg,.jt-nav,.jt-ic{display:none}.job-tab .job-tag{margin-left:auto}}   /* phones: no room for the icon and arrows beside the title */
.js .vwin{cursor:pointer}   /* tapping the example shows its next version */
@media (min-width:1000px) and (min-height:760px){.js .job-tab{cursor:pointer}.js .job-tab:hover .jt-t{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:4px}}

.job-media{--px:clamp(20px,3vw,44px);position:relative;background:var(--night);display:flex;flex-direction:column;align-items:center;padding:22px var(--px) 0;min-height:360px;overflow:hidden}
.job-media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1.1px,transparent 1.2px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 80%)}
.job-media::after{content:"";position:absolute;width:80%;aspect-ratio:1;left:50%;top:55%;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.26),transparent 65%);pointer-events:none;transition:opacity .5s}
/* The example sits in a framed window: channel on the left of its bar, "Example" on the right */
.vwin{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;width:min(100%,440px);border-radius:18px;background:rgba(21,28,44,.78);border:1px solid var(--night-line);box-shadow:0 30px 60px -34px rgba(0,0,0,.9);overflow:hidden}
.vwin-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 9px 14px;border-bottom:1px solid var(--night-line)}
.vwin .vigs{width:auto;padding:16px 16px 18px}
.job-ex{font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2);border:1px solid var(--night-line);border-radius:999px;padding:6px 9px}
.job-ch{display:inline-flex;align-items:center;gap:7px;font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night)}
.job-ch i{width:6px;height:6px;border-radius:50%;background:#1FA463}
.job-ex b{font-weight:500;color:var(--on-night)}     /* " · restaurant": whose example it is, once a business is picked */
@media (max-width:520px){.job-ex b{display:none}}
.job-try{position:relative;z-index:1;align-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px 12px;margin:18px calc(var(--px) * -1) 0;padding:13px var(--px) 15px;
  border-top:1px solid var(--night-line);background:rgba(21,28,44,.78)}
html:not(.js) .job-try{display:none}
.try-l{display:flex;align-items:center;gap:8px;font:500 .62rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night)}
.try-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
.try-b{grid-column:1;display:flex;flex-wrap:wrap;gap:7px}
.try-b button{min-height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--night-line);background:var(--night);color:var(--on-night);font:600 .86rem/1 var(--body);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s,translate .25s var(--ease)}
.try-b button:hover{border-color:var(--signal);translate:0 -1px}
.try-b button:active{translate:0 0;scale:.97}
.try-b button[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);border-color:transparent;color:var(--night)}
.try-re{grid-column:2;grid-row:1 / span 2;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--night-line);background:var(--night);color:var(--on-night);display:grid;place-items:center;cursor:pointer;
  transition:border-color .25s,rotate .5s var(--ease)}
.try-re svg{width:16px;height:16px}
.try-re:hover{border-color:var(--signal);rotate:-90deg}
.job-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(22px,2.6vw,40px) clamp(24px,3.2vw,48px)}
.job-hook{font:650 clamp(1.7rem,1.25rem + 1.35vw,2.45rem)/1.06 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.job-tag{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night);background:linear-gradient(90deg,var(--signal),#FF8A4C);padding:7px 10px;border-radius:999px}
.job-desc{margin-top:14px;max-width:34rem;color:var(--ink-2);font-size:1.02rem;line-height:1.55}
/* Without / With it */
.job-ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:18px}
.ba{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:14px;font:500 .92rem/1.35 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);
  text-align:left;cursor:pointer;transition:opacity .55s var(--ease),transform .6s var(--ease),box-shadow .3s,translate .3s var(--ease)}
.ba:hover{translate:0 -2px}
.ba[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.ba--yes[aria-pressed="true"]{box-shadow:0 0 0 2px var(--signal)}
.js .ba[aria-pressed="false"] small::after{content:" · tap to see";letter-spacing:.06em}
.ba small{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.ba-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.ba-ic svg{width:12px;height:12px}
.ba--no{color:var(--muted)}
.ba--no .ba-ic{background:var(--paper-2);color:var(--muted)}
.ba--yes{border-color:rgba(255,90,31,.45);background:#FFF4EE;transition-delay:.25s,.25s,0s,0s}
.ba--yes small{color:var(--signal-ink)}
.ba--yes .ba-ic{background:var(--signal);color:var(--night)}
.reveal-on .job:not(.live) .ba{opacity:0;transform:translateY(10px)}
.job.live .ba--no{transition-delay:1.2s,1.2s,0s,0s}.job.live .ba--yes{transition-delay:1.5s,1.5s,0s,0s}
@media (max-width:520px){.job-ba{grid-template-columns:1fr}}
/* the number from the research that makes this job matter, linked to its card above */
.job-why{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-top:16px;color:var(--ink-2);font-size:.92rem;line-height:1.4}
.job-why b{font:760 1.7rem/1 var(--display);letter-spacing:-.035em;color:var(--signal-large);font-variant-numeric:tabular-nums;white-space:nowrap}
.job-why a{display:inline-block;padding-block:2px;color:var(--signal-ink);font-weight:600;white-space:nowrap;text-underline-offset:3px}
/* "Add to my shortlist": the same tick as the picker under the cards */
.job-add{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 16px 0 12px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);font:600 .95rem/1 var(--body);color:var(--ink);cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
html:not(.js) .job-add{display:none}
.job-add:hover{box-shadow:inset 0 0 0 1.5px var(--ink);translate:0 -1px}
.add-ic{position:relative;width:22px;height:22px;border-radius:50%;flex:none;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .25s,box-shadow .25s}
.add-ic::before,.add-ic::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),width .3s,background .25s}
.add-ic::after{transform:rotate(90deg)}
.job-add[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.job-add[aria-pressed="true"] .add-ic{background:linear-gradient(135deg,var(--signal),#FF8A4C);box-shadow:none}
.job-add[aria-pressed="true"] .add-ic::before{background:var(--night);width:6px;transform:translate(-2.6px,1.6px) rotate(45deg)}
.job-add[aria-pressed="true"] .add-ic::after{background:var(--night);transform:translate(1.4px,0) rotate(-50deg)}
.job-for{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.job-for > span{font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.job-tags{display:flex;flex-wrap:wrap;gap:7px}
.job-tags li{font:400 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:8px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.job-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px;padding-top:18px;border-top:1px dashed var(--line);width:100%}
.job-in{display:inline-flex;align-items:center;gap:8px;min-height:28px;font:500 .78rem/1.3 var(--mono);color:var(--ink);text-decoration:none}
a.job-in:hover{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:4px}
/* a short note in the card when a job goes on, or off, the shortlist; it sits over the line above
   the buttons for a few seconds, so the card keeps its height */
.job-foot{position:relative}
.job-toast{position:absolute;left:0;bottom:calc(100% + 10px);z-index:3;max-width:100%;margin:0;padding:10px 14px;border-radius:14px;background:var(--night);color:var(--on-night);font:500 .9rem/1.4 var(--body);box-shadow:0 20px 40px -18px rgba(17,24,40,.6);animation:pop .35s var(--ease)}
.job-toast[hidden]{display:none}
.job-why{transition:opacity .25s}
.job-body:has(.job-toast:not([hidden])) .job-why{opacity:0}   /* the note takes the place of the line it sits over */
.job-toast a{display:inline-block;padding-block:3px;color:#FF8A4C;font-weight:600;white-space:nowrap;text-underline-offset:3px}
/* the plans a job's "In: …" link points at light up for a moment in pricing */
.tier.hl-plan,.custom.hl-plan{box-shadow:0 0 0 2px var(--signal),0 30px 60px -30px rgba(255,90,31,.65)}
.custom{transition:box-shadow .45s var(--ease)}
/* jobs on the shortlist carry a tick in the index beside the heading */
.job-nav a.on::after{content:"✓";margin-left:1px;font-weight:700;color:var(--signal-ink)}
.job-nav a.on:hover::after{color:#FF8A4C}
.job-in svg{width:16px;height:16px;color:var(--signal-ink);flex:none}
.btn--line{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);min-height:48px}

/* The examples. Resting state = finished (no JS, reduced motion, screenshots); JS adds
   .reveal-on and each card's parts play in once, in order, when the card is .live. */
.vigs{position:relative;z-index:1;flex:1;display:grid;align-items:center;width:min(100%,400px)}
.vig{grid-area:1 / 1;display:grid;gap:11px;min-width:0}
.vig:not(.cur){visibility:hidden}
.job.reset .v,.job.reset .vs em,.job.reset .stars span{transition:none!important}
.v{transition:opacity .55s var(--ease) var(--t,0s),transform .65s var(--ease) var(--t,0s)}
.reveal-on .job:not(.play) .v{opacity:0;transform:translateY(12px) scale(.97)}
.vc-top{display:flex;align-items:center;gap:10px;color:var(--on-night);margin-bottom:4px}
.vc-top b,.vrev-top b{display:block;font:600 .9rem/1.2 var(--body)}
.vc-top small{display:block;font:400 .68rem/1.3 var(--mono);color:var(--on-night-2)}
.vig .avatar{background:var(--on-night);color:var(--night)}
.vb{max-width:88%;padding:9px 12px 7px;border-radius:14px;font:400 .88rem/1.4 var(--body);color:var(--ink);background:#fff;margin:0}
.vb.in{justify-self:start;border-bottom-left-radius:4px}
.vb.out{justify-self:end;background:var(--bubble-out);border-bottom-right-radius:4px}
.vb time{display:block;text-align:right;font:400 .62rem/1 var(--mono);color:var(--muted);margin-top:4px}
.vb .ai{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#A8340A;   /* 5.2:1 on the blue reply bubble */
margin-bottom:4px}
.vchip{justify-self:center;display:flex;align-items:center;gap:8px;margin:4px 0 0;background:var(--signal);color:var(--night);font:500 .72rem/1.3 var(--mono);padding:8px 13px;border-radius:999px}
.vchip i{width:7px;height:7px;border-radius:50%;background:var(--night)}
.vcall{display:flex;align-items:center;gap:12px;background:var(--night-2);border:1px solid var(--night-line);border-radius:18px;padding:14px 16px;color:var(--on-night)}
.vcall b{display:block;font:600 .95rem/1.2 var(--body)}
.vcall small{display:block;font:400 .72rem/1.3 var(--mono);color:var(--on-night-2);margin-top:3px}
.vcall-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,90,31,.16);color:var(--signal);flex:none}
.vcall-ic svg{width:20px;height:20px}
.vlapse{justify-self:center;margin:0;font:500 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-2);display:flex;align-items:center;gap:10px}
.vlapse::before,.vlapse::after{content:"";width:28px;height:1px;background:var(--night-line)}
.vnote{background:rgba(255,255,255,.97);border-radius:16px;padding:12px 14px;font:400 .84rem/1.4 var(--body);color:var(--ink);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.vnote b{display:flex;justify-content:space-between;font:500 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.vslots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.vs{position:relative;overflow:hidden;border-radius:12px;background:var(--night-2);border:1px solid var(--night-line);padding:10px 10px 9px;font:500 .78rem/1.2 var(--body);color:var(--on-night-2)}
.vs small{display:block;font:500 .66rem/1 var(--mono);color:var(--on-night);margin-bottom:5px}
.vs em{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:9px 10px;font-style:normal;font-weight:600;color:var(--night);background:var(--signal);transform-origin:bottom;
  transition:transform .6s var(--ease) calc(var(--t,0s) + .7s)}
.vs em::before{content:"10:00";font:500 .66rem/1 var(--mono);margin-bottom:5px}
.reveal-on .job:not(.play) .vs em{transform:scaleY(0)}
.vs.ok{border-color:rgba(255,90,31,.7);color:var(--on-night);background:rgba(255,90,31,.14)}
.vs.miss{border:1px dashed #6A7590;color:var(--on-night)}
/* The "without it" version of an example: grey where the others are orange */
.vb .ai.me{color:var(--ink-2)}
.vig[data-v="without"] .vchip{background:#3A4356;color:var(--on-night)}
.vig[data-v="without"] .vchip i{background:#9AA3B5}
.vig[data-v="without"] .vcall-ic{background:rgba(255,255,255,.08);color:var(--on-night-2)}
.vig[data-v="without"] .vdraft small{color:var(--on-night-2)}
.vig[data-v="without"] .vtl li.done::before{background:#9AA3B5;border-color:#9AA3B5;box-shadow:none}
.vig[data-v="without"] .vtl li.done b{color:var(--on-night)}
.job.wo .job-media::after{opacity:.2}
.job.wo .job-ch i{background:#9AA3B5}
.vrev{background:#fff;border-radius:16px;padding:14px 16px;color:var(--ink);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.vrev-top{display:flex;align-items:center;gap:10px}
.vrev-top small{display:block;font:400 .66rem/1.3 var(--mono);color:var(--muted)}
.vrev .avatar{background:var(--ink);color:#fff}
.stars{margin:10px 0 6px;font-size:1.15rem;letter-spacing:2px;line-height:1}
.stars span{color:var(--signal-ink);display:inline-block;transition:opacity .3s,transform .45s var(--ease);transition-delay:calc(.4s + var(--s) * .12s)}
.stars span.off{color:var(--muted)}
.reveal-on .job:not(.play) .stars span{opacity:.2;transform:scale(.6)}
.vrev-txt{margin:0;font:400 .88rem/1.45 var(--body);color:var(--ink-2)}
.vdraft{border:1px dashed rgba(255,255,255,.28);border-radius:16px;padding:12px 14px;color:var(--on-night)}
.vdraft small{display:block;font:500 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--signal);margin-bottom:7px}
.vdraft p{margin:0;font:400 .86rem/1.45 var(--body);color:var(--on-night)}
.vbtns{display:flex;gap:8px;margin-top:10px}
.vbtns i{font:600 .74rem/1 var(--body);font-style:normal;padding:8px 12px;border-radius:999px;border:1px solid var(--night-line);color:var(--on-night)}
.vbtns i.ok{background:var(--signal);border-color:var(--signal);color:var(--night)}
.vtl{--c:50px;position:relative;display:grid;gap:14px;padding-left:4px}
.vtl::before{content:"";position:absolute;left:calc(var(--c) + 13.75px);top:10px;bottom:10px;width:1.5px;background:var(--night-line)}
.vtl li{position:relative;display:grid;grid-template-columns:var(--c) 1fr;gap:22px;align-items:start;color:var(--on-night-2);font:400 .84rem/1.4 var(--body)}
.vtl li::before{content:"";position:absolute;left:calc(var(--c) + 4px);top:5px;width:9px;height:9px;border-radius:50%;background:var(--night);border:2px solid var(--on-night-2)}
.vtl li.done::before{background:var(--signal);border-color:var(--signal);box-shadow:0 0 0 5px rgba(255,90,31,.18)}
.vtl small{font:500 .7rem/1.5 var(--mono);color:var(--on-night-2);white-space:nowrap}
.vtl b{display:block;font:600 .92rem/1.3 var(--body);color:var(--on-night)}
.vtl li.done b{color:var(--signal)}

/* Shortlist picker under the cards: tick jobs, see the plan that covers them (js/site.js reads
   the plan names and prices from the pricing section, so there is one place to change them). */
.jfind{margin-top:clamp(24px,3.5vw,44px)}
.jfind .calc-in{align-content:center}
.jf-opts{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.jf-opts label{position:relative;display:inline-flex;cursor:pointer}
.jf-opts input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.jf-opts span{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;font:600 .95rem/1 var(--body);color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.jf-opts span i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font:500 .6rem/1 var(--mono);font-style:normal;color:var(--signal-ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s,box-shadow .25s}
.jf-opts label:hover span{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.jf-opts input:checked + span{background:var(--ink);color:var(--paper);box-shadow:none}
.jf-opts input:checked + span i{background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);box-shadow:none;font-size:0}
.jf-opts input:checked + span i::after{content:"✓";font:700 .72rem/1 var(--body)}
.jf-opts input:focus-visible + span{outline:2px solid var(--signal);outline-offset:3px}
.jf-plan{font:760 clamp(2.2rem,1.5rem + 2.6vw,3.6rem)/1 var(--display);letter-spacing:-.04em;color:var(--on-night)}
.jf-plan span{background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 96%/100% .08em no-repeat}
.jf-plan.bump{animation:bump .35s var(--ease)}
.jf-price{font:400 1.05rem/1.4 var(--body);color:var(--on-night-2)}
.jf-price b{font:650 1.5rem/1 var(--display);letter-spacing:-.02em;color:var(--on-night);margin-right:2px}
.jf-price span{white-space:nowrap}
/* which plan covers which pick: one row per plan, one small numbered chip per ticked job */
.jf-cover{justify-self:stretch;display:grid;gap:7px;padding:12px 14px;border-radius:14px;background:var(--night-2);border:1px solid var(--night-line)}
.jf-cover:empty{display:none}
.jf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 .88rem/1.2 var(--body);color:var(--on-night-2)}
.jf-row b{font-weight:600}
.jf-row.yours{color:var(--on-night)}
.jf-row.yours b::after{content:"your plan";margin-left:8px;padding:3px 7px;border-radius:999px;background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night);font:500 .56rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.jf-chips{display:inline-flex;gap:4px;flex:none}
.jf-chips i{width:27px;height:22px;border-radius:7px;display:grid;place-items:center;font:500 .62rem/1 var(--mono);font-style:normal;animation:pop .3s var(--ease) both}
.jf-chips i.ok{background:rgba(255,90,31,.2);color:#FF8A4C;box-shadow:inset 0 0 0 1px rgba(255,90,31,.5)}
.jf-chips i.no{color:#7A859C;box-shadow:inset 0 0 0 1px var(--night-line);text-decoration:line-through}
.jfind .calc-note a{display:inline-block;padding-block:6px;color:var(--on-night);text-underline-offset:3px}
.jfind .calc-note a:hover{color:var(--signal)}

/* Size-specific trims for the stack; they must come after the base rules above. */
@media (min-width:1000px) and (max-width:1199px){.job-foot .job-in{display:none}.job-body{padding-block:18px}.job-foot{margin-top:14px;padding-top:14px;gap:8px}.job-foot .btn,.job-add{min-height:44px;font-size:.9rem;padding-inline:13px}.job-why{margin-top:12px}.job-ba{margin-top:12px}.job-hook{font-size:1.5rem}.job-desc{margin-top:10px;font-size:.95rem;line-height:1.5}.ba{padding:10px 12px;font-size:.88rem}}   /* no room in the stack at this width */
@media (min-width:1000px) and (max-height:800px){.job-media{padding-top:14px}.vwin-bar{padding-block:6px}.vwin .vigs{padding:10px 14px}.vig{gap:8px}.job-try{margin-top:10px;padding-block:9px 11px}}
@media (max-width:999px){.job-media{min-height:320px}}
@media (max-width:520px){.job-media{--px:16px;padding-top:16px;min-height:0}.job-body{padding:24px 20px 28px}.vb{font-size:.84rem}.try-b button{padding:0 12px;font-size:.82rem}}

/* ── Sectors ─────────────────────────────────────────────── */
.sectors{background:var(--paper-2)}
/* "Pick your business" showcase: sector tabs left, a night panel right that plays the chosen
   business's conversation (message -> AI reply -> outcome chip), then what it does and the
   best-fit plan. js/site.js auto-advances with a progress line while in view; hover/focus
   pauses; choosing a tab stops it. Each conversation ends with the customer's answer, and the
   "Your turn" bar lets the visitor give the other one. No JS: every panel shows, stacked. */
/* The examples' hours on a 24-hour line: a hatched band for office hours, one dot per business
   (all of them outside the band), the chosen one orange with its time and name above it. */
.sx-day{display:grid;gap:8px;margin-bottom:16px;padding:14px 20px 12px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
html:not(.js) .sx-day{display:none}
.sd-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px}
.sd-l,.sd-key{display:inline-flex;align-items:center;gap:8px;font:500 .64rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.sd-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.sd-key{letter-spacing:.06em;color:var(--muted)}
.sd-key i{width:20px;height:9px;border-radius:99px;background:repeating-linear-gradient(135deg,#C3C9D6 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px #C3C9D6}
.sd-line{position:relative;height:64px;margin-inline:6px}
.sd-line::before{content:"";position:absolute;left:0;right:0;top:32px;height:4px;border-radius:99px;background:var(--paper-2)}
.sd-open{position:absolute;left:37.5%;width:37.5%;top:27px;height:14px;border-radius:99px;background:repeating-linear-gradient(135deg,#C3C9D6 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px #C3C9D6}
.sd-dot{position:absolute;left:var(--x);top:34px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--card);background:var(--ink);cursor:pointer;transition:scale .3s var(--ease),background .25s,box-shadow .25s}
.sd-dot[hidden]{display:none}
.sd-dot::after{content:"";position:absolute;inset:-9px}
.sd-dot:hover{scale:1.25;background:var(--signal-ink)}
.sd-dot.on{z-index:1;scale:1.45;background:var(--signal);box-shadow:0 0 0 4px rgba(255,90,31,.22)}
.sd-now{position:absolute;left:var(--x,96%);top:0;translate:-50% 0;padding:5px 9px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 .68rem/1 var(--mono);white-space:nowrap;transition:left .45s var(--ease)}
.sd-now[data-edge="l"]{translate:-14px 0}
.sd-now[data-edge="r"]{translate:calc(-100% + 14px) 0}
.sd-now:empty{display:none}
.sd-h{position:absolute;left:var(--x);top:46px;translate:-50% 0;font:400 .58rem/1 var(--mono);color:var(--muted)}
.sd-h--a{translate:0 0}
.sd-h--z{translate:-100% 0}
@media (max-width:520px){.sx-day{padding-inline:14px}.sd-key{letter-spacing:0}.sd-h--m{display:none}}
.sx{display:grid;gap:12px 18px;align-items:start}
@media (min-width:980px){
  .sx{grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:10px 20px;align-items:stretch}
  .sx-pick{grid-column:1;grid-row:1}
  .sx-tabs{grid-column:1;grid-row:2}
  .sx-other,.sx-own{grid-column:1;grid-row:3;align-self:end}
  .sx-panels{grid-column:2;grid-row:1 / span 3}
  .sx-panel{height:100%}
}
.sx-pick{display:flex;align-items:center;gap:8px;padding-left:12px;font:500 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.sx-pick i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
html:not(.js) .sx-pick{display:none}
/* Ninth row: a business that is not listed goes straight to WhatsApp */
.sx-other{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 16px;border-radius:16px;border:1.5px dashed #AEB6C6;color:var(--ink);text-decoration:none;
  transition:border-color .3s,background .3s,box-shadow .35s var(--ease)}
.sx-other b{display:block;font:650 1.02rem/1.2 var(--display);letter-spacing:-.01em}
.sx-other small{display:block;margin-top:3px;font:400 .86rem/1.3 var(--body);color:var(--ink-2)}
.sx-other .arr{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--ink);color:var(--paper);transition:background .3s,color .3s,translate .35s var(--ease)}
.sx-other:hover{border-color:var(--ink);border-style:solid;background:var(--card);box-shadow:0 18px 36px -26px rgba(17,24,40,.4)}
.sx-other:hover .arr{background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night);translate:3px 0}
/* With JS the row is a small form instead: type what you do, get your own example as a ninth tab */
.js .sx-other{display:none}
.sx-own{display:grid;gap:10px;padding:12px 14px 14px;border-radius:16px;border:1.5px dashed #AEB6C6;transition:border-color .3s,background .3s}
html:not(.js) .sx-own{display:none}
.sx-own:focus-within{border-color:var(--ink);border-style:solid;background:var(--card)}
.sx-own label{cursor:text}
.sx-own b{display:block;font:650 1.02rem/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.sx-own small{display:block;margin-top:3px;font:400 .86rem/1.3 var(--body);color:var(--ink-2)}
.sx-own-row{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.sx-own input{flex:1;min-width:0;height:36px;border:0;outline:0;background:transparent;font:400 1rem/1 var(--body);color:var(--ink)}
.sx-own input::placeholder{color:var(--muted)}
.sx-own button{flex:none;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:600 1rem/1 var(--body);cursor:pointer;transition:background .25s,color .25s,translate .25s var(--ease)}
.sx-own button:hover{background:var(--signal);color:var(--night);translate:2px 0}
.sx-tab[hidden],.sx-panel[hidden]{display:none}
/* the awkward hour of each business's example, on its tab */
.sx-at{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:500 .7rem/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.sx-at svg{width:12px;height:12px}
.sx-tab[aria-selected="true"] .sx-at{color:var(--signal-ink)}
.sx-tabs{display:grid;gap:6px}
.sx-tab{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:16px;padding:9px 14px 9px 10px;color:var(--ink);font:inherit;
  transition:background .3s,border-color .3s,box-shadow .35s var(--ease)}
.sx-tab:hover{background:color-mix(in srgb,var(--card) 70%,transparent)}
.sx-tab[aria-selected="true"]{background:var(--card);border-color:var(--line);box-shadow:0 18px 36px -26px rgba(17,24,40,.4)}
.sx-tab .sx-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);flex:none;transition:background .3s,color .3s,box-shadow .3s}
.sx-tab .sx-ic svg{width:21px;height:21px}
.sx-tab[aria-selected="true"] .sx-ic{background:var(--signal);color:var(--night);box-shadow:none}
.sx-tn b{display:block;font:650 1.02rem/1.2 var(--display);letter-spacing:-.01em}
/* the business the visitor chose (here or anywhere on the page): it is the one the whole page uses */
@media (min-width:980px){.sx-tab.sx-mine::after{content:"Yours";position:absolute;top:5px;right:12px;padding:3px 6px;border-radius:999px;background:#FFE7DB;font:500 .54rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);animation:pop .35s var(--ease) both}}   /* in the corner, so the row keeps its height */
.sx-tn small{display:block;margin-top:3px;font:400 .66rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sx-tab[aria-selected="true"] .sx-tn small{color:var(--signal-ink)}
.sx-bar{position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:var(--signal);transform:scaleX(0);transform-origin:left}
.sx.auto .sx-tab[aria-selected="true"] .sx-bar{animation:sx-bar var(--sx-dur,7s) linear both}
.sx.auto.paused .sx-tab[aria-selected="true"] .sx-bar{animation-play-state:paused}
@keyframes sx-bar{to{transform:none}}

.sx-panels{display:grid;gap:14px}
.sx-panel{display:grid;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(17,24,40,.45)}
@media (min-width:760px){.sx-panel{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.js .sx-panel:not(.active){display:none}
.sx-panel.active{animation:fade .5s var(--ease) both}
.sx-panel:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.sx-screen{--px:clamp(18px,2.4vw,30px);position:relative;display:flex;flex-direction:column;padding:22px var(--px) 0;background:var(--night);min-height:340px}
.sx-chat{flex:1;display:grid;gap:10px;align-content:center;padding-block:12px 18px}
.sx-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,90,31,.18),transparent 70%) 50% 60%/80% 80% no-repeat,radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.1px) 0 0/18px 18px}
.sx-screen > *{position:relative}
.sx-head{display:flex;align-items:center;gap:10px;color:var(--on-night);padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--night-line)}
.sx-head .avatar{background:var(--on-night);color:var(--night)}
.sx-head b{display:block;font:600 .9rem/1.2 var(--body)}
.sx-head small{display:block;margin-top:2px;font:400 .66rem/1.3 var(--mono);color:var(--on-night-2)}
.sx-head .wave{margin-left:8px;height:11px;vertical-align:-1px}
.sx-head .ex{margin-left:auto;font:500 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);border:1px solid var(--night-line);border-radius:999px;padding:5px 8px}
.sx-screen .vb{max-width:90%}
.vb .who{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sx-pre{justify-self:center;margin:0;display:flex;align-items:center;gap:8px;font:500 .66rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-2)}
.sx-pre::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.sx-screen .vchip{justify-self:start}
/* Where the owner is at that hour */
.sx-sit{justify-self:center;margin:0 0 2px;display:inline-flex;align-items:center;gap:8px;font:500 .68rem/1.2 var(--mono);letter-spacing:.03em;color:var(--on-night);background:var(--night-2);border:1px solid var(--night-line);border-radius:999px;padding:6px 12px 6px 10px}
.sx-sit::before{content:"";width:7px;height:7px;border-radius:50%;background:#B4C4FF;flex:none}
/* "Your turn": the customer's other answer (shares .try-l / .try-b with the job cards) */
/* With the assistant / without it: the same enquiry, answered in seconds or hours later */
.sx-mode{align-self:center;display:inline-flex;gap:2px;margin-top:8px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--night-line)}
.sx-mode button{min-height:26px;padding:0 11px;border:0;border-radius:999px;background:transparent;font:500 .6rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-2);cursor:pointer;transition:background .25s,color .25s}
.sx-mode button:hover{color:var(--on-night)}
.sx-mode button[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night)}
.sx-panel.wo .sx-mode button[aria-pressed="true"]{background:#56617A;color:#fff}
.sx-chat[hidden],.sx-tl[hidden]{display:none}
.sx-panel.wo .sx-screen::before{filter:grayscale(1);opacity:.55}       /* the orange drains from the stage */
.sx-wo .vchip{background:#3A4356;color:var(--on-night)}
.sx-wo .vchip i{background:#9AA3B5}
.sx-wo .vlapse{text-align:center}
.sx-pre--no::before{background:#9AA3B5}
.sx-tl.sx-tl--wo::before{background:#9AA3B5}
.sx-tl.sx-tl--wo li::before{background:#9AA3B5}
.sx-tl.sx-tl--wo em{background:var(--paper-2);color:var(--ink)}
.sx-try{display:grid;gap:9px;margin:0 calc(var(--px) * -1);padding:13px var(--px) 15px;border-top:1px solid var(--night-line);background:rgba(21,28,44,.78)}
html:not(.js) .sx-try{display:none}
.sx-type input{font-size:1rem}
/* play: parts arrive in order each time a panel becomes active (resting state = all shown) */
.js .sx-panel:not(.play) .v{opacity:0;transform:translateY(12px) scale(.97)}
.sx-info{display:flex;flex-direction:column;gap:16px;padding:clamp(22px,2.6vw,32px)}
/* name + previous / next on top, the plan and the ask at the bottom, the rest centred between */
.sx-itop{display:grid;gap:10px}
.sx-itop .sx-nav{order:-1;justify-self:end}
.sx-nav{flex:none;display:inline-flex;align-items:center;gap:6px;font:500 .68rem/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
html:not(.js) .sx-nav{display:none}
.sx-nav button{width:32px;height:32px;border:0;border-radius:50%;display:grid;place-items:center;padding:0 0 2px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 1.1rem/1 var(--body);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.sx-nav button:hover{background:var(--ink);color:var(--paper);box-shadow:none}
.sx-mid{display:grid;gap:14px;margin-block:auto}
.sx-via{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sx-via small{flex:0 0 100%;margin-bottom:2px;font:500 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sx-via span{padding:7px 11px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:500 .8rem/1 var(--body);color:var(--ink)}
/* the example's own clock: asked, answered, sorted */
.sx-tl{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px}
.sx-tl::before{content:"";position:absolute;left:5px;right:33%;top:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--signal),#FF8A4C)}
.sx-tl li{position:relative;font:500 .92rem/1.2 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.sx-tl li::before{content:"";position:absolute;left:0;top:-14px;width:10px;height:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--card)}
.sx-tl small{display:block;margin-bottom:3px;font:500 .58rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sx-tl em{display:inline-block;margin-left:7px;padding:4px 7px;border-radius:999px;background:#FFE7DB;font:500 .62rem/1 var(--mono);font-style:normal;color:var(--signal-ink);vertical-align:1px;white-space:nowrap}
.sx-info > *{transition:opacity .5s var(--ease) var(--k,0s),transform .6s var(--ease) var(--k,0s)}
.sx-info > :nth-child(2){--k:.08s}.sx-info > :nth-child(3){--k:.16s}.sx-info > :nth-child(4){--k:.24s}.sx-info > :nth-child(5){--k:.32s}
.js .sx-panel:not(.play) .sx-info > *{opacity:0;transform:translateY(10px)}
.sx-h{display:flex;align-items:center;gap:12px;font:700 clamp(1.3rem,1.1rem + .6vw,1.65rem)/1.1 var(--display);letter-spacing:-.02em}
.sx-h .sx-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night)}
.sx-h .sx-ic svg{width:22px;height:22px}
.sx-how{font-size:1.05rem;line-height:1.5;color:var(--ink-2)}
.sx-does{display:grid;gap:9px}
.sx-does li{display:flex;align-items:flex-start;gap:10px;font:500 .98rem/1.35 var(--body);color:var(--ink)}
.sx-does svg{width:20px;height:20px;padding:4px;border-radius:50%;background:#FFE7DB;color:var(--signal-ink);flex:none}
.sx-ask{width:100%;justify-content:center}
.sx-fit{margin-top:2px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;text-decoration:none;color:var(--ink);
  padding:14px 16px;border-radius:16px;background:var(--paper);border:1px solid var(--line);transition:border-color .3s,box-shadow .35s var(--ease),translate .35s var(--ease)}
.sx-fit > span:first-child{grid-column:1;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink)}
.sx-fit b{grid-column:1;font:700 1.15rem/1.2 var(--display);letter-spacing:-.01em}
.sx-fit em{grid-column:2;grid-row:1 / span 2;font:500 .82rem/1 var(--mono);font-style:normal;color:var(--night);background:linear-gradient(90deg,var(--signal),#FF8A4C);border-radius:999px;padding:8px 11px}
.sx-fit .arr{display:none}
@media (hover:hover) and (pointer:fine){.sx-fit:hover{border-color:rgba(185,58,11,.4);translate:0 -2px;box-shadow:0 18px 34px -24px rgba(17,24,40,.4)}}
.sx-note{margin-top:16px;font:400 .72rem/1.5 var(--mono);color:var(--muted)}

/* Phones and tablets: tabs become a swipeable chip row above the panel */
@media (max-width:979px){
  .sx-tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 8px;scroll-padding-inline:var(--gutter);scrollbar-width:none;scroll-snap-type:x proximity}
  .sx-tabs::-webkit-scrollbar{display:none}
  .sx-tab{padding:8px 14px 10px 8px;scroll-snap-align:start;background:var(--card);border-color:var(--line)}
  .sx-tab .sx-ic{width:32px;height:32px;border-radius:10px}
  .sx-tab .sx-ic svg{width:17px;height:17px}
  .sx-tn b{font-size:.92rem;white-space:nowrap}
  .sx-tn small,.sx-at{display:none}
  .sx-screen{min-height:0}
  .sx-chat{min-height:400px}   /* same height for every business, so auto-advance doesn't move the page */
}

/* ── Process: the first week as a timeline ───────────────
   A Gantt strip (one column per day, plus "every month") sits above the four step cards. --p
   (0→1, from js/site.js as the section scrolls through) moves a playhead across it; each bar
   fills as the playhead passes, the Live flag lights at the end of day 7, and each card turns
   .on when its bar starts. Resting state (no JS / reduced motion): everything filled and on. */
.proc{position:relative;display:grid;gap:16px}
.proc-intro{display:grid;gap:14px;justify-items:start}
.proc-intro .split-lede{padding-bottom:0}
.proc-ticks{display:flex;flex-wrap:wrap;gap:8px}
/* the two promises are buttons: each shows where in the week it is kept */
.proc-ticks button{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border:0;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:600 .88rem/1.2 var(--body);color:var(--ink);cursor:pointer;transition:box-shadow .25s,translate .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.proc-ticks button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}}
html:not(.js) .proc-ticks button{pointer-events:none}
.g-you b.beat{animation:beat .9s var(--ease) 2}
@keyframes beat{50%{box-shadow:0 0 0 2px var(--card),0 0 0 5px var(--signal);translate:0 -2px}}
.plan-sum.tick{animation:tick .45s var(--ease)}
/* the week can be dragged across: the playhead follows the pointer, day by day */
.js .g-body,.js .g-body .g-bar,.js .g-body .g-you b{cursor:ew-resize}
.js .g-body{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.js .g-body:hover .g-head::before,.g-body.drag .g-head::before{scale:1.6}
.g-head::before{transition:scale .25s var(--ease)}
.proc-ticks svg{width:20px;height:20px;padding:4px;border-radius:50%;background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);flex:none}
/* The planner card: start-date picker on top, the two-lane week, then the ask. */
.plan{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px 20px 16px;display:grid;gap:14px;box-shadow:0 30px 60px -46px rgba(17,24,40,.4)}
.plan-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.plan-l{display:flex;align-items:center;gap:8px;font:500 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink)}
.plan-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
.plan-pick{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
html:not(.js) .plan-pick{display:none}
.plan-q{font:600 .92rem/1 var(--body);color:var(--ink);margin-right:2px}
.plan-pick button{min-height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:600 .88rem/1 var(--body);font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.plan-pick button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.plan-pick button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.plan-res{margin-left:auto;font:500 .98rem/1.35 var(--body);color:var(--ink-2)}
.plan-res b{font-weight:700;color:var(--ink);white-space:nowrap}
.plan-res b:last-child{background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 100%/100% .14em no-repeat;padding-bottom:.1em}
.plan-res.tick{animation:tick .45s var(--ease)}
.plan-in{white-space:nowrap}
.plan-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:14px;border-top:1px dashed var(--line)}
.plan-sum{font:500 1rem/1.4 var(--body);color:var(--ink-2)}
.plan-sum b{font:700 1.12rem/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.plan-foot .btn{margin-left:auto;min-height:48px}
.plan-note{flex:0 0 100%;font:400 .68rem/1.4 var(--mono);color:var(--muted)}
.gantt{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.g-body{position:relative;display:grid;gap:7px;padding-top:26px}
.g-lane{font:500 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.g-you{display:grid;grid-template-columns:repeat(8,1fr);gap:0 6px;align-items:center}
.g-you b{grid-column:var(--c);display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:9px;background:var(--ink);color:var(--paper);font:600 .76rem/1 var(--body);white-space:nowrap;overflow:hidden;
  opacity:clamp(.28,calc((var(--p,1) - var(--s)) * 999 + .28),1);transition:opacity .4s,box-shadow .3s}
.g-you b svg{width:13px;height:13px;flex:none}
.g-idle{grid-column:4 / span 4;display:flex;align-items:center;gap:10px;font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.g-idle::before,.g-idle::after{content:"";flex:1;border-top:1.5px dashed #C3C9D6}
.g-you .s{display:none}
.g-bar,.g-you b{cursor:default}
.g-bar.hot{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.g-you b.hot{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--signal)}
.g-days{display:grid;grid-template-columns:repeat(8,1fr);gap:0 6px}
/* each day is a button: pressing it moves the playhead there and fills the strip under the lanes */
.g-days button{min-height:30px;padding:0 8px;border:0;border-radius:9px;background:transparent;text-align:left;cursor:pointer;font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s,box-shadow .25s}
.g-days button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.g-days button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.g-days .g-more{color:var(--signal-ink)}
.g-days .g-more[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night)}
html:not(.js) .g-days button{pointer-events:none}
/* the chosen day's column, tinted behind both lanes */
.js .g-body::before{content:"";position:absolute;top:20px;bottom:-4px;left:calc(var(--col,7) * 12.5%);width:12.5%;border-radius:10px;background:rgba(255,90,31,.09);transition:left .4s var(--ease);pointer-events:none}
/* what happens on that day */
.g-day{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:8px 22px;margin-top:8px;padding:12px 14px;border-radius:14px;background:var(--paper);min-height:82px}   /* tall enough for the longest day, so the card never changes height */
html:not(.js) .g-day{display:none}
.gd-when b{display:block;font:700 1.05rem/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.gd-when span{display:block;margin-top:3px;font:500 .68rem/1 var(--mono);color:var(--signal-ink);white-space:nowrap}
.gd-col{font:400 .95rem/1.4 var(--body);color:var(--ink-2)}
.gd-col small{display:block;margin-bottom:3px;font:500 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gd-you span{font-weight:600;color:var(--ink)}
.g-day.tick .gd-col span,.g-day.tick .gd-when{animation:tick .4s var(--ease)}
.gd-play{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px 0 12px;border:0;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:600 .86rem/1 var(--body);color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background .25s,color .25s,box-shadow .25s}
.gd-play svg{width:12px;height:12px}
.gd-play:hover,.gd-play.on{background:var(--ink);color:var(--paper);box-shadow:none}
.g-track{display:grid;grid-template-columns:repeat(8,1fr);gap:0 6px}
.g-bar{position:relative;grid-column:var(--c) / span var(--n);height:36px;border-radius:11px;background:var(--paper-2);overflow:hidden;display:flex;align-items:center;padding:0 12px}
.g-bar{transition:box-shadow .3s}
.g-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--signal),#FF8A4C);transform-origin:left;
  transform:scaleX(clamp(0,calc((var(--p,1) - var(--s)) / var(--w)),1))}
.g-bar b{position:relative;font:600 .82rem/1 var(--body);color:var(--night);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-bar--loop{background:repeating-linear-gradient(135deg,var(--paper-2) 0 8px,#DDE1E9 8px 16px)}
.g-live{position:absolute;left:87.5%;top:0;translate:-50% 0;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night);background:var(--signal);
  border-radius:999px;padding:5px 9px;transition:background .35s,color .35s,box-shadow .35s;box-shadow:0 0 0 5px rgba(255,90,31,.16)}
.g-live{white-space:nowrap}
.g-live-d:not(:empty)::before{content:" · "}
.g-live::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:104px;margin-left:-.75px;background:currentColor;opacity:.35}
.js .gantt:not(.is-live) .g-live{background:var(--paper-2);color:var(--muted);box-shadow:none}
.g-head{position:absolute;top:18px;bottom:-6px;left:calc(var(--p,1) * 100%);width:2px;margin-left:-1px;background:var(--ink);border-radius:2px;transition:left .15s linear;pointer-events:none}
.g-head::before{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--ink)}
html:not(.js) .g-head{display:none}
.proc-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* "Handy to have": a tick list (pills shared with the shortlist picker); ticks go into the booking message */
.ready{display:grid;gap:14px 40px;align-items:center;padding:20px 22px;border-radius:22px;background:var(--card);border:1px solid var(--line)}
html:not(.js) .ready{display:none}
@media (min-width:980px){.ready{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.ready h3{margin-top:10px;font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);letter-spacing:-.02em;line-height:1.12}
.ready h3 em{font-style:normal;background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 94%/100% .12em no-repeat}
.ready-body{display:grid;gap:12px}
.ready .jf-opts span{min-height:40px;font-size:.9rem}
/* how many of the five are ticked, as a ring that fills */
.ready-res{display:flex;align-items:center;gap:12px}
.ready-ring{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center}
.ready-ring svg{position:absolute;inset:0;rotate:-90deg}
.ready-ring circle{fill:none;stroke-width:4}
.ready-ring .t{stroke:var(--paper-2)}
.ready-ring .v{stroke:var(--signal);stroke-linecap:round;stroke-dasharray:5;stroke-dashoffset:calc(5 - var(--n,0));opacity:var(--n,0);transition:stroke-dashoffset .5s var(--ease),opacity .3s}
.ready-ring b{position:relative;font:500 .7rem/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.ready-out{font:500 .95rem/1.4 var(--body);color:var(--ink-2)}
.ready-out.tick{animation:tick .4s var(--ease)}
.pstep{position:relative;display:flex;flex-direction:column}
/* an arrow between the four cards when they sit in one row */
@media (min-width:1101px){
  .pstep:not(:last-child)::after{content:"→";position:absolute;z-index:2;right:-20px;top:25px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:0 0 0 1px var(--line),0 8px 16px -10px rgba(17,24,40,.5);font:600 .78rem/1 var(--body);color:var(--signal-ink);transition:opacity .4s,translate .45s var(--ease)}
  .js .pstep:not(.on)::after{opacity:0;translate:-8px 0}
}
.js .p-card{cursor:pointer}   /* a card moves the planner to its days */
.p-card{flex:1;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px 20px 18px;position:relative;overflow:hidden;
  transition:opacity .6s var(--ease),translate .7s var(--ease),box-shadow .45s var(--ease),border-color .4s}
.p-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--signal),#FF8A4C);transform-origin:left;transition:transform .7s var(--ease)}
.js .pstep:not(.on) .p-card{opacity:.5;translate:0 12px}
.js .pstep.on .p-card{transition-delay:calc(var(--i) * .1s)}
.pstep.hot .p-card{border-color:var(--ink);translate:0 -4px;box-shadow:0 30px 54px -30px rgba(17,24,40,.5);transition-delay:0s}
.pstep.reset .gv *{transition:none!important}
.js .pstep:not(.on) .p-card::before{transform:scaleX(0)}
.pstep.on .p-card{box-shadow:0 26px 50px -34px rgba(17,24,40,.35)}
.p-top{display:flex;align-items:center;gap:10px}
.p-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:500 .74rem/1 var(--mono);flex:none;transition:background .4s,color .4s,box-shadow .4s;box-shadow:0 0 0 5px rgba(255,90,31,.14)}
.js .pstep:not(.on) .p-n{background:var(--paper-2);color:var(--ink);box-shadow:none}
.proc .when{font:500 .72rem/1 var(--mono);color:var(--signal-ink);letter-spacing:.08em;text-transform:uppercase}
.proc .when.tick{animation:tick .45s var(--ease)}
.p-card h3{margin-top:14px;font-size:1.35rem}
.p-card > p{margin-top:8px;color:var(--ink-2);font-size:.96rem;line-height:1.5;flex:1}
.p-card > p.p-you{flex:none;display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);color:var(--ink);font:600 .92rem/1.3 var(--body)}
.p-you svg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--paper-2);color:var(--ink);flex:none}
.p-you small{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.p-get{margin-top:14px;background:var(--paper);border-radius:14px;padding:14px 14px 12px}
.p-get-l{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.p-get b{display:block;margin-top:6px;font:600 .92rem/1.3 var(--body);color:var(--ink)}
/* audit card: once the visitor has used the calculator, their own number shows here */
.p-mine{display:block;margin-top:5px;font:500 .74rem/1.35 var(--body);color:var(--signal-ink)}
.p-mine[hidden]{display:none}
.gv{margin-top:12px;height:58px;position:relative}
.gv-audit{display:grid;gap:8px;align-content:center}
.gv-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;font:400 .62rem/1 var(--mono);color:var(--muted)}
.gv-row i{height:6px;border-radius:99px;background:var(--signal);transform-origin:left;transform:scaleX(var(--w));transition:transform 1s var(--ease) .25s}
.gv-row i.ok{background:var(--ink)}
.gv-row + .gv-row i{transition-delay:.4s}.gv-row + .gv-row + .gv-row i{transition-delay:.55s}
.js .pstep:not(.play) .gv-row i{transform:scaleX(0)}
/* the playbook preview: four parts the visitor ticks; the stamp lands when all four are approved */
.gv-book{display:grid;gap:3px;height:auto;min-height:58px}
/* a line of the example playbook: what it covers, then the answer; ticking it approves it */
.gv-book .gv-ok{display:flex;width:100%;gap:6px;padding:0 8px 0 5px;border-radius:8px;text-align:left}
.pb-k{flex:none;font-weight:600}
.pb-v{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.gv-ok[aria-pressed="true"] .pb-v{color:var(--ink)}
.pb-v.tick{animation:tick .45s var(--ease)}
.p-get{position:relative}
.gv-book{position:static}
.gv-book .gv-stamp{position:absolute;z-index:1;right:10px;top:7px;margin:0}   /* stamped in the corner of the box, beside the label */
.gv-ok{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 9px 0 5px;border:0;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:500 .62rem/1 var(--mono);color:var(--ink);cursor:pointer;
  transition:background .25s,box-shadow .25s,translate .25s var(--ease)}
.gv-ok svg{width:14px;height:14px;padding:2px;border-radius:50%;box-shadow:inset 0 0 0 1px #8D97AB;color:transparent;transition:background .25s,color .25s,box-shadow .25s,scale .35s var(--ease)}
.gv-ok:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.gv-ok[aria-pressed="true"]{background:#FFF4EE;box-shadow:inset 0 0 0 1px rgba(255,90,31,.5)}
.gv-ok[aria-pressed="true"] svg,html:not(.js) .gv-ok svg{background:var(--signal);color:var(--night);box-shadow:none;scale:1.08}
.js .pstep.on .gv-book:not(.touched) .gv-ok:first-child{box-shadow:inset 0 0 0 1px var(--signal)}
html:not(.js) .gv-ok{pointer-events:none}
.gv-stamp{margin-left:auto;font:500 .58rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink);background:var(--paper);border:2px solid var(--signal-ink);border-radius:8px;padding:6px 8px;rotate:-6deg;animation:stamp .45s var(--ease)}
@keyframes stamp{from{opacity:0;scale:1.7}}
.gv-test{display:flex;flex-wrap:wrap;gap:6px;align-content:center}
.gv-chip{display:inline-flex;align-items:center;gap:5px;font:500 .62rem/1 var(--mono);color:var(--ink);background:var(--card);border-radius:99px;padding:6px 9px 6px 7px;box-shadow:inset 0 0 0 1px var(--line)}
.gv-chip svg{width:12px;height:12px;color:var(--signal-ink);transition:opacity .3s,scale .45s var(--ease);transition-delay:calc(.3s + var(--k) * .18s)}
.js .pstep:not(.play) .gv-chip svg{opacity:0;scale:.3}
.gv-report{display:grid;gap:4px}
.gv-report svg{width:100%;height:44px;overflow:visible}
.gv-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.gv-line{fill:none;stroke:var(--signal);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease) .3s}
.js .pstep:not(.play) .gv-line{stroke-dashoffset:1}
.gv-cap{display:flex;justify-content:space-between;font:400 .6rem/1 var(--mono);color:var(--muted)}
@media (max-width:1100px){.proc-list{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .proc-list{grid-template-columns:1fr}
  .plan{padding:14px 12px 14px}
  .plan-res{margin-left:0;flex:0 0 100%}
  .plan-foot .btn{margin-left:0;width:100%;justify-content:center}
  .g-live-d{display:none}
  .g-you b{height:26px;padding:0 4px;justify-content:center;font-size:.6rem;border-radius:8px}
  .g-you b svg{display:none}
  .g-you .l{display:none}.g-you .s{display:inline}
  .g-idle{gap:5px;font-size:.5rem;letter-spacing:.04em}
  .g-days{gap:0 3px}
  .g-days button{min-height:28px;padding:0 2px;font-size:.5rem;letter-spacing:0;text-align:center;border-radius:7px}
  .g-days .g-more{font-size:0}
  .g-days .g-more::after{content:"Live";font-size:.5rem}
  .g-day{grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
  .gd-col{min-height:7.4em}
  .gd-when,.gd-play{grid-column:1 / -1}
  .gd-play{justify-self:start}
  .g-bar{height:30px;padding:0 6px;border-radius:9px}
  .g-bar b{font-size:.66rem}
  .g-bar--loop b{display:none}
  .g-track{gap:0 3px}
}

/* ── Rules: a night band, laid out as a bento ────────────
   Two wide cards (text beside a bigger demo) and two tall ones (demo above text), so the four
   rules don't read as a row of identical boxes. Each demo plays once when its card is .in:
   disclosure underline + badge, off-topic refusal then back to booking, an inbox where one chat is
   handed over and the switch flips to "You", a DPA that signs itself while its ticks land.
   Each demo also has a "Your turn" bar (.rtry): ask it something else, take over a chat, sign
   your half. .rule.tested marks a rule the visitor has tried; .rules-end counts them. */
.rules-band{background:var(--night);color:var(--on-night);position:relative;overflow:clip}
.rules-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 80% 20%,rgba(255,90,31,.12),transparent 70%),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.1px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.rules-band .wrap{position:relative}
.rules-band .eyebrow{color:var(--on-night-2)}
.rules-band .split-lede{color:var(--on-night-2)}
.rules{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.rule{grid-column:span 12;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:20px;background:var(--card);color:var(--ink);border-radius:24px;padding:26px 24px 24px;
  box-shadow:0 34px 60px -36px rgba(0,0,0,.75);transition:translate .45s var(--ease),box-shadow .45s var(--ease)}
.rule::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--signal),#FF8A4C)}
.reveal-on .rule[data-reveal]{transition-property:opacity,transform,translate,box-shadow;transition-duration:.9s,1s,.45s,.45s;transition-delay:var(--d,0s),var(--d,0s),0s,0s}
@media (hover:hover) and (pointer:fine){.rule:hover{translate:0 -4px;box-shadow:0 40px 70px -34px rgba(255,90,31,.45)}}
@media (min-width:760px){.rule{grid-column:span 6}}
@media (min-width:1100px){
  .rule--wide{grid-column:span 7;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:stretch}
  /* wide cards: the text sits at the top of its column and the attempts log takes whatever height
     is left, so the height the tall neighbour forces on the card is used instead of left empty */
  .rule--wide .rule-text{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start}
  .rule--wide .rlog{flex:1;align-self:stretch;display:flex;flex-direction:column;margin-top:22px}
  .rule--wide .rlog-l{flex:1}
  .rule--tall{grid-column:span 5}
  .rule--tall .rule-demo{order:-1}
}
.rule .law{display:inline-flex;align-items:center;gap:9px;font:500 .66rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink)}
.rule .law b{font-weight:500;color:var(--night);background:linear-gradient(90deg,var(--signal),#FF8A4C);border-radius:999px;padding:5px 8px;letter-spacing:.08em;white-space:nowrap}
.rule .law b::after{content:" ✓";display:none}
.rule.tested .law b::after{display:inline}
/* the rule's number, large and outlined, fills the top of the text column */
.rnum{display:block;margin-bottom:10px;font:760 3.6rem/.9 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #C3C9D6;transition:-webkit-text-stroke-color .4s}
.rule.tested .rnum{-webkit-text-stroke-color:var(--signal)}
/* tall cards have no spare height: there the number sits in the corner of the text block */
.rule--tall .rule-text{position:relative}
.rule--tall .rnum{position:absolute;right:0;top:-4px;margin:0;font-size:3rem}
.rfacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
/* jump chips beside the lede: one per rule, ticked once the visitor has tried it */
.rules-intro{display:grid;gap:14px;justify-items:start}
.rules-intro .split-lede{padding-bottom:0}
.rules-nav{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.rules-nav a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px 0 10px;border-radius:999px;background:var(--night-2);border:1px solid var(--night-line);font:600 .88rem/1 var(--body);color:var(--on-night);text-decoration:none;
  transition:border-color .25s,background .25s,translate .25s var(--ease)}
.rules-nav a i{font:500 .68rem/1 var(--mono);font-style:normal;color:#FF8A4C}
.rules-nav a:hover{border-color:var(--signal);translate:0 -1px}
.rules-nav a.on{border-color:rgba(255,90,31,.6);background:rgba(255,90,31,.12)}
.rules-nav a.on::after{content:"✓";font-weight:700;color:#FF8A4C}
/* what the visitor has tried on a rule (wide cards) */
.rlog{margin-top:18px;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
html:not(.js) .rlog{display:none}
.rlog-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font:500 .6rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.rule-text .rlog-h{max-width:none;margin-top:0;color:var(--ink);font-size:.6rem;line-height:1.2}
.rlog-h span{display:inline-flex;align-items:center;gap:7px}
.rlog-h i{width:6px;height:6px;border-radius:50%;background:var(--signal)}
.rlog-n{font-weight:500;color:var(--signal-ink)}
.rlog-l{display:grid;gap:6px;align-content:start;margin:10px 0 0;padding:0;list-style:none;min-height:84px}
.rlog-l li{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 .84rem/1.3 var(--body);color:var(--ink);animation:pop .35s var(--ease)}
.rlog-l li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlog-l em{flex:none;font:500 .58rem/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);background:#FFE7DB;border-radius:999px;padding:5px 7px}
.rlog-l .rlog-0{color:var(--muted);font-weight:400;animation:none}
@media (max-width:1099px){.rlog-l li:nth-child(n+4){display:none}}   /* stacked layouts keep the newest three */
.rfacts li{font:500 .7rem/1.2 var(--mono);letter-spacing:.02em;color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:7px 11px}
.rule h3{margin-top:14px;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);color:var(--ink)}
.rule-text p{margin-top:10px;color:var(--ink-2);font-size:.98rem;line-height:1.55;max-width:46ch}
.rule-demo{display:flex;flex-direction:column;border-radius:18px;background:var(--night);border:1px solid var(--night-line);padding:16px 16px 0;overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.1px);background-size:16px 16px}
html:not(.js) .rule-demo{padding-bottom:16px}
.rd{flex:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;min-width:0;align-content:center}
/* versions of part of a chat share one grid cell, so switching never changes the card's height */
.rvars{display:grid;grid-template-columns:minmax(0,1fr)}
.rvar{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;align-content:start}
.rvar:not(.cur){visibility:hidden}
.rd > .rvars{opacity:1!important;transform:none!important}
/* window title bar on each demo */
.rwin-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-16px -16px 14px;padding:9px 12px 9px 14px;border-bottom:1px solid var(--night-line);background:rgba(21,28,44,.7)}
html:not(.js) .rwin-bar{margin-bottom:14px}
/* status chip in the title bar: "Rule on", then how many attempts it has held */
.rstat{margin-right:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;border:1px solid var(--night-line);font:500 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);transition:border-color .3s,color .3s,background .3s}
.rstat svg{width:11px;height:11px;flex:none}
.rstat b{font-weight:500}
.rstat.held{border-color:rgba(255,90,31,.6);background:rgba(255,90,31,.14);color:var(--on-night)}
.rstat.flash{animation:rstat .5s var(--ease)}
@keyframes rstat{40%{scale:1.14}}
html:not(.js) .rstat{display:none}
.rstat,.rwin-bar .job-ch{white-space:nowrap}
@media (max-width:420px){.rstat svg{display:none}.rwin-bar{gap:6px}.rwin-bar .job-ch,.rstat{letter-spacing:.06em}}
.rtry{display:grid;gap:9px;margin:14px -16px 0;padding:12px 16px 14px;border-top:1px solid var(--night-line);background:rgba(21,28,44,.92)}
/* rules 1 and 2: type your own attempt */
.rtype{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 14px;border-radius:999px;background:var(--night);color:var(--on-night);border:1.5px solid var(--night-line);transition:border-color .25s}
.rtype:focus-within{border-color:var(--signal)}
.rtype input{flex:1;min-width:0;height:32px;border:0;outline:0;background:transparent;font:400 1rem/1 var(--body);color:var(--on-night)}
.rtype input::placeholder{color:var(--on-night-2)}
.rtype button{flex:none;width:32px;height:32px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--on-night);color:var(--night);cursor:pointer;transition:background .25s,translate .25s var(--ease)}
.rtype button svg{width:15px;height:15px}
.rtype button:hover{background:var(--signal);translate:2px 0}
/* rules 3 and 4: the button that tries to break the rule, and the line that says it held */
.try-b .brk{border-style:dashed}
.rheld{margin:2px 0 0;display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;border:1px solid var(--night-line);background:rgba(255,255,255,.04);font:500 .7rem/1.35 var(--mono);color:var(--on-night-2)}
.rheld::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--on-night-2);flex:none;transition:background .3s}
.rheld.held{border-color:rgba(255,90,31,.55);background:rgba(255,90,31,.1);color:var(--on-night)}
.rheld.held::before{background:var(--signal)}
.shake{animation:shake .45s var(--ease)}
@keyframes shake{20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}
html:not(.js) .rtry{display:none}
.rule-demo,.rin-row{min-width:0}
@media (max-width:420px){.rin-st{font-size:.54rem;padding:5px 6px}.rin-t small{font-size:.58rem}}
/* parts arrive in order (--k) once the card is .in; resting state = everything shown */
.rd > *,.rvar > *{transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--d,0s) + .35s + var(--k,0) * .45s)}
.reveal-on .rule:not(.play) .rd > *,.reveal-on .rule:not(.play) .rvar > *{opacity:0;transform:translateY(10px) scale(.98)}
.rb{margin:0;max-width:92%;padding:9px 12px 7px;border-radius:13px;font:400 .86rem/1.42 var(--body);color:var(--ink);background:#fff}
.rule .rb{margin:0;color:var(--ink);font-size:.84rem}
@media (min-width:1100px){.rules{align-items:stretch}}
.rb.in{justify-self:start;border-bottom-left-radius:4px}
.rb.out{justify-self:end;background:var(--bubble-out);border-bottom-right-radius:4px}
.rb time{display:block;text-align:right;font:400 .6rem/1 var(--mono);color:var(--muted);margin-top:4px}
.rb .ai{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#A8340A;margin-bottom:4px}
.rb mark{color:inherit;font-weight:600;background:linear-gradient(var(--signal),var(--signal)) 0 100%/100% 2px no-repeat;padding-bottom:1px;
  transition:background-size .8s var(--ease) calc(var(--d,0s) + 1.3s)}
.reveal-on .rule:not(.play) .rb mark{background-size:0 2px}
.rbadge{justify-self:start;margin:4px 0 0;display:inline-flex;align-items:center;gap:7px;font:500 .68rem/1.2 var(--mono);letter-spacing:.04em;color:var(--night);
  background:linear-gradient(90deg,var(--signal),#FF8A4C);border-radius:999px;padding:7px 12px}
.rbadge svg{width:14px;height:14px}
/* inbox */
.rinbox{gap:7px}
.rin-h{display:flex;justify-content:space-between;margin:0 0 2px;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.rin-row{display:flex;align-items:center;gap:10px;background:var(--night-2);border:1px solid var(--night-line);border-radius:12px;padding:9px 10px}
.rin-row{transition:opacity .5s var(--ease),transform .6s var(--ease),border-color .3s,background .3s}
.rin-row.hot{border-color:rgba(255,90,31,.5);background:rgba(255,90,31,.08)}
.rin-row.mine{border-color:var(--signal);background:rgba(255,90,31,.16)}
.rule.tested .rin-row{transition-delay:0s}
.rin-row.mine .rin-st{color:var(--night);background:linear-gradient(90deg,var(--signal),#FF8A4C);box-shadow:none}
.rin-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--on-night);color:var(--night);font:700 .68rem/1 var(--display);flex:none}
.rin-t{flex:1;min-width:0}
.rin-t b{display:block;font:600 .82rem/1.2 var(--body);color:var(--on-night)}
.rin-t small{display:block;margin-top:2px;font:400 .62rem/1.25 var(--mono);color:var(--on-night-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rin-st{flex:none;font:500 .6rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:6px 8px;white-space:nowrap}
.rin-st.ok{color:var(--on-night-2);box-shadow:inset 0 0 0 1px var(--night-line)}
.rin-st.hand{color:var(--night);background:var(--signal)}
.rin-st.need{color:var(--on-night);box-shadow:inset 0 0 0 1px rgba(255,90,31,.6)}
.rswitch{justify-self:end;display:flex;align-items:center;gap:8px;margin-top:3px;font:500 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-2)}
.rsw-l{color:var(--on-night-2);text-transform:none;letter-spacing:0;margin-right:4px}
.rswitch span:last-child{color:var(--on-night)}
.rswitch i{position:relative;width:40px;height:22px;border-radius:99px;background:var(--signal);transition:background .4s calc(var(--d,0s) + 2.2s)}
.rswitch em{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transform:translateX(18px);transition:transform .5s var(--ease) calc(var(--d,0s) + 2.2s)}
.reveal-on .rule:not(.play) .rswitch i{background:var(--night-line)}
.reveal-on .rule:not(.play) .rswitch em{transform:none}
.rule.tested .rswitch i,.rule.tested .rswitch em{transition-delay:0s}
.rswitch.off i{background:var(--night-line)}
.rswitch.off em{transform:none}
/* DPA that signs itself */
.rdoc{gap:12px}
.rdoc-paper{background:#fff;border-radius:14px;padding:14px 16px;color:var(--ink);box-shadow:0 18px 36px -18px rgba(0,0,0,.6)}
.rdoc-h{display:flex;justify-content:space-between;gap:10px;margin:0 0 10px;font:600 .82rem/1.2 var(--body)}
.rdoc-h span:last-child{font:500 .6rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rdoc-lines{display:grid;gap:6px}
.rdoc-lines i{height:5px;border-radius:99px;background:#DDE1E9;width:calc(var(--w) * 100%)}
.rdoc-sign{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:10px;margin-top:12px;padding-top:8px;border-top:1px dashed var(--line);font:400 .6rem/1.2 var(--mono);color:var(--muted)}
.rsig{width:100%;max-width:150px;height:34px;overflow:visible}
.rsig path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-io) calc(var(--d,0s) + .9s)}
.reveal-on .rule:not(.play) .rsig path{stroke-dashoffset:1}
/* the client's half: empty until the visitor presses "Sign here" */
.rdoc-you{margin-top:6px}
.rdoc-you .rsig path{stroke:var(--signal-ink);stroke-dashoffset:1;transition:none}
.rule.signed .rdoc-you .rsig path{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease-io)}
.rdoc-you .rsig{border-bottom:1px dashed var(--line);height:44px;max-width:190px}
/* the visitor can draw their own signature on the line (pointer only; the button signs for keyboards) */
.js .rdoc-you .rsig{cursor:crosshair;touch-action:none}
.rsig-hint{font:500 11px/1 var(--mono);fill:#6B7487}
html:not(.js) .rsig-hint,.rule.signed .rsig-hint,.rule.drawn .rsig-hint{display:none}
.rdoc-you .rsig path.rsig-own{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.rule.drawn .rdoc-you .rsig path:not(.rsig-own){display:none}
.rlist{display:grid;gap:8px}
.rlist li{display:flex;align-items:center;gap:9px;font:400 .86rem/1.3 var(--body);color:var(--on-night)}
.rlist svg{width:16px;height:16px;color:var(--signal);flex:none;transition:opacity .3s,scale .45s var(--ease);transition-delay:calc(var(--d,0s) + 1.9s + var(--k) * .25s)}
.reveal-on .rule:not(.play) .rlist svg{opacity:0;scale:.3}
.rdoc .rlist{transition:none}
/* Closing strip: how many of the four the visitor has tried */
.rules-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:14px;padding:16px 18px 16px 20px;border-radius:20px;background:var(--night-2);border:1px solid var(--night-line)}
.rm{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font:500 1rem/1.4 var(--body);color:var(--on-night)}
.rm-dots{display:inline-flex;gap:6px}
.rm-dots i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:500 .66rem/1 var(--mono);font-style:normal;color:var(--on-night-2);border:1.5px solid var(--night-line);transition:background .35s,color .35s,border-color .35s,scale .45s var(--ease)}
.rm-dots i.on{background:linear-gradient(135deg,var(--signal),#FF8A4C);border-color:transparent;color:var(--night);font-size:0;scale:1.06}
.rm-dots i.on::after{content:"✓";font:700 .85rem/1 var(--body)}
html:not(.js) .rm{display:none}
.rules-end .btn{min-height:48px}
@media (max-width:640px){.rules-end .btn{width:100%;justify-content:center}}

/* ── Pricing ─────────────────────────────────────────────
   Same card system as IHERO Media v3 (tier bars, name dot, compare rows that line up
   across cards, the product raised on night inside a rotating ring), in this site's
   navy + signal orange. Starter = the navy end, Voice Desk = the orange end,
   Front Desk = both, turning. Icon inks on white: #2D4270 9.6:1, #B93A0B 5.7:1. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html:not(.js) .js-only{display:none}
/* "Make it yours": the visitor's customer value, per month / first year, differences only */
.pctl{display:grid;gap:14px;padding:18px 20px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -46px rgba(17,24,40,.4)}
html:not(.js) .pctl{display:none}
.pctl-l{display:flex;align-items:center;gap:8px;font:500 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink)}
.pctl-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
.pctl .calc-seg legend{font-size:.92rem;min-width:6.2em}
.pctl .calc-seg span{min-height:38px;padding:0 14px;font-size:.88rem}
@media (max-width:520px){.pctl .calc-seg legend{float:none;width:100%;margin:0 0 2px}}
/* "Which sounds most like you?": one line per plan, each above its card; choosing one marks that plan */
.t-pick{display:grid;gap:8px 18px}
html:not(.js) .t-pick{display:none}
.t-pick .pctl-l{grid-column:1 / -1}
.t-pick button{position:relative;min-height:48px;padding:10px 16px 10px 46px;border:0;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:600 1rem/1.3 var(--body);color:var(--ink);text-align:left;cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.t-pick button::before{content:"";position:absolute;left:14px;top:50%;width:20px;height:20px;translate:0 -50%;border-radius:50%;box-shadow:inset 0 0 0 1.5px #7A8499;transition:background-color .25s,box-shadow .25s}
.t-pick button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.t-pick button:active{translate:0 0;scale:.985}
.t-pick button[aria-pressed="true"]{background:linear-gradient(90deg,var(--signal),#FF8A4C);color:var(--night);box-shadow:0 12px 24px -14px rgba(255,90,31,.8)}
.t-pick button[aria-pressed="true"]::before{box-shadow:none;background:var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
@media (min-width:980px){
  .t-pick{grid-template-columns:repeat(3,1fr);margin-bottom:12px}
  /* the chosen line points down at its card */
  .t-pick button[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:-6px;width:14px;height:14px;translate:-50% 0;rotate:45deg;border-radius:3px;background:#FF7236}
}
@media (max-width:979px){.t-pick{margin-bottom:14px}.t-pick button[data-tier="desk"]{order:-1}.t-pick .pctl-l{order:-2}}   /* same order as the stacked cards */
/* Which column is which: the three plans stay under the header while the long lists are read.
     Wide screens only (the cards stack on phones). Zero height, so it takes no room. */
.t-stick{display:none;position:sticky;top:76px;z-index:6;height:0}
@media (min-width:980px){.t-stick{display:block}}
.t-stick-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;opacity:0;translate:0 -12px;pointer-events:none;transition:opacity .25s,translate .35s var(--ease)}
.t-stick.on .t-stick-in{opacity:1;translate:0 0;pointer-events:auto}
.t-stick button{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;border:0;border-radius:14px;background:color-mix(in srgb,var(--card) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px var(--line),0 16px 30px -18px rgba(17,24,40,.55);font:600 .9rem/1 var(--body);color:var(--ink);cursor:pointer;transition:box-shadow .25s,translate .25s var(--ease)}
.t-stick button:hover{translate:0 -1px;box-shadow:0 0 0 1px var(--ink),0 16px 30px -18px rgba(17,24,40,.55)}
.t-stick button i{width:9px;height:9px;border-radius:50%;background:linear-gradient(90deg,#3A4F80,var(--ink));flex:none}
.t-stick button[data-tier="desk"]{background:var(--night);color:var(--on-night);box-shadow:0 16px 30px -18px rgba(255,90,31,.6)}
.t-stick button[data-tier="desk"] i,.t-stick button[data-tier="voice"] i{background:var(--signal)}
.t-stick b{font-weight:600;white-space:nowrap}
.ts-p{margin-left:auto;font:500 .78rem/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.85}
.ts-up{font-weight:500;opacity:.6}
.t-stick button.fit{box-shadow:0 0 0 2px var(--signal),0 16px 30px -18px rgba(255,90,31,.6)}
.tiers{position:relative;display:grid;gap:18px;align-items:start}
.tiers.diff .t-list li.same{display:none}
/* "What's added": each card lists only what it adds over the plan before it, under a line that
   says so ("Everything in Starter, plus · €150 more a month") */
.tiers.adds .t-list li:not(.new){display:none}
.t-plus{display:none;margin:0 0 14px;font:600 .95rem/1.35 var(--body);color:var(--ink)}
.tiers.adds .t-plus{display:block}
.t-plus-d{font-weight:500;color:var(--signal-ink);white-space:nowrap}
.tier--desk .t-plus{color:var(--on-night)}
.tier--desk .t-plus-d{color:#FF8A57}
/* The plan that fits (chosen above, or matching the shortlist): a tab on its top edge, an orange
   outline, and on desktop it takes the raised position. Nothing is dimmed, so contrast holds. */
.fit-tag{display:none;position:absolute;top:0;right:clamp(18px,2.2vw,26px);z-index:1;font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night);background:linear-gradient(90deg,var(--signal),#FF8A4C);border-radius:0 0 9px 9px;padding:6px 9px}
.tier.fit .fit-tag{display:block;animation:fit-in .45s var(--ease)}
@keyframes fit-in{from{translate:0 -100%}}
.tier.fit .pop{display:none}
.tiers.picked .tier.fit{box-shadow:0 0 0 2px var(--signal),0 34px 64px -34px rgba(255,90,31,.6)}
@media (min-width:980px){.tiers.picked .tier.fit{translate:0 -16px}.tiers.picked .tier--desk:not(.fit){translate:0 0}}
@media (max-width:979px){.tiers.picked .tier.fit{order:-2}}
/* payback line: one small figure per customer needed (ten at most, then "+N") */
.t-ppl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:3px;margin-bottom:8px}
.t-ppl i{width:11px;height:15px;flex:none;background:radial-gradient(circle at 50% 4px,var(--signal) 3.2px,transparent 3.8px),radial-gradient(5.5px 6.5px at 50% 100%,var(--signal) 96%,transparent 100%)}
.t-ppl i.new{animation:pop .35s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
.t-ppl em{margin-left:4px;font:500 .72rem/15px var(--mono);font-style:normal;color:var(--muted)}
.tier--desk .t-ppl em{color:var(--on-night-2)}
/* a row's meaning in plain words, in one bubble that moves to the row pointed at or tapped */
.t-list li[data-tip]{cursor:help}
.t-tip{position:absolute;z-index:8;width:max-content;max-width:min(290px,100%);padding:10px 13px;border-radius:12px;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);font:400 .88rem/1.4 var(--body);box-shadow:0 18px 40px -16px rgba(17,24,40,.55);
  pointer-events:none;opacity:0;visibility:hidden;translate:0 4px;transition:opacity .18s,translate .22s var(--ease),visibility 0s .2s}
.t-tip.on{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.t-tip::before{content:"";position:absolute;left:var(--ax,18px);top:-6.5px;width:10px;height:10px;rotate:45deg;background:var(--card);border:1.5px solid var(--ink);border-right:0;border-bottom:0}
@media (min-width:980px){
  .tiers{grid-template-columns:repeat(3,1fr);align-items:stretch;padding-top:16px}
  /* head, fit line, three groups, button: identical rows sit level across the three cards */
  @supports (grid-template-rows:subgrid){.tiers .tier{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}}   /* .tiers .tier: must beat the flex fallback on .tier below */
}
.tier{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:clamp(22px,2.6vw,30px);overflow:hidden;--tier-ink:#2D4270;--tier-bar:linear-gradient(90deg,#3A4F80,var(--ink));
  transition:translate .45s var(--ease),box-shadow .45s var(--ease)}
.tier::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--tier-bar)}
.tier--voice{--tier-ink:var(--signal-ink);--tier-bar:linear-gradient(90deg,#FF8A4C,var(--signal))}
.t-head{position:relative}
.t-name{display:inline-flex;align-items:center;gap:8px;font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.t-name i{width:9px;height:9px;border-radius:50%;background:var(--tier-bar);flex:none}
.t-price{font:760 clamp(2.7rem,2.1rem + 2vw,3.6rem)/1 var(--display);letter-spacing:-.04em;margin-top:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.t-price small{font:500 1rem/1 var(--body);letter-spacing:0;color:var(--muted);margin-left:2px}
.t-vat{margin-top:8px;font:400 .74rem/1.3 var(--mono);color:var(--muted)}
/* Setup-fee pill: signal-orange gradient, night text (6.9:1 at the darker end) */
.t-split{margin-top:14px;display:inline-block;font:600 .76rem/1.3 var(--mono);color:var(--night);background:linear-gradient(90deg,var(--signal),#FF8A4C);border:0;border-radius:999px;padding:8px 13px;font-variant-numeric:tabular-nums;box-shadow:0 8px 18px -10px rgba(255,90,31,.7)}
/* Payback line: filled in by js/site.js from the visitor's customer value */
.t-pay{margin-top:12px;font:400 .92rem/1.4 var(--body);color:var(--ink-2);min-height:2.8em}
.t-pay:empty{display:none}
.t-pay b{color:var(--ink);font-weight:700;background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 100%/100% .14em no-repeat;padding-bottom:.08em}
.tier--desk .t-pay{color:var(--on-night-2)}
.tier--desk .t-pay b{color:var(--on-night)}
.t-amt.tick{display:inline-block;animation:tick .4s var(--ease)}
.t-for{margin-top:18px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.t-group{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.t-gh{display:flex;align-items:center;gap:7px;font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.t-gh svg{width:13px;height:13px;flex:none;color:var(--tier-ink)}
.tier--desk .t-gh svg{color:#FF8A57}
.t-list{display:grid;gap:9px}
.t-list li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;line-height:1.4;color:var(--ink-2);border-radius:6px;transition:background .2s,box-shadow .2s}
/* pointing at a row lights the same row in the other two plans */
.tier .t-list li.hl{background:var(--paper-2);box-shadow:0 0 0 5px var(--paper-2)}
.tier--desk .t-list li.hl{background:#1E2740;box-shadow:0 0 0 5px #1E2740}
.t-list svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--tier-ink)}
.t-list b{color:var(--ink);font-weight:600}
.t-list li.no{color:var(--muted)}
.t-list li.no svg{color:#B6BDCB}
.tier .btn{margin-top:26px;width:100%;justify-content:center;align-self:end}
@media (hover:hover) and (pointer:fine){.tier:not(.tier--desk):hover{translate:0 -4px;box-shadow:0 26px 50px -30px rgba(17,24,40,.35)}}

/* Voice Desk: a small live waveform beside the name. Transform only, compositor-cheap. */
.wave{display:inline-flex;align-items:center;gap:2px;height:14px;margin-left:4px}
.wave i{width:2.5px;height:100%;border-radius:2px;background:var(--signal);transform-origin:center;animation:wave 1.1s var(--ease-io) infinite alternate}
.wave i:nth-child(2){animation-delay:-.2s}.wave i:nth-child(3){animation-delay:-.55s}.wave i:nth-child(4){animation-delay:-.35s}.wave i:nth-child(5){animation-delay:-.75s}
@keyframes wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* AI Front Desk: the product. Night card, raised, with a ring of signal light running round
   its edge. The ring is a large conic layer turned by transform behind an inset night panel,
   so the compositor spins it for free (IHERO Media measured the gradient-angle version at
   +130 ms main-thread blocking). */
.tier--desk{color:var(--on-night);border:0;background:var(--night);isolation:isolate;box-shadow:0 36px 70px -36px rgba(255,90,31,.45)}
.tier--desk::after{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;translate:-50% -50%;z-index:-2;
  background:conic-gradient(from 0deg,var(--signal),#FFB48C 12%,#2A3552 30%,#2A3552 55%,#FF8A4C 80%,var(--signal));animation:tier-ring 8s linear infinite}
.tier--desk::before{inset:2px;height:auto;border-radius:20px;background:var(--night);z-index:-1}
@keyframes tier-ring{to{rotate:360deg}}
@media (min-width:980px){.tier--desk{translate:0 -16px}}
@media (max-width:979px){.tier--desk{order:-1}}   /* on phones the product comes first */
.tier--desk .t-name,.tier--desk .t-price{color:var(--on-night)}
.tier--desk .t-name i{background:var(--signal)}
.tier--desk .t-price small,.tier--desk .t-vat,.tier--desk .t-gh{color:var(--on-night-2)}

.tier--desk .t-for,.tier--desk .t-list li{color:var(--on-night-2)}
.tier--desk .t-list b{color:var(--on-night)}
.tier--desk .t-list svg{color:#FF8A57}
.tier--desk .t-group{border-top-color:var(--night-line)}
.tier--desk .t-list li.no{color:#8891A8}
.tier--desk .t-list li.no svg{color:var(--night-line)}
.pop{position:absolute;top:-2px;right:0;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night);background:var(--signal);border-radius:999px;padding:7px 10px}

/* keep the hover lift smooth after the reveal rule takes over transition */
.reveal-on .tier[data-reveal]{transition-property:opacity,transform,translate,box-shadow;transition-duration:.9s,1s,.45s,.45s;transition-delay:var(--d,0s),var(--d,0s),0s,0s}
.t-notes{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 26px;font:400 .76rem/1.5 var(--mono);color:var(--muted)}
.t-help{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px 14px 18px;border-radius:18px;border:1.5px dashed #AEB6C6}
.t-help-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);font:700 1.05rem/1 var(--display)}
.t-help p{flex:1 1 280px;color:var(--ink-2);font-size:1rem;line-height:1.45}
.t-help b{color:var(--ink)}
@media (max-width:640px){.t-help .btn{width:100%;justify-content:center}}

/* Custom: its own band under the ladder, like IHERO Media's Stay Seen row. */
.custom{margin-top:26px;position:relative;overflow:hidden;display:grid;gap:20px 40px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,30px) clamp(22px,3vw,30px) clamp(22px,3vw,30px) clamp(28px,3.4vw,36px)}
.custom::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--signal),var(--ink))}
@media (min-width:980px){.custom{grid-template-columns:auto 1fr auto}.custom-list{grid-template-columns:1fr 1fr;column-gap:28px}}
.custom .t-name i{background:linear-gradient(135deg,var(--signal),var(--ink))}
.custom-price{font:760 2.3rem/1 var(--display);letter-spacing:-.035em;margin-top:12px;color:var(--ink)}
.custom-list svg{color:var(--signal-ink)}
.custom .btn{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* the custom items are tick boxes that write the quote message; without JS, the plain list */
.custom-pick{display:grid;gap:10px;min-width:0}
html:not(.js) .custom-pick,.js .custom-list{display:none}
.custom-pick .pctl-l{flex-wrap:wrap}
.cx-out{margin-left:auto;font:500 .72rem/1.2 var(--mono);letter-spacing:0;text-transform:none;color:var(--muted)}
.custom-opts{display:grid;gap:8px}
.custom-opts label{display:flex}
.custom-opts span{width:100%;min-height:44px;padding:9px 14px 9px 12px;border-radius:14px;font-size:.92rem;line-height:1.25}
@media (min-width:640px){.custom-opts{grid-template-columns:1fr 1fr}}
@media (max-width:979px){.custom .btn{justify-self:start}}

/* ── About ───────────────────────────────────────────────
   IHERO Media v3's layout (portrait frame left, story right). The frame holds the owner's photo
   (.pt-frame--photo; without that class it is the white shield and signal rings again), the time
   in Malta, and a "quick answers" chat: tapping a question in .pt-ask puts it and its answer in
   .pt-talk, and the photo folds into a round avatar above the thread. */
.about{border-top:1px solid var(--line)}
.about .wrap{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:900px){.about .wrap{grid-template-columns:minmax(0,400px) 1fr}}
.portrait{position:relative;isolation:isolate;margin:0}
/* a warm glow behind the frame, so the dark card does not sit flat on the paper */
.portrait::before{content:"";position:absolute;inset:10% 0 6%;z-index:-1;background:radial-gradient(closest-side,rgba(255,90,31,.22),transparent);filter:blur(34px)}
@media (min-width:900px){.portrait::before{inset:8% -8% 4%}}
@media (max-width:899px){.portrait{width:min(100%,420px);margin-inline:auto}}
.pt-frame{position:relative;height:620px;--stage:300px;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(90% 70% at 50% 42%,#1C2438 0%,var(--night) 75%);box-shadow:0 40px 80px -40px rgba(17,24,40,.55)}
.pt-frame::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.1px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 80%)}
/* The stage is tall until the first question, then folds to a small header (.chatting) and the
     thread takes the room; the frame itself keeps one height throughout. */
.pt-stage{position:relative;flex:none;height:var(--stage);display:grid;place-items:center;padding-top:30px;transition:height .55s var(--ease),padding .55s var(--ease)}
.pt-rings{position:absolute;inset:0;padding-top:inherit;display:grid;place-items:center;pointer-events:none}
.pt-rings i{grid-area:1/1;width:38%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,90,31,.55);opacity:0;animation:ring 6s var(--ease-io) infinite;transition:width .55s var(--ease)}
.pt-frame.chatting .pt-stage{height:108px;padding-top:40px}
.pt-frame.chatting .pt-rings i{width:17%}
.pt-frame.chatting .pt-mark{width:10%}
/* one studio, three things: small tags floating round the shield */
.pt-orb{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;border:1px solid var(--night-line);background:rgba(21,28,44,.88);font:500 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night);
  animation:bob 5s var(--ease-io) infinite alternate;transition:opacity .35s,scale .45s var(--ease)}
.pt-orb i{width:6px;height:6px;border-radius:50%;background:var(--signal)}
.pt-orb.o1{left:7%;top:46%}
.pt-orb.o2{right:8%;top:30%;animation-delay:-1.7s}
.pt-orb.o3{right:6%;top:70%;animation-delay:-3.3s}
@keyframes bob{from{translate:0 -3px}to{translate:0 4px}}
/* the tags are tappable (mouse and touch only): each lights its skill chip beside the frame, and
   the chosen chip lights its tag and the line that joins it to the shield (drawn by site.js) */
.js .pt-orb{cursor:pointer;padding:7px 10px;transition:opacity .35s,scale .45s var(--ease),border-color .3s,background .3s}
.pt-orb.on{border-color:var(--signal);background:linear-gradient(rgba(255,90,31,.24),rgba(255,90,31,.24)),#151C2C}
@media (hover:hover) and (pointer:fine){.js .pt-orb:hover{border-color:rgba(255,138,76,.8)}}
.pt-frame.chatting .pt-orb{pointer-events:none}
.pt-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .3s}
.pt-links path{fill:none;stroke:rgba(255,138,76,.4);stroke-width:1;stroke-dasharray:2 5;vector-effect:non-scaling-stroke;transition:stroke .3s,stroke-width .3s}
.pt-stage[data-on="1"] .l1,.pt-stage[data-on="2"] .l2,.pt-stage[data-on="3"] .l3{stroke:var(--signal);stroke-width:1.5;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}
.pt-frame.chatting .pt-links,.portrait:has(.pt-img) .pt-links{opacity:0}
/* back to the portrait once a chat has started (negative margins: the label row keeps its height) */
.pt-reset{margin:-6px 0 -6px 10px;min-height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--night-line);background:transparent;color:var(--on-night);font:500 .58rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .25s}
.pt-reset:hover{border-color:var(--signal)}
.pt-reset[hidden]{display:none}
.pt-count,.pt-reset{flex:none;white-space:nowrap}
.pt-frame.chatting .pt-l-x{display:none}   /* room for the count and the reset on one line */
.pt-frame.chatting .pt-orb{opacity:0;scale:.8}
@media (min-width:521px){.pt-frame:not(.chatting) .pt-mark{width:27%}.pt-frame:not(.chatting) .pt-rings i{width:44%}}
@media (max-width:520px){.pt-frame{--stage:240px}.pt-orb.o1{left:4%}.pt-orb.o2{right:5%}.pt-orb.o3{right:3%}}
.pt-rings i:nth-child(2){animation-delay:2s}.pt-rings i:nth-child(3){animation-delay:4s}
.pt-mark{position:relative;width:24%;height:auto;color:#fff;filter:drop-shadow(0 18px 40px rgba(255,90,31,.35));transition:width .55s var(--ease)}
/* The owner's photo fills everything above the question panel (.pt-top). Once a question is asked
   it becomes a 52px round avatar where the small shield used to sit: the box shrinks and the
   picture zooms on the face. transform-origin is where the face sits in the 800x900 crop (48% /
   18.75%), and the 16px shift centres it in the circle: re-measure both if the crop changes. */
.pt-photo{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:#1C2438;
  transition:left .55s var(--ease),top .55s var(--ease),width .55s var(--ease),height .55s var(--ease),border-radius .55s var(--ease),box-shadow .35s}
.pt-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,15,26,.16) 0,transparent 26%,transparent 50%,rgba(11,15,26,.62) 80%,var(--night) 100%);transition:opacity .4s}
.pt-img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:48% 18.75%;transition:scale .55s var(--ease),translate .55s var(--ease)}
.js .pt-frame--photo:not(.chatting) .pt-photo{cursor:pointer}
@media (hover:hover) and (pointer:fine){.pt-frame--photo:not(.chatting) .pt-top:hover .pt-img{scale:1.04}}
/* arriving: the picture settles and a focus box closes on the face, once (again after "Start again") */
.reveal-on .portrait.in .pt-img{animation:pt-settle 1.5s var(--ease) backwards}
@keyframes pt-settle{from{scale:1.12}}
.pt-focus{position:absolute;left:36%;top:4.5%;width:24%;aspect-ratio:.86;border:1.5px solid rgba(255,255,255,.92);border-radius:12px;opacity:0;pointer-events:none}
.reveal-on .portrait.in .pt-focus,.pt-focus.again{animation:pt-focus 1.9s var(--ease) .55s both}
.reveal-on .portrait.in .pt-focus.again{animation-name:pt-focus-2}
@keyframes pt-focus{0%{opacity:0;scale:1.7}35%,70%{opacity:1;scale:1}100%{opacity:0;scale:1}}
@keyframes pt-focus-2{0%{opacity:0;scale:1.7}35%,70%{opacity:1;scale:1}100%{opacity:0;scale:1}}
.reveal-on .portrait.in .pt-photo.nod .pt-img{animation:pt-nod .7s var(--ease)}
@keyframes pt-nod{40%{scale:1.05}}
.pt-frame--photo .pt-stage .pt-mark{display:none}
.pt-frame--photo .pt-rings{transition:opacity .4s}
.pt-frame--photo:not(.chatting) .pt-rings{opacity:0}
.pt-frame--photo .pt-hud{background:linear-gradient(180deg,rgba(11,15,26,.62),transparent 22%)}
.pt-brand{display:inline-flex;align-items:center;gap:7px}
.pt-brand svg{width:9px;height:auto;color:#fff}
/* the three tags sit beside the head, on glass */
.pt-frame--photo .pt-orb{border-color:rgba(255,255,255,.24);background:rgba(11,15,26,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pt-frame--photo .pt-orb.on{border-color:var(--signal);background:linear-gradient(rgba(255,90,31,.3),rgba(255,90,31,.3)),rgba(11,15,26,.78)}
.pt-frame--photo .pt-orb.o1{left:5%;top:31%}
.pt-frame--photo .pt-orb.o2{right:6%;top:19%}
.pt-frame--photo .pt-orb.o3{right:4%;top:36%}
/* wide screens: a taller frame, so the photo shows down to the desk (the tags keep their place by the head) */
@media (min-width:900px){.pt-frame--photo{height:690px;--stage:370px}.pt-frame--photo .pt-orb.o1{top:25%}.pt-frame--photo .pt-orb.o2{top:15.5%}.pt-frame--photo .pt-orb.o3{top:28.5%}}
/* before the first question the greeting may stand taller than its row and overlap the photo */
.pt-frame--photo:not(.chatting) .pt-talk{overflow:visible}
/* chatting: the avatar, ringed in white, with the signal rings round it */
.pt-frame--photo.chatting .pt-photo{left:calc(50% - 26px);top:48px;width:52px;height:52px;border-radius:50%;z-index:3;cursor:default;box-shadow:0 0 0 2px #fff,0 10px 22px -8px rgba(0,0,0,.7)}
.pt-frame--photo.chatting .pt-photo::after{opacity:0}
.pt-frame--photo.chatting .pt-img{scale:3.3;translate:1px 16px}
.pt-frame--photo.chatting .pt-rings i{width:19%}
/* "wave back": a reaction button on the corner of the greeting; pressed, it is the wave itself */
.pt-b--hello{position:relative}
.pt-frame--photo .pt-b--hello{max-width:84%}
.pt-wave{position:absolute;right:-16px;bottom:-8px;width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1rem;line-height:1;cursor:pointer;box-shadow:0 8px 18px -8px rgba(0,0,0,.55);transition:border-color .25s,scale .3s var(--ease)}
.pt-wave svg{width:18px;height:18px;transform-origin:60% 90%}
.pt-wave:hover{border-color:var(--signal);scale:1.08}
.reveal-on .portrait.in .pt-wave svg{animation:pt-hand 1.1s var(--ease) 2.2s 1}
.reveal-on .portrait.in .pt-wave:hover svg{animation:pt-hand-h 1.1s var(--ease) 1}
@keyframes pt-hand{20%{rotate:-18deg}40%{rotate:14deg}60%{rotate:-12deg}80%{rotate:8deg}}
@keyframes pt-hand-h{20%{rotate:-18deg}40%{rotate:14deg}60%{rotate:-12deg}80%{rotate:8deg}}
.pt-wave[aria-pressed="true"]{border-color:var(--signal);cursor:default;animation:pop .45s var(--ease)}
.pt-wave[aria-pressed="true"]:hover{scale:1}
/* the message button carries the face it goes to */
.btn-face{position:relative;flex:none;width:34px;height:34px;margin-left:-9px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.92)}
.btn-face img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.btn-face::after{content:"";position:absolute;right:-2px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--signal);animation:ping 2.4s var(--ease) infinite;transition:background .3s}
.btn:hover .btn-face::after{background:var(--paper)}
.pt-hud{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(11,15,26,.5),transparent 20%)}
.pt-c{position:absolute;width:24px;height:24px;border:2px solid rgba(238,240,245,.75)}
.pt-c.tl{top:16px;left:16px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.pt-c.tr{top:16px;right:16px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.pt-c.bl{bottom:16px;left:16px;border-right:0;border-top:0;border-bottom-left-radius:6px}
.pt-c.br{bottom:16px;right:16px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.pt-bar{position:absolute;left:32px;right:32px;display:flex;justify-content:space-between;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(238,240,245,.82)}
.pt-bar.top{top:30px}.pt-bar.bot{bottom:30px}
.pt-live{display:inline-flex;align-items:center;gap:7px}
.pt-live i,.ask-live i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:live 2.2s var(--ease) infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%,100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
/* quick answers: a short thread (as many whole bubbles as fit; js/site.js drops the oldest), then
   the question pills and a box for the visitor's own question */
.pt-top{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.pt-talk{position:relative;z-index:3;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;padding:0 18px 14px}
.pt-b{flex:none;margin:0;max-width:88%;padding:9px 12px 8px;border-radius:14px;font:400 .9rem/1.4 var(--body);color:var(--ink);background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.6);animation:pop .45s var(--ease) both}
.pt-b--us{align-self:flex-start;border-bottom-left-radius:4px}
.pt-b--you{align-self:flex-end;background:var(--bubble-out);border-bottom-right-radius:4px}
html:not(.js) .pt-frame{height:auto}
html:not(.js) .pt-talk{padding-bottom:22px}
/* the hand-off: a typed question nobody scripted goes to a person */
.pt-send{display:flex;width:max-content;align-items:center;gap:7px;min-height:32px;margin-top:8px;padding:0 13px;border-radius:999px;background:var(--night);color:#fff;font:600 .84rem/1 var(--body);text-decoration:none;transition:background .25s,translate .25s var(--ease)}
.pt-send:hover{background:var(--signal);color:var(--night);translate:2px 0}
.pt-who{display:block;margin-bottom:4px;font:500 .6rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--signal-ink)}
.pt-talk .typing{flex:none;align-self:flex-start;width:max-content;animation:pop .3s var(--ease) both}
.pt-ask{position:relative;z-index:3;display:grid;gap:9px;padding:13px 18px 16px;border-top:1px solid var(--night-line);background:rgba(21,28,44,.88)}
html:not(.js) .pt-ask{display:none}
.pt-ask .try-b button{min-height:34px;padding:0 12px;font-size:.84rem}
.pt-ask .try-b button.asked::before{content:"✓";margin-right:6px;font-weight:700;color:var(--signal)}
.pt-ask .try-b button.asked[aria-pressed="true"]::before{color:var(--night)}
.pt-count{margin-left:auto;letter-spacing:.06em;color:var(--on-night-2)}
.pt-x{display:none}
.portrait figcaption{margin-top:12px;text-align:center;font:400 .72rem/1.4 var(--mono);letter-spacing:.04em;color:var(--muted)}
.about-copy h2{margin-top:16px}
.about-lead{margin-top:20px;font-size:var(--step-1);line-height:1.45;color:var(--ink);max-width:46ch}
.about-copy > p:not(.eyebrow):not(.about-lead){margin-top:14px;color:var(--ink-2);max-width:60ch}
/* the promise in the lead, made tappable: each button sends that change request into the frame */
.about-try{display:grid;gap:9px;justify-items:start;margin-top:16px}
.about-try-b{display:flex;flex-wrap:wrap;gap:7px}
.about-try-b button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:0;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:600 .88rem/1 var(--body);color:var(--ink);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.about-try-b button::after{content:"→";font-weight:500;color:var(--signal-ink);transition:translate .3s var(--ease),color .25s}
@media (hover:hover) and (pointer:fine){.about-try-b button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}.about-try-b button:hover::after{translate:3px 0}}
.about-try-b button.sent{background:var(--ink);color:var(--paper);box-shadow:none}
.about-try-b button.sent::after{content:"✓";color:#FF8A57}
/* a media chip points at the studio link under the box */
.about-cta .link.nudge .arr{animation:nudge .9s var(--ease) 2}
@keyframes nudge{50%{translate:4px -4px}}
.about-copy strong{color:var(--ink);font-weight:600}
/* "All done by us": the chips are buttons; the card under them says what the pressed one means.
   The six texts share one grid cell, so the card keeps the height of the longest. */
.skills-l{display:block;margin-top:22px;font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
html:not(.js) .skills{display:none}
.skills button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:500 .88rem/1 var(--body);color:var(--ink);cursor:pointer;
  transition:translate .3s var(--ease),border-color .3s,box-shadow .3s var(--ease),background .25s,color .25s}
@media (hover:hover) and (pointer:fine){.skills button:hover{translate:0 -2px;border-color:var(--ink);box-shadow:0 12px 22px -16px rgba(17,24,40,.5)}}
.skills button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.skills button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.skill-d{position:relative;display:grid;margin-top:10px;max-width:60ch;padding:14px 16px 15px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line);overflow:hidden;box-shadow:0 24px 44px -34px rgba(17,24,40,.45)}
.skill-d::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--signal),#FF8A4C)}
.sk{grid-area:1/1;margin:0;font:400 .98rem/1.45 var(--body);color:var(--ink-2);visibility:hidden;opacity:0;translate:0 6px;transition:opacity .3s,translate .4s var(--ease),visibility 0s .3s}
.sk.on{visibility:visible;opacity:1;translate:0 0;transition-delay:0s}
.sk b{display:block;margin:7px 0 2px;font:700 1.06rem/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
/* when in week one it happens: seven days, its own lit (monthly tuning: after the week) */
.sk-week,.sk-trio{display:flex;align-items:center;gap:3px;margin-top:11px}
.sk-week i{width:clamp(14px,5vw,24px);height:6px;border-radius:3px;background:var(--paper-2);transform-origin:0 50%}
.sk-week i.on{background:linear-gradient(90deg,var(--signal),#FF8A4C)}
.js .sk.on .sk-week i.on{animation:wk .45s var(--ease) backwards}
.sk-week i:nth-child(2){animation-delay:.04s}.sk-week i:nth-child(3){animation-delay:.08s}.sk-week i:nth-child(4){animation-delay:.12s}.sk-week i:nth-child(5){animation-delay:.16s}.sk-week i:nth-child(6){animation-delay:.2s}.sk-week i:nth-child(7){animation-delay:.24s}
@keyframes wk{from{scale:0 1}}
.sk .sk-week b{display:inline;margin:0 0 0 8px;font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sk .sk-week--m b{color:var(--signal-ink)}
/* the studio's three things, this one lit */
.sk-trio{gap:6px;flex-wrap:wrap}
.sk-trio i{padding:4px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:500 .6rem/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sk-trio i.on{background:#FFF4EE;box-shadow:inset 0 0 0 1px rgba(255,90,31,.5);color:var(--signal-ink)}
.sk-tag{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--paper-2);font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
html:not(.js) .skill-d{gap:12px}
html:not(.js) .sk{grid-area:auto;visibility:visible;opacity:1;translate:none}
.about-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:26px}

/* ── FAQ ─────────────────────────────────────────────────
   Question cards with a topic icon and a one-line short answer; the open one lifts, gets a
   signal edge and shows a small picture of its answer (.qv) and an actions row (one open at a
   time, name="faq"). Topic chips filter the list. The left column (sticky on wide screens)
   carries the heading, numbered jump buttons that fill in as cards are opened, and an ask box:
   typing filters the cards and marks the words; the send button takes the question to WhatsApp. */
.faq-side{display:grid;gap:24px;align-content:start}
/* numbered jump buttons: an orange ring once that card has been opened, filled while it is open */
.faq-prog{display:grid;gap:10px}
html:not(.js) .faq-prog{display:none}
.fp-dots{display:flex;flex-wrap:wrap;gap:6px}
/* one button that always opens the next unread question */
.fp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.fp-next{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:600 .84rem/1 var(--body);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s}
.fp-next i{font-style:normal;transition:translate .3s var(--ease)}
.fp-next:hover{background:var(--signal);color:var(--night)}
.fp-next:hover i{translate:3px 0}
.fp-dots button{width:38px;height:38px;border:0;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:500 .76rem/1 var(--mono);color:var(--ink);cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.fp-dots button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.fp-dots button.read{box-shadow:inset 0 0 0 2px var(--signal)}
.fp-dots button[aria-pressed="true"]{background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);box-shadow:none}
.faq-side .sec-head{margin:0}
@media (min-width:980px){
  .faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
  .faq-side{position:sticky;top:calc(var(--header-h) + 32px)}
}
@media (max-width:979px){.faq-side{margin-bottom:clamp(28px,4vw,40px)}}
.ask{background:var(--night);color:var(--on-night);border-radius:22px;padding:22px;max-width:420px;display:grid;gap:12px;justify-items:start}
.ask-form{justify-self:stretch;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border-radius:999px;padding:5px 5px 5px 18px;transition:box-shadow .3s}
.ask-form:focus-within{box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--signal)}
.ask-form input{flex:1;min-width:0;min-height:42px;border:0;outline:0;background:transparent;font:400 1rem/1.3 var(--body);color:var(--ink)}
.ask-form input::placeholder{color:var(--muted)}
.ask-send{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);transition:translate .25s var(--ease),box-shadow .25s}
.ask-send svg{width:18px;height:18px}
.ask-send:hover{translate:2px 0;box-shadow:0 10px 20px -8px rgba(255,90,31,.9)}
.ask-fallback{display:none}
html:not(.js) .ask-form{display:none}
html:not(.js) .ask-fallback{display:inline-flex}
.ask-bubble{margin:0;background:#fff;color:var(--ink);border-radius:14px 14px 14px 4px;padding:12px 14px;font:400 .95rem/1.45 var(--body)}
.ask-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:500 .7rem/1.3 var(--mono);letter-spacing:.06em;color:var(--on-night-2)}
#ask-hint{color:var(--on-night)}
#ask-hint:empty{display:none}
.ask-live{display:inline-flex;align-items:center;gap:8px}
/* words to try: each fills the box and finds at least one card */
.ask-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
html:not(.js) .ask-try{display:none}
.ask-try span{margin-right:2px}
.ask-try button{min-height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--night-line);background:transparent;color:var(--on-night);font:600 .82rem/1 var(--body);letter-spacing:0;text-transform:none;cursor:pointer;transition:border-color .25s,translate .25s var(--ease)}
.ask-try button:hover{border-color:var(--signal);translate:0 -1px}
.faq-list{display:grid;gap:10px}
/* typed words: the matches come first and the rest fade, so the list keeps its height */
.faq-filter{order:-3}
.faq-none{order:-2}
.faq .faq-list .qa.dim{opacity:.36;transition:opacity .3s}      /* must beat the reveal rule's opacity:1 */
.faq .faq-list .qa.dim:hover,.faq .faq-list .qa.dim:focus-within{opacity:1}
/* the ask box answers: the best match's short answer, as a reply under the input */
.ask-a{justify-self:stretch;display:grid;gap:6px;justify-items:start;padding:12px 14px;border-radius:4px 14px 14px 14px;background:rgba(255,255,255,.07);border:1px solid var(--night-line)}
.ask-a[hidden]{display:none}
.ask-a small{font:500 .6rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#FF8A57}
.ask-a p{margin:0;font:400 .95rem/1.45 var(--body);color:var(--on-night)}
.ask-open,.ask-go{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0;border:0;background:none;font:600 .86rem/1.2 var(--body);color:var(--on-night);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.ask-open:hover,.ask-go:hover{text-decoration-color:var(--on-night)}
.ask-open[hidden],.ask-go[hidden]{display:none}
.ask-a.tick{animation:tick .4s var(--ease)}
.faq-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
html:not(.js) .faq-filter{display:none}
.faq-filter button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:600 .9rem/1 var(--body);color:var(--ink);cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.faq-filter button i{font:500 .66rem/1 var(--mono);font-style:normal;color:var(--muted);transition:color .25s}
.faq-filter button:hover{box-shadow:inset 0 0 0 1px var(--ink);translate:0 -1px}
.faq-filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.faq-filter button[aria-pressed="true"] i{color:#FF8A4C}
.qa[hidden],.faq-none[hidden]{display:none}
.faq-none{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:18px 20px;border-radius:18px;border:1.5px dashed #AEB6C6;color:var(--ink-2)}
.faq-none b{color:var(--ink)}
.faq-none .btn{min-height:48px}
.qa{background:var(--card);border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden;
  transition:border-color .3s,box-shadow .45s var(--ease)}
.qa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--signal);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.qa[open]{border-color:#C9CFDA;box-shadow:0 24px 46px -32px rgba(17,24,40,.4)}
.qa[open]::before{transform:none}
@media (hover:hover) and (pointer:fine){.qa:not([open]):hover{border-color:#C9CFDA}}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:8px 16px;padding:18px 18px 18px 20px;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
/* topic icon in a tile, number and topic under it; the tile turns orange while the card is open
   and keeps a small tick once it has been opened */
.qa-tag{justify-self:start;display:grid;justify-items:start;gap:7px;font:500 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);white-space:nowrap}
.qa-ic{position:relative;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--paper-2);color:var(--ink);transition:background .3s,color .3s}
.qa-ic svg{width:21px;height:21px}
.qa[open] .qa-ic{background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night)}
.qa.read:not([open]) .qa-ic::after{content:"";position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px var(--card);
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0F1A' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
@media (hover:hover) and (pointer:fine){.qa:not([open]) summary:hover .qa-ic{background:var(--ink);color:var(--paper)}}
.qa-q{font:650 1.12rem/1.3 var(--display);letter-spacing:-.01em}
.qa mark{background:linear-gradient(transparent 56%,rgba(255,90,31,.4) 0);color:inherit;border-radius:2px}
.qa-short{display:block;margin-top:5px;font:400 .95rem/1.35 var(--body);letter-spacing:0;color:var(--ink-2)}
.qa[open] .qa-short{display:none}
.qa .pm{position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);flex:none;transition:background .3s,box-shadow .3s,transform .5s var(--ease)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink);transition:transform .4s var(--ease)}
.qa .pm::after{transform:rotate(90deg)}
.qa summary:hover .pm{box-shadow:inset 0 0 0 1.5px var(--ink)}
.qa[open] .pm{background:var(--signal);box-shadow:none;transform:rotate(180deg)}
.qa[open] .pm::before,.qa[open] .pm::after{background:var(--night)}
.qa[open] .pm::after{transform:rotate(0)}
.qa::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
.qa[open]::details-content{height:auto}
.qa .a{padding:0 64px 22px 128px;color:var(--ink-2);display:grid;gap:12px;max-width:74ch;font-size:1rem;line-height:1.6}
/* the answer's picture: a small example chat, a set of ticks, a two-line price list or a week */
.qv{position:relative;display:grid;gap:8px;margin:2px 0 0;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);list-style:none}
.qa[open] .qv > *{animation:tick .5s var(--ease) both}
.qa[open] .qv > :nth-child(2){animation-delay:.1s}.qa[open] .qv > :nth-child(3){animation-delay:.22s}.qa[open] .qv > :nth-child(4){animation-delay:.34s}.qa[open] .qv > :nth-child(5){animation-delay:.46s}
.qv-ex{justify-self:end;margin-bottom:-4px;font:500 .56rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qv-b{margin:0;max-width:88%;padding:8px 11px;border-radius:13px;font:400 .9rem/1.4 var(--body);color:var(--ink)}
.qv-b.in{justify-self:start;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:4px}
.qv-b.out{justify-self:end;background:var(--bubble-out);border-bottom-right-radius:4px}
.qv-b small{display:block;margin-bottom:3px;font:500 .56rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9C300A}   /* darker than --signal-ink: 5.2:1 on the blue bubble */
.qv-b.no{justify-self:start;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(90,99,118,.6)}
.qv-l{margin:0;font:500 .58rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qv-l.yes{justify-self:end;color:var(--signal-ink)}
.qv--tone .qv-ex{position:absolute;right:14px;top:14px;margin:0}
.qv-st{justify-self:end;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:var(--night);color:var(--on-night);font:500 .68rem/1 var(--mono)}
.qv-st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.qv-chips{display:flex;flex-wrap:wrap;gap:7px}
.qv-chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px 0 9px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 .86rem/1 var(--body);color:var(--ink)}
.qv-chip svg{width:14px;height:14px;color:var(--signal-ink)}
.qv-chip.no{padding-left:12px;background:transparent;box-shadow:none;border:1.5px dashed #AEB6C6;color:var(--ink-2)}
.qv-chip.no small{font:500 .6rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qv-rows{gap:0;padding-block:6px}
.qv-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;font-size:.92rem;line-height:1.35}
.qv-row + .qv-row{border-top:1px solid var(--line)}
.qv-row dt{color:var(--ink-2)}
.qv-row dd{margin:0;white-space:nowrap;font:700 .98rem/1.2 var(--display);color:var(--ink)}
.qv-time{display:flex;gap:5px}
.qv-seg{flex:var(--f,1) 1 0;min-width:0;display:grid;gap:5px;align-content:start}
.qv-seg i{height:6px;border-radius:3px;background:var(--ink)}
.qv-seg:nth-child(2) i{background:#3A4F80}.qv-seg:nth-child(3) i{background:linear-gradient(90deg,#3A4F80,var(--signal))}.qv-seg:nth-child(4) i{background:var(--signal)}
.qv-seg span{font:500 .56rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qv-seg b{font:600 .84rem/1.2 var(--body);color:var(--ink)}
/* under the answer: on to the next question, where the page shows it, or ask about this one */
.qa-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:2px}
.qa-next{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:600 .9rem/1 var(--body);cursor:pointer;transition:background .25s,color .25s,translate .25s var(--ease)}
.qa-next:hover{background:var(--signal);color:var(--night);translate:2px 0}
.qa-acts a{display:inline-block;padding-block:7px;font:600 .9rem/1.2 var(--body);color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.qa-acts a:hover{text-decoration-color:var(--ink)}
@media (max-width:640px){
  .qa summary{grid-template-columns:1fr auto;gap:10px 14px;padding:16px}
  .qa-tag{grid-column:1;grid-row:1;display:flex;align-items:center;gap:10px}
  .qa-ic{width:34px;height:34px;border-radius:11px}
  .qa-ic svg{width:18px;height:18px}
  .qa-q{grid-column:1;grid-row:2;font-size:1.05rem}
  .qa .pm{grid-column:2;grid-row:1 / span 2}
  .qa .a{padding:0 16px 18px}
}

/* ── Final CTA ───────────────────────────────────────────
   Row 1: the ask beside the closing shield. Row 2: a message builder (.fbuild): pills and a name
   box on the left write the WhatsApp message, shown on the right as a small chat (.fb-chat) with
   chips for what was set further up the page; a "what happens next" strip (.fb-next) closes the
   card. Without JS a plain button (.final-plain) shows instead. */
.final{background:var(--night);color:var(--on-night);position:relative;overflow:clip}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 45% 50% at 78% 28%,rgba(255,90,31,.13),transparent 70%),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.1px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.final .wrap{position:relative;display:grid;gap:clamp(28px,4vw,48px) clamp(40px,5vw,64px);align-items:center;padding-block:clamp(3.75rem,7vw,6rem)}
@media (min-width:980px){.final .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.final-copy{display:grid;gap:22px;justify-items:start}
.final h2{font-size:var(--step-3);letter-spacing:-.03em;max-width:17ch}
.final .final-sub{color:var(--on-night-2);font-size:var(--step-1);max-width:44ch;line-height:1.45}
.final .eyebrow{color:var(--on-night-2)}
.final-ticks{display:flex;flex-wrap:wrap;gap:8px}
.final-ticks li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;background:var(--night-2);border:1px solid var(--night-line);font:600 .88rem/1.2 var(--body);color:var(--on-night)}
.final-ticks svg{width:20px;height:20px;padding:4px;border-radius:50%;background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night);flex:none}
.final-plain{display:none}
html:not(.js) .final-plain{display:inline-flex}
/* the short way: no taps, just the plain message */
.final-quick{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-top:-6px;font:600 .98rem/1.3 var(--body);color:var(--on-night);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:5px}
.final-quick .arr{transition:translate .3s var(--ease)}
.final-quick:hover .arr{translate:4px 0}
html:not(.js) .final-quick{display:none}
/* Message builder */
.fbuild{grid-column:1 / -1;display:grid;border-radius:24px;overflow:hidden;background:var(--night-2);border:1px solid var(--night-line);box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
html:not(.js) .fbuild{display:none}
@media (min-width:900px){.fbuild{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.fb-in{display:grid;gap:18px;align-content:start;padding:clamp(20px,2.6vw,32px)}
.fb-l,.fb-cap{margin:0;display:flex;align-items:center;gap:8px;font:500 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.fb-l i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:ping 2.4s var(--ease) infinite}
.fbuild h3{margin-top:-6px;font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);letter-spacing:-.02em;line-height:1.12;color:var(--on-night)}
.fb-set{border:0;margin:0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:7px}
.fb-set legend,.fb-name label{padding:0;margin-bottom:9px;font:600 .98rem/1.3 var(--body);color:var(--on-night)}
.fb-set legend small,.fb-name small{margin-left:8px;font:400 .68rem/1 var(--mono);letter-spacing:.04em;color:var(--on-night-2)}
.fb-set legend small[hidden]{display:none}
/* call or coffee, and the business name, side by side */
.fb-row{display:grid;gap:18px 28px}
@media (min-width:640px){.fb-row{grid-template-columns:auto minmax(0,1fr)}}
.fb-name{display:grid;align-content:start;min-width:0}
.fb-name label{display:block}
.fb-name input{width:100%;max-width:320px;min-height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--night-line);background:var(--night);color:var(--on-night);font:400 1rem/1 var(--body);transition:border-color .25s}
.fb-name input:hover,.fb-name input:focus{border-color:var(--signal)}
.fb-name input::placeholder{color:var(--on-night-2)}
.fb-set label{position:relative;display:inline-flex;cursor:pointer}
.fb-set input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fb-set span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--night-line);background:var(--night);color:var(--on-night);font:600 .88rem/1 var(--body);
  transition:border-color .25s,background .25s,color .25s,translate .25s var(--ease)}
.fb-set label:hover span{border-color:var(--signal);translate:0 -1px}
.fb-set input:checked + span{background:linear-gradient(90deg,var(--signal),#FF8A4C);border-color:transparent;color:var(--night)}
.fb-set input:focus-visible + span{outline:2px solid var(--signal);outline-offset:3px}
.fb-set span svg{width:15px;height:15px;margin-right:7px;flex:none;opacity:.8}      /* the business's icon, as in the other pickers */
.fb-set input:checked + span svg{opacity:1}
/* how much of the message is filled in: business, channels, call or coffee, time of day */
.fb-out > .fb-cap{justify-self:stretch}
.fb-meter{margin-left:auto;display:inline-flex;gap:4px}
.fb-meter i{width:18px;height:4px;border-radius:2px;background:var(--night-line);transition:background .3s}
.fb-meter i.on{background:linear-gradient(90deg,var(--signal),#FF8A4C)}
.fb-clear{margin-left:auto;flex:none;white-space:nowrap;min-height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--night-line);background:transparent;color:var(--on-night);font:500 .58rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .25s}
.fb-clear:hover{border-color:var(--signal)}
.fb-clear[hidden]{display:none}
/* once the message has something in it, the first step ("You send it") beats */
.fb-next.ready li:first-child::before{animation:ping 2.4s var(--ease) infinite}
.fb-out{display:grid;gap:12px;align-content:center;justify-items:start;padding:clamp(20px,2.6vw,32px);background:var(--night);border-top:1px solid var(--night-line)}
@media (min-width:900px){.fb-out{border-top:0;border-left:1px solid var(--night-line)}}
/* the message, shown the way it will arrive: a small chat with IHERO's name on top */
.fb-chat{justify-self:stretch;border-radius:18px;overflow:hidden;border:1px solid var(--night-line);background:var(--night-2)}
.fb-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--night-line)}
.fb-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;color:var(--night)}
.fb-av svg{width:13px;height:auto}
.fb-who{display:grid;gap:4px;min-width:0}
.fb-who b{font:600 .95rem/1 var(--body);color:var(--on-night)}
.fb-who small{font:400 .66rem/1.2 var(--mono);color:var(--on-night-2)}
.fb-body{display:grid;gap:7px;justify-items:end;padding:14px 14px 12px;background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.1px) 0 0/16px 16px}
.fb-msg{margin:0;max-width:96%;padding:12px 14px 11px;border-radius:16px 16px 4px 16px;background:var(--bubble-out);color:var(--ink);font:400 1rem/1.5 var(--body)}
/* the sentence that just changed flashes once */
.fb-msg .new{border-radius:4px;animation:fb-new 1.6s var(--ease)}
@keyframes fb-new{0%,35%{background:rgba(255,90,31,.42);box-shadow:0 0 0 2px rgba(255,90,31,.42)}100%{background:transparent;box-shadow:0 0 0 2px transparent}}
.fb-meta{font:400 .64rem/1.3 var(--mono);color:var(--on-night-2);text-align:right}
/* what the visitor set further up the page: chips they can take back out */
.fb-inc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.fb-inc[hidden],.fb-inc button[hidden]{display:none}
.fb-inc span{margin-right:2px}
.fb-inc button{min-height:30px;padding:0 11px 0 9px;border-radius:999px;border:1px dashed var(--night-line);background:transparent;color:var(--on-night-2);font:600 .82rem/1 var(--body);letter-spacing:0;text-transform:none;cursor:pointer;transition:border-color .25s,color .25s,translate .25s var(--ease)}
.fb-inc button::before{content:"+";margin-right:6px;font-weight:700;color:var(--on-night-2)}
.fb-inc button[aria-pressed="true"]{border:1px solid rgba(255,90,31,.7);color:var(--on-night)}
.fb-inc button[aria-pressed="true"]::before{content:"✓";color:#FF8A4C}
.fb-inc button:hover{translate:0 -1px;border-color:var(--signal)}
.fb-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;justify-self:stretch}
.fb-copy{min-height:44px;padding:0 2px;border:0;background:none;color:var(--on-night);font:600 .9rem/1 var(--body);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.fb-copy:hover{text-decoration-color:var(--on-night)}
/* what happens next: four numbered steps on one line, joined by a line a light runs along */
.fb-next{grid-column:1 / -1;display:grid;gap:14px;padding:18px clamp(20px,2.6vw,32px) 22px;border-top:1px solid var(--night-line);background:rgba(11,15,26,.55)}
.fb-next ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;margin:0;padding:0;list-style:none;counter-reset:n}
.fb-next li{position:relative;display:grid;gap:3px;align-content:start;padding-left:36px;counter-increment:n}
.fb-next li::before{content:counter(n);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 .7rem/1 var(--mono);color:var(--night);background:linear-gradient(135deg,var(--signal),#FF8A4C)}
.fb-next b{font:600 .98rem/1.25 var(--body);color:var(--on-night)}
.fb-next li span{font:400 .7rem/1.3 var(--mono);color:var(--on-night-2)}
@media (min-width:900px){
  .fb-next ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .fb-next li{padding:36px 18px 0 0}
  .fb-next li:not(:last-child)::after{content:"";position:absolute;left:34px;right:8px;top:12px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--signal),transparent) -60px 0/60px 100% no-repeat,var(--night-line);animation:fb-run 3.6s linear infinite}
  .fb-next li:nth-child(2)::after{animation-delay:1.2s}
  .fb-next li:nth-child(3)::after{animation-delay:2.4s}
}
@keyframes fb-run{0%{background-position:-60px 0,0 0}33%,100%{background-position:calc(100% + 60px) 0,0 0}}
.fb-note{font:400 .7rem/1.5 var(--mono);color:var(--on-night-2)}
@media (max-width:640px){.fb-out .btn{width:100%;justify-content:center}}
/* Closing shield — same choreography as IHERO Media v3, in white. */
.shield{width:min(100%,300px);margin-inline:auto;overflow:visible}
.shield.reset .fill{transition:none}
@media (max-width:979px){.shield{width:150px;margin:0}}
.shield > path:not(.fill){fill:none;stroke:var(--on-night);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.shield .fill{fill:#fff;transition:opacity .9s ease 1.7s}
.reveal-on .shield:not(.drawn) > path:not(.fill){stroke-dashoffset:1}
.reveal-on .shield:not(.drawn) .fill{opacity:0}
.shield.drawn > path:not(.fill){animation:outline 2.2s var(--ease-io) both}
.shield.drawn > path:nth-child(2){animation-delay:.35s}
.shield.drawn > path:nth-child(3){animation-delay:.5s}
@keyframes outline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ── Footer ────────────────────────────────────────────────
   Generated by docs/footer.py and laid out like IHERO Media v3's footer (the owner's request):
   four columns (brand with the time in Malta; contact rows with an icon tile; the page index, each
   link with a line under it and a tick once seen; where we work and the sister studio), then a
   band (a QR code that opens WhatsApp on computers, "save our contact" on phones), then the legal
   row: copyright, a privacy chip that opens upward, back to top. */
.ftr{position:relative;overflow:hidden;background:radial-gradient(42rem 22rem at 88% 0%,rgba(255,90,31,.12),transparent 70%),var(--night);color:var(--on-night-2);padding-block:3.5rem calc(1.5rem + env(safe-area-inset-bottom,0px));font-size:.93rem}
.ftr::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,var(--night-line),var(--signal) 22%,#FF8A4C 34%,var(--night-line) 62%)}
.ftr .wrap{position:relative}
.ftr-grid{display:grid;gap:2.2rem}
@media (min-width:620px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.ftr-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1.25fr) minmax(0,1.45fr) minmax(0,.72fr);column-gap:clamp(1.6rem,3vw,2.6rem)}.ftr .brand small{white-space:nowrap}}
.ftr a{text-decoration:none;color:var(--on-night)}
.ftr ul,.ftr ol{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.ftr .brand svg{color:var(--on-night)}
.ftr .brand:hover svg{color:var(--signal)}
.ftr .brand b{color:var(--on-night)}
.ftr .brand small{color:var(--on-night-2)}
.ftr-line{margin-top:1rem;max-width:34ch;line-height:1.5}
/* the time in Malta, with a greeting (site.js fills both in) */
.ftr-now{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .85rem;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--night-line);font-size:.88rem;line-height:1.35;color:var(--on-night-2)}
.ftr-now i{width:8px;height:8px;border-radius:50%;flex:none;background:#3DDC84;animation:live 2.2s var(--ease) infinite}
.ftr-now b{color:var(--on-night);font:600 .92rem/1 var(--mono);font-variant-numeric:tabular-nums}
.ftr-h{margin:0 0 1rem;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
/* the last column stacks its two short lists; on a phone they sit side by side */
.ftr-place{display:grid;gap:1.5rem;align-content:start}
@media (max-width:619px){.ftr-place{grid-template-columns:1fr 1fr}}
/* contact: an icon tile, a title, a line under it */
.ftr .ftr-contact{gap:.35rem}
.ftr-contact li{display:flex;align-items:center;gap:.5rem}
.ftr-contact a,.ftr-row{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;padding:.2rem .6rem .2rem .2rem;border-radius:14px;text-align:left;transition:background-color .2s,translate .3s var(--ease)}
.ftr-row{border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.fi{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);color:#FF8A57;transition:background .25s,color .25s}
.fi svg{width:18px;height:18px}
.ftr-contact b,.ftr-nav b,.ftr-studio b{display:block;font:600 .97rem/1.25 var(--body);color:var(--on-night)}
.ftr-contact small,.ftr-nav small,.ftr-studio small{display:block;font-size:.8rem;line-height:1.3;color:var(--on-night-2)}
#ftr-num{white-space:nowrap}
@media (hover:hover){
  .ftr-contact a:hover,.ftr-row:hover{background:rgba(255,255,255,.05);translate:3px 0}
  .ftr-contact a:hover .fi,.ftr-row:hover .fi{background:linear-gradient(135deg,var(--signal),#FF8A4C);color:var(--night)}
}
/* small "Copy" pill beside the number; green for a moment once it has copied */
.cpy{display:inline-flex;align-items:center;gap:.35rem;min-height:30px;padding:.3rem .6rem;border-radius:99px;border:1px solid var(--night-line);background:none;color:var(--on-night-2);font:500 .74rem/1 var(--body);white-space:nowrap;cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.cpy svg{width:13px;height:13px}
.cpy:hover{border-color:var(--on-night-2);color:var(--on-night)}
.cpy.done{border-color:transparent;background:rgba(61,220,132,.16);color:#86EFAC}
.ftr-row.done .fi{background:rgba(61,220,132,.16);color:#86EFAC}
.ftr-row.done small{color:#86EFAC}
/* the page index: two columns of four; an arrow on hover, a tick once that section has been seen */
.ftr-seen{color:var(--on-night)}
.ftr .ftr-nav ol{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(4,auto);gap:.15rem 1.1rem}
.ftr-nav ol a,.ftr-studio a{display:grid;align-content:center;min-height:44px;transition:translate .3s var(--ease)}
/* the mark sits right after the title (on the <b>), so a long line underneath cannot push it away */
.ftr-nav ol b::after{content:"→";display:inline-block;margin-left:.4rem;opacity:0;translate:-6px 0;color:#FF8A57;transition:opacity .25s,translate .3s var(--ease)}
@media (hover:hover){.ftr-nav ol a:hover,.ftr-studio a:hover{translate:3px 0}.ftr-nav ol a:hover b::after{opacity:1;translate:0 0}}
.ftr-nav ol a.seen b::after{content:"✓";opacity:1;translate:0 0;font:700 .74rem/1 var(--body)}
.ftr .ftr-next{display:inline-flex;align-items:center;min-height:32px;margin-top:.5rem;font:600 .86rem/1.2 var(--body);color:var(--on-night);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.ftr .ftr-next:hover{text-decoration-color:var(--on-night)}
.ftr .ftr-next[hidden]{display:none}
/* where we work */
.ftr .serving{gap:.45rem}
.serving li{display:flex;align-items:center;gap:.6rem;min-height:28px}
.serving svg{flex:none;width:28px;height:28px;padding:6px;border-radius:9px;background:rgba(255,255,255,.06);color:#FF8A57}
.ftr-studio .arr{display:inline-block;margin-left:.2rem;color:#FF8A57;transition:translate .3s var(--ease)}
.ftr-studio a:hover .arr{translate:2px -2px}
/* the band: scan to WhatsApp (computers) / save our contact (everyone) */
.ftr-band{position:relative;margin-top:2.4rem;display:grid;gap:1rem 1.6rem;align-items:center;padding:1.2rem 1.3rem;border-radius:22px;border:1.5px solid transparent;
  background:linear-gradient(var(--night-2),var(--night-2)) padding-box,linear-gradient(120deg,rgba(255,90,31,.8),rgba(255,138,76,.38) 42%,rgba(163,172,191,.32)) border-box}
.qb-qr{display:none;position:relative;margin:0;z-index:2}
.qb-zoom{display:block;padding:0;border:0;border-radius:14px;background:none;cursor:zoom-in}
.qb-qr img{display:block;width:128px;height:128px;padding:5px;border-radius:14px;background:#fff;transform-origin:left center;transition:scale .35s var(--ease),box-shadow .35s var(--ease)}
.qb-qr::after{content:"";position:absolute;inset:-5px;border-radius:18px;border:2px solid rgba(255,138,76,.65);opacity:0;pointer-events:none}
.qb-h{margin:0 0 .35rem;font:720 clamp(1.15rem,1rem + .6vw,1.5rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--on-night)}
.qb-s{margin:0;max-width:54ch;font-size:.95rem;line-height:1.5;color:var(--on-night-2)}
.qb-d,.qb-hov{display:none}
.qb-act{display:grid;gap:.45rem;justify-items:start}
.qb-act small{display:none;font-size:.8rem;color:var(--on-night-2)}
.ftr a.qb-save{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.7rem 1.25rem;border-radius:99px;border:1.5px solid var(--night-line);background:rgba(255,255,255,.05);font:600 .97rem/1 var(--body);color:var(--on-night);white-space:nowrap;transition:translate .3s var(--ease),border-color .2s,background-color .2s}
.qb-save svg{width:18px;height:18px;color:#FF8A57}
.ftr a.qb-save:hover{translate:0 -2px;border-color:rgba(255,138,76,.75);background:rgba(255,90,31,.1)}
.ftr a.qb-save:active{translate:0 0;scale:.97}
@media (min-width:860px){
  .ftr-band{grid-template-columns:auto 1fr auto;padding:1.1rem 1.6rem 1.1rem 1.1rem}
  .qb-qr{display:block}
  .qb-d{display:inline}.qb-p{display:none}
  .qb-act{justify-items:end;text-align:right}
  .qb-act small{display:block}
}
/* the code grows under the mouse; pressing it keeps it big (keyboards, touch laptops) */
@media (min-width:860px) and (hover:hover){
  .qb-hov{display:inline}
  .qb-qr:hover img{scale:1.8;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 4px rgba(255,138,76,.55)}
  .qb-qr:hover::after{display:none}
}
.qb-qr.big img{scale:1.8;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 4px rgba(255,138,76,.55)}
.qb-qr.big::after{display:none}
.qb-qr.big .qb-zoom{cursor:zoom-out}
@media (prefers-reduced-motion:no-preference){.qb-qr::after{animation:qr-ping 2.8s ease-out 1.5s infinite}}
@keyframes qr-ping{0%{opacity:.9;scale:1}60%,100%{opacity:0;scale:1.1}}
/* legal row */
.ftr .legal{position:relative;margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;font:400 .74rem/1.5 var(--mono);color:var(--on-night-2)}
/* privacy: a quiet line with a tick; it opens upward to say what "no cookies, no tracking" means */
.ftr-priv{position:relative}
.ftr-priv summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;min-height:30px;color:var(--on-night);cursor:pointer;white-space:nowrap;text-decoration:underline dotted rgba(163,172,191,.6);text-underline-offset:4px;transition:text-decoration-color .25s}
.ftr-priv summary::-webkit-details-marker{display:none}
.ftr-priv summary svg{width:13px;height:13px;color:#86EFAC}
.ftr-priv summary:hover,.ftr-priv[open] summary{text-decoration-color:var(--signal)}
.ftr-priv p{position:absolute;z-index:2;right:0;bottom:calc(100% + 10px);width:min(340px,calc(100vw - 2 * var(--gutter)));margin:0;padding:13px 15px;border-radius:14px;background:var(--paper);color:var(--ink);font:400 .88rem/1.5 var(--body);box-shadow:0 24px 50px -20px rgba(0,0,0,.8);animation:pop .3s var(--ease)}
.ftr-top{display:inline-flex;align-items:center;gap:.4rem;min-height:32px;padding:.35rem .75rem;border:1px solid var(--night-line);border-radius:99px;white-space:nowrap;transition:border-color .2s}
.ftr-top svg{width:14px;height:14px;transition:translate .3s var(--ease)}
.ftr-top:hover{border-color:var(--on-night-2)}
.ftr-top:hover svg{translate:0 -3px}
@media (max-width:520px){.ftr-priv p{right:auto;left:0}}

/* ── Sticky mobile bar ───────────────────────────────────── */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line);display:none;transform:translateY(110%);transition:transform .5s var(--ease)}
.mbar.show{transform:none}
.mbar .btn{width:100%;justify-content:center}
@media (max-width:760px){.mbar{display:block}body{padding-bottom:84px}}

/* ── Reduced motion: final states, no loops ─────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rings{display:none}
  .wave i{transform:scaleY(.7)}
  .shield > path:not(.fill){stroke-dashoffset:0!important}
  .shield .fill{opacity:1!important;transition:none}
  .reveal-on [data-reveal]{opacity:1;transform:none}
  .hero-stage .chip,.hero-stage .hsum,.hs-row{opacity:1!important;transform:none!important}
}

/* ── 404.html: one screen, no script ───────────────────────────── */
.nf{min-height:calc(100svh - var(--header-h));display:grid;align-items:center;padding-block:clamp(2rem,6vw,4rem) clamp(3rem,10vw,7rem)}
.nf .wrap{display:grid;gap:22px;justify-items:start}
.nf h1{font-size:clamp(2.3rem,1.4rem + 5vw,4.8rem);font-weight:760;letter-spacing:-.035em;line-height:.98}
.nf h1 em{font-style:normal;background:linear-gradient(90deg,var(--signal),#FF8A4C) 0 92%/100% .1em no-repeat}
.nf-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px}