@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:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');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:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');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}


/* ═══════════════════════════════════════════════════════════════════════
   IHERO Media v3 — cool light ground (after IHERO Foundation), logo navy, and
   the logo's own gradient as the brand thread.
   Contrast measured, not guessed:
     ink on ground 16.2:1 · soft 7.1 · faint 4.9 · accent (violet) 6.5 / 7.1 on white
     night: text 16.2 · muted 8.1 · accent-night 9.6
   The logo gradient is only 2.9:1 on white at its blue end — it is NEVER text,
   only decoration: logo, underlines, dots, timeline, rings.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#F3F5F8; --ground-2:#E8ECF2; --card:#FFFFFF;
  --ink:#111828; --ink-2:#4A5367; --muted:#626B80;
  --line:#DCE1E9; --line-2:#C5CDD9;
  --accent:#6D28D9; --accent-text:#6D28D9;
  --night:#111828; --night-2:#1A2338; --night-line:#2A3550;
  --on-night:#F3F5F8; --on-night-muted:#A7B0C4; --accent-night:#C4B5FD;
  --rec-dot:#F04438;                          /* the camera's REC light only — a real camera detail */
  --wa:#25D366;
  --grad:linear-gradient(135deg,#D400F5,#2E9BFF);
  --grad-x:linear-gradient(90deg,#D400F5,#2E9BFF);
  --grad-y:linear-gradient(180deg,#D400F5,#2E9BFF);
  --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-hero:clamp(2.5rem,1.45rem + 3.9vw,4.7rem);   /* Bricolage 800 is wide: 5.4rem broke the hero into 6 lines */
  --t-h2:clamp(2.05rem,1.45rem + 2.5vw,3.6rem);
  --t-h3:clamp(1.12rem,1rem + .4vw,1.32rem);
  --t-lead:clamp(1.1rem,1.02rem + .4vw,1.32rem);
  --t-body:clamp(1.02rem,.98rem + .15vw,1.1rem);
  --maxw:1200px; --pad:clamp(1.25rem,5vw,3rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --r:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--t-body)/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0}   /* text-wrap:pretty on EVERY paragraph cost ~35 ms of main thread on a throttled phone — measured */
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em}
h1{font-size:var(--t-hero);line-height:.98}
h2{font-size:var(--t-h2);line-height:1.02}
h3{font-family:var(--display);font-weight:700;font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em}
em{font-style:italic}
/* Emphasis = the logo's gradient drawn UNDER the words (the text stays navy: gradient text
   fails contrast). It draws in as the heading arrives; complete and static without motion. */
h1 em,h2 em{font-style:normal;background:var(--grad-x) 0 94%/100% .13em no-repeat;padding-bottom:.02em}
.reveal-on .rv h2 em,.reveal-on .rv h1 em{background-size:0% .13em;transition:background-size .9s var(--ease) .25s}
.reveal-on .rv.in h2 em,.reveal-on .rv.in h1 em{background-size:100% .13em}
.hero h1 em{animation:underline .9s var(--ease) .35s both}
.hero h1 em:nth-of-type(2){animation-delay:.5s}.hero h1 em:nth-of-type(3){animation-delay:.7s}   /* Websites → video → one person, drawn in turn */
@keyframes underline{from{background-size:0% .13em}}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(3.5rem,6.5vw,5.5rem);scroll-margin-top:84px}   /* owner flags empty bands >~200px on a ~1890×818 screen: two paddings must stay under that */
.alt{background:var(--ground-2)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:54ch;text-wrap:pretty}   /* only where it shows */
.muted{color:var(--muted)}

/* mono label with the REC dot — the recurring signature */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font:500 .72rem/1.3 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none}
.night .eyebrow{color:var(--on-night-muted)}
.night .eyebrow::before{background:var(--grad)}
.sec-head{max-width:760px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{margin-block:1rem 1.1rem}

.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}
.skip{position:absolute;left:1rem;top:-100px;z-index:100;background:var(--ink);color:var(--ground);padding:.8rem 1.1rem;border-radius:10px}
.skip:focus{top:1rem}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:.85rem 1.45rem;
  border-radius:999px;border:1.5px solid transparent;font:600 .98rem/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-ink{background:var(--ink);color:var(--ground)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.night .btn-ink{background:var(--ground);color:var(--ink)}
.night .btn-line{border-color:var(--night-line);color:var(--on-night)}
.btn .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.night .btn-ink .dot{background:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-ink:hover{box-shadow:0 14px 30px -12px rgba(17,24,40,.55)}
  .btn-line:hover{background:var(--ink);color:var(--ground)}
  .night .btn-ink:hover{box-shadow:0 14px 34px -12px rgba(0,0,0,.8)}
  .night .btn-line:hover{border-color:var(--on-night);background:transparent;color:var(--on-night)}
}
.btn:active{transform:scale(.97);transition-duration:.08s}   /* press faster than release */
/* ── brand button: the logo gradient, DEEPENED so white text passes everywhere on it.
   #A21CBF → #6D28D9 → #155FB8: white text ≥ 6.08:1 at every point of the ramp; with the 12% sheen
   passing over, still ≥ 4.87:1 (measured). The bright logo gradient (2.9:1) never carries text.
   The gradient lives on an oversized ::before that slides (transform only — no repaints). */
.btn-brand{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#6D28D9;border-color:transparent;
  box-shadow:0 10px 24px -14px rgba(109,40,217,.8)}
.btn-brand::before{content:"";position:absolute;top:0;bottom:0;left:0;width:300%;z-index:-2;
  background:linear-gradient(90deg,#A21CBF,#6D28D9 25%,#155FB8 50%,#6D28D9 75%,#A21CBF)}
.btn-brand::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;translate:-130% 0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12) 50%,transparent)}
@media (hover:hover) and (pointer:fine){
  .btn-brand:hover{box-shadow:0 18px 38px -14px rgba(123,77,250,.85)}
  .btn-light:hover,.btn-ink:hover{box-shadow:0 14px 30px -12px rgba(17,24,40,.55)}
  .btn:hover > svg:first-child{animation:wig .55s var(--ease)}
  .btn:hover > svg:last-child:not(:first-child){translate:0 3px}
  .btn > svg{transition:translate .3s var(--ease)}
  .link:hover svg{translate:2px -2px}
  .link svg{transition:translate .3s var(--ease)}
}
@media (prefers-reduced-motion:no-preference){
  .btn-brand::before{animation:flow 9s ease-in-out infinite alternate}
  .btn-brand::after{animation:sheen 6.5s var(--ease-io) 1.5s infinite}
  .btn-brand:hover::after{animation-duration:1.4s}
  .hero .btn-line > svg:last-child{animation:nudge 2.8s var(--ease) 2s infinite}   /* "see how it's made" points down, gently */
}
@keyframes flow{to{translate:-66.666% 0}}
@keyframes sheen{0%{translate:-130% 0}22%,100%{translate:260% 0}}
@keyframes wig{25%{rotate:-14deg}55%{rotate:10deg}80%{rotate:-4deg}}
@keyframes nudge{0%,70%,100%{translate:0 0}80%{translate:0 4px}90%{translate:0 0}}
.link{color:var(--accent-text);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;min-height:32px}
.link svg{width:1em;height:1em;flex:none}   /* unsized, the arrow rendered huge and squeezed the text onto 3 lines */
.link:hover{text-decoration:underline;text-underline-offset:3px}
.night .link{color:var(--accent-night)}

:where(a,button,summary,input,textarea,select):focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;border-radius:8px}
.night :where(a,button,summary):focus-visible{outline-color:var(--accent-night)}

/* ── header ──────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(243,245,248,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:1.5rem;padding-block:.8rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);min-height:44px}
.brand img{width:28px;height:auto;flex:none}
.brand b{display:block;font:800 1.02rem/1.1 var(--display);letter-spacing:.04em}
/* the logo never travels alone — the name says "Media", which is half the offer */
.brand small{display:block;font:400 .72rem/1.3 var(--sans);color:var(--muted)}
.nav{display:none;margin-left:auto;gap:1.9rem}
.nav a{font-size:.92rem;font-weight:500;text-decoration:none;color:var(--ink-2);padding-block:.5rem}
.nav a:hover{color:var(--ink)}
.hdr .btn{margin-left:auto;min-height:42px;padding:.6rem 1rem;font-size:.9rem}
@media (min-width:980px){.nav{display:flex}.hdr .btn{margin-left:1rem}}
@media (max-width:520px){.hdr .btn .lbl{display:none}.hdr .btn{padding:.6rem .75rem}.brand small{font-size:.66rem}}  /* icon stays — a bare dot meant nothing */

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(2.5rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(38rem 26rem at 78% 30%,rgba(212,0,245,.10),transparent 70%),radial-gradient(34rem 24rem at 92% 70%,rgba(46,155,255,.12),transparent 70%)}
.hero .wrap{position:relative}
.hero .wrap{display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center}
@media (min-width:980px){.hero .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.hero h1{margin-block:1.3rem 1.5rem}
.hero .lead{max-width:48ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.fine{margin-top:1.1rem;font:400 .74rem/1.5 var(--mono);letter-spacing:.04em;color:var(--muted)}
.hero-ticks{list-style:none;margin:1.15rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;font:500 .92rem/1.3 var(--sans);color:var(--ink-2)}
.hero-ticks li{display:inline-flex;align-items:center;gap:.4rem}
.hero-ticks svg{width:15px;height:15px;flex:none;color:var(--accent)}
.fine b{color:var(--ink);font-weight:500}
.fine a{display:inline-flex;align-items:center;min-height:28px}   /* a real conversion path, so a real tap target */
/* four recent builds: 2 × 2, or one row of four where the column is wide enough — never 3 + 1 */
.hero-work{display:grid;grid-template-columns:repeat(2,max-content);align-items:center;gap:.5rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line)}
@media (min-width:1240px){.hero-work{grid-template-columns:repeat(4,max-content);gap:.4rem}}
.hw-l{grid-column:1/-1;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.hw-item{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .7rem .3rem .3rem;border-radius:12px;background:var(--card);border:1px solid var(--line);
  font:600 .8rem/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .2s ease,translate .3s var(--ease)}
.hw-item img{width:42px;height:26px;border-radius:7px;object-fit:cover;object-position:top}
@media (hover:hover){.hw-item:hover{border-color:var(--line-2);translate:0 -2px}}
/* a bigger look at the site when you point at its chip (desktop only; the image loads on first hover) */
.hw-item{position:relative}
.hw-peek{display:none;position:absolute;left:0;bottom:calc(100% + 10px);z-index:6;width:300px;padding:6px;border-radius:14px;background:var(--card);
  box-shadow:0 26px 50px -20px rgba(17,24,40,.5),0 0 0 1px rgba(17,24,40,.06);pointer-events:none}
.hw-item .hw-peek img{display:block;width:100%;height:auto;aspect-ratio:1080/675;border-radius:9px;background:var(--ground-2)}
@media (hover:hover) and (min-width:980px){.hw-item:hover .hw-peek,.hw-item:focus-visible .hw-peek{display:block}}
@media (hover:hover) and (min-width:980px) and (prefers-reduced-motion:no-preference){.hw-item:hover .hw-peek,.hw-item:focus-visible .hw-peek{animation:pop-in .3s var(--ease)}}
@media (max-width:560px){.hw-item{gap:.45rem}.hw-item img{width:38px;height:24px}}
@media (min-width:1240px){.hw-item{padding-right:.55rem;gap:.42rem}}   /* after the base rule, so it applies: four in a row fit the column */

/* ── SIGNATURE 1: the viewfinder ─────────────────────────────────────────
   A camera framing a phone in which a website builds itself, ending with an
   enquiry arriving. Video + web in one picture — the whole positioning.
   JS steps data-stage 0→4 and loops; CSS does every movement. */
.vf-wrap{position:relative;isolation:isolate;margin:0 auto;width:100%;max-width:460px}   /* width:100% — auto margins alone make a grid item shrink to fit */
/* brand light behind the camera: two slow orbs (transform only) */
.vf-aura{position:absolute;inset:-16% -24%;z-index:-1;pointer-events:none}
.vf-aura i{position:absolute;width:72%;aspect-ratio:1;border-radius:50%}
.vf-aura i:first-child{right:0;top:0;background:radial-gradient(closest-side,rgba(212,0,245,.30),transparent)}
.vf-aura i:last-child{left:0;bottom:6%;background:radial-gradient(closest-side,rgba(46,155,255,.32),transparent)}
/* rule-of-thirds guides, like a real viewfinder */
.vf-grid{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(243,245,248,.08),rgba(243,245,248,.08)) 33.33% 0/1px 100% no-repeat,linear-gradient(rgba(243,245,248,.08),rgba(243,245,248,.08)) 66.66% 0/1px 100% no-repeat,
    linear-gradient(rgba(243,245,248,.08),rgba(243,245,248,.08)) 0 33.33%/100% 1px no-repeat,linear-gradient(rgba(243,245,248,.08),rgba(243,245,248,.08)) 0 66.66%/100% 1px no-repeat}
/* arrives when the build finishes: the site going live */
.vf-live{position:absolute;right:-8%;top:61%;z-index:5;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .6rem .5rem .7rem;border-radius:99px;
  background:#fff;box-shadow:0 16px 30px -14px rgba(17,24,40,.5),0 0 0 1px rgba(17,24,40,.05);font:500 .7rem/1 var(--mono);color:var(--ink)}
.vf-live i{width:7px;height:7px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.vf-live b{font:700 .62rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:.28rem .45rem;border-radius:99px;background:#E8F7EE;color:#166534}
.vf-live{transition:opacity .4s var(--ease),translate .6s var(--ease),scale .6s var(--ease)}
.vf[data-stage="4"] ~ .vf-live{transition-delay:.35s}
.vf:not([data-stage="4"]) ~ .vf-live{opacity:0;translate:-10px 0;scale:.9}
@media (max-width:979px){.vf-wrap{max-width:430px}.vf-live{right:-3%}}
@media (max-width:480px){.vf-live span{display:none}}
@media (prefers-reduced-motion:no-preference){
  .vf-aura i{animation:aura 16s ease-in-out infinite alternate}
  .vf-aura i:last-child{animation-duration:20s;animation-direction:alternate-reverse}
}
@keyframes aura{to{translate:-9% 7%;scale:1.12}}
.vf{position:relative;aspect-ratio:4/5;margin-inline:auto;width:100%;
  background:radial-gradient(120% 80% at 50% 35%,#1B2336 0%,#0C1120 70%);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(17,24,40,.55)}
.vf::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}   /* sensor texture */
.vf-c{position:absolute;width:26px;height:26px;border:2px solid rgba(243,245,248,.8)}
.vf-c.tl{top:16px;left:16px;border-right:0;border-bottom:0}
.vf-c.tr{top:16px;right:16px;border-left:0;border-bottom:0}
.vf-c.bl{bottom:16px;left:16px;border-right:0;border-top:0}
.vf-c.br{bottom:16px;right:16px;border-left:0;border-top:0}
.vf-bar{position:absolute;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;
  font:500 .68rem/1 var(--mono);letter-spacing:.1em;color:rgba(243,245,248,.82);z-index:3}
.vf-bar.top{top:24px}.vf-bar.bot{bottom:24px}
.vf-rec{display:inline-flex;align-items:center;gap:.45rem}
.vf-rec i{width:8px;height:8px;border-radius:50%;background:var(--rec-dot);animation:rec 1.2s steps(1,end) infinite}
@keyframes rec{50%{opacity:.15}}
.vf-tc{font-variant-numeric:tabular-nums}
/* focus reticle — tightens on the phone when the site "locks in" */
.vf-focus{position:absolute;left:50%;top:51%;width:58%;height:80%;transform:translate(-50%,-50%) scale(1.08);
  border:1px solid rgba(243,245,248,.0);border-radius:6px;transition:transform .7s var(--ease),border-color .4s ease;z-index:2;pointer-events:none}
.vf[data-stage="3"] .vf-focus,.vf[data-stage="4"] .vf-focus{transform:translate(-50%,-50%) scale(1);border-color:rgba(196,181,253,.85)}

.vf-phone{position:absolute;left:50%;top:51%;width:44%;aspect-ratio:9/18.5;transform:translate(-50%,-50%);
  background:#070A12;border-radius:26px;padding:7px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -20px rgba(0,0,0,.7)}
.vf-screen{position:relative;height:100%;border-radius:20px;overflow:hidden;background:#FBFAF7}
/* mini site: every block starts as nothing, becomes a grey wireframe (stage 1), then real design (stage 2+) */
.ms{position:absolute;inset:0;padding:22px 11px 11px;display:flex;flex-direction:column;gap:7px}
.ms > *{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease),background-color .5s ease,color .5s ease}
.vf[data-stage="1"] .ms > *,.vf[data-stage="2"] .ms > *,.vf[data-stage="3"] .ms > *,.vf[data-stage="4"] .ms > *{opacity:1;transform:none}
.ms > *:nth-child(2){transition-delay:.07s}.ms > *:nth-child(3){transition-delay:.14s}.ms > *:nth-child(4){transition-delay:.21s}
.ms > *:nth-child(5){transition-delay:.28s}.ms > *:nth-child(6){transition-delay:.35s}.ms > *:nth-child(7){transition-delay:.42s}
.ms-nav{display:flex;align-items:center;justify-content:space-between;height:14px}
.ms-logo{width:34%;height:8px;border-radius:4px;background:#DDD9D0}
.ms-pill{width:22%;height:12px;border-radius:99px;background:#DDD9D0}
.ms-img{height:26%;border-radius:8px;background:#E6E2DA;position:relative;overflow:hidden}
.ms-img::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(160deg,#F2C28B 0%,#D9895B 45%,#4B6A86 100%)}   /* "photo" arrives */
.ms-h{font:800 12.5px/1.05 var(--display);letter-spacing:-.02em;color:transparent;background:#DDD9D0;border-radius:4px;min-height:28px}
.ms-p{height:18px;border-radius:4px;background:#E8E4DC}
.ms-btn{height:22px;border-radius:99px;background:#DDD9D0;display:grid;place-items:center;
  font:600 8.5px/1 var(--sans);color:transparent}
.ms-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:11%}
.ms-cards i{border-radius:6px;background:#E8E4DC;transition:background-color .5s ease}
.vf[data-stage="2"] .ms-logo,.vf[data-stage="3"] .ms-logo,.vf[data-stage="4"] .ms-logo{background:var(--ink)}
.vf[data-stage="2"] .ms-pill,.vf[data-stage="3"] .ms-pill,.vf[data-stage="4"] .ms-pill{background:var(--grad)}
.vf[data-stage="2"] .ms-img::after,.vf[data-stage="3"] .ms-img::after,.vf[data-stage="4"] .ms-img::after{opacity:1}
.vf[data-stage="2"] .ms-h,.vf[data-stage="3"] .ms-h,.vf[data-stage="4"] .ms-h{background:transparent;color:var(--ink)}
.vf[data-stage="2"] .ms-p,.vf[data-stage="3"] .ms-p,.vf[data-stage="4"] .ms-p{background:linear-gradient(#C9C4B8,#C9C4B8) 0 2px/92% 3px no-repeat,linear-gradient(#C9C4B8,#C9C4B8) 0 9px/70% 3px no-repeat,linear-gradient(#C9C4B8,#C9C4B8) 0 16px/80% 2px no-repeat}
.vf[data-stage="2"] .ms-btn,.vf[data-stage="3"] .ms-btn,.vf[data-stage="4"] .ms-btn{background:var(--wa);color:#073B1F}
.vf[data-stage="2"] .ms-cards i,.vf[data-stage="3"] .ms-cards i,.vf[data-stage="4"] .ms-cards i{background:#EFEBE3}
.vf[data-stage="4"] .ms-btn{animation:tap .5s var(--ease) .15s}
.ms-map{position:relative;height:16%;border-radius:8px;background:#E8E4DC;overflow:hidden;transition:background-color .5s ease}
.ms-map::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(28deg,transparent 46%,#fff 46% 53%,transparent 53%),linear-gradient(-14deg,transparent 58%,#fff 58% 63%,transparent 63%),
    radial-gradient(28% 40% at 22% 30%,#CFE3C6 0 98%,transparent 100%),#E4EAF0}
.ms-map::after{content:"";position:absolute;left:60%;top:26%;width:10px;height:10px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#E5484D;
  box-shadow:0 0 0 2.5px #fff;opacity:0;scale:.3;transition:opacity .3s ease .3s,scale .5s var(--ease) .3s}
.ms-map span{position:absolute;left:5px;bottom:5px;z-index:1;font:600 7px/1 var(--sans);padding:3px 5px;border-radius:99px;background:#fff;color:var(--ink);opacity:0;transition:opacity .4s ease .4s}
.vf[data-stage="2"] .ms-map::before,.vf[data-stage="3"] .ms-map::before,.vf[data-stage="4"] .ms-map::before,
.vf[data-stage="2"] .ms-map span,.vf[data-stage="3"] .ms-map span,.vf[data-stage="4"] .ms-map span{opacity:1}
.vf[data-stage="2"] .ms-map::after,.vf[data-stage="3"] .ms-map::after,.vf[data-stage="4"] .ms-map::after{opacity:1;scale:1}
/* camera HUD details: battery, audio meters */
.vf-tr{display:inline-flex;align-items:center;gap:.6rem}
.vf-batt{position:relative;width:17px;height:9px;border:1.5px solid rgba(243,245,248,.8);border-radius:2px}
.vf-batt::before{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:rgba(243,245,248,.85);border-radius:1px}
.vf-batt::after{content:"";position:absolute;right:-4px;top:50%;width:2px;height:4px;translate:0 -50%;background:rgba(243,245,248,.8);border-radius:0 1px 1px 0}
.vf-meter{position:absolute;left:26px;top:38%;translate:0 -50%;z-index:3;display:flex;gap:3px;height:22%}
.vf-meter i{position:relative;width:4px;border-radius:2px;overflow:hidden;background:linear-gradient(to top,#3DDC84 0 62%,#F5C542 62% 84%,#F04438 84%)}
.vf-meter i::after{content:"";position:absolute;inset:0;background:#1A2234;transform-origin:top;scale:1 .38}
.vf-meter i:nth-child(2)::after{scale:1 .46}
.vf-meter small{position:absolute;left:-2px;top:calc(100% + 7px);font:500 7px/1 var(--mono);letter-spacing:.08em;color:rgba(243,245,248,.6);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .vf-meter i::after{animation:meter 1.1s steps(6,end) infinite}
  .vf-meter i:nth-child(2)::after{animation-duration:.9s;animation-delay:-.4s}
}
@keyframes meter{0%{scale:1 .4}25%{scale:1 .18}50%{scale:1 .52}75%{scale:1 .28}100%{scale:1 .44}}
@keyframes tap{40%{transform:scale(.9)}}
/* the payoff: an enquiry arrives */
.vf-toast{position:absolute;left:14%;right:14%;top:13%;z-index:4;display:flex;gap:9px;align-items:flex-start;
  padding:10px 12px;border-radius:14px;background:rgba(251,250,247,.97);box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.vf[data-stage="4"] .vf-toast{opacity:1;transform:none}
.vf-toast .ic{width:22px;height:22px;border-radius:6px;background:var(--wa);flex:none;display:grid;place-items:center}
.vf-toast .ic svg{width:13px;height:13px;color:#fff}
.vf-toast b{display:block;font:600 10.5px/1.2 var(--sans);color:var(--ink)}
.vf-toast span{display:block;font:400 10.5px/1.3 var(--sans);color:var(--ink-2)}
.vf-toast small{margin-left:auto;font:500 9px/1.2 var(--mono);color:var(--muted);white-space:nowrap}
.vf-caption{margin-top:.9rem;text-align:center;font:400 .72rem/1.4 var(--mono);letter-spacing:.04em;color:var(--muted)}
/* "see it as your business": the phone's example site follows the choice. Variants are <i class="bz bz-N">. */
.bz{font-style:normal}
.bz:not(.bz-1){display:none}
.bz-box{display:none}
@supports selector(:has(*)){
  .bz-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .7rem;margin-top:1.1rem}
  .bz-h{margin:0;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .bz-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
  .bz-chips li{position:relative;display:inline-flex;align-items:center;padding:.5rem .8rem;border-radius:99px;background:var(--card);border:1px solid var(--line);
    font:600 .84rem/1 var(--sans);color:var(--ink);transition:translate .25s var(--ease),background-color .2s ease,color .2s ease,border-color .2s ease}
  .bz-in{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .bz-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .bz-chips li:has(.bz-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent;color:#fff}
  @media (hover:hover){.bz-chips li:hover{translate:0 -2px;border-color:var(--line-2)}}
  .vf-wrap:has(.bz-in:not(#bz-1):checked) .bz-1{display:none}
  .vf-wrap:has(#bz-2:checked) .bz-2,.vf-wrap:has(#bz-3:checked) .bz-3,.vf-wrap:has(#bz-4:checked) .bz-4{display:inline}
  .vf-wrap:has(#bz-2:checked) .ms-img::after{background:linear-gradient(160deg,#BFE6DE 0%,#4C9A93 50%,#1F4E5A 100%)}
  .vf-wrap:has(#bz-3:checked) .ms-img::after{background:linear-gradient(160deg,#F7CADB 0%,#D9779E 50%,#6B2D5C 100%)}
  .vf-wrap:has(#bz-4:checked) .ms-img::after{background:linear-gradient(160deg,#F7D08A 0%,#D9663B 50%,#5A1F1A 100%)}
}

/* ── problem: two suppliers (a messy, tilted pair) vs one person ────────
   The pair sits in a dashed tray: two invoices, a blame icon on the seam, and
   "you in the middle". The one-person card gets the gradient ring + a way on
   to pricing. Tilt is the resting state (no-JS / reduced motion show it too);
   with motion the cards start straight and drift apart once revealed.        */
@media (min-width:980px){
  .sec-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,23rem);column-gap:clamp(2.5rem,5vw,5rem);align-items:end}
  .sec-head--split .eyebrow{grid-column:1/-1;justify-self:start}
  .sec-head--split h2{margin-bottom:0}
  .sec-head--split .lead{margin:0;padding-bottom:.4rem}
}
.h-lines span{display:block}          /* one sentence per line: Two… / Two… / Two… */
.versus{display:grid;gap:1.1rem}
@media (min-width:980px){.versus{grid-template-columns:minmax(0,2fr) auto minmax(0,1.06fr);align-items:stretch}}
.vs-pair{display:flex;flex-direction:column;gap:1.1rem;padding:clamp(1rem,2vw,1.4rem);border:1.5px dashed var(--line-2);border-radius:24px;
  background:radial-gradient(70% 55% at 0% 0%,rgba(240,180,41,.13),transparent 70%),rgba(255,255,255,.38);transition:border-color .4s ease}
.vs-cap{margin:0;display:flex;align-items:center;gap:.55rem;font:500 .7rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vs-cap::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#F0B429;box-shadow:0 0 0 3px rgba(240,180,41,.22)}
.vs-cards{position:relative;display:grid;gap:1rem}
@media (min-width:640px){.vs-cards{grid-template-columns:1fr 1fr}}
.vs{border-radius:var(--r);padding:1.4rem;border:1px solid var(--line);background:var(--card)}
.vs--a{rotate:-1.2deg} .vs--b{rotate:1.2deg}
@media (max-width:639px){.vs--a{rotate:-.7deg} .vs--b{rotate:.7deg}}
.vs-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}
.vs .tag{display:inline-flex;align-items:center;gap:.55rem;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vs .inv{flex:none;font:500 .66rem/1 var(--mono);letter-spacing:.04em;color:var(--muted);border:1px dashed var(--line-2);border-radius:6px;padding:.38rem .55rem}
.vs h3{margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.vs .role{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--ground-2);color:var(--ink-2)}
.vs .role svg{width:17px;height:17px}
/* stuck vs on track, as progress bars */
.vs-bar{display:block;height:6px;margin-top:1.05rem;border-radius:99px;background:var(--ground-2);overflow:hidden}
.vs-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;transform-origin:left;
  background:repeating-linear-gradient(-45deg,#F0B429 0 6px,#F7D070 6px 12px)}
.vs-bar + .vs-wait{margin-top:.55rem}
.vs-bar--ok{background:rgba(255,255,255,.1)}
.vs-bar--ok i{position:relative;overflow:hidden;background:#3DDC84}
.vs-bar--ok i::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);translate:-110% 0}
.vs-bar--ok + .vs-ok{margin-top:.55rem}
/* IHERO: the two trades, joined */
.both{display:flex;align-items:center;gap:.45rem;margin:-.25rem 0 1rem}
.both span{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .6rem;border-radius:9px;background:rgba(255,255,255,.08);color:var(--on-night);font:600 .8rem/1 var(--sans)}
.both svg{width:15px;height:15px;color:var(--accent-night)}
.both b{font:700 .95rem/1 var(--display);color:var(--accent-night)}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.96rem;color:var(--ink-2)}
.vs li{display:flex;gap:.6rem;align-items:flex-start}
.vs li::before{content:"";flex:none;width:16px;height:16px;margin-top:.2em;background:#8A93A6;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E")}
.vs-blame{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--ink-2);box-shadow:0 8px 18px -10px rgba(17,24,40,.45)}
.vs-blame svg{width:20px;height:20px}
@media (max-width:639px){.vs-blame svg{rotate:90deg}}
.vs-you{margin:0;display:flex;align-items:center;justify-content:center;gap:.65rem;font-size:.98rem;color:var(--ink-2)}
/* the blame loop, shown: each supplier is waiting on someone else */
.vs-wait{display:inline-flex;align-items:center;gap:.4rem;margin:1rem 0 0;padding:.38rem .6rem;border-radius:8px;background:#FEF3C7;color:#92400E;font:600 .78rem/1 var(--sans)}
.vs-wait svg{width:13px;height:13px;flex:none}
/* …and you, chasing both: dashed lines from you to each card, with your unanswered messages on them */
.chase{position:relative;flex:1 1 78px;min-height:78px;margin:-.4rem 0 -.5rem}
.chase::before,.chase::after{content:"";position:absolute;top:-4px;width:9px;height:9px;border-radius:50%;background:#7C869B;translate:-50% 0}
.chase::before{left:25%}.chase::after{left:75%}
.chase > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}   /* the lines only — not the icons in the replies */
.chase > svg path{fill:none;stroke:#7C869B;stroke-width:2;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.ch{position:absolute;top:26%;translate:-50% 0;display:grid;justify-items:center;gap:.35rem}
.ch-l{left:31%}.ch-r{left:69%}
.ch-bub{position:relative;white-space:nowrap;padding:.45rem .7rem;border-radius:11px;background:var(--card);border:1px solid var(--line);
  font:500 .76rem/1 var(--sans);color:var(--ink);box-shadow:0 8px 16px -10px rgba(17,24,40,.35);transition:translate .25s var(--ease),border-color .2s ease}
.ch-l .ch-bub{border-bottom-right-radius:3px}.ch-r .ch-bub{border-bottom-left-radius:3px}
.ch-in,.oq-in,.ch-re,.ch-hint,.y2,.oq-2,#oa-2{display:none}
@media (max-width:639px){.chase{display:none}}   /* stacked cards: the left/right lines would point at nothing */
/* "try chasing them": tap a question → that supplier's excuse comes back. On the IHERO card the same
   questions get an answer. CSS-only (:has); without it the section is the static version. */
@supports selector(:has(*)){
  .chase{min-height:124px}
  .ch-in,.oq-in{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .ch-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .oq-in:focus-visible{outline:2.5px solid var(--accent-night);outline-offset:3px;box-shadow:none}
  @media (hover:hover){.ch-bub:hover{translate:0 -2px;border-color:var(--line-2)}}
  .ch-re{align-items:center;gap:.35rem;white-space:nowrap;padding:.42rem .65rem;border-radius:11px 11px 11px 3px;background:#FEF3C7;color:#92400E;font:600 .74rem/1 var(--sans)}
  .ch-re svg{width:12px;height:12px;flex:none}
  .ch:has(.ch-in:checked) .ch-re{display:inline-flex}
  .ch:has(.ch-in:checked) .ch-bub{border-color:var(--line-2);color:var(--ink-2)}
  .ch-hint{display:block;position:absolute;left:50%;top:2%;translate:-50% 0;white-space:nowrap;padding:.3rem .6rem;border-radius:99px;background:#EFE9FC;color:#5B21B6;font:600 .7rem/1 var(--sans)}
  .chase:has(.ch-in:checked) .ch-hint{display:none}
  .vs-pair:has(#ch-1:checked):has(#ch-2:checked) .y1{display:none}
  .vs-pair:has(#ch-1:checked):has(#ch-2:checked) .y2{display:inline}
  /* IHERO: either question, one person, a real answer */
  .one-qs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}
  .oq-2{display:inline-block}
  .one-q{position:relative;transition:background-color .2s ease,color .2s ease}
  .one-q:not(:has(.oq-in:checked)){background:rgba(255,255,255,.08);color:var(--on-night);box-shadow:inset 0 0 0 1px var(--night-line)}
  .vs--one:has(#oq-2:checked) #oa-1{display:none}
  .vs--one:has(#oq-2:checked) #oa-2{display:block}
  @media (max-width:639px){
    .chase{display:grid;gap:.6rem;min-height:0;flex:none;margin:.1rem 0 .2rem}
    .chase > svg,.chase::before,.chase::after{display:none}
    .ch{position:static;translate:none;justify-items:end}
    .ch .ch-re{justify-self:start}
    .ch-hint{position:static;translate:none;justify-self:center;order:-1}
  }
  @media (prefers-reduced-motion:no-preference){
    .ch:has(.ch-in:checked) .ch-re,.vs--one:has(.oq-in:checked) .one-bub{animation:pop-in .35s var(--ease)}
    .vs-pair:has(#ch-1:checked) .vs--a .vs-wait,.vs-pair:has(#ch-2:checked) .vs--b .vs-wait{animation:nope .45s ease}
  }
}
@keyframes nope{20%{translate:-4px 0}50%{translate:4px 0}80%{translate:-2px 0}}
/* the supplier cards wobble when you point at them */
@media (hover:hover){
  .vs-pair .vs--a:hover{rotate:-2.2deg}.vs-pair .vs--b:hover{rotate:2.2deg}
  .reveal-on .vs-pair.in .vs--a:hover,.reveal-on .vs-pair.in .vs--b:hover{transition:rotate .35s var(--ease)}
}
.vs-you svg{flex:none;width:32px;height:32px;padding:6px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.vs-arrow{align-self:center;justify-self:center;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;
  border:2px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;box-shadow:0 12px 26px -12px rgba(109,40,217,.7)}
.vs-arrow svg{width:22px;height:22px}
.vs-arrow{--nx:4px 0}
@media (max-width:979px){.vs-arrow svg{rotate:90deg}.vs-arrow{--nx:0 4px}}
.vs--one{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;color:var(--on-night);border:0;
  background:var(--night);box-shadow:0 34px 70px -34px rgba(109,40,217,.55)}
.vs--one::after{content:"";position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;translate:-50% -50%;z-index:-2;
  background:conic-gradient(#D400F5,#2E9BFF,#7B4DFA,#D400F5)}
.vs--one::before{content:"";position:absolute;inset:2px;border-radius:calc(var(--r) - 2px);background:var(--night);z-index:-1}
.vs--one .tag{color:var(--on-night-muted)}
.vs--one .tag img{width:22px;height:22px;display:block}
.vs--one .inv{color:var(--accent-night);border:1px solid rgba(196,181,253,.45)}
.vs--one h3{font-size:clamp(1.3rem,1.08rem + .6vw,1.6rem)}
.vs--one ul{color:var(--on-night);font-size:1rem}
.vs--one li::before{background:var(--grad);--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.vs-link{margin-top:1rem;align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-weight:600;color:var(--accent-night);text-decoration:none}
.vs-link svg{width:18px;height:18px;transition:translate .3s var(--ease)}
.vs--one .vs-you{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--night-line);justify-content:flex-start;color:var(--on-night)}
.vs--one .vs-you svg{background:var(--night-2);border-color:var(--night-line);color:var(--accent-night)}
.vs-ok{display:inline-flex;align-self:flex-start;align-items:center;gap:.4rem;margin:1.1rem 0 0;padding:.38rem .6rem;border-radius:8px;
  background:rgba(61,220,132,.14);color:#86EFAC;font:600 .78rem/1 var(--sans)}
.vs-ok svg{width:13px;height:13px;flex:none}
.vs--one ul + .vs-ok + .vs-link{margin-top:.6rem}
/* the reply you get — mirror of the unanswered messages on the left */
/* the same question as on the left — answered */
.one-convo{margin-top:auto;padding-top:1.1rem;display:grid;gap:.45rem}
.one-q{justify-self:end;padding:.42rem .7rem;border-radius:11px 11px 3px 11px;background:var(--card);color:var(--ink);font:500 .8rem/1.2 var(--sans)}
.one-bub{margin:0;justify-self:start;max-width:92%;padding:.6rem .8rem;border-radius:4px 14px 14px 14px;
  background:rgba(255,255,255,.08);color:var(--on-night);font-size:.92rem;line-height:1.4}
.one-bub small{display:inline-block;margin-left:.5rem;font:500 .66rem/1 var(--mono);color:var(--accent-night)}

.vs-link:hover{text-decoration:underline;text-underline-offset:.22em} .vs-link:hover svg{translate:4px 0}
@media (prefers-reduced-motion:no-preference){
  .reveal-on .vs-pair .vs--a,.reveal-on .vs-pair .vs--b{transition:rotate 1.1s var(--ease) .5s}
  .reveal-on .vs-pair:not(.in) .vs--a,.reveal-on .vs-pair:not(.in) .vs--b{rotate:0deg}
  .reveal-on .vs-pair.in .vs-blame{animation:blame .45s var(--ease-io) 1s 4 alternate}
  .chase > svg path{animation:ants 1.3s linear infinite}
  .vs-bar--ok i::after{animation:shimmer 2.4s ease-in-out infinite}
  .reveal-on .vs--one:not(.in) .vs-bar i,.reveal-on .vs-pair:not(.in) .vs-bar i{scale:0 1}
  .reveal-on .vs-bar i{transition:scale 1.1s var(--ease) .5s}
  .vs--one::after{animation:ring 9s linear infinite}
  .vs-arrow svg{animation:nudge-x 2.6s var(--ease) 1.5s infinite}
}
@keyframes shimmer{0%{translate:-110% 0}60%,100%{translate:260% 0}}
@keyframes ants{to{stroke-dashoffset:-11}}   /* one dash period (5 + 6) — seamless loop */
@keyframes nudge-x{0%,70%,100%{translate:0 0}80%{translate:var(--nx)}90%{translate:0 0}}
@keyframes blame{to{scale:1.16;rotate:8deg}}

/* ── services ────────────────────────────────────────────────────────── */
.duo{position:relative;display:grid;gap:1.25rem;--ppad:clamp(1.4rem,3vw,2rem);container-type:inline-size}
/* the "+" between the two panels: website + video = one package */
.duo-plus{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;
  border:2px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;box-shadow:0 12px 26px -12px rgba(109,40,217,.7)}
.duo-plus svg{width:22px;height:22px;stroke-width:2.2}
@media (min-width:900px){.duo-plus{top:calc(1px + var(--ppad) + ((100cqw - 1.25rem) / 2 - 2 * var(--ppad) - 2px) / 3.8)}}
/* panel art: both the same shape, so the titles under them line up */
.p-art{position:relative;aspect-ratio:19/10;border-radius:16px;
  background:radial-gradient(60% 75% at 12% 8%,rgba(46,155,255,.16),transparent 70%),radial-gradient(55% 65% at 95% 100%,rgba(123,77,250,.12),transparent 70%),
    radial-gradient(circle,rgba(17,24,40,.075) 1px,transparent 1.4px) 0 0/14px 14px,#F5F7FB}
.p-art--vid{background:radial-gradient(60% 75% at 88% 8%,rgba(212,0,245,.12),transparent 70%),radial-gradient(55% 65% at 5% 100%,rgba(123,77,250,.14),transparent 70%),
    radial-gradient(circle,rgba(17,24,40,.075) 1px,transparent 1.4px) 0 0/14px 14px,#F7F5FB}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:var(--ppad,clamp(1.4rem,3vw,2rem));display:flex;flex-direction:column;gap:1.4rem}
.panel p.muted{font-size:.97rem}
/* panel title with its trade icon (same icons as the problem section: </> website, camera video) */
.pn-head{display:flex;align-items:flex-start;gap:.9rem}
.pn-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;background:#E7F0FE;color:#1769C9}
.pn-ic svg{width:22px;height:22px}
.panel:nth-of-type(2) .pn-ic{background:#F8E8FC;color:#A21CBF}
.pn-head h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);margin-bottom:.2rem}
/* the four points as icon tiles instead of a plain checklist */
.feats{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
@media (min-width:560px){.feats{grid-template-columns:1fr 1fr}}
.feats li{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem .8rem;border-radius:13px;background:var(--ground);font-size:.92rem;line-height:1.4;color:var(--ink-2);
  transition:translate .3s var(--ease),background-color .3s ease}
.feats b{color:var(--ink);font-weight:600}
.f-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:var(--card);border:1px solid var(--line);color:#1769C9}
.f-ic svg{width:16px;height:16px}
.panel:nth-of-type(2) .f-ic{color:#A21CBF}
@media (hover:hover){.feats li:hover{translate:0 -2px;background:var(--ground-2)}}
/* website + video = one package */
.duo-eq{margin-top:1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;padding:1rem 1.4rem 1rem 1rem;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.duo-eq .eq{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;color:#fff;font:800 1.5rem/1 var(--display);padding-bottom:3px;
  border:2px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;box-shadow:0 12px 26px -12px rgba(109,40,217,.7)}
.duo-eq p{margin:0;flex:1 1 18rem;color:var(--ink-2)}
.duo-eq b{color:var(--ink);font-weight:700}
.duo-eq .link{min-height:44px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;color:var(--ink-2)}
.checks svg{width:18px;height:18px;flex:none;margin-top:.18rem;color:var(--accent)}
.checks b{color:var(--ink);font-weight:600}
.night .checks li{color:var(--on-night-muted)}
.night .checks b{color:var(--on-night)}
/* mini browser */
.browser{border-radius:12px;border:1px solid var(--line);background:#fff;overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:#F7F5F0}
.browser-bar i{width:8px;height:8px;border-radius:50%;background:#D9D5CC}
.browser-bar span{margin-left:10px;font:400 .7rem/1 var(--mono);color:var(--muted);background:#EFECE5;padding:5px 10px;border-radius:6px;flex:1}
.browser-body{padding:16px;display:grid;grid-template-columns:1.3fr 1fr;gap:12px;align-items:center}
.bb-h{font:800 1.15rem/1.05 var(--display);letter-spacing:-.02em;color:var(--ink)}
.bb-p{height:26px;margin-top:8px;background:linear-gradient(#DAD6CD,#DAD6CD) 0 3px/95% 3px no-repeat,linear-gradient(#DAD6CD,#DAD6CD) 0 11px/75% 3px no-repeat,linear-gradient(#DAD6CD,#DAD6CD) 0 19px/85% 3px no-repeat}
.bb-btn{margin-top:8px;display:inline-block;font:600 .66rem/1 var(--sans);background:var(--wa);color:#073B1F;padding:6px 10px;border-radius:99px}
.bb-img{aspect-ratio:4/3;border-radius:8px;background:linear-gradient(160deg,#F2C28B 0%,#D9895B 45%,#4B6A86 100%)}
.p-art--web .browser{position:absolute;left:5%;top:9%;width:74%;height:78%;display:flex;flex-direction:column;box-shadow:0 20px 40px -30px rgba(17,24,40,.45)}
.p-art--web .browser-body{flex:1;padding-right:12%}
@media (max-width:640px){.p-art--web .browser-body{padding:10px 14% 10px 10px;gap:8px}.p-art--web .bb-h{font-size:.82rem}.p-art--web .bb-p{height:20px}.p-art--web .bb-btn{font-size:.56rem;padding:4px 7px}.browser-bar span{padding:4px 6px}}
.mini-phone{position:absolute;right:5%;bottom:5%;height:90%;transition:translate .5s var(--ease);aspect-ratio:9/19;padding:4px;border-radius:18px;background:#0C1120;box-shadow:0 24px 40px -20px rgba(17,24,40,.6)}
.mp-screen{position:relative;height:100%;overflow:hidden;border-radius:14px;background:#fff}
.mp-page{padding:12px 8px 44px}
.mp-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.mp-nav i{height:5px;border-radius:3px;background:#DAD6CD;width:10px}.mp-nav i:first-child{width:20px;background:var(--ink)}
.mp-h{font:800 clamp(7px,.45rem + .25vw,10.5px)/1.05 var(--display);letter-spacing:-.02em;color:var(--ink)}
.mp-p{height:12px;margin-top:6px;background:linear-gradient(#DAD6CD,#DAD6CD) 0 2px/92% 2px no-repeat,linear-gradient(#DAD6CD,#DAD6CD) 0 7px/70% 2px no-repeat}
.mp-img{aspect-ratio:4/3;margin-top:7px;border-radius:6px;background:linear-gradient(160deg,#F2C28B 0%,#D9895B 45%,#4B6A86 100%)}
.mp-img--2{background:linear-gradient(160deg,#B9D3E8 0%,#4B6A86 60%,#1E2A3F 100%)}
.mp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
.mp-tiles i{aspect-ratio:1.4;border-radius:5px;background:#EFEBE3}
.mp-tiles i:nth-child(1){background:linear-gradient(#EFEBE3,#EFEBE3) padding-box,linear-gradient(135deg,#F2C28B,#D9895B)}
.mp-map{height:46px;margin-top:8px;border-radius:6px;position:relative;
  background:linear-gradient(28deg,transparent 46%,#fff 46% 53%,transparent 53%),radial-gradient(30% 45% at 25% 35%,#CFE3C6 0 98%,transparent 100%),#E4EAF0}
.mp-map::after{content:"";position:absolute;left:58%;top:22%;width:9px;height:9px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#E5484D;box-shadow:0 0 0 2px #fff}
.bb-open{display:inline-flex;align-items:center;gap:5px;margin-bottom:7px;font:600 .58rem/1 var(--sans);color:#166534;background:#E8F7EE;padding:4px 7px;border-radius:99px}
.bb-open::before{content:"";width:5px;height:5px;border-radius:50%;background:#16A34A}
/* "found on Google Maps", shown rather than told */
.maps-chip{position:absolute;left:2%;bottom:3%;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 11px 7px 8px;border-radius:12px;background:#fff;
  box-shadow:0 14px 28px -14px rgba(17,24,40,.45),0 0 0 1px rgba(17,24,40,.06)}
.maps-chip b{display:block;font:700 .7rem/1.15 var(--sans);color:var(--ink)}
.maps-chip small{display:block;font:500 .6rem/1.3 var(--sans);color:#166534}
.mc-pin{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:#FDECEC;flex:none}
.mc-pin::before{content:"";width:9px;height:9px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#E5484D}
@media (max-width:640px){.maps-chip{padding:5px 8px 5px 6px;gap:6px;bottom:1%}.maps-chip b{font-size:.6rem}.maps-chip small{font-size:.52rem}.mc-pin{width:17px;height:17px}
  .bb-open,.p-art--vid .reel .r-sub{display:none}}   /* phones: the stage is ~160px tall — keep it to the picture */
/* the brand video — landscape, behind the reels */
.bv{position:absolute;left:50%;top:7%;width:64%;aspect-ratio:16/9;translate:-50% 0;border-radius:10px;overflow:hidden;
  background:radial-gradient(60% 70% at 70% 30%,rgba(242,194,139,.55),transparent 70%),linear-gradient(160deg,#3B4E6E 0%,#1E2A3F 55%,#0C1120 100%);
  box-shadow:0 18px 34px -20px rgba(17,24,40,.6)}
.bv-rec{position:absolute;top:7px;left:8px;display:flex;align-items:center;gap:4px;font:500 7px/1 var(--mono);letter-spacing:.08em;color:#fff}
.bv-rec i{width:5px;height:5px;border-radius:50%;background:var(--rec-dot)}
.bv-play{position:absolute;left:50%;top:16%;translate:-50% -50%;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.18);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff}
.bv-play svg{width:13px;height:13px;margin-left:2px}
.bv-l{position:absolute;top:7px;right:8px;font:600 7.5px/1 var(--sans);color:rgba(255,255,255,.85)}
.bv-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2)}
.bv-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;scale:.3 1}
.mp-bar{position:absolute;left:5px;right:5px;bottom:5px;padding:6px 0;border-radius:99px;text-align:center;font:700 clamp(6px,.3rem + .2vw,8px)/1 var(--sans);background:var(--wa);color:#073B1F}
.mp-bar::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* mini reel */
.reel-mock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.reel .r-tc{display:none}.reel .r-sub{font-size:7.5px;padding:3px 4px}}   /* four tiles on a phone: REC and timecode collided */
.reel{position:relative;width:auto;aspect-ratio:9/16;border-radius:12px;overflow:hidden;flex:none;
  background:linear-gradient(170deg,#4B6A86 0%,#1E2A3F 60%,#0C1120 100%)}
.reel .r-rec{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;font:500 7.5px/1 var(--mono);color:#fff;letter-spacing:.08em}
.reel .r-rec i{width:5px;height:5px;border-radius:50%;background:var(--rec-dot)}
.reel .r-tc{position:absolute;top:8px;right:8px;font:500 7.5px/1 var(--mono);color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.reel .r-sub{position:absolute;left:8px;right:8px;bottom:12px;font:600 8.5px/1.3 var(--sans);color:#fff;text-align:center;
  background:rgba(12,17,32,.55);padding:4px 5px;border-radius:4px}
.reel-note{font-size:.9rem;color:var(--muted)}
/* the four reels, fanned like a hand of cards */
.p-art--vid .reel{position:absolute;left:50%;top:31%;height:65%;width:auto;transform-origin:50% 100%;
  translate:calc(-50% + var(--dx)) var(--y);rotate:var(--r);box-shadow:0 18px 30px -16px rgba(17,24,40,.6)}
.reel .r-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22)}
.reel .r-prog i{display:block;height:100%;background:#fff;transform-origin:left;scale:.35 1}
@media (prefers-reduced-motion:no-preference){
  .p-art--vid .reel{transition:translate .9s var(--ease) .3s,rotate .9s var(--ease) .3s,opacity .3s ease}
  .reveal-on .panel:not(.in) .p-art--vid .reel{translate:-50% 0;rotate:0deg}
  @media (hover:hover){.p-art--vid .reel:hover{translate:calc(-50% + var(--dx)) calc(var(--y) - 5%);transition-delay:0s}}
  .reel .r-prog i{animation:play 9s linear infinite}
  .reel:nth-child(2) .r-prog i{animation-duration:7s;animation-delay:-3s}
  .reel:nth-child(3) .r-prog i{animation-duration:11s;animation-delay:-6s}
  .reel:nth-child(4) .r-prog i{animation-duration:8s;animation-delay:-2s}
  .reel .r-rec i{animation:rec 1.2s steps(1,end) infinite}
  .mp-page{animation:mp-scroll 11s var(--ease-io) infinite alternate}
  .mp-bar::after{animation:wa-ring 2.6s ease-out infinite}
  .bv-bar i{animation:play 14s linear infinite}
  .p-art--vid .reel:nth-child(2) .r-rec i{animation-delay:-.3s}
  @media (hover:hover){
    .panel:hover .mini-phone{translate:0 -6px}
    .panel:hover .p-art--vid .reel{rotate:calc(var(--r) * 1.4);transition-delay:0s}
  }
}
@keyframes mp-scroll{0%,18%{translate:0 0}82%,100%{translate:0 -42%}}
@keyframes wa-ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 0 0 7px rgba(37,211,102,0)}}
.note{margin-top:1.4rem;padding:1rem 1.2rem;border-left:2px solid var(--accent);background:var(--card);border-radius:0 10px 10px 0;color:var(--ink-2)}
.note b{color:var(--ink)}

/* ── tap a point → its part of the illustration is spotlit, the rest dims (CSS-only, :has) ── */
.ft-in,.feat-h,.r-new{display:none}
@supports selector(:has(*)){
  .panel{--spot:#1769C9;--spot-bg:#E7F0FE;--spot-ring:rgba(23,105,201,.2)}
  .panel:nth-of-type(2){--spot:#A21CBF;--spot-bg:#F8E8FC;--spot-ring:rgba(162,28,191,.2)}
  .panel .feat-h{display:block;margin:0 0 -.75rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .feats li{position:relative}
  .ft-in{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .ft-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .feats li:has(.ft-in:checked){background:var(--spot-bg);box-shadow:inset 0 0 0 1.5px var(--spot);color:var(--ink)}
  .feats li:has(.ft-in:checked) .f-ic{background:var(--spot);border-color:transparent;color:#fff}
  .f-ic{transition:background-color .25s ease,color .25s ease}
  .p-art--web .browser,.maps-chip,.bv{transition:opacity .3s ease,scale .45s var(--ease),translate .45s var(--ease),box-shadow .3s ease}
  .mini-phone{transition:opacity .3s ease,scale .45s var(--ease),translate .5s var(--ease),box-shadow .3s ease}
  .bb-h,.bb-btn,.mp-bar,.mp-h,.reel .r-sub{transition:box-shadow .3s ease,background-color .3s ease,scale .4s var(--ease)}
  /* website */
  .panel:has(#fw-1:checked) .mini-phone{scale:1.07;box-shadow:0 0 0 3px var(--spot),0 0 0 9px var(--spot-ring),0 24px 40px -20px rgba(17,24,40,.6)}
  .panel:has(#fw-1:checked) :is(.browser,.maps-chip){opacity:.42}
  .panel:has(#fw-2:checked) :is(.bb-btn,.mp-bar){box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--spot)}
  .panel:has(#fw-2:checked) .bb-btn{scale:1.18;transform-origin:left center}
  .panel:has(#fw-2:checked) .maps-chip{opacity:.42}
  .panel:has(#fw-3:checked) .maps-chip{scale:1.16;transform-origin:left bottom;box-shadow:0 0 0 3px var(--spot),0 0 0 9px var(--spot-ring)}
  .panel:has(#fw-3:checked) :is(.browser,.mini-phone){opacity:.42}
  .panel:has(#fw-4:checked) :is(.bb-h,.mp-h){background:var(--spot-bg);border-radius:4px;box-shadow:0 0 0 4px var(--spot-bg),0 0 0 6px var(--spot)}
  .panel:has(#fw-4:checked) .maps-chip{opacity:.42}
  /* video */
  .panel:has(.ft-in:checked) .p-art--vid .reel{transition:translate .5s var(--ease),rotate .5s var(--ease),opacity .3s ease,box-shadow .3s ease}
  .panel:has(#fv-1:checked) .bv{z-index:3;scale:1.16;translate:-50% 18%;box-shadow:0 0 0 3px var(--spot),0 0 0 9px var(--spot-ring),0 18px 34px -20px rgba(17,24,40,.6)}
  .panel:has(#fv-1:checked) .reel{opacity:.28}
  .panel:has(#fv-2:checked) .bv,.panel:has(#fv-3:checked) .bv,.panel:has(#fv-4:checked) .bv{opacity:.35}
  .panel:has(#fv-2:checked) .p-art--vid .reel{rotate:calc(var(--r) * 1.5);translate:calc(-50% + var(--dx) * 1.05) calc(var(--y) - 7%);box-shadow:0 0 0 2px var(--spot),0 18px 30px -16px rgba(17,24,40,.6)}
  .panel:has(#fv-3:checked) .reel .r-sub{background:var(--spot);scale:1.16;box-shadow:0 0 0 1.5px #fff}
  .panel:has(#fv-4:checked) .p-art--vid .reel:not(:nth-child(2)){opacity:.4}
  .panel:has(#fv-4:checked) .p-art--vid .reel:nth-child(2){z-index:4;translate:calc(-50% + var(--dx)) calc(var(--y) - 10%);box-shadow:0 0 0 3px var(--spot),0 0 0 8px var(--spot-ring)}
  .panel:has(#fv-4:checked) .r-new{display:block}
  .r-new{position:absolute;top:24px;left:50%;translate:-50% 0;z-index:2;white-space:nowrap;padding:3px 6px;border-radius:99px;background:#fff;color:#7A1894;font:700 7.5px/1 var(--sans)}
  .r-new i{font-style:normal}
  @media (max-width:640px){.r-new i{display:none}.r-new{top:18px}}
  @media (prefers-reduced-motion:no-preference){.panel:has(#fv-4:checked) .r-new{animation:pop-in .35s var(--ease)}}
}

/* ── "What's in each package?" — the pictures follow the chosen package (CSS-only, :has).
      Reels are children 2–9 of .p-art--vid (child 1 is the brand video). What each package shows
      (1 / 4 / 8 reels, brand video from Complete, film + photo shoot in Signature) is asserted
      against TIERS in make.py. ── */
.p-art--vid .reel:nth-child(2){--dx:-138%;--r:-6deg;--y:6%}
.p-art--vid .reel:nth-child(3){--dx:-46%;--r:-2deg;--y:1%}
.p-art--vid .reel:nth-child(4){--dx:46%;--r:2deg;--y:1%}
.p-art--vid .reel:nth-child(5){--dx:138%;--r:6deg;--y:6%}
.p-art--vid .reel:nth-child(n+6){--dx:138%;--r:6deg;--y:6%;visibility:hidden}   /* reels 5–8: Signature only */
.wv,.wg,.pk-line,.f-na,.bv-na,.bvl-b,.ph{display:none}
.bvl-a,.bvl-b{font-style:normal}
@supports selector(:has(*)){
  #services .sec-head{margin-bottom:clamp(1.6rem,3vw,2.2rem)}
  .wg{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.3rem;margin-bottom:1.1rem;padding:.8rem 1.3rem .8rem 1.2rem;border-radius:20px;background:var(--card);border:1px solid var(--line);
    box-shadow:0 20px 44px -36px rgba(17,24,40,.4)}
  .wg-h{margin:0;font-size:.97rem;color:var(--ink-2)} .wg-h b{color:var(--ink);font-weight:700}
  .wg-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
  .wg-chips li{position:relative;display:inline-flex;align-items:center;padding:.62rem 1.05rem;border-radius:99px;background:var(--ground);border:1px solid var(--line);
    font:600 .93rem/1 var(--sans);color:var(--ink);transition:translate .25s var(--ease),background-color .2s ease,color .2s ease,border-color .2s ease}
  .wg-in{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .wg-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .wg-chips li:has(.wg-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent;color:#fff}
  @media (hover:hover){.wg-chips li:hover{translate:0 -2px;border-color:var(--line-2)}}
  .wg-out{margin:0 0 0 auto;font-size:.95rem;color:var(--ink-2)}
  .wg-out b{font:800 1.2rem/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
  #services:has(.wg-in:checked) .wg-h span{display:none}
  @media (max-width:640px){.wg-out{margin-left:0;flex-basis:100%}
    .wg-chips{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.wg-chips li{justify-content:center;padding-inline:.3rem}}   /* three equal chips, always one row */
  /* text variants: .wv-0 = nothing picked, .wv-N = package N */
  #services:has(.wg-in:checked) .wv-0{display:none}
  #services:has(#wg-1:checked) .wv-1,#services:has(#wg-2:checked) .wv-2,#services:has(#wg-3:checked) .wv-3{display:inline}
  /* the line under each panel title: what this package gives you here */
  #services:has(.wg-in:checked) .pk-line{display:block}
  .panel .pk-line{margin:-.55rem 0 0;padding:.55rem .8rem;border-radius:12px;background:var(--spot-bg);color:var(--ink);font-size:.95rem;line-height:1.35}
  #services:has(#wg-1:checked) .pk-line .wv-1,#services:has(#wg-2:checked) .pk-line .wv-2,#services:has(#wg-3:checked) .pk-line .wv-3{display:flex;align-items:center;gap:.5rem}
  .pk-line svg{width:16px;height:16px;flex:none;color:var(--spot)}
  .pk-line b{font-weight:700}
  /* website: a page count in the address bar, and more pages = a deeper stack of sheets behind the browser */
  .bb-pg{flex:none;margin-right:7%;padding:4px 8px;border-radius:99px;background:#EFE9FC;color:#5B21B6;font:700 .62rem/1 var(--sans);white-space:nowrap}
  @media (max-width:640px){#services .bb-pg.wv{display:none !important}}   /* the phone mock-up covers it there; the line under the title says it */
  #services:has(#wg-2:checked) .p-art--web .browser{box-shadow:-6px -6px 0 -1px #fff,-6px -6px 0 0 var(--line-2),-12px -12px 0 -1px #FAFBFD,-12px -12px 0 0 var(--line-2),0 20px 40px -30px rgba(17,24,40,.45)}
  #services:has(#wg-3:checked) .p-art--web .browser{box-shadow:-6px -6px 0 -1px #fff,-6px -6px 0 0 var(--line-2),-12px -12px 0 -1px #FAFBFD,-12px -12px 0 0 var(--line-2),-18px -18px 0 -1px #F5F7FB,-18px -18px 0 0 var(--line-2),0 20px 40px -30px rgba(17,24,40,.45)}
  /* Starter: one reel — and no brand video, so its frame stays as an outline that says so */
  #services:has(#wg-1:checked) .p-art--vid .reel:nth-child(2){--dx:0%;--r:-3deg;--y:-6%}
  #services:has(#wg-1:checked) .p-art--vid .reel:nth-child(n+3){visibility:hidden}
  :where(#services:has(#wg-1:checked)) .bv{background:none;box-shadow:none;outline:1.5px dashed rgba(17,24,40,.34);outline-offset:-1px}   /* :where → the "brand video" spotlight can still ring it */
  #services:has(#wg-1:checked) .bv > :not(.bv-na){visibility:hidden}
  #services:has(#wg-1:checked) .bv-na{display:block;position:absolute;left:10px;top:9px;right:10px;font:600 .66rem/1.25 var(--sans);color:var(--ink-2)}
  #services:has(#wg-1:checked) .f-na{display:inline-block;margin-left:.2rem;padding:.2rem .45rem;border-radius:99px;background:#FEF3C7;color:#92400E;font:600 .7rem/1.2 var(--sans);white-space:nowrap}
  #services:has(#wg-1:checked) .feats li:has(.f-na){color:var(--muted)}
  /* Signature: eight reels, a brand film, and the photo shoot */
  #services:has(#wg-3:checked) .p-art--vid .reel{visibility:visible}
  #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(2){--dx:-175%;--r:-7.7deg;--y:5.6%}
  #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(3){--dx:-125%;--r:-5.5deg;--y:3.6%}
  #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(4){--dx:-75%;--r:-3.3deg;--y:1.8%}
  #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(5){--dx:-25%;--r:-1.1deg;--y:0.5%}
  #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(6){--dx:25%;--r:1.1deg;--y:0.5%}
  #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(7){--dx:75%;--r:3.3deg;--y:1.8%}
  #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(8){--dx:125%;--r:5.5deg;--y:3.6%}
  #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(9){--dx:175%;--r:7.7deg;--y:5.6%}
  #services:has(#wg-3:checked) .p-art--vid .reel .r-tc,#services:has(#wg-3:checked) .p-art--vid .reel:not(:nth-child(9)) .r-sub{display:none}
  #services:has(#wg-3:checked) .panel:has(#fv-2:checked) .p-art--vid .reel{rotate:calc(var(--r) * 1.2);translate:calc(-50% + var(--dx) * .97) calc(var(--y) - 7%)}   /* eight already fill the width */
  #services:has(#wg-3:checked) .bvl-a{display:none}
  #services:has(#wg-3:checked) .bvl-b{display:inline}
  #services:has(#wg-3:checked) .ph{display:block}
  .ph{position:absolute;right:2%;top:6%;width:13.5%;height:30%;z-index:5;pointer-events:none}
  .ph i{position:absolute;left:8%;top:0;width:64%;aspect-ratio:1/1.1;border:3px solid #fff;border-bottom-width:8px;border-radius:3px;box-shadow:0 6px 12px -6px rgba(17,24,40,.55);
    background:linear-gradient(160deg,#F2C28B,#D9895B 55%,#4B6A86)}
  .ph i:nth-child(1){rotate:-9deg;translate:-14% 6%}
  .ph i:nth-child(2){rotate:7deg;translate:32% 12%;background:linear-gradient(160deg,#B9D3E8,#4B6A86 60%,#1E2A3F)}
  .ph i:nth-child(3){rotate:-2deg;translate:10% 36%;background:linear-gradient(160deg,#C9D8C3,#5E7F66 60%,#1F2E25)}
  .ph b{position:absolute;left:50%;top:86%;translate:-50% 0;padding:4px 8px;border-radius:99px;background:#fff;box-shadow:0 5px 12px -5px rgba(17,24,40,.55);font:700 .6rem/1 var(--sans);color:var(--ink);white-space:nowrap}
  @media (max-width:640px){.ph b{display:none}.ph i{border-width:2px;border-bottom-width:5px}}
  @media (prefers-reduced-motion:no-preference){
    #services:has(.wg-in:checked) .p-art--vid .reel{transition:translate .6s var(--ease),rotate .6s var(--ease),opacity .3s ease,box-shadow .3s ease}
    #services:has(#wg-3:checked) .p-art--vid .reel:nth-child(n+6),#services:has(#wg-3:checked) .ph{animation:fade-in .5s ease both}
    #services:has(.wg-in:checked) :is(.pk-line .wv,.wg-out .wv){animation:pop-in .35s var(--ease)}
  }
}
@keyframes fade-in{from{opacity:0}}

/* ── SIGNATURE 2: the process as a scroll story (dark) ──────────────────
   Desktop: the device sticks while the four steps scroll; the active step
   swaps the scene. Mobile: each step carries its own small scene inline. */
.night{background:var(--night);color:var(--on-night)}
.night h2,.night h3{color:var(--on-night)}
.night .lead{color:var(--on-night-muted)}
.story{display:grid;gap:3rem}
@media (min-width:980px){.story{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:5rem}}
.stage{display:none}
@media (min-width:980px){.stage{display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:110px;height:calc(100vh - 150px);max-height:680px}
  .stage .device{height:calc(100% - 44px)}}
/* a glow behind the phone whose colour follows the step: talk violet → price blue → shoot warm → launch green */
@property --glow{syntax:'<color>';inherits:false;initial-value:rgba(123,77,250,.46)}
.stage::before{content:"";position:absolute;left:50%;top:52%;width:150%;aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent);transition:--glow .9s ease}
.stage[data-step="1"]::before{--glow:rgba(46,155,255,.42)}
.stage[data-step="2"]::before{--glow:rgba(242,150,80,.38)}
.stage[data-step="3"]::before{--glow:rgba(61,220,132,.34)}
/* where you are: four segments + the step's name */
.stage-prog{display:flex;align-items:center;gap:6px;height:30px;
  width:min(340px,calc((min(100vh - 150px,680px) - 44px) * 9 / 18.5))}   /* = the phone's width (its height × 9/18.5), so the bar's edges sit on the phone's */
.stage-prog i{flex:1;height:4px;border-radius:2px;background:var(--night-line);transition:background-color .4s ease}
.stage[data-step="0"] .stage-prog i:nth-child(-n+1),.stage[data-step="1"] .stage-prog i:nth-child(-n+2),
.stage[data-step="2"] .stage-prog i:nth-child(-n+3),.stage[data-step="3"] .stage-prog i:nth-child(-n+4){background:var(--accent-night)}
.sp-l{flex:none;margin-left:6px;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-muted);min-width:9.5em;text-align:right}
.stage[data-step="0"] .sp-l::before{content:"01 · We talk"}
.stage[data-step="1"] .sp-l::before{content:"02 · Price & date"}
.stage[data-step="2"] .sp-l::before{content:"03 · Filming"}
.stage[data-step="3"] .sp-l::before{content:"04 · Launch"}
/* closing call to action under the story */
/* the closing card lives in the steps column, under step 04 — it also keeps the column at least as long
   as the sticky phone needs, so the phone doesn't slide under the header while step 04 is being read */
.steps-col{min-width:0}
@media (min-width:980px){.steps-col{padding-bottom:max(0px,calc(min(100vh - 150px,680px) - 50vh - 229px))}}
.story-cta{margin:1.5rem 0 0 2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  padding:clamp(1.2rem,2.5vw,1.6rem) clamp(1.3rem,3vw,2rem);border-radius:20px;border:1px solid var(--night-line);
  background:radial-gradient(60% 140% at 100% 50%,rgba(123,77,250,.16),transparent 70%),rgba(255,255,255,.03)}
.story-cta p{margin:0;color:var(--on-night-muted);font-size:1.02rem;max-width:52ch}
.story-cta b{color:var(--on-night);font-weight:600}
.device{position:relative;height:100%;max-width:340px;margin-inline:auto;aspect-ratio:9/18.5;background:#05070D;
  border-radius:40px;padding:10px;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 50px 90px -40px rgba(0,0,0,.9)}
.device-screen{position:relative;height:100%;border-radius:31px;overflow:hidden;background:#F4F2ED}
.d-status{position:absolute;inset:0 0 auto;z-index:3;height:34px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;
  font:600 11px/1 var(--sans);color:var(--ink);background:linear-gradient(#F4F2ED 70%,rgba(244,242,237,0))}
.d-status b{position:absolute;left:50%;top:9px;translate:-50% 0;width:64px;height:17px;border-radius:99px;background:#05070D}
.d-ic{display:flex;align-items:center;gap:5px}
.d-ic i:first-child{width:14px;height:9px;background:linear-gradient(90deg,var(--ink) 0 2.5px,transparent 0 4px,var(--ink) 0 6.5px,transparent 0 8px,var(--ink) 0 10.5px,transparent 0 12px,rgba(17,24,40,.3) 0);
  clip-path:polygon(0 100%,0 62%,18% 62%,18% 100%,28% 100%,28% 40%,46% 40%,46% 100%,57% 100%,57% 20%,75% 20%,75% 100%,86% 100%,86% 0,100% 0,100% 100%)}
.d-ic i:last-child{position:relative;width:19px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(17,24,40,.45)}
.d-ic i:last-child::before{content:"";position:absolute;inset:2px 5px 2px 2px;border-radius:1.5px;background:var(--ink)}
.scene{position:absolute;inset:0;padding:40px 14px 16px;display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.scene.on{opacity:1;transform:none}
.steps{position:relative;list-style:none;margin:0;padding:0 0 0 2rem}
.steps::before{content:"";position:absolute;left:5px;top:1.9rem;bottom:.5rem;width:1.5px;background:var(--night-line)}
.steps .fill{position:absolute;left:5px;top:1.9rem;bottom:.5rem;width:2px;background:var(--grad-y);
  transform-origin:top;transform:scaleY(var(--p,0))}
.step{position:relative;padding-bottom:clamp(3rem,9vw,5rem)}
@media (min-width:980px){.step{padding-bottom:1.25rem}.step:last-child{padding-bottom:0}}   /* one even gap between cards — a min-height left 70px after short cards and none after tall ones */
.step-card::before{content:"";position:absolute;left:calc(-2rem + 1px);top:1.75rem;width:10px;height:10px;border-radius:50%;
  background:var(--night);border:1.5px solid var(--night-line);transition:background-color .3s ease,border-color .3s ease}
.step.on .step-card::before{background:var(--grad);border-color:transparent}
/* each step is a card: big outline numeral, the step, and "your part" (how little the owner has to do) */
.step-card{position:relative;padding:1.6rem 1.7rem 1.5rem;border-radius:22px;border:1px solid var(--night-line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));transition:opacity .45s ease,border-color .4s ease,box-shadow .5s var(--ease)}
.step-card > .num{position:absolute;right:1.4rem;top:1.1rem;font:800 clamp(2.6rem,2rem + 1.6vw,3.6rem)/1 var(--display);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(196,181,253,.4);transition:color .45s ease,-webkit-text-stroke-color .45s ease}
.step.now .step-card > .num{color:var(--accent-night);-webkit-text-stroke-color:transparent}
.step.now .step-card{border-color:rgba(196,181,253,.45);box-shadow:0 30px 60px -36px rgba(123,77,250,.55)}
.reveal-on .step:not(.now) .step-card{opacity:.68}   /* .5 was hard to read */
.step .part{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;margin-top:1.15rem;padding:.45rem .8rem .45rem .5rem;border-radius:12px;
  background:rgba(255,255,255,.06);font-size:.92rem;color:var(--on-night)}
.step .part span{font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.35rem .5rem;border-radius:7px;background:rgba(196,181,253,.16);color:var(--accent-night)}
.step h3{padding-right:4.5rem}
.st-top{display:flex;align-items:center;gap:.7rem;padding-right:4.2rem}   /* keep the label clear of the big numeral */
.st-top .when{line-height:1.5}
.st-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.07);color:var(--on-night-muted);
  transition:background-color .45s ease,color .45s ease}
.st-ic svg{width:18px;height:18px}
.step.now .st-ic{background:linear-gradient(135deg,#A21CBF,#6D28D9 50%,#155FB8);color:#fff}   /* the deepened gradient: white on it ≥ 6:1 */
.step .when{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-night)}
.step h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);line-height:1.05;margin:.8rem 0 .8rem}
.step p{color:var(--on-night-muted);max-width:44ch}
.step p b{color:var(--on-night);font-weight:600}
.step .inline{margin-top:1.5rem;max-width:300px;height:360px;position:relative;background:#F4F2ED;border-radius:24px;overflow:hidden;
  box-shadow:0 0 0 6px #05070D,0 30px 60px -30px rgba(0,0,0,.9)}
.step .inline .scene{opacity:1;transform:none}
/* inline phones size to their content — a fixed 360px squeezed the launch screen and cut its button off */
.step .inline{height:auto}
.step .inline .scene{position:static;padding-top:22px}
.step .inline .shoot{height:150px}
.step .inline .sc-label{margin-top:4px}
.step .inline :is(.chat-input,.x){display:none}   /* the inline phones are short: keep them to the essentials */
@media (min-width:980px){.step .inline{display:none}}
/* scene parts */
.chat-top{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid #E3DFD6}
.chat-top i{width:26px;height:26px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--ground);font:700 9px/1 var(--sans);font-style:normal}
.chat-top b{font:600 12px/1.2 var(--sans);color:var(--ink)} .chat-top small{display:block;font:400 10px/1.2 var(--sans);color:var(--muted)}
.bub{max-width:82%;padding:8px 10px;border-radius:12px;font:400 11.5px/1.4 var(--sans);color:var(--ink)}
.bub.in{background:#fff;border:1px solid #E3DFD6;align-self:flex-start;border-bottom-left-radius:4px}
.bub.out{background:#DCF3E4;align-self:flex-end;border-bottom-right-radius:4px}
.bub.typing{display:flex;gap:4px;padding:10px 12px}
.scene:has(> .chat-top){background:radial-gradient(circle,rgba(17,24,40,.055) 1px,transparent 1.4px) 0 0/15px 15px,#EFEBE3}   /* chat wallpaper */
.biz{align-self:center;margin:0;padding:6px 10px;border-radius:9px;background:#FDF3D0;color:#5C4A14;font:500 9.5px/1.3 var(--sans);text-align:center}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pay span{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 6px;border-radius:10px;font:600 10.5px/1 var(--sans);color:#5B21B6;background:#EFE9FC;border:1px solid #DDD0F8}
.pay .on{color:#fff;background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border:1px solid transparent}   /* same brand bar as the price cards */
.pay svg{width:12px;height:12px;color:#fff}
.clips small{display:block;margin-bottom:6px;font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.clips span{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.clips i{position:relative;aspect-ratio:1;border-radius:8px;background:linear-gradient(160deg,#F2C28B,#D9895B 55%,#4B6A86)}
.clips i:nth-child(2){background:linear-gradient(160deg,#B9D3E8,#4B6A86 60%,#1E2A3F)}
.clips i:nth-child(3){background:linear-gradient(160deg,#E3A57C,#8A4B35 60%,#2A1812)}
.clips i:nth-child(4){background:linear-gradient(160deg,#C9D8C3,#5E7F66 60%,#1F2E25)}
.clips i::after{content:"";position:absolute;left:50%;top:50%;translate:-35% -50%;border-left:8px solid rgba(255,255,255,.9);border-block:5px solid transparent}
.bub.typing i{width:6px;height:6px;border-radius:50%;background:#9A968C}
.bub small{display:block;margin-top:3px;font:400 9px/1 var(--mono);color:var(--muted);text-align:right}
.day{align-self:center;font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#E9E5DC;padding:4px 8px;border-radius:99px}
.chat-input{margin-top:auto;display:flex;align-items:center;gap:8px}
.chat-input span{flex:1;padding:9px 12px;border-radius:99px;background:#fff;border:1px solid #E3DFD6;font:400 11px/1 var(--sans);color:#9A968C}
.chat-input i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#fff}
.chat-input svg{width:15px;height:15px}
.chat-input + .sc-label{margin-top:2px}
.cal{background:#fff;border:1px solid #E3DFD6;border-radius:14px;padding:11px 12px}
.cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cal-h b{font:700 12px/1 var(--sans);color:var(--ink)}
.cal-h span{display:flex;align-items:center;gap:4px;font:500 8.5px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.cal-h i{width:8px;height:8px;border-radius:50%;margin-left:5px}.cal-h .k-s{border:1.5px solid var(--accent)}.cal-h .k-l{background:var(--grad)}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px 2px;text-align:center}
.cal-g i{font:500 8px/1.6 var(--mono);font-style:normal;color:var(--muted)}
.cal-g span{font:500 10px/22px var(--sans);color:var(--ink-2);border-radius:50%;width:22px;margin-inline:auto}
.cal-g .d-shoot{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.cal-g .d-l2{background:var(--grad);color:#fff;font-weight:700}   /* launch day: Complete by default; .d-l1 / .d-l3 take over with the package picker */
/* quote variants (one per package) inside the phone and in step 02 */
.sv{font-style:normal}
.sv:not(.sv-2){display:none}
.notif .ic.ic-reel{background:linear-gradient(135deg,#F58529,#DD2A7B 50%,#8134AF)}
.notif .ic.ic-call{background:var(--ink)}
.notif .ic-call svg{fill:none;stroke:#fff}
/* the scene plays in when it becomes active (desktop device only) */
@media (prefers-reduced-motion:no-preference){
  .stage .scene.on > :is(.bub,.notif,.cal,.sign,.day,.pay,.clips){animation:pop-in .5s var(--ease) both}
  .stage .scene.on > :nth-child(3){animation-delay:.1s}.stage .scene.on > :nth-child(4){animation-delay:.45s}
  .stage .scene.on > :nth-child(5){animation-delay:.8s}.stage .scene.on > :nth-child(6){animation-delay:1.15s}.stage .scene.on > :nth-child(7){animation-delay:1.5s}
  .stage .scene.on > :nth-child(3).notif{animation-delay:.2s}.stage .scene.on > :nth-child(4).notif{animation-delay:.7s}
}
@keyframes pop-in{from{opacity:0;translate:0 10px;scale:.97}}
@media (prefers-reduced-motion:no-preference){
  .stage .scene.on > .typing{animation:pop-in .5s var(--ease) 1.95s both}
  .stage .scene.on > .typing i{animation:typing-dot 1.2s ease-in-out 2.35s infinite}
  .stage .scene.on > .typing i:nth-child(2){animation-delay:2.5s}.stage .scene.on > .typing i:nth-child(3){animation-delay:2.65s}
}
@keyframes typing-dot{0%,60%,100%{opacity:.35;translate:0 0}30%{opacity:1;translate:0 -3px}}
.sc-label{margin-top:auto;font:400 9px/1.3 var(--mono);letter-spacing:.06em;color:var(--muted);text-align:center}
.quote{background:#fff;border:1px solid #E3DFD6;border-radius:14px;padding:14px;display:grid;gap:10px}
.quote .q-t{font:500 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.quote .q-p{font:800 28px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.quote .q-p small{font:400 9.5px/1.2 var(--mono);color:var(--muted);display:block;margin-top:4px;letter-spacing:.02em}
.quote .q-row{display:flex;justify-content:space-between;font:400 11px/1.3 var(--sans);color:var(--ink-2);border-top:1px dashed #E3DFD6;padding-top:8px}
.quote .q-row b{color:var(--ink);font-weight:600}
.sign{align-self:flex-start;font:500 10px/1 var(--mono);letter-spacing:.08em;color:#fff;background:var(--ink);padding:7px 10px;border-radius:99px}
.shoot{position:relative;border-radius:14px;overflow:hidden;height:46%;background:linear-gradient(160deg,#F2C28B 0%,#D9895B 45%,#4B6A86 100%)}
.shoot .vf-c{width:16px;height:16px;border-color:rgba(255,255,255,.9)}
.shoot .vf-c.tl{top:8px;left:8px}.shoot .vf-c.tr{top:8px;right:8px}.shoot .vf-c.bl{bottom:8px;left:8px}.shoot .vf-c.br{bottom:8px;right:8px}
.shoot .s-rec{position:absolute;top:10px;left:30px;display:flex;gap:5px;align-items:center;font:500 9px/1 var(--mono);color:#fff;letter-spacing:.08em}
.shoot .s-rec i{width:6px;height:6px;border-radius:50%;background:var(--rec-dot);animation:rec 1.2s steps(1,end) infinite}
.list{display:grid;gap:7px}
.list div{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #E3DFD6;border-radius:10px;padding:8px 10px;font:400 11px/1.2 var(--sans);color:var(--ink)}
.list svg{width:14px;height:14px;color:#16A34A}
.live-site{background:#fff;border:1px solid #E3DFD6;border-radius:14px;overflow:hidden}
.stage .live-site .ls-img{height:clamp(120px,22vh,195px)}
/* short laptop screens: the phone is shorter, so drop the extras rather than clip them */
@media (min-width:980px) and (max-height:799px){.stage :is(.biz,.pay,.clips){display:none}}
@media (min-width:980px) and (max-height:739px){.stage .x{display:none}}
.live-site .ls-img{height:90px;background:linear-gradient(160deg,#F2C28B 0%,#D9895B 45%,#4B6A86 100%)}
.live-site .ls-b{padding:10px}
.live-site .ls-h{font:800 16px/1.05 var(--display);letter-spacing:-.02em;color:var(--ink)}
.live-site .ls-btn{margin-top:8px;display:inline-block;font:600 9.5px/1 var(--sans);background:var(--wa);color:#073B1F;padding:6px 10px;border-radius:99px}
.notif{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;border-radius:14px;background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.45);border:1px solid #E3DFD6}
.notif .ic{width:22px;height:22px;border-radius:6px;background:var(--wa);display:grid;place-items:center;flex:none}
.notif .ic svg{width:13px;height:13px;color:#fff}
.notif b{display:block;font:600 11px/1.2 var(--sans);color:var(--ink)}
.notif span{display:block;font:400 11px/1.35 var(--sans);color:var(--ink-2)}
.pulse{align-self:center;font:500 9px/1 var(--mono);letter-spacing:.1em;color:#16A34A;display:flex;gap:6px;align-items:center}
.pulse i{width:6px;height:6px;border-radius:50%;background:#16A34A}

/* ── work ────────────────────────────────────────────────────────────── */
/* jump chips: the four sites, and where each one lives */
.work-idx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:0 0 clamp(2.2rem,4vw,3.2rem)}
@media (min-width:900px){.work-idx{grid-template-columns:repeat(4,minmax(0,1fr))}}
.work-idx a{display:flex;align-items:center;gap:.7rem;min-width:0;min-height:52px;padding:.5rem .8rem .5rem .5rem;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:translate .25s var(--ease),border-color .2s ease,box-shadow .25s ease}
.work-idx img{flex:none;width:64px;height:40px;border-radius:8px;border:1px solid var(--line);object-fit:cover}
.work-idx span{display:grid;gap:.25rem;min-width:0}
.work-idx b{font:700 .95rem/1.15 var(--display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-idx small{display:flex;align-items:center;gap:.4rem;font:500 .7rem/1.1 var(--mono);color:var(--muted);white-space:nowrap}
.work-idx small i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.work-idx .wi-live i{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
@media (hover:hover){.work-idx a:hover{translate:0 -3px;border-color:var(--line-2);box-shadow:0 18px 34px -24px rgba(17,24,40,.5)}}
@media (max-width:560px){.work-idx img{display:none}.work-idx a{padding:.5rem .7rem}.work-idx b{font-size:.9rem}.work-idx small{font-size:.64rem;gap:.35rem}}
.case{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;scroll-margin-top:96px}
@media (min-width:980px){.case{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.case-media{position:relative;padding-bottom:clamp(2rem,6vw,3rem)}
/* a soft backdrop in the site's own colours sits behind each mock-up */
.case-media::before{content:"";position:absolute;inset:-6% -8% -4% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 78% 42%,var(--tint1,transparent),transparent),radial-gradient(closest-side at 30% 82%,var(--tint2,transparent),transparent)}
.case--flip .case-media::before{background:radial-gradient(closest-side at 22% 42%,var(--tint1,transparent),transparent),radial-gradient(closest-side at 70% 82%,var(--tint2,transparent),transparent)}
.case{isolation:isolate}
#work{overflow-x:clip}   /* the glows reach past the mock-ups; clip them at the section so phones can't scroll sideways */
.case-media .browser{box-shadow:0 40px 70px -40px rgba(17,24,40,.45);transition:opacity .4s ease}
/* a live site shows its real address, a padlock and "Live" */
.browser-bar .bb-url{display:flex;align-items:center;gap:6px;min-width:0;color:var(--ink-2)}
.bb-url svg{flex:none;width:10px;height:10px;color:#15803D}
.bb-live{flex:none;display:inline-flex;align-items:center;gap:5px;margin-left:6px;font:600 .6rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#15803D}
.bb-live i{width:6px;height:6px;border-radius:50%;background:#16A34A}
.case-top{display:flex;align-items:center;gap:.7rem}
.case-n{font:800 1.05rem/1 var(--display);color:var(--ink);padding-right:.7rem;border-right:1px solid var(--line-2)}
.tag-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.45rem;vertical-align:1px}
.tag-pill--ok i{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.tag-pill--soon i{background:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.16)}
.tag-pill--own i{background:#7B4DFA;box-shadow:0 0 0 3px rgba(123,77,250,.16)}
.tag-pill--live{border-color:rgba(22,163,74,.45);color:#166534;background:rgba(22,163,74,.07)}
.tag-pill--live i{position:relative;background:#16A34A}
.tag-pill--live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#16A34A;opacity:.35;scale:2.1}   /* resting: a soft halo; with motion it pings */
.case-chips{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.case-chips li{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .75rem .45rem .55rem;border-radius:10px;background:var(--card);border:1px solid var(--line);
  font:600 .86rem/1.2 var(--sans);color:var(--ink)}
.case-chips svg{width:15px;height:15px;flex:none;color:var(--accent)}
.case-media .browser img{width:100%;height:auto}
.case-phone{position:absolute;right:-2%;bottom:0;width:clamp(120px,22%,190px);background:#05070D;border-radius:26px;padding:6px;
  box-shadow:0 30px 60px -24px rgba(17,24,40,.6);transition:opacity .35s ease,translate .5s var(--ease),right .6s var(--ease),width .6s var(--ease)}
.case-phone .scr{border-radius:21px;overflow:hidden;aspect-ratio:9/19;position:relative;background:#fff}
.case-phone img{width:100%;height:auto;animation:phone-scroll 12s var(--ease-io) 1s infinite}
.case-phone.paused img{animation-play-state:paused}
@media (hover:hover){.case-phone:hover img{animation-play-state:paused}}   /* point at the phone to hold it still */
/* ── one radio group per case (CSS-only, :has): a feature → the page scrolls to it and it is spotlit; "Scroll the page"
      → the page glides in the frame; "On a phone" → the phone comes forward. The screenshot is the top 2700px of the
      page (3 frames tall); the frame shows 900. ── */
.shot{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--ground)}
.shot img{display:block}
.hs,.cf-in,.case-hint,.case-chips--view{display:none}
@supports selector(:has(*)){
  .hs{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:8px;pointer-events:none;
    box-shadow:0 0 0 2.5px #fff,0 0 0 5.5px #6D28D9,0 0 0 9999px rgba(17,24,40,.5)}
  .case:has(.case-chips--feat li:nth-child(1) .cf-in:checked) .hs-1,.case:has(.case-chips--feat li:nth-child(2) .cf-in:checked) .hs-2,.case:has(.case-chips--feat li:nth-child(3) .cf-in:checked) .hs-3{display:block}
  .case-copy .case-hint{display:block;margin:1.2rem 0 .5rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .case-copy .case-hint--2{margin-top:.85rem}
  .case-hint + .case-chips{margin-top:0}
  .case-chips--view{display:flex}
  .case-chips--view li{border-style:dashed;border-color:var(--line-2);background:transparent}
  .case-chips--pick li{position:relative;transition:translate .25s var(--ease),background-color .2s ease,color .2s ease,border-color .2s ease}
  .cf-in{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .cf-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .case-chips--pick li:has(.cf-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent;border-style:solid;color:#fff}
  .case-chips--pick li:has(.cf-in:checked) svg{color:#fff}
  @media (hover:hover){.case-chips--pick li:hover{translate:0 -2px;border-color:var(--line-2)}}
  /* the page inside the frame: translate is in % of the image's own height (= 3 frames) */
  .shot img{transition:translate .9s var(--ease-io)}
  .case:has(.case-chips--feat li:nth-child(1) .cf-in:checked) .shot img{translate:0 calc(var(--s1,0%) * -1)}
  .case:has(.case-chips--feat li:nth-child(2) .cf-in:checked) .shot img{translate:0 calc(var(--s2,0%) * -1)}
  .case:has(.case-chips--feat li:nth-child(3) .cf-in:checked) .shot img{translate:0 calc(var(--s3,0%) * -1)}
  .case:has(.cf-scroll .cf-in:checked) .shot img{translate:0 -33.333%}   /* reduced motion: the next screen down, no gliding */
  /* the phone steps aside while you look at the desktop page… */
  .case:has(.case-chips--feat .cf-in:checked) .case-phone,.case:has(.cf-scroll .cf-in:checked) .case-phone{opacity:0;translate:0 10%;pointer-events:none}
  /* …and comes forward for "On a phone" */
  .case:has(.cf-phone .cf-in:checked) .case-phone{right:50%;translate:50% 0;width:clamp(150px,32%,215px);z-index:2}
  .case:has(.cf-phone .cf-in:checked) .browser{opacity:.4}
  @media (max-width:640px){.case:has(.cf-phone .cf-in:checked) .case-phone{width:min(126px,36%)}}   /* stays inside the mock-up's height */
  @media (prefers-reduced-motion:no-preference){
    .case:has(.cf-in:checked) .hs{animation:hs-in .45s var(--ease) backwards}
    .case:has(.cf-in:checked) .hs--far{animation-delay:.75s}   /* after the page has scrolled there */
    .case:has(.cf-scroll .cf-in:checked) .shot img{animation:page-scroll 22s var(--ease-io) .15s infinite}
    @media (hover:hover){.case:has(.cf-scroll .cf-in:checked) .shot:hover img{animation-play-state:paused}}
  }
}
@keyframes hs-in{from{opacity:0;scale:1.5}}
@keyframes page-scroll{0%,4%{translate:0 0}22%,30%{translate:0 -33.333%}46%,56%{translate:0 -66.667%}72%,80%{translate:0 -33.333%}96%,100%{translate:0 0}}
@keyframes live-ping{0%{opacity:.55;scale:1}100%{opacity:0;scale:3.2}}
@media (prefers-reduced-motion:no-preference){.tag-pill--live i::after{animation:live-ping 2.4s ease-out infinite}}
/* Deepest stop measured: max scroll is 51.6% of the image at every width (the phone keeps its
   9:19 proportions as it scales). Replace the screenshot → re-measure, or it flashes a blank strip. */
@keyframes phone-scroll{0%,16%{transform:translateY(0)}24%,40%{transform:translateY(calc(var(--depth,49%) * -.33))}48%,64%{transform:translateY(calc(var(--depth,49%) * -.66))}72%,88%{transform:translateY(calc(var(--depth,49%) * -1))}96%,100%{transform:translateY(0)}}
.tag-pill{display:inline-block;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:99px;padding:.4rem .75rem}
.case + .case{margin-top:clamp(3rem,6vw,4.5rem)}
@media (min-width:980px){.case--flip{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}.case--flip .case-media{order:2}}
.case-copy h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem);line-height:1.05;margin:1rem 0 .9rem}
.case-copy p{color:var(--ink-2)}
.disclose{margin-top:1.1rem;padding-left:1rem;border-left:2px solid var(--line-2);font-size:.93rem;color:var(--muted)}
/* one column (phones, tablets): the chips come straight after the name, so the picture they change is still on screen */
@media (max-width:979px){
  .case-copy{display:flex;flex-direction:column}
  .case-copy > *{order:3}
  .case-copy > .case-top{order:1}.case-copy > h3{order:1}
  .case-copy > .case-hint,.case-copy > .case-chips{order:2}
  .case-copy > .case-text{margin-top:1.2rem}
  .case-copy h3{margin-bottom:.2rem}
}
.case-go{margin-top:1.3rem}
.case-go .btn{min-height:46px;padding:.7rem 1.25rem;font-size:.95rem}
/* the owner's own projects follow the client sites, under their own heading */
.mine-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;margin:clamp(3.2rem,6vw,4.75rem) 0 clamp(2.2rem,4vw,3rem);padding-top:clamp(2rem,4vw,2.75rem);border-top:1px solid var(--line);scroll-margin-top:90px}
.mine-head h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.mine-head p{color:var(--ink-2)}
.open-slot{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:1.2rem;align-items:center;border:1.5px dashed var(--line-2);border-radius:20px;padding:clamp(1.4rem,3vw,2rem);
  background:radial-gradient(60% 120% at 0% 50%,rgba(123,77,250,.07),transparent 70%),var(--card)}
@media (min-width:860px){.open-slot{grid-template-columns:auto 1fr auto}}
/* "your site here": an empty browser frame, and a way to say what you run */
.os-mock{width:170px;border-radius:12px;border:1.5px dashed var(--line-2);background:var(--ground);overflow:hidden}
.os-bar{display:flex;align-items:center;gap:4px;padding:7px 9px;border-bottom:1.5px dashed var(--line-2)}
.os-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.os-bar span{margin-left:6px;font:400 .6rem/1 var(--mono);color:var(--muted)}
.os-body{display:grid;justify-items:center;gap:.5rem;padding:.9rem .5rem 1rem;text-align:center}
.os-body b{font:700 .84rem/1.2 var(--display);color:var(--ink)}
.open-slot .os-body .plus{width:40px;height:40px}
.open-slot .os-body .plus svg{width:17px;height:17px}
.ov{font-style:normal}
.ov:not(.ov-0),.osb:not(.osb-0),.os-pick{display:none}
@media (max-width:859px){.os-mock{width:150px}}
@supports selector(:has(*)){
  .os-pick{display:block;margin-top:.9rem}
  .open-slot .os-h{margin:0 0 .5rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);max-width:none}
  .os-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
  .os-chips li{position:relative;display:inline-flex;align-items:center;padding:.5rem .8rem;border-radius:99px;background:var(--ground);border:1px solid var(--line);
    font:600 .86rem/1 var(--sans);color:var(--ink);transition:translate .25s var(--ease),background-color .2s ease,color .2s ease,border-color .2s ease}
  .os-in{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .os-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .os-chips li:has(.os-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent;color:#fff}
  @media (hover:hover){.os-chips li:hover{translate:0 -2px;border-color:var(--line-2)}}
  .open-slot:has(.os-in:checked) .ov-0,.open-slot:has(.os-in:checked) .osb-0{display:none}
  .open-slot:has(#os-1:checked) .ov-1,.open-slot:has(#os-2:checked) .ov-2,.open-slot:has(#os-3:checked) .ov-3,.open-slot:has(#os-4:checked) .ov-4,.open-slot:has(#os-5:checked) .ov-5{display:inline}
  .open-slot:has(#os-1:checked) .osb-1,.open-slot:has(#os-2:checked) .osb-2,.open-slot:has(#os-3:checked) .osb-3,.open-slot:has(#os-4:checked) .osb-4,.open-slot:has(#os-5:checked) .osb-5{display:inline-flex}
  .open-slot:has(.os-in:checked) .os-mock{border-style:solid;border-color:#B9A4F2;background:var(--card)}
  @media (prefers-reduced-motion:no-preference){.open-slot:has(.os-in:checked) .os-body b{animation:pop-in .35s var(--ease)}}
}
.open-slot .plus{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;
  border:2px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;box-shadow:0 12px 26px -12px rgba(109,40,217,.6)}
.open-slot .plus svg{width:22px;height:22px}
.open-slot h3{margin-bottom:.35rem}
.open-slot p{color:var(--ink-2);font-size:.97rem;max-width:62ch}

/* ── pricing (offer ladder 2026-09-25) ─────────────────────────────────
   Each tier owns an end of the logo: Starter = blue end, Signature = magenta end,
   Complete = the whole gradient (it has everything). Icon colours measured on white:
   #1769C9 5.4:1, #B51FD1 5.2:1 — both pass even as text. Bright logo colours only on bars. */
.tiers{display:grid;gap:1.1rem;align-items:start;margin-top:.5rem}
@media (min-width:960px){
  .tiers{grid-template-columns:repeat(3,1fr);align-items:stretch;padding-top:14px}
  /* identical rows line up across all three cards, so the comparison reads straight across */
  @supports (grid-template-rows:subgrid){.tier{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}}
}
.tier{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:clamp(1.4rem,2.6vw,1.9rem);overflow:hidden;--tier-ink:var(--accent);--tier-bar:var(--grad-x);
  transition:translate .35s var(--ease),box-shadow .35s var(--ease)}
.tier::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--tier-bar)}
.tier--starter{--tier-ink:#1769C9;--tier-bar:linear-gradient(90deg,#2E9BFF,#1769C9);--tier-glow:rgba(46,155,255,.5);
  background:radial-gradient(110% 38% at 50% 0%,rgba(46,155,255,.11),transparent 72%),var(--card)}
.tier--signature{--tier-ink:#B51FD1;--tier-bar:linear-gradient(90deg,#D400F5,#B51FD1);--tier-glow:rgba(212,0,245,.42);
  background:radial-gradient(110% 38% at 50% 0%,rgba(212,0,245,.09),transparent 72%),var(--card)}
@media (hover:hover){
  .tier--starter:hover,.tier--signature:hover{translate:0 -6px;box-shadow:0 34px 64px -36px var(--tier-glow)}
  .tier--complete:hover{box-shadow:0 40px 80px -34px rgba(109,40,217,.75)}
}
/* header: three reassurances under the lead */
.price-chips{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.price-chips li{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .7rem .42rem .5rem;border-radius:10px;background:var(--card);border:1px solid var(--line);
  font:600 .84rem/1.2 var(--sans);color:var(--ink)}
.price-chips svg{width:14px;height:14px;flex:none;color:var(--accent)}
@media (min-width:980px){.sh-right .lead{margin:0}}
.t-head{position:relative}
.tier .t-name{display:inline-flex;align-items:center;gap:.5rem;font:600 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.tier .t-name i{width:9px;height:9px;border-radius:50%;background:var(--tier-bar)}
.tier .t-price{font:800 clamp(2.7rem,2.2rem + 2vw,3.5rem)/1 var(--display);letter-spacing:-.035em;margin-top:1rem;color:var(--ink)}
.tier .t-vat{margin-top:.4rem;font:400 .74rem/1.3 var(--mono);color:var(--muted)}
/* the 50 / 50 payment as a two-step bar in the brand colours: the first half is the deepened logo gradient
   (white on it ≥ 6.08:1, measured), shaped as an arrow into the second half, which is the light brand tint */
.tier .t-split{margin-top:.9rem;display:grid;grid-template-columns:1fr 1fr;border-radius:12px;overflow:hidden;font:500 .68rem/1.2 var(--mono);letter-spacing:.03em}
.t-split span{padding:.5rem .7rem .55rem}
.t-split b{display:block;margin-bottom:.15rem;font:800 1.02rem/1.1 var(--display);letter-spacing:-.01em}
.t-split .s-a{position:relative;z-index:1;color:#fff;background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}
.t-split .s-b{margin-left:-11px;padding-left:calc(.7rem + 15px);color:#5B21B6;background:#EFE9FC}
.tier .t-for{margin-top:1.1rem;color:var(--ink-2);font-size:.98rem}
.t-group{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.t-gh{font:600 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem}
/* how much is set up for you: 2 of 8 · 7 of 8 · 8 of 8, as a meter in the tier's colour */
.t-gh--count{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.t-count{color:var(--tier-ink);letter-spacing:.08em}
.t-meter{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:-.2rem 0 .85rem}
.t-meter i{height:4px;border-radius:2px;background:var(--line)}
.t-meter i.on{background:var(--tier-ink)}
.tier--complete .t-count{color:var(--accent-night)}
.tier--complete .t-meter i{background:var(--night-line)}
.tier--complete .t-meter i.on{background:linear-gradient(90deg,#D400F5,#7B4DFA)}
/* the Stay Seen bonus, as a gift */
.t-list li.bonus{align-items:center;padding:.55rem .7rem;border-radius:11px;background:#EFE9FC;color:#5B21B6}
.t-list li.bonus b{color:inherit}
.t-list li.bonus svg{margin-top:0;color:#6D28D9}
.t-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.t-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;line-height:1.4;color:var(--ink-2)}
.t-list svg{width:17px;height:17px;flex:none;margin-top:.12rem;color:var(--tier-ink)}
.t-list b{color:var(--ink);font-weight:600}
.t-list li.no{color:var(--muted)}                   /* 5.3:1 — readable, clearly "not in this one" */
.t-list li.no svg{color:var(--line-2)}
.tier .btn{margin-top:1.6rem;width:100%;align-self:end}
@media (hover:hover) and (pointer:fine){.tier:not(.tier--complete):hover{translate:0 -4px;box-shadow:0 24px 48px -30px rgba(17,24,40,.35)}}

/* Complete: the product. Navy, raised, with the logo gradient running round its border.
   The ring is a big conic layer ROTATED BY TRANSFORM behind a navy inner panel: the compositor
   spins it for free. (Animating the gradient angle itself repainted on the main thread every
   frame — measured +130 ms blocking and +0.16 s LCP on a throttled phone.) */
.tier--complete{color:var(--on-night);border:0;background:var(--night);isolation:isolate;
  box-shadow:0 34px 70px -34px rgba(109,40,217,.55)}
.tier--complete::after{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1/1;translate:-50% -50%;z-index:-2;
  background:conic-gradient(#D400F5,#2E9BFF,#7B4DFA,#D400F5);animation:ring 7s linear infinite}
.tier--complete::before{display:block;inset:2px;height:auto;border-radius:20px;background:var(--night);z-index:-1}
@media (prefers-reduced-motion:no-preference){
  .reveal-on .tier:not(.in) .t-meter i.on{scale:0 1}
  .reveal-on .tier .t-meter i.on{transform-origin:left;transition:scale .4s var(--ease) calc(.55s + var(--i) * 60ms)}
}
@keyframes ring{to{rotate:360deg}}
@media (min-width:960px){.tier--complete{translate:0 -14px}}
@media (max-width:959px){.tier--complete{order:-1}}   /* on phones the product comes first */
.tier--complete .t-name,.tier--complete .t-price{color:var(--on-night)}
.tier--complete .t-name i{background:var(--grad)}
.tier--complete .t-vat,.tier--complete .t-gh{color:var(--on-night-muted)}
.tier--complete .t-split .s-b{color:var(--accent-night);background:rgba(196,181,253,.16)}
.tier--complete .t-for,.tier--complete .t-list li{color:var(--on-night-muted)}
.tier--complete .t-list b{color:var(--on-night)}
.tier--complete .t-list svg{color:var(--accent-night)}
.tier--complete .t-group{border-top-color:var(--night-line)}
.tier--complete .t-list li.no{color:#8891A8} .tier--complete .t-list li.no svg{color:var(--night-line)}
.tier--complete .t-list li.bonus{background:rgba(196,181,253,.16);color:var(--on-night)}
.tier--complete .t-list li.bonus svg{color:var(--accent-night)}
.pop{position:absolute;top:-.1rem;right:0;font:600 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(90deg,#F3D9FF,#D6E9FF);border-radius:99px;padding:.45rem .7rem}
.btn-light{background:var(--ground);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn-light:hover{box-shadow:0 14px 34px -12px rgba(0,0,0,.8)}}

/* Stay Seen — the monthly plan as its own band */
.stay{margin-top:1.4rem;display:grid;gap:1.2rem 2.5rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:clamp(1.3rem,3vw,1.8rem);position:relative;overflow:hidden}
.stay::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--grad-y)}
@media (min-width:900px){.stay{grid-template-columns:auto 1fr}.stay .checks{grid-template-columns:1fr 1fr;column-gap:2rem}}
.stay .t-name{display:inline-flex;align-items:center;gap:.5rem;font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.stay .t-name i{width:9px;height:9px;border-radius:50%;background:var(--grad)}
.stay-price{font:800 2.4rem/1 var(--display);letter-spacing:-.03em;margin-top:.7rem}
.stay-price small{font:500 1rem var(--sans);color:var(--muted);letter-spacing:0}
.stay .t-vat{margin-top:.4rem;font:400 .72rem/1.3 var(--mono);color:var(--muted)}
.stay{background:radial-gradient(50% 120% at 100% 0%,rgba(123,77,250,.08),transparent 70%),var(--card)}
.stay-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:.8rem;border-radius:12px;color:#fff;background:var(--grad);box-shadow:0 10px 22px -12px rgba(109,40,217,.7)}
.stay-ic svg{width:21px;height:21px}
.stay-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem 2rem}
@media (min-width:900px){.stay-list{grid-template-columns:1fr 1fr}}
.stay-list li{display:flex;align-items:flex-start;gap:.65rem;font-size:.95rem;line-height:1.4;color:var(--ink-2)}
.stay-list li span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:#EFE9FC;color:var(--accent)}
.stay-list li span svg{width:15px;height:15px}
.stay-free{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .65rem;border-radius:99px;background:#EFE9FC;color:#5B21B6;font:600 .76rem/1 var(--sans)}
.stay-free svg{width:14px;height:14px;flex:none}
.stay-note{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem;border-top:1px dashed var(--line);padding-top:.9rem;margin:0}
/* ── price section, interactive (CSS-only :has) ──────────────────────────
   1 "which sounds like you?" → points to a tier · 2 hover a row → same row across the three cards
   3 the guarantee: late by 1 / 2 / 3 weeks · 4 Stay Seen shows what applies to the pick */
.lw{font-style:normal}
.lw:not(.lw-0),.fit,.fit-tag,.sf-1,.lw-pick{display:none}
@supports selector(:has(*)){
  .fit{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 1.4rem;padding:.9rem 1.1rem;border-radius:18px;background:var(--card);border:1px solid var(--line)}
  .fit-h{margin:0;font-size:.97rem;color:var(--ink-2)} .fit-h b{color:var(--ink);font-weight:700}
  .fit-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
  .fit-chips li{position:relative;display:inline-flex;align-items:center;padding:.6rem .9rem;border-radius:99px;background:var(--ground);border:1px solid var(--line);
    font:600 .9rem/1.2 var(--sans);color:var(--ink);transition:translate .25s var(--ease),background-color .2s ease,color .2s ease,border-color .2s ease}
  .fit-in,.lw-in{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .fit-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .lw-in:focus-visible{outline:2.5px solid var(--accent-night);outline-offset:3px;box-shadow:none}
  .fit-chips li:has(.fit-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent;color:#fff}
  @media (hover:hover){.fit-chips li:hover{translate:0 -2px;border-color:var(--line-2)}}
  /* the tier that fits: ring + tag; the other two step back */
  .fit-tag{position:absolute;top:-.25rem;right:0;align-items:center;gap:.3rem;padding:.4rem .6rem;border-radius:99px;background:#15803D;color:#fff;font:700 .68rem/1 var(--sans);white-space:nowrap}
  .fit-tag svg{width:12px;height:12px;stroke-width:3}
  .tier{transition:translate .35s var(--ease),box-shadow .35s var(--ease),opacity .3s ease}
  #pricing:has(.fit-in:checked) .tier{opacity:.84}   /* a light step back — the other two must stay easy to read */
  #pricing:has(#fit-1:checked) .tier--starter,#pricing:has(#fit-2:checked) .tier--complete,#pricing:has(#fit-3:checked) .tier--signature{opacity:1}
  #pricing:has(#fit-1:checked) .tier--starter,#pricing:has(#fit-3:checked) .tier--signature{box-shadow:0 0 0 2.5px var(--tier-ink),0 34px 64px -36px var(--tier-glow)}
  #pricing:has(#fit-2:checked) .tier--complete{box-shadow:0 0 0 3px #3DDC84,0 40px 80px -34px rgba(109,40,217,.75)}
  #pricing:has(#fit-1:checked) .tier--starter .fit-tag,#pricing:has(#fit-2:checked) .tier--complete .fit-tag,#pricing:has(#fit-3:checked) .tier--signature .fit-tag{display:inline-flex}
  #pricing:has(#fit-2:checked) .tier--complete .pop{display:none}
  @media (hover:hover){#pricing:has(.fit-in:checked) .tier:hover{opacity:1}}
  @media (max-width:959px){#pricing:has(#fit-1:checked) .tier--starter,#pricing:has(#fit-3:checked) .tier--signature{order:-2}}
  /* Stay Seen: what applies to the pick */
  #pricing:has(#fit-1:checked) .sf-1{display:inline-flex}
  .sf-1 svg{stroke-width:2.6}
  #pricing:has(#fit-1:checked) .sf-1,#pricing:has(#fit-2:checked) .sf-2,#pricing:has(#fit-3:checked) .sf-3{background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);color:#fff}
  /* compare: the hovered row is marked in all three cards */
  .tier{--row-hi:#EEF0F6}.tier--complete{--row-hi:rgba(255,255,255,.1)}
  @media (hover:hover){
  .tiers:has(.t-group:nth-of-type(1) li:nth-child(1):hover) .t-group:nth-of-type(1) li:nth-child(1),
  .tiers:has(.t-group:nth-of-type(1) li:nth-child(2):hover) .t-group:nth-of-type(1) li:nth-child(2),
  .tiers:has(.t-group:nth-of-type(1) li:nth-child(3):hover) .t-group:nth-of-type(1) li:nth-child(3),
  .tiers:has(.t-group:nth-of-type(1) li:nth-child(4):hover) .t-group:nth-of-type(1) li:nth-child(4),
  .tiers:has(.t-group:nth-of-type(2) li:nth-child(1):hover) .t-group:nth-of-type(2) li:nth-child(1),
  .tiers:has(.t-group:nth-of-type(2) li:nth-child(2):hover) .t-group:nth-of-type(2) li:nth-child(2),
  .tiers:has(.t-group:nth-of-type(2) li:nth-child(3):hover) .t-group:nth-of-type(2) li:nth-child(3),
  .tiers:has(.t-group:nth-of-type(2) li:nth-child(4):hover) .t-group:nth-of-type(2) li:nth-child(4),
  .tiers:has(.t-group:nth-of-type(2) li:nth-child(5):hover) .t-group:nth-of-type(2) li:nth-child(5),
  .tiers:has(.t-group:nth-of-type(2) li:nth-child(6):hover) .t-group:nth-of-type(2) li:nth-child(6),
  .tiers:has(.t-group:nth-of-type(2) li:nth-child(7):hover) .t-group:nth-of-type(2) li:nth-child(7),
  .tiers:has(.t-group:nth-of-type(2) li:nth-child(8):hover) .t-group:nth-of-type(2) li:nth-child(8){background:var(--row-hi);box-shadow:0 0 0 5px var(--row-hi);border-radius:3px}
  }
  /* the guarantee, tried out */
  .promise .lw-pick{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;grid-column:2/-1;grid-row:3;margin-top:.2rem}
  .lw-h{font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-night)}
  .lw-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}   /* wrap: unwrapped, the three chips made 320px phones 5px too wide */
  .lw-chips li{position:relative;display:inline-flex;padding:.5rem .8rem;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--night-line);font:600 .86rem/1 var(--sans);color:var(--on-night);
    transition:translate .25s var(--ease),border-color .2s ease}
  .lw-chips li:has(.lw-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent}
  @media (hover:hover){.lw-chips li:hover{translate:0 -2px;border-color:rgba(196,181,253,.5)}}
  .promise:has(.lw-in:checked) .lw-0{display:none}
  .promise:has(#lw-1:checked) .lw-1,.promise:has(#lw-2:checked) .lw-2,.promise:has(#lw-3:checked) .lw-3{display:inline}
  .promise:has(.lw-in:checked) .late-badge{border-color:rgba(196,181,253,.5);background:rgba(196,181,253,.12)}
  @media (max-width:400px){.lw-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));width:100%}.lw-chips li{justify-content:center;padding-inline:.3rem}}   /* small phones: equal chips; they drop to two rows under ~345px instead of widening the page */
  @media (max-width:640px){.promise .lw-pick{grid-column:2;grid-row:3}#pricing .promise .late-badge{grid-row:4}}   /* #pricing: must beat the older phone rule further down, which also puts the badge on row 3 */
  @media (prefers-reduced-motion:no-preference){
    .promise:has(.lw-in:checked) .late-badge b,#pricing:has(.fit-in:checked) .fit-tag{animation:pop-in .35s var(--ease)}
  }
}

/* Two promises in writing */
.promises{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:900px){.promises{grid-template-columns:1fr 1.25fr}}
.promise{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:var(--night);color:var(--on-night-muted);border-radius:22px;padding:clamp(1.3rem,3vw,1.8rem);
  background:radial-gradient(70% 90% at 100% 0%,rgba(123,77,250,.18),transparent 70%),var(--night)}
/* the guarantee's number, big */
.promise:has(.late-badge){grid-template-columns:auto 1fr auto}
.late-badge{align-self:start;text-align:right;line-height:1;padding:.7rem .85rem;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--night-line)}
.promise:has(.late-badge) > div{display:contents}
.promise:has(.late-badge) h3{grid-column:2;grid-row:1;align-self:center;margin:0}
.promise:has(.late-badge) .late-badge{grid-column:3;grid-row:1}
.promise:has(.late-badge) p{grid-column:2/-1;grid-row:2;margin-top:-.35rem}
@media (max-width:640px){.promise:has(.late-badge){grid-template-columns:auto 1fr}
  .promise:has(.late-badge) .late-badge{grid-column:2;grid-row:3;justify-self:start;text-align:left}.promise:has(.late-badge) p{grid-column:2}}
.late-badge b{display:block;font:800 clamp(1.6rem,1.2rem + 1vw,2.1rem)/1 var(--display);letter-spacing:-.03em;color:var(--on-night)}
.late-badge small{display:block;margin-top:.3rem;font:500 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-night)}
#pricing .sec-head--split,#process .sec-head--split{align-items:start}
/* the four steps at a glance */
.flow-chips{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;counter-reset:fl}
.flow-chips li{counter-increment:fl;display:inline-flex}
.flow-chips a{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .75rem .38rem .4rem;border-radius:99px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid var(--night-line);font:600 .84rem/1.2 var(--sans);color:var(--on-night);
  transition:translate .25s var(--ease),border-color .25s ease,background-color .25s ease}
.flow-chips a::before{content:counter(fl);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(196,181,253,.18);color:var(--accent-night);font:700 .72rem/1 var(--mono);
  transition:background-color .3s ease,color .3s ease}
@media (hover:hover){.flow-chips a:hover{translate:0 -2px;border-color:rgba(196,181,253,.55)}}
/* the chip of the step you are on (site.js sets #process[data-step]) */
#process[data-step="0"] .flow-chips li:nth-child(1) a,#process[data-step="1"] .flow-chips li:nth-child(2) a,
#process[data-step="2"] .flow-chips li:nth-child(3) a,#process[data-step="3"] .flow-chips li:nth-child(4) a{border-color:rgba(196,181,253,.6);background:rgba(196,181,253,.12)}
#process[data-step="0"] .flow-chips li:nth-child(1) a::before,#process[data-step="1"] .flow-chips li:nth-child(2) a::before,
#process[data-step="2"] .flow-chips li:nth-child(3) a::before,#process[data-step="3"] .flow-chips li:nth-child(4) a::before{background:linear-gradient(135deg,#A21CBF,#6D28D9 50%,#155FB8);color:#fff}
.step{scroll-margin-top:96px}.step-card{scroll-margin-top:96px}
/* clickable: a step card that isn't the current one, and the segments above the phone */
@media (min-width:980px){
  .reveal-on .step:not(.now) .step-card{cursor:pointer}
  @media (hover:hover){.reveal-on .step:not(.now) .step-card:hover{opacity:.92;border-color:rgba(196,181,253,.4)}}
  .stage-prog i{position:relative;cursor:pointer}
  .stage-prog i::after{content:"";position:absolute;inset:-13px 0}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .device{transition:transform .6s var(--ease)}
  .stage:hover .device{transform:perspective(1100px) rotateY(-5deg) rotateX(2deg)}
}
/* step 02: "see yours" — pick a package (CSS-only; also drives the phone's quote and calendar) */
.sq-in,.sq-h,.sq-chips{display:none}
.sq{margin-top:1.1rem}
.sq-out{margin:0;padding:.7rem .9rem;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--night-line);font-size:.95rem;line-height:1.45}
.step .sq-out{color:var(--on-night-muted);max-width:none}
.sq-out b{color:var(--on-night);font:800 1.1rem/1 var(--display)}
@supports selector(:has(*)){
  .step .sq-h{display:block;margin:0 0 .5rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-night)}
  .sq-chips{list-style:none;margin:0 0 .55rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
  .sq-chips li{position:relative;display:inline-flex;align-items:center;padding:.5rem .85rem;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--night-line);
    font:600 .88rem/1 var(--sans);color:var(--on-night);transition:translate .25s var(--ease),border-color .2s ease}
  .sq-in{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .sq-in:focus-visible{outline:2.5px solid var(--accent-night);outline-offset:3px;box-shadow:none}
  .sq-chips li:has(.sq-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent}
  @media (hover:hover){.sq-chips li:hover{translate:0 -2px;border-color:rgba(196,181,253,.5)}}
  #process:has(.sq-in:not(#sq-2):checked) .sv-2{display:none}
  #process:has(#sq-1:checked) .sv-1,#process:has(#sq-3:checked) .sv-3{display:inline}
  #process:has(.sq-in:not(#sq-2):checked) .cal-g .d-l2{background:none;color:var(--ink-2);font-weight:500}
  #process:has(#sq-1:checked) .cal-g .d-l1,#process:has(#sq-3:checked) .cal-g .d-l3{background:var(--grad);color:#fff;font-weight:700}
  @media (prefers-reduced-motion:no-preference){#process:has(.sq-in:checked) .sq-out .sv{animation:pop-in .35s var(--ease)}}
}
.promise h3{color:var(--on-night);font-size:1.15rem;margin-bottom:.45rem}
.promise p{font-size:.95rem}
.promise b{color:var(--on-night);font-weight:600}
.p-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--grad)}
.p-ic svg{width:24px;height:24px}
.own{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.4rem 1.2rem;font-size:.9rem;color:var(--on-night)}
@media (min-width:560px){.own{grid-template-columns:1fr 1fr}}
.own li{display:flex;gap:.5rem;align-items:center}
.own svg{width:15px;height:15px;flex:none;color:var(--accent-night)}
.vat-all{margin-top:1.1rem;text-align:center;font:400 .72rem/1.6 var(--mono);color:var(--muted)}
.vat-all a{color:var(--accent-text);font-weight:500;text-underline-offset:.2em;display:inline-flex;min-height:24px;align-items:center}

/* ── the hub: everything the customer sees, around one website ───────── */
.hub-grid{display:grid;gap:2.5rem;align-items:center}
#everywhere{padding-bottom:clamp(2.75rem,5vw,4.25rem)}   /* the diagram's bottom nodes already leave air below them */
@media (min-width:980px){.hub-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}}
.hub-grid h2{margin:1rem 0 1.1rem}
.hub-chips{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.hub-chips li{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem .5rem .6rem;border-radius:12px;background:var(--card);border:1px solid var(--line);
  font:600 .88rem/1.2 var(--sans);color:var(--ink)}
.hub-chips svg{width:16px;height:16px;flex:none;color:var(--accent)}
.hub-more{margin-top:1rem}
/* ── tap a channel → what gets set up for it, and how a customer gets to you from there (CSS-only, :has).
      A channel is always chosen (Google Maps to begin with). Two more grid children follow the diagram:
      .hub-route (the picture story) and .hub-detail (what I set up). Desktop: text | diagram, then detail | route.
      Phones: text, diagram, route, detail — the cards sit next to the tap. ── */
.hb-in,.hub-hint,.hub-detail,.hub-route,.hub-go,.hn-new,.hub-play{display:none}
@supports selector(:has(*)){
  .hb-in{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:3;border-radius:inherit}
  .hb-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .hn--maps{--hc:#C5221F}.hn--wa{--hc:#128C4B}.hn--ig{--hc:#C2247A}.hn--tt{--hc:#111828}.hn--fb{--hc:#1766D6}
  /* the chosen channel's colour, for the two cards (the channel cards keep their own through the classes above) */
  #everywhere:has(#hb-1:checked){--hc:#C5221F}#everywhere:has(#hb-2:checked){--hc:#128C4B}#everywhere:has(#hb-3:checked){--hc:#C2247A}#everywhere:has(#hb-4:checked){--hc:#111828}#everywhere:has(#hb-5:checked){--hc:#1766D6}
  .hub .hub-node:has(.hb-in:checked){border-color:var(--hc);box-shadow:0 0 0 3px color-mix(in srgb,var(--hc) 22%,transparent),0 24px 40px -24px rgba(17,24,40,.5)}
  /* the route: the chosen channel's line (violet) into the website, then the WhatsApp line (green) out of it */
  .hub-lines line{transition:stroke-opacity .3s ease,stroke-width .3s ease,stroke .3s ease}
  .hub:has(.hb-in:checked) .hub-lines line{stroke-opacity:.4}
  .hub:has(#hb-1:checked) .hub-lines line:nth-of-type(1),.hub:has(#hb-3:checked) .hub-lines line:nth-of-type(3),
  .hub:has(#hb-4:checked) .hub-lines line:nth-of-type(4),.hub:has(#hb-5:checked) .hub-lines line:nth-of-type(5){stroke-opacity:1;stroke-width:4;stroke:#6D28D9}
  .hub:has(.hb-in:checked) .hub-lines line:nth-of-type(2){stroke-opacity:1;stroke-width:4;stroke:#128C4B}
  .hub:has(.hb-in:checked) .hub-dot{display:none}   /* the ambient dots give way to the one route */
  .hub-go{fill:#6D28D9;r:2;opacity:0;stroke:#fff;stroke-width:.7}
  .go-b{fill:#128C4B}
  .hn-new{position:absolute;left:50%;bottom:-12px;translate:-50% 0;z-index:4;pointer-events:none;white-space:nowrap;padding:.3rem .55rem;border-radius:99px;background:#15803D;color:#fff;
    font:700 .66rem/1 var(--sans);font-style:normal;box-shadow:0 0 0 3px var(--ground-2),0 8px 14px -8px rgba(21,128,61,.9)}
  .hub:has(#hb-1:checked) .go-1,.hub:has(#hb-2:checked) .go-2,.hub:has(#hb-3:checked) .go-3,.hub:has(#hb-4:checked) .go-4,.hub:has(#hb-5:checked) .go-5{display:inline}
  .hub:has(#hb-1:checked) .nw-1,.hub:has(#hb-2:checked) .nw-2,.hub:has(#hb-3:checked) .nw-3,.hub:has(#hb-4:checked) .nw-4,.hub:has(#hb-5:checked) .nw-5{display:block}
  .hub-hint{display:inline-flex;align-items:center;gap:.3rem;position:absolute;left:50%;bottom:-1%;translate:-50% 0;white-space:nowrap;padding:.3rem .65rem .3rem .45rem;border-radius:99px;background:#EFE9FC;color:#5B21B6;font:600 .72rem/1 var(--sans)}
  .hub-hint svg{width:14px;height:14px}
  .hub:has(.hb-in:not(#hb-1):checked) .hub-hint,#everywhere.touring .hub-hint{display:none}   /* gone once another channel has been tried */
  /* the two cards */
  .hub-detail,.hub-route{display:flex;flex-direction:column;padding:1.05rem 1.2rem 1.1rem;border-radius:18px;border:1px solid var(--line);box-shadow:0 20px 44px -34px rgba(17,24,40,.4);
    background:radial-gradient(130% 110% at 0 0,color-mix(in srgb,var(--hc,#6D28D9) 9%,transparent),transparent 56%),var(--card)}
  .hd{display:none;margin:0}
  #everywhere:has(#hb-1:checked) #hd-1,#everywhere:has(#hb-2:checked) #hd-2,#everywhere:has(#hb-3:checked) #hd-3,#everywhere:has(#hb-4:checked) #hd-4,#everywhere:has(#hb-5:checked) #hd-5{display:flex;flex-direction:column;flex:1}
  .hd-top{display:flex;align-items:center;gap:.7rem;margin:0 0 .8rem}
  .hd-top .hn-ic{margin:0;flex:none}
  .hd-top b{font:800 1.12rem/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
  .hd-in{margin-left:auto;padding:.35rem .6rem;border-radius:99px;background:#EFE9FC;color:#5B21B6;font:600 .74rem/1 var(--sans);white-space:nowrap}
  .hub-detail .checks{gap:.45rem}
  .hub-detail .checks li{font-size:.94rem}
  .hd-ask{margin:auto 0 0;padding-top:.5rem}
  .hd-ask .link{font-size:.93rem}
  /* the picture story: three small mock-ups, the same three beats as the dots in the diagram */
  .jr-h{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:36px;margin:0 0 .6rem}
  .jr-h > span{flex:1;min-width:8ch;font:500 .68rem/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .jr{display:none;list-style:none;margin:auto 0;padding:0;counter-reset:jr;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;width:100%;max-width:520px;align-self:center}
  #everywhere:has(#hb-1:checked) .jr-1,#everywhere:has(#hb-2:checked) .jr-2,#everywhere:has(#hb-3:checked) .jr-3,#everywhere:has(#hb-4:checked) .jr-4,#everywhere:has(#hb-5:checked) .jr-5{display:grid}
  .jr li{counter-increment:jr;min-width:0}
  .jr-w{position:relative;display:block}
  .jr li + li .jr-w::before{content:"";position:absolute;left:-1.02rem;top:50%;width:7px;height:7px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);translate:0 -50%;rotate:45deg}
  .jr-w::after{content:"";position:absolute;inset:-4px;border-radius:15px;border:2px solid var(--hc);opacity:0;pointer-events:none}
  .jr li:nth-child(2) .jr-w::after{border-color:#6D28D9}
  .jr li:nth-child(3) .jr-w::after{border-color:#128C4B}
  .jr-c{display:flex;align-items:flex-start;gap:.4rem;margin-top:.5rem;font:600 .8rem/1.3 var(--sans);color:var(--ink)}
  .jr-c::before{content:counter(jr);flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--ground);border:1px solid var(--line);font:700 .64rem/1 var(--sans);color:var(--ink-2)}
  .jr-p{position:relative;display:block;aspect-ratio:16/9.4;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:#fff;font:600 .5rem/1.15 var(--sans);color:var(--ink)}
  .jr-p *{font-style:normal;text-decoration:none}
  .jr-p b:empty{display:block;height:5px;border-radius:3px;background:var(--ink)}
  .jr-p em:empty{display:block;height:4px;border-radius:2px;background:var(--line-2)}
  .jr-p u{font:600 .47rem/1 var(--mono);white-space:nowrap;padding:3px 5px;border-radius:99px;background:#E7F0FE;color:#1558B8}
  /* 1 · where they start */
  .jp-maps{background:linear-gradient(118deg,transparent 43%,#fff 43% 50%,transparent 50%),linear-gradient(24deg,transparent 58%,#fff 58% 64%,transparent 64%),linear-gradient(90deg,#CFE4F6 0 20%,transparent 20%),#E2EDDB}
  .m-pin{position:absolute;left:61%;top:8%;width:21%;filter:drop-shadow(0 3px 3px rgba(17,24,40,.3))}
  .m-pin svg{width:100%;height:auto}
  .m-card{position:absolute;left:7%;bottom:9%;display:grid;gap:2px;padding:4px 7px 5px;border-radius:7px;background:#fff;box-shadow:0 4px 10px -4px rgba(17,24,40,.45)}
  .m-card b{font-weight:700}
  .m-card em{color:#15803D}
  .f-cov{position:absolute;inset:0 0 54% 0;background:linear-gradient(120deg,#1766D6,#63A8F7)}
  .f-av{position:absolute;left:8%;top:21%;width:25%;aspect-ratio:1;border-radius:50%;background:var(--night);border:2.5px solid #fff}
  .f-t{position:absolute;left:39%;top:54%;right:8%;display:grid;gap:3px}
  .f-t b{width:78%}.f-t em{width:52%}
  .jp-fb u{position:absolute;left:39%;bottom:8%}
  .g-av{position:absolute;left:8%;top:11%;width:21%;aspect-ratio:1;border-radius:50%;border:2.5px solid transparent;background:linear-gradient(var(--night),var(--night)) padding-box,linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF) border-box}
  .g-t{position:absolute;left:36%;top:13%;right:6%;display:grid;gap:4px;justify-items:start}
  .g-t b{width:64%}
  .g-row{position:absolute;left:8%;right:8%;bottom:9%;height:36%;display:grid;grid-template-columns:repeat(3,1fr);gap:5%}
  .g-row i{border-radius:5px;background:linear-gradient(160deg,#F2C28B,#D9895B 55%,#4B6A86)}
  .g-row i:nth-child(2){background:linear-gradient(160deg,#B9D3E8,#4B6A86 60%,#1E2A3F)}
  .g-row i:nth-child(3){background:linear-gradient(160deg,#C9D8C3,#5E7F66 60%,#1F2E25)}
  .jp-tt{background:#0E1017}
  .jp-tt::before{content:"";position:absolute;left:47%;top:15%;width:13%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.22)}
  .jp-tt::after{content:"";position:absolute;left:47%;top:46%;width:38%;height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
  .t-reel{position:absolute;left:9%;top:9%;bottom:9%;aspect-ratio:9/14;border-radius:6px;background:linear-gradient(165deg,#4B3478,#1E2A3F 60%,#0E1017);box-shadow:-2px -1px 0 #25F4EE,2px 1px 0 #FE2C55}
  .t-play{position:absolute;left:50%;top:44%;translate:-40% -50%;border-left:9px solid #fff;border-block:6px solid transparent}
  .t-side{position:absolute;right:9%;top:12%;display:grid;gap:4px}
  .t-side i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.8)}
  .t-cap{position:absolute;left:10%;right:30%;bottom:9%;display:grid;gap:2px}
  .jr-p .t-cap b:empty{height:3px;background:#fff}
  .jr-p .t-cap em:empty{height:3px;width:70%;background:rgba(255,255,255,.55)}
  .jp-tt u{position:absolute;right:5%;bottom:12%;background:rgba(255,255,255,.16);color:#fff}
  /* 2 · your website — the WhatsApp button is the way on */
  .s-bar{position:absolute;inset:0 0 auto 0;height:25%;display:flex;align-items:center;gap:6%;padding:0 6%;background:var(--ground);border-bottom:1px solid var(--line)}
  .s-bar i{flex:none;width:15px;height:4px;background:radial-gradient(circle,var(--line-2) 1.9px,transparent 2.2px) 0 0/5px 4px repeat-x}
  .jr-p .s-bar u{padding:0;background:none;color:var(--ink-2)}
  .s-h{position:absolute;left:8%;top:36%;width:54%;height:6px;border-radius:3px;background:var(--ink)}
  .s-l{position:absolute;left:8%;top:51%;width:72%;height:4px;border-radius:2px;background:var(--line-2)}
  .s-l2{top:60.5%;width:50%}
  .s-btn{position:absolute;left:8%;bottom:9%;padding:3.5px 7px;border-radius:99px;background:var(--wa);color:#073B1F;font-weight:700}
  .jp-tap .s-btn{box-shadow:0 0 0 2px #fff,0 0 0 4px #128C4B}
  .jp-tap .s-btn::after{content:"";position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:50%;background:rgba(17,24,40,.22);border:1.5px solid rgba(17,24,40,.55)}   /* a fingertip */
  /* 3 · WhatsApp */
  .jp-chat,.jp-you{background:#EFE7DD}
  .c-top{position:absolute;inset:0 0 auto 0;height:27%;display:flex;align-items:center;gap:6%;padding:0 6%;background:#0F7A40;color:#fff;font-weight:700}
  .c-top i{flex:none;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.85)}
  .jr-p .c-top .c-bar{width:38%;height:4px;background:rgba(255,255,255,.85)}
  .c-in{position:absolute;left:7%;top:40%;max-width:80%;padding:4px 6px;border-radius:2px 7px 7px 7px;background:#fff;font-weight:500;line-height:1.25;box-shadow:0 1px 1px rgba(17,24,40,.16)}
  .jp-you .c-in{top:34%}
  .c-out{position:absolute;right:7%;bottom:8%;padding:4px 6px;border-radius:7px 2px 7px 7px;background:#D9FDD3;font-weight:500;box-shadow:0 1px 1px rgba(17,24,40,.16)}
  .c-tk{color:#1558B8;letter-spacing:-.12em}
  .c-row{position:absolute;left:7%;right:7%;display:flex;align-items:center;gap:6%}
  .c-row:nth-of-type(2){top:37%}.c-row:nth-of-type(3){top:58%}.c-row:nth-of-type(4){top:79%}
  .c-row i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--line-2)}
  .jr-p .c-row b:empty{flex:1;height:4px;background:var(--line-2)}
  .jr-p .c-new b:empty{height:5px;background:var(--ink)}
  .c-new i{background:#128C4B}
  .c-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#16A34A}
  @media (max-width:640px){
    .jr{gap:1.1rem}
    .jr li + li .jr-w::before{left:-.8rem;width:6px;height:6px}
    .jr-p{aspect-ratio:4/3.1}
    .jp-fb u,.jp-ig u,.jp-tt u,.m-card em{display:none}
    .jr-c{font-size:.74rem;gap:.3rem}
  }
  /* "Play all five" — shown by site.js */
  .hub-play.on{display:inline-flex}
  .hub-play{position:relative;overflow:hidden;align-items:center;gap:.45rem;min-height:36px;padding:.25rem .8rem .25rem .3rem;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);
    font:600 .84rem/1 var(--sans);cursor:pointer;transition:translate .25s var(--ease),border-color .2s ease,box-shadow .25s ease}
  .hub-play .pp-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#A21CBF,#6D28D9 55%,#155FB8);color:#fff}
  .hub-play .pp-ic svg{width:13px;height:13px}
  .hub-play[aria-pressed="true"] .pp-ic svg{display:none}
  .hub-play[aria-pressed="true"] .pp-ic::before{content:"";width:9px;height:9px;border-radius:2px;background:#fff}
  .hub-play::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);transform-origin:left;scale:0 1}
  @media (hover:hover){.hub-play:hover{translate:0 -2px;border-color:var(--line-2);box-shadow:0 14px 28px -18px rgba(109,40,217,.6)}}
  .hub-play:active{translate:0 0;scale:.97}
  @media (min-width:980px){
    .hub-grid{row-gap:1.5rem}
    .hub-grid > :first-child{grid-column:1;grid-row:1;align-self:center}
    .hub-grid > .hub{grid-column:2;grid-row:1;max-width:min(560px,max(400px,100vh - 330px))}   /* short windows: the diagram and both cards still fit one screen */
    .hub-detail{grid-column:1;grid-row:2;align-self:stretch}
    .hub-route{grid-column:2;grid-row:2;align-self:stretch}
  }
  @media (max-width:979px){.hub-route{margin-top:-.9rem}.hub-detail{margin-top:-1.5rem}}
  @media (max-width:480px){.hd-top{flex-wrap:wrap}.hd-in{margin-left:0}}
  @media (prefers-reduced-motion:no-preference){
    #everywhere:has(.hb-in:checked) :is(.hd,.jr){animation:pop-in .35s var(--ease)}
    /* one loop = 3.8 s (site.js HUB_STEP): channel → website, website → WhatsApp, "New enquiry". The three rings on the
       picture story run on the same clock, a third of a loop apart. */
    .hub.in .go-a{animation:go-in 3.8s ease-in-out infinite}
    .hub.in .go-b{animation:go-out 3.8s ease-in-out infinite}
    .hub.in .hn-new{animation:go-ping 3.8s var(--ease) infinite}
    #everywhere:has(.hub.in) .jr-w::after{animation:jr-step 3.8s linear infinite}
    #everywhere:has(.hub.in) .jr li:nth-child(2) .jr-w::after{animation-delay:1.26s}
    #everywhere:has(.hub.in) .jr li:nth-child(3) .jr-w::after{animation-delay:2.5s}
    #everywhere.touring .hub-play::after{animation:hub-tour 19s linear forwards}   /* 5 × 3.8 s */
  }
}
@keyframes go-in{0%,6%{translate:calc(var(--dx) * .76) calc(var(--dy) * .76);opacity:0}10%,30%{opacity:1}34%,100%{translate:calc(var(--dx) * .4) calc(var(--dy) * .4);opacity:0}}
@keyframes go-out{0%,38%{translate:calc(var(--dx) * .4) calc(var(--dy) * .4);opacity:0}42%,62%{opacity:1}66%,100%{translate:calc(var(--dx) * .68) calc(var(--dy) * .68);opacity:0}}
@keyframes go-ping{0%,62%{scale:0;opacity:0}68%{scale:1.1;opacity:1}73%{scale:1}94%{scale:1;opacity:1}100%{scale:1;opacity:0}}
@keyframes jr-step{0%{opacity:0}3%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes hub-tour{to{scale:1 1}}
.hub{position:relative;isolation:isolate;aspect-ratio:1/1;width:100%;max-width:560px;margin-inline:auto}
/* depth: a soft brand glow behind the diagram */
.hub::before{content:"";position:absolute;inset:-4%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(123,77,250,.20),rgba(46,155,255,.10) 55%,transparent)}
/* the orbit: a dashed ring through all five channels (they sit at the same distance from the centre) */
.hub-orbit{position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(109,40,217,.55);pointer-events:none}
/* "set up" — a tick lands on each channel */
.hn-ok{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#16A34A;color:#fff;
  box-shadow:0 0 0 3px var(--ground-2),0 6px 12px -6px rgba(22,163,74,.8)}
.hn-ok svg{width:13px;height:13px;stroke-width:3}
.hc-dots{display:block;width:30px;height:6px;margin:0 auto .5rem;background:radial-gradient(circle,rgba(243,245,248,.55) 2.5px,transparent 3px) 0 0/10px 6px repeat-x}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-lines line{stroke:#8E75E8;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hub-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:34%;z-index:1;aspect-ratio:1/1;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:linear-gradient(var(--night),var(--night)) padding-box,var(--grad) border-box;border:3px solid transparent;
  box-shadow:0 0 0 10px rgba(123,77,250,.08),0 30px 60px -30px rgba(17,24,40,.6)}
.hub-core span{font:800 clamp(.95rem,.8rem + .6vw,1.25rem)/1.1 var(--display);color:var(--on-night);letter-spacing:-.02em}
.hub-core small{margin-top:.35rem;font:400 .66rem/1 var(--mono);color:var(--on-night-muted)}
.hub-core::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(123,77,250,.55);opacity:0;pointer-events:none}
.hub-dot{fill:#6D28D9;opacity:0;r:1.5}
/* each channel in its own colour (icons are generic glyphs, not the platforms' logos) */
.hn--maps .hn-ic{background:#FDECEC;color:#C5221F}
.hn--wa .hn-ic{background:#E3F6EA;color:#128C4B}
.hn--ig .hn-ic{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);color:#fff}
.hn--tt .hn-ic{background:#111;color:#fff;box-shadow:-2px -2px 0 #25F4EE inset,2px 2px 0 #FE2C55 inset}
.hn--fb .hn-ic{background:#E7F0FE;color:#1766D6}
.hub-node{transition:translate .35s var(--ease),border-color .3s ease,box-shadow .35s var(--ease)}
@media (hover:hover){.hub-node:hover{translate:-50% calc(-50% - 4px);border-color:var(--line-2);box-shadow:0 24px 40px -24px rgba(17,24,40,.5)}}
.hub-node{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;width:clamp(96px,28%,150px);text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.7rem .6rem;box-shadow:0 18px 36px -26px rgba(17,24,40,.45)}
.hn-ic{width:34px;height:34px;margin:0 auto .45rem;border-radius:10px;display:grid;place-items:center;background:var(--ground);color:var(--ink)}
.hn-ic svg{width:19px;height:19px}
.hub-node b{display:block;font:700 .9rem/1.2 var(--display);color:var(--ink)}
.hub-node small{display:block;margin-top:.2rem;font-size:.76rem;line-height:1.3;color:var(--muted)}
@media (max-width:480px){.hub-node small{display:none}.hub-node{padding:.55rem .4rem}.hn-ic{width:28px;height:28px}}
/* motion: lines draw out from the website, then the channels arrive — hidden only when it will animate */
.reveal-on .hub:not(.in) .hub-lines line{stroke-dashoffset:1}
.reveal-on .hub:not(.in) .hub-node{opacity:0;scale:.9}
.reveal-on .hub:not(.in) .hn-ok{scale:0}
.reveal-on .hub.in .hn-ok{transition:scale .5s cubic-bezier(.34,1.56,.64,1) calc(1.15s + var(--i) * .2s)}
.reveal-on .hub:not(.in) .hub-orbit{opacity:0;scale:.86}
.reveal-on .hub.in .hub-orbit{transition:opacity .8s ease .3s,scale 1s var(--ease) .3s}
.reveal-on .hub.in .hub-lines line{animation:draw .8s var(--ease-io) calc(var(--i) * 90ms) both}
.reveal-on .hub.in .hub-node{transition:opacity .45s ease,scale .6s var(--ease),translate .35s var(--ease),border-color .3s ease,box-shadow .35s var(--ease);transition-delay:calc(.45s + var(--i) * 90ms),calc(.45s + var(--i) * 90ms),0s,0s,0s}
@media (prefers-reduced-motion:no-preference){
  .hub.in .hub-dot,.hub:not(.rv) .hub-dot{animation:hub-in 2.6s var(--ease-io) calc(1.4s + var(--i) * .52s) infinite}
  .hub.in .hub-orbit{animation:orbit 90s linear 1.4s infinite}
  .hub.in .hub-core::after{animation:core-pulse 2.6s ease-out 1.6s infinite}
}
@keyframes orbit{to{rotate:360deg}}
@keyframes hub-in{0%{translate:var(--dx) var(--dy);opacity:0}15%{opacity:1}80%{opacity:1}100%{translate:0 0;opacity:0}}
@keyframes core-pulse{0%{opacity:.8;scale:1}100%{opacity:0;scale:1.32}}

/* ── UGC ads (side service, contained) ───────────────────────────────── */
.side{border:1px solid var(--line);border-radius:24px;background:var(--card);padding:clamp(1.5rem,4vw,3rem)}
.side-grid{display:grid;gap:2rem}
@media (min-width:980px){.side-grid{grid-template-columns:minmax(0,1fr) auto;align-items:start}}
.reels{display:flex;gap:.8rem}
.reel-slot{position:relative;width:clamp(86px,24vw,120px);aspect-ratio:9/16;border-radius:12px;border:1.5px dashed var(--line-2);
  display:grid;place-content:center;text-align:center;font:400 .68rem/1.4 var(--mono);color:var(--muted);padding:.5rem}
.ai-badge{position:absolute;left:6px;bottom:6px;font:500 .56rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--ground);padding:.3rem .45rem;border-radius:99px}
.packs{display:grid;gap:.8rem;margin-top:2rem}
@media (min-width:760px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;background:var(--ground)}
.pack h3{font-size:1rem}
.pack .p{font:800 1.9rem/1 var(--display);letter-spacing:-.02em;margin-top:.6rem;font-variant-numeric:tabular-nums}
.pack .p small{font:400 .9rem var(--sans);color:var(--muted)}
.pack .v{font:400 .7rem/1.3 var(--mono);color:var(--muted);margin-top:.35rem}
.pack p.d{margin-top:.7rem;font-size:.93rem;color:var(--ink-2)}

/* ── about ───────────────────────────────────────────────────────────── */
.about{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:900px){.about{grid-template-columns:minmax(0,390px) 1fr}}
/* the portrait is shot "through the camera": same viewfinder as the hero. Until the photo is in,
   the logo stands in the frame — deliberate, not a grey placeholder. */
.portrait{position:relative;isolation:isolate;margin:0}
@media (max-width:899px){.portrait{width:min(100%,320px);margin-inline:auto}}
.pt-vf{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(90% 70% at 50% 40%,#232C44 0%,#0C1120 75%);box-shadow:0 40px 80px -40px rgba(17,24,40,.55)}
.pt-vf::before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 35% at 50% 45%,rgba(123,77,250,.35),transparent 70%)}
.pt-vf::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.pt-mark{position:relative;width:34%;height:auto;filter:drop-shadow(0 18px 40px rgba(212,0,245,.35))}
.pt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait:has(.pt-img) .pt-mark{display:none}
.pt-hud{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(12,17,32,.55),transparent 22%,transparent 78%,rgba(12,17,32,.6))}
.pt-hud .vf-bar{left:34px;right:34px}.pt-hud .vf-bar.top{top:30px}.pt-hud .vf-bar.bot{bottom:30px}
.pt-focus{position:absolute;left:50%;top:46%;width:46%;aspect-ratio:1;translate:-50% -50%;border:1px solid rgba(243,245,248,.55);border-radius:6px;transition:scale .45s var(--ease),border-color .3s ease}
@media (hover:hover){.pt-vf:hover .pt-focus{scale:.92;border-color:#3DDC84}}   /* focus lock */
/* ── with the portrait in the frame ── */
#about{overflow-x:clip}   /* the glow reaches past the frame */
/* a soft brand glow behind the frame */
.portrait--photo::before{content:"";position:absolute;inset:-9% -12% -4%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 12% 42%,rgba(212,0,245,.20),transparent),radial-gradient(closest-side at 90% 52%,rgba(46,155,255,.24),transparent)}
.portrait--photo .pt-vf::before{display:none}
.portrait--photo .pt-hud{background:linear-gradient(180deg,rgba(12,17,32,.5),transparent 17%,transparent 76%,rgba(12,17,32,.72))}
/* the photo is bright (daylit office): the white camera read-outs need a shadow to stay readable */
.portrait--photo .vf-bar{color:#fff;text-shadow:0 1px 2px rgba(12,17,32,.75),0 0 8px rgba(12,17,32,.45)}
.portrait--photo .vf-c{border-color:#fff;filter:drop-shadow(0 0 2px rgba(12,17,32,.6))}
/* the focus box sits on the face (measured on the 800×1000 crop with a 10% grid: face centre 49.5% / 15%) */
.portrait--photo .pt-focus{left:49.5%;top:15%;width:23%;aspect-ratio:.78;border-color:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(12,17,32,.28),inset 0 0 0 1px rgba(12,17,32,.18)}
.portrait--photo .pt-focus::before,.portrait--photo .pt-focus::after{display:none}
.pt-img{transform-origin:49.5% 15%;transition:scale 1s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.pt-vf:hover .pt-img{scale:1.045}}
/* "play": a progress line at the foot of the frame, and the button under it (site.js adds .on) */
.pt-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(255,255,255,.14);opacity:0;transition:opacity .3s ease}
.pt-bar i{display:block;height:100%;background:var(--grad-x);transform-origin:left;scale:0 1;transition:scale 2.5s linear}
.about.playing .pt-bar{opacity:1}
.pt-play{display:none;align-items:center;gap:.55rem;width:max-content;max-width:100%;min-height:44px;margin:.85rem auto 0;padding:.5rem 1rem .5rem .55rem;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 .9rem/1.1 var(--sans);cursor:pointer;
  transition:translate .3s var(--ease),border-color .2s ease,box-shadow .3s ease}
.pt-play.on{display:flex}
.pp-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#A21CBF,#6D28D9 50%,#155FB8);color:#fff}
.pp-ic svg{width:12px;height:12px;margin-left:2px}
.pt-play[aria-pressed="true"] .pp-ic svg{display:none}
.pt-play[aria-pressed="true"] .pp-ic::before{content:"";width:10px;height:10px;border-radius:2px;background:#fff}
.pt-play small{font:500 .7rem/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.pt-play[aria-pressed="true"] small{display:none}
@media (hover:hover){.pt-play:hover{translate:0 -2px;border-color:var(--line-2);box-shadow:0 14px 28px -18px rgba(109,40,217,.6)}}
.pt-play:active{translate:0 0;scale:.97}
/* "film it in the morning, live the same week", drawn */
.ab-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.7rem}
.ab-flow i{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .65rem;border-radius:9px;background:var(--ground);font:600 .84rem/1.2 var(--sans);font-style:normal;color:var(--ink)}
.ab-flow i svg{width:15px;height:15px;flex:none;color:var(--accent)}
.ab-flow b{display:grid;place-items:center;color:var(--accent)}
.ab-flow b svg{width:16px;height:16px}
@media (max-width:640px){.ab-flow{flex-direction:column;align-items:flex-start;gap:.25rem}.ab-flow b{margin-left:.7rem}.ab-flow b svg{rotate:90deg}}
.about .about-cta .reply{flex-basis:100%}
.pt-focus::before,.pt-focus::after{content:"";position:absolute;left:50%;top:50%;background:rgba(243,245,248,.7);translate:-50% -50%}
.pt-focus::before{width:12px;height:1px}.pt-focus::after{width:1px;height:12px}
.portrait figcaption{margin-top:.9rem;text-align:center;font:400 .72rem/1.4 var(--mono);letter-spacing:.04em;color:var(--muted)}
.skills{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.skills li{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .72rem;border-radius:99px;background:var(--card);border:1px solid var(--line);
  font:500 .84rem/1 var(--sans);color:var(--ink)}
.skills li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad)}
.about .about-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;margin-top:1.7rem;max-width:none}
.about .about-cta span{font-size:.95rem;color:var(--muted)}
.about p{color:var(--ink-2);margin-top:1rem;max-width:60ch}
.about p.lead{color:var(--ink)}
/* a greeting on the frame */
.pt-hi{position:absolute;top:-12px;right:-10px;z-index:3;padding:.5rem .8rem;border-radius:16px 16px 16px 4px;background:var(--card);color:var(--ink);
  font:700 .98rem/1 var(--display);box-shadow:0 14px 28px -14px rgba(17,24,40,.5);rotate:4deg}
.pt-hi i{display:inline-block;font-style:normal;transform-origin:70% 80%}
/* the two paragraphs as cards with an icon */
.ab-notes{display:grid;gap:.6rem;margin-top:1.3rem}
.about .ab-note{display:flex;align-items:flex-start;gap:.8rem;margin:0;max-width:none;padding:.9rem 1.1rem .95rem .9rem;border-radius:16px;background:var(--card);border:1px solid var(--line);
  font-size:.97rem;line-height:1.5;transition:translate .3s var(--ease),border-color .3s ease}
.ab-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:#EFE9FC;color:var(--accent)}
.ab-ic svg{width:18px;height:18px}
@media (hover:hover){.about .ab-note:hover{translate:0 -2px;border-color:var(--line-2)}}
.skillbox{margin-top:1.5rem}
.skillbox .skills{margin-top:0}
.skills li{position:relative;transition:translate .25s var(--ease),background-color .2s ease,color .2s ease,border-color .2s ease}
.about .reply{display:inline-flex;align-items:flex-start;gap:.5rem}
.reply i{flex:none;width:8px;height:8px;margin-top:.5em;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
/* tap a skill → it shows as a caption on the camera frame (desktop) or under the chips (phones). CSS-only. */
.sk-in,.sk-h,.sk-ans,.lt{display:none}
@supports selector(:has(*)){
  .sk-in{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .sk-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .about .sk-h{display:block;margin:0 0 .6rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .skills li:has(.sk-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent;color:#fff}
  .skills li:has(.sk-in:checked)::before{background:#fff}
  @media (hover:hover){.skills li:hover{translate:0 -2px;border-color:var(--line-2)}}
  .about:has(.sk-in:checked) .pt-focus{scale:.92;border-color:#3DDC84}
  /* the caption on the frame: always on desktop; on phones only while "play" runs (a chip tap there shows its line under the chips) */
  .lt{position:absolute;left:26px;right:26px;bottom:62px;z-index:3;pointer-events:none}
  @media (min-width:900px){.lt{display:block}}
  @media (max-width:899px){.lt{left:16px;right:16px;bottom:52px}}
  .about.playing .lt{display:block}
  .about .lt-i{display:none;margin:0;max-width:none;padding:.7rem .9rem .75rem 1.05rem;border-radius:12px;color:var(--ink-2);font-size:.9rem;line-height:1.35;
    background:linear-gradient(#D400F5,#2E9BFF) 0 0/4px 100% no-repeat,rgba(255,255,255,.97);box-shadow:0 16px 30px -16px rgba(0,0,0,.6)}
  .lt-i b{display:block;margin-bottom:.15rem;font:800 1rem/1.2 var(--display);color:var(--ink)}
  .about:has(#sk-1:checked) .lt-1,.about:has(#sk-2:checked) .lt-2,.about:has(#sk-3:checked) .lt-3,.about:has(#sk-4:checked) .lt-4,.about:has(#sk-5:checked) .lt-5,.about:has(#sk-6:checked) .lt-6{display:block}
  @media (max-width:899px){
    .about .sk-ans{margin:.7rem 0 0;max-width:none;padding:.6rem .8rem;border-radius:4px 14px 14px 14px;background:var(--card);border:1px solid var(--line);font-size:.92rem;line-height:1.4}
    .sk-ans b{color:var(--ink);font-weight:700}
    .skillbox:has(#sk-1:checked) #ska-1,.skillbox:has(#sk-2:checked) #ska-2,.skillbox:has(#sk-3:checked) #ska-3,.skillbox:has(#sk-4:checked) #ska-4,.skillbox:has(#sk-5:checked) #ska-5,.skillbox:has(#sk-6:checked) #ska-6{display:block}
  }
  @media (prefers-reduced-motion:no-preference){
    .about:has(.sk-in:checked) .lt-i{animation:lt-in .45s var(--ease)}
    .skillbox:has(.sk-in:checked) .sk-ans{animation:pop-in .35s var(--ease)}
  }
}
@media (prefers-reduced-motion:no-preference){
  .reveal-on .portrait:not(.in) .pt-hi{opacity:0;scale:.5}
  .reveal-on .portrait.in .pt-hi{transition:opacity .3s ease .7s,scale .5s cubic-bezier(.34,1.56,.64,1) .7s}
  .portrait.in .pt-hi i{animation:wave 1.2s ease 1.2s 2}
  @media (hover:hover){.portrait:hover .pt-hi i{animation:wave-again 1.2s ease}}
  .reply i{animation:reply-ping 2.6s ease-out infinite}
}
@keyframes lt-in{from{opacity:0;translate:-16px 0}}
@keyframes wave{20%{rotate:18deg}40%{rotate:-10deg}60%{rotate:14deg}80%{rotate:-6deg}}
@keyframes wave-again{20%{rotate:18deg}40%{rotate:-10deg}60%{rotate:14deg}80%{rotate:-6deg}}
@keyframes reply-ping{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%,100%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}

/* ── faq ─────────────────────────────────────────────────────────────── */
.faq-grid{display:grid;gap:2rem}
@media (min-width:980px){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem;align-items:start}.faq-side{position:sticky;top:120px}}
/* phones: the "ask me" card moves below the questions — it answers "and if mine isn't here?" */
@media (max-width:979px){.faq-side{display:contents}.faq-grid .ask{order:3}.faq-side .sec-head{margin-bottom:0}}
@media (min-width:980px){.faq-side .sec-head{margin-bottom:2rem}}
.ask{padding:1.2rem;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(17,24,40,.35);max-width:26rem}
.ask-top{display:flex;align-items:center;gap:.7rem}
.ask-top img{width:36px;height:36px;padding:6px;border-radius:50%;background:var(--night)}
.ask-top b{display:block;font:600 .95rem/1.2 var(--sans);color:var(--ink)}
.ask-top small{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}
.ask-top small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wa)}
.ask-bub{position:relative;margin:1rem 0 .9rem;padding:.8rem 1rem;border-radius:4px 16px 16px 16px;background:var(--ground-2);color:var(--ink);font-size:.98rem;line-height:1.45}
.ask .btn{width:100%}
/* the questions as numbered cards; the open one gets the gradient ring */
.faq-list{display:grid;gap:.65rem}
.faq-list details,.faq-list details:last-child{border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .25s ease,box-shadow .35s var(--ease)}
.faq-list details:not([open]):hover{border-color:var(--line-2)}
.faq-list details[open]{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;box-shadow:0 26px 50px -34px rgba(109,40,217,.5)}
.faq-list summary{justify-content:flex-start;padding:1.15rem 1.2rem}
.faq-list summary:focus-visible{outline-offset:-3px;border-radius:15px}
.faq-list .q-n{flex:none;min-width:1.7rem;font:500 .74rem/1 var(--mono);letter-spacing:.06em;color:var(--muted);transition:color .25s ease}
.faq-list details[open] .q-n{color:var(--accent-text)}
.faq-list .q-t{flex:1}
/* icon per question; the short answer sits under the question, readable without opening it */
.faq-list .q-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--ground);color:var(--ink-2);transition:background-color .3s ease,color .3s ease}
.q-ic svg{width:19px;height:19px}
.faq-list details[open] .q-ic{background:linear-gradient(135deg,#A21CBF,#6D28D9 50%,#155FB8);color:#fff}
.q-short{display:block;margin-top:.25rem;font:500 .86rem/1.3 var(--sans);color:var(--accent-text)}
/* the full answer, as a reply from IHERO */
.a-wrap{display:flex;align-items:flex-start;gap:1rem;padding:.1rem 1.2rem 1.25rem}
.a-av{flex:none;width:38px;height:38px;padding:8px;border-radius:50%;background:var(--night)}
.a-bub{flex:1;min-width:0;padding:.85rem 1rem .8rem;border-radius:4px 16px 16px 16px;background:var(--ground-2)}
.faq-list details .a-bub p{padding:0;margin:0;max-width:62ch;color:var(--ink);font-size:.98rem;line-height:1.55}
.a-more{margin-top:.5rem;font-size:.92rem;min-height:36px}
/* ready-made questions in the chat card, as outgoing WhatsApp bubbles */
.quick-h{margin:0 0 .5rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.quick{display:grid;justify-items:end;gap:.4rem;margin-bottom:1.1rem}
.quick a{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .75rem .55rem .9rem;border-radius:16px 16px 4px 16px;background:#DCF3E4;color:#0B3D22;
  font:600 .9rem/1.25 var(--sans);text-decoration:none;text-align:left;transition:translate .25s var(--ease),background-color .2s ease}
.quick svg{width:15px;height:15px;flex:none;color:#128C4B;transition:translate .25s var(--ease)}
@media (hover:hover){.quick a:hover{translate:-3px 0;background:#C9EBD6}.quick a:hover svg{translate:3px 0}}
@media (min-width:980px) and (max-height:820px){.faq-side{position:static}}   /* the left column is taller now: don't pin it on short screens */
@media (prefers-reduced-motion:no-preference){.faq-list details[open] .a-bub{animation:pop-in .4s var(--ease) .12s both}}
@media (max-width:640px){.faq-list summary{padding:1rem}.a-wrap{padding:.1rem 1rem 1.1rem}.a-av{display:none}}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.3rem 0;font:600 clamp(1rem,.97rem + .3vw,1.12rem)/1.4 var(--sans)}
summary::-webkit-details-marker{display:none}
summary .pm{position:relative;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);flex:none;transition:transform .3s var(--ease),background-color .2s ease}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] summary .pm{transform:rotate(45deg);background:var(--ink)}
details[open] summary .pm::before,details[open] summary .pm::after{background:var(--ground)}
details p{padding-bottom:1.4rem;color:var(--ink-2);max-width:62ch}
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}
    details::details-content{height:0;opacity:0;overflow:clip;transition:height .3s var(--ease),opacity .25s ease,content-visibility .3s allow-discrete}
    details[open]::details-content{height:auto;opacity:1}
  }
}

/* ── final CTA + footer (night) ──────────────────────────────────────── */
.final{position:relative;overflow:hidden}
.final .wrap{display:grid;gap:3rem;align-items:center}
@media (min-width:980px){.final .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.final h2{font-size:clamp(2.6rem,1.6rem + 4.4vw,5.4rem);line-height:.98}

.final .lead{margin-top:1.3rem}
.final .fine{color:var(--on-night-muted)}
.final .fine a{color:var(--on-night)}
.sh-wrap{position:relative;isolation:isolate;width:min(100%,380px);margin-inline:auto}
.shield{display:block;width:100%;overflow:visible}
@media (max-width:979px){.sh-wrap{width:150px;margin:0}}   /* on phones it only pushed the footer away */
/* a brand glow behind the logo, and the three promises around it (they repeat the hero's fine print) */
.sh-aura{position:absolute;inset:-22%;z-index:-1;border-radius:50%;pointer-events:none;transition:scale .6s var(--ease),opacity .4s ease;opacity:.85;
  background:radial-gradient(closest-side at 62% 34%,rgba(46,155,255,.30),transparent),radial-gradient(closest-side at 38% 66%,rgba(212,0,245,.28),transparent)}
.sh-tag{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:99px;background:var(--card);color:var(--ink);white-space:nowrap;
  font:700 .86rem/1 var(--sans);box-shadow:0 14px 28px -12px rgba(0,0,0,.6);transition:translate .4s var(--ease),opacity .4s ease,scale .5s cubic-bezier(.34,1.56,.64,1)}
.sh-tag i{width:8px;height:8px;border-radius:50%;background:#16A34A}
.st-1{left:-12%;top:14%;rotate:-5deg}.st-2{right:-14%;top:42%;rotate:4deg}.st-3{left:-6%;bottom:13%;rotate:-3deg}
@media (max-width:979px){.sh-tag{display:none}}
@media (hover:hover){.sh-wrap:hover .sh-aura{scale:1.12;opacity:1}.sh-wrap:hover .st-1{translate:-6px -4px}.sh-wrap:hover .st-2{translate:7px -3px}.sh-wrap:hover .st-3{translate:-5px 5px}}
.reveal-on .shield:not(.drawn) ~ .sh-tag{opacity:0;scale:.6}
.reveal-on .shield.drawn ~ .sh-tag{transition-delay:0s,2.5s,2.5s}
.reveal-on .shield.drawn ~ .st-2{transition-delay:0s,2.7s,2.7s}.reveal-on .shield.drawn ~ .st-3{transition-delay:0s,2.9s,2.9s}
@media (prefers-reduced-motion:no-preference){.shield.drawn{animation:floaty 5.5s ease-in-out 3.4s infinite alternate}}
@keyframes floaty{to{translate:0 -9px}}
/* "what do you need?" — the first line of the message, written for the visitor (CSS-only, :has) */
/* section backdrop: a gradient hairline on top, a soft glow behind the headline, a faint dot grid */
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44rem 28rem at 8% 6%,rgba(123,77,250,.20),transparent 70%),radial-gradient(circle,rgba(243,245,248,.07) 1px,transparent 1.4px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 92%);mask-image:linear-gradient(180deg,#000 30%,transparent 92%)}
.final::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad-x);opacity:.75}
.final .wrap{position:relative}
/* what happens next */
.fside{display:grid;gap:clamp(2.2rem,4vw,3.4rem);justify-items:center}
@media (max-width:979px){.fside{justify-items:start;gap:2rem}.fside .nxb{order:-1}}
.nxb{width:min(100%,22rem);padding:1.1rem 1.2rem 1.2rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--night-line)}
.final .nx-h{margin:0 0 .9rem;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-muted)}
.nx{list-style:none;margin:0;padding:0;display:grid;gap:.95rem;counter-reset:nx;position:relative}
.nx::before{content:"";position:absolute;left:12.5px;top:14px;bottom:14px;width:1.5px;background:var(--night-line)}
.nx li{counter-increment:nx;position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .65rem;font:600 .95rem/1.25 var(--sans);color:var(--on-night)}
.nx li::before{content:counter(nx);display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#232C44;box-shadow:0 0 0 4px var(--night);color:var(--accent-night);font:700 .74rem/1 var(--mono);
  transition:background .3s ease,color .3s ease}
.nx li:first-child::before{background:linear-gradient(135deg,#A21CBF,#6D28D9 50%,#155FB8);color:#fff}
.nx-here{padding:.3rem .55rem;border-radius:99px;background:rgba(196,181,253,.16);color:var(--accent-night);font:600 .7rem/1 var(--sans);transition:background-color .3s ease,color .3s ease}
.nx-here i{font-style:normal}.nx-here .h1{display:none}
.final.has-msg .nx-here,.final:not(.js-compose):has(.need-in:checked) .nx-here{background:#15803D;color:#fff}
.final.has-msg .nx-here .h0,.final:not(.js-compose):has(.need-in:checked) .nx-here .h0{display:none}
.final.has-msg .nx-here .h1,.final:not(.js-compose):has(.need-in:checked) .nx-here .h1{display:inline}
/* a slow dashed orbit behind the logo */
.sh-orbit{position:absolute;left:50%;top:50%;width:124%;aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;border:1.5px dashed rgba(196,181,253,.22);pointer-events:none}
@media (max-width:979px){.sh-orbit{display:none}}
@media (prefers-reduced-motion:no-preference){.sh-orbit{animation:orbit 110s linear infinite}}
/* "Reply today" turns green once a message is ready */
.sh-tag{transition:translate .4s var(--ease),opacity .4s ease,scale .5s cubic-bezier(.34,1.56,.64,1),background-color .3s ease,color .3s ease}
.final.has-msg .st-3,.final:not(.js-compose):has(.need-in:checked) .st-3{background:#15803D;color:#fff}
.final.has-msg .st-3 i,.final:not(.js-compose):has(.need-in:checked) .st-3 i{background:#fff}
/* satellites: website + video */
.sat{position:absolute;z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--accent-night);border:2px solid transparent;
  background:linear-gradient(var(--night-2),var(--night-2)) padding-box,var(--grad) border-box;box-shadow:0 12px 24px -10px rgba(0,0,0,.7);
  transition:scale .45s cubic-bezier(.34,1.56,.64,1),color .3s ease,box-shadow .3s ease}
.sat svg{width:21px;height:21px}
.sat-1{right:-7%;top:-5%}.sat-2{right:1%;bottom:8%}
@media (max-width:979px){.sat{display:none}}
.reveal-on .shield:not(.drawn) ~ .sat{opacity:0}
.reveal-on .shield.drawn ~ .sat{animation:pop-in .5s var(--ease) 3.1s both}
.reveal-on .shield.drawn ~ .sat-2{animation-delay:3.3s}
/* the logo leans towards the pointer; a click replays the draw (site.js adds .can-replay) */
.shield{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}
.shield.no-tr .fill{transition:none}
.sh-wrap.can-replay{cursor:pointer}
.sh-hint{display:none}
.sh-wrap.can-replay .sh-hint{display:block;position:absolute;left:50%;bottom:calc(100% + 1.2rem);translate:-50% 0;white-space:nowrap;font:500 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-night-muted);opacity:0;transition:opacity .3s ease}
.sh-wrap.can-replay:hover .sh-hint{opacity:1}
.sh-wrap.ping .sh-aura{animation:sh-ping .8s ease-out}
@keyframes ready-pulse{0%{box-shadow:0 0 0 0 rgba(123,77,250,.55),0 10px 24px -14px rgba(109,40,217,.8)}70%,100%{box-shadow:0 0 0 12px rgba(123,77,250,0),0 10px 24px -14px rgba(109,40,217,.8)}}
@keyframes sh-ping{0%{scale:.9;opacity:1}100%{scale:1.3;opacity:.85}}
.live-dot{display:inline-block;width:8px;height:8px;margin-right:.5rem;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.18)}
.need{display:none}
.final .w:not(.w-0){display:none}
@supports selector(:has(*)){
  .need{display:block;margin-top:1.7rem}
  .need-h{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-muted)}
  .need-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
  .need-chips li{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.65rem .95rem;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--night-line);
    font:600 .93rem/1 var(--sans);color:var(--on-night);transition:translate .25s var(--ease),background-color .2s ease,border-color .2s ease}
  .need-chips svg{width:16px;height:16px;flex:none;color:var(--accent-night)}
  .need-in{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .need-in:focus-visible{outline:2.5px solid var(--accent-night);outline-offset:3px;box-shadow:none}
  .need-chips li:has(.need-in:checked){background:linear-gradient(90deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent}
  .need-chips li:has(.need-in:checked) svg{color:#fff}
  @media (hover:hover){.need-chips li:hover{translate:0 -2px;border-color:rgba(196,181,253,.5)}}
  .final .msg-prev{margin:0;display:flex;align-items:center}
  .msg-prev .m{display:none}
  .msg-prev .m-0{display:block;font-size:.93rem;color:var(--on-night-muted)}
  .msg-prev .m:not(.m-0){margin-left:auto;padding:.6rem .9rem;border-radius:16px 16px 4px 16px;background:#DCF3E4;color:#0B3D22;font:500 .98rem/1.35 var(--sans)}
  .final:not(.js-compose):has(.need-in:checked) .m-0,.final.has-msg .m-0{display:none}
  .final:not(.js-compose):has(#nd-1:checked) #nm-1,.final:not(.js-compose):has(#nd-2:checked) #nm-2,.final:not(.js-compose):has(#nd-3:checked) #nm-3,.final:not(.js-compose):has(#nd-4:checked) #nm-4,.final.has-msg .m-js{display:block}
  .final:not(.js-compose):has(.need-in:checked) .w-0{display:none}
  .final:not(.js-compose):has(#nd-1:checked) .w-1,.final:not(.js-compose):has(#nd-2:checked) .w-2,.final:not(.js-compose):has(#nd-3:checked) .w-3,.final:not(.js-compose):has(#nd-4:checked) .w-4{display:inline-flex}
  .need + .cta-row{margin-top:1rem}
  @media (prefers-reduced-motion:no-preference){.final:has(.need-in:checked) .msg-prev .m{animation:pop-in .35s var(--ease)}}
  /* the composer: a "new message" card with two questions and the line they write */
  .final .composer{max-width:37rem;padding:1rem 1.1rem 1.05rem;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid var(--night-line);box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
  .cp-top{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--night-line)}
  .cp-top img{width:34px;height:34px;padding:6px;border-radius:50%;background:var(--night-2);box-shadow:0 0 0 1px var(--night-line)}
  .cp-top b{display:block;font:600 .95rem/1.2 var(--sans);color:var(--on-night)}
  .cp-top small{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--on-night-muted)}
  .cp-top small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wa)}
  .need-h i{display:none;font-style:normal}
  .run{display:none}
  .js-compose .run{display:block;margin-top:.95rem}
  .js-compose .need-h i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(196,181,253,.18);color:var(--accent-night);font:700 .68rem/1 var(--mono);letter-spacing:0}
  .final .cp-note{visibility:hidden;margin:.5rem 0 0;text-align:right;font-size:.8rem;color:var(--on-night-muted)}   /* keeps its space, so the buttons don't jump */
  /* the conversation preview: a small chat window (fixed minimum height, so nothing below it moves) */
  .convo{display:flex;flex-direction:column;justify-content:center;gap:.45rem;min-height:7.4rem;margin-top:1rem;padding:.8rem .85rem;border-radius:14px;
    background:radial-gradient(circle,rgba(243,245,248,.05) 1px,transparent 1.4px) 0 0/14px 14px,#0C1120;border:1px solid var(--night-line)}
  .convo .m-0{margin-inline:auto;text-align:center}
  .final .convo-re{display:none;align-items:flex-end;gap:.5rem;margin:0}
  .convo-re img{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;background:var(--night-2);box-shadow:0 0 0 1px var(--night-line)}
  .convo-re span{padding:.5rem .8rem;border-radius:16px 16px 16px 4px;background:var(--night-2);border:1px solid var(--night-line);color:var(--on-night);font:500 .95rem/1.3 var(--sans)}
  .final.has-msg .convo-re,.final:not(.js-compose):has(.need-in:checked) .convo-re{display:flex}
  .final.has-msg .convo,.final:not(.js-compose):has(.need-in:checked) .convo{justify-content:flex-end}
  /* question 3: the business name (site.js only — it sits inside .run) */
  .need-h--name{margin-top:.95rem}
  .composer .need-h label{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer}   /* the contact form's label style (dark, block) must not apply here */
  .composer .need-h label span{text-transform:none;letter-spacing:0}
  .cp-name{display:block;width:100%;max-width:22rem;min-height:44px;padding:.6rem .9rem;border-radius:12px;border:1px solid var(--night-line);background:rgba(255,255,255,.06);
    color:var(--on-night);font:500 1rem/1.2 var(--sans);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
  .cp-name::placeholder{color:#8891A8}
  .cp-name:hover{border-color:rgba(196,181,253,.45)}
  .final .cp-name:focus-visible{outline:none;border-color:var(--accent-night);box-shadow:0 0 0 3px rgba(196,181,253,.28);background:rgba(255,255,255,.09)}
  /* answered questions turn green */
  .composer .need-h:has(+ .need-chips :checked) i,.composer .need-h:has(+ .cp-name:not(:placeholder-shown)) i{background:#15803D;color:#fff}
  /* start again */
  .cp-clear{display:none;margin-left:auto;min-height:30px;padding:.3rem .7rem;border-radius:99px;border:1px solid var(--night-line);background:none;color:var(--on-night-muted);font:500 .78rem/1 var(--sans);cursor:pointer;
    transition:border-color .2s ease,color .2s ease}
  .final.has-msg .cp-clear{display:inline-flex;align-items:center}
  .cp-clear:hover{border-color:var(--on-night-muted);color:var(--on-night)}
  .cp-clear:focus-visible{outline-color:var(--accent-night)}
  /* the button invites the tap once the line is ready */
  @media (prefers-reduced-motion:no-preference){
    .final.has-msg .w-0{animation:ready-pulse 2.4s ease-out 1s infinite}
    .final.has-msg .convo-re,.final:not(.js-compose):has(.need-in:checked) .convo-re{animation:pop-in .4s var(--ease) .45s both}
  }
  .final:not(.js-compose):has(.need-in:checked) .cp-note,.final.has-msg .cp-note{visibility:visible}
  /* the two services orbit the logo and light up with the answer */
  .final:has(#nd-1:checked) .sat-1,.final:has(#nd-2:checked) .sat-2,.final:has(#nd-3:checked) .sat{color:#fff;scale:1.18;
    background:linear-gradient(135deg,#A21CBF,#6D28D9 50%,#155FB8) padding-box,var(--grad) border-box;box-shadow:0 0 0 6px rgba(123,77,250,.22),0 12px 24px -10px rgba(0,0,0,.7)}
}
.shield > path{fill:none;stroke:url(#g);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.reveal-on .shield:not(.drawn) > path{stroke-dashoffset:1}
.reveal-on .shield:not(.drawn) .fill{opacity:0}
.shield .fill{transition:opacity .9s ease 1.7s}   /* the real logo arrives once its outline is drawn */
.shield.drawn > path{animation:draw 2.2s var(--ease-io) both}
.shield.drawn > path + path{animation-delay:.35s}
.shield.drawn > path + path + path{animation-delay:.5s}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}   /* explicit start: the resting state is now drawn (no-JS safe), so an implicit 'from' drew nothing */
footer{background:var(--night);color:var(--on-night-muted);border-top:1px solid var(--night-line);padding-block:3.5rem 1.5rem;font-size:.93rem}
.foot{display:grid;gap:2.2rem}
@media (min-width:860px){.foot{grid-template-columns:1.25fr 1.35fr .7fr .9fr}}
@media (min-width:560px) and (max-width:859px){.foot{grid-template-columns:1fr 1fr}}
footer .brand{color:var(--on-night)} footer .brand small{color:var(--on-night-muted)}
footer .foot-h{font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-muted);margin-bottom:1rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
footer a{text-decoration:none;color:var(--on-night);display:inline-flex;align-items:center;min-height:28px}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer .brand:hover,footer .foot-contact a:hover{text-decoration:none}
.foot-brand > p{margin-top:1rem;max-width:34ch}
/* the time in Malta (site.js fills it in and adds .on) */
.foot-brand .foot-time{display:none;margin-top:1.1rem;align-items:center;gap:.55rem;padding:.5rem .85rem;border-radius:16px;line-height:1.35;background:rgba(255,255,255,.05);border:1px solid var(--night-line);font-size:.88rem;color:var(--on-night-muted);max-width:none}
.foot-brand .foot-time.on{display:inline-flex}
.foot-time i{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.18)}
.foot-time b{color:var(--on-night);font:600 .92rem/1 var(--mono);font-variant-numeric:tabular-nums}
/* contact rows: icon tile, label, a line under it, and a copy button where it helps */
footer .foot-contact{gap:.35rem}
.foot-contact li{display:flex;align-items:center;gap:.5rem}
footer .foot-contact a{gap:.75rem;min-height:44px;padding:.2rem .6rem .2rem .2rem;border-radius:14px;transition:background-color .2s ease,translate .3s var(--ease)}
.fi{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--accent-night);transition:background .25s ease,color .25s ease}
footer .fi svg{width:18px;height:18px;margin:0;color:inherit}
.foot-contact b{display:block;font:600 .97rem/1.25 var(--sans);color:var(--on-night)}
.foot-contact small{display:block;font-size:.8rem;line-height:1.3;color:var(--on-night-muted)}
@media (hover:hover){
  footer .foot-contact a:hover{background:rgba(255,255,255,.05);translate:3px 0}
  .foot-contact a:hover .fi{background:linear-gradient(135deg,#A21CBF,#6D28D9 50%,#155FB8);color:#fff}
}
.cpy{display:none;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-muted);
  font:500 .74rem/1 var(--sans);cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.cpy.on{display:inline-flex}
footer .cpy svg{width:13px;height:13px;margin:0;color:inherit}
.cpy:hover{border-color:var(--on-night-muted);color:var(--on-night)}
.cpy.ok{border-color:transparent;background:rgba(61,220,132,.16);color:#86EFAC}
.cpy:focus-visible{outline-color:var(--accent-night)}
/* page links: an arrow slides in */
/* page links: a line under each says what's there (the counts come from the page's own data) */
footer .foot-nav{gap:.15rem}
footer .foot-nav a{display:grid;grid-template-columns:auto auto;justify-content:start;align-content:center;align-items:baseline;column-gap:.4rem;min-height:44px;transition:translate .3s var(--ease)}
.foot-nav b{grid-area:1/1;font:600 .97rem/1.25 var(--sans);color:var(--on-night)}
.foot-nav small{grid-area:2/1/3/3;font-size:.8rem;line-height:1.3;color:var(--on-night-muted)}
.foot-nav a::after{grid-area:1/2}
.foot-nav a::after{content:"→";opacity:0;translate:-6px 0;color:var(--accent-night);transition:opacity .25s ease,translate .3s var(--ease)}
@media (hover:hover){.foot-nav a:hover{text-decoration:none;translate:3px 0}.foot-nav a:hover::after{opacity:1;translate:0 0}}
footer .serving li svg{width:28px;height:28px;padding:6px;border-radius:9px;background:rgba(255,255,255,.06)}
footer .serving{gap:.45rem}
/* the band where the big name used to be: scan to WhatsApp (computers) / save my contact (everyone) */
.foot-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(#161D30,#161D30) padding-box,linear-gradient(120deg,rgba(212,0,245,.6),rgba(46,155,255,.6)) border-box}
.fb-qr{display:none;position:relative;margin:0;z-index:2}
.fb-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)}
.fb-qr::after{content:"";position:absolute;inset:-5px;border-radius:18px;border:2px solid rgba(196,181,253,.6);opacity:0;pointer-events:none}
.fb-h{margin:0 0 .35rem;font:800 clamp(1.15rem,1rem + .6vw,1.5rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--on-night)}
.fb-s{margin:0;max-width:54ch;font-size:.95rem;line-height:1.5;color:var(--on-night-muted)}
.fb-d,.fb-hov{display:none}
.fb-act{display:grid;gap:.45rem;justify-items:start}
.fb-act small{display:none;font-size:.8rem;color:var(--on-night-muted)}
footer a.fb-save{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(--sans);color:var(--on-night);transition:translate .3s var(--ease),border-color .2s ease,background-color .2s ease}
footer .fb-save svg{width:18px;height:18px;margin:0;color:var(--accent-night)}
footer a.fb-save:hover{text-decoration:none;translate:0 -2px;border-color:rgba(196,181,253,.6);background:rgba(196,181,253,.1)}
footer a.fb-save:active{translate:0 0;scale:.97}
@media (min-width:860px){
  .foot-band{grid-template-columns:auto 1fr auto;padding:1.1rem 1.6rem 1.1rem 1.1rem}
  .fb-qr{display:block}
  .fb-d{display:inline}.fb-p{display:none}
  .fb-act{justify-items:end;text-align:right}
  .fb-act small{display:block}
}
@media (min-width:860px) and (hover:hover){
  .fb-hov{display:inline}
  .fb-qr:hover img{scale:1.8;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 4px rgba(196,181,253,.5)}
  .fb-qr:hover::after{display:none}
}
@media (prefers-reduced-motion:no-preference){.fb-qr::after{animation:qr-ping 2.8s ease-out 1.5s infinite}}
@keyframes qr-ping{0%{opacity:.9;scale:.96}60%,100%{opacity:0;scale:1.12}}
footer{background:radial-gradient(42rem 22rem at 88% 0%,rgba(123,77,250,.12),transparent 70%),var(--night)}
.nc{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;vertical-align:middle}   /* svg is display:block site-wide, so it needs a flex row */
footer .nc svg{width:13px;height:13px;margin:0;color:#86EFAC}
footer li svg{width:16px;height:16px;flex:none;margin-right:.6rem;color:var(--accent-night)}
footer .serving li{display:flex;align-items:center;min-height:28px}
.to-top{gap:.4rem;padding:.35rem .75rem;border:1px solid var(--night-line);border-radius:99px;transition:border-color .2s ease,translate .3s var(--ease)}
.to-top svg{width:14px;height:14px;transition:translate .3s var(--ease)}
footer a.to-top:hover{text-decoration:none;border-color:var(--on-night-muted)}.to-top:hover svg{translate:0 -3px}
.foot-bottom{margin-top:2rem;align-items:center;padding-top:1.3rem;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  justify-content:space-between;font:400 .74rem/1.5 var(--mono);color:var(--on-night-muted)}

/* ── sticky mobile bar ───────────────────────────────────────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.6rem;padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(243,245,248,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.bar .btn{flex:1;min-height:48px}
@media (max-width:760px){.bar{display:flex}body{padding-bottom:5.6rem}}

/* ── reveals: only below the fold, only when JS confirmed it can animate ── */
.reveal-on .rv{opacity:0;transform:translateY(24px)}
.reveal-on .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-on .rv.d1.in{transition-delay:.08s}.reveal-on .rv.d2.in{transition-delay:.16s}.reveal-on .rv.d3.in{transition-delay:.24s}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal-on .rv{opacity:1;transform:none}
  .vf-rec i,.shoot .s-rec i{animation:none}
  .case-phone img{animation:none}
  .shield > path{stroke-dashoffset:0}
  .shield .fill{opacity:1;transition:none}
  .tier--complete::after{animation:none}
  .vs-blame{animation:none}
  .hook .prog i,.presenter::before{animation:none}
  .reel .r-prog i,.reel .r-rec i,.mp-page,.mp-bar::after,.vf-meter i::after,.bv-bar i{animation:none}
  .btn:hover{transform:none}
}

/* ── subpages: contact, sent, privacy, cookies, 404 ──────────────────── */
.page{padding-block:clamp(3rem,8vw,6rem) clamp(4rem,9vw,7rem)}
.page .wrap{max-width:780px}
.page h1{font-size:clamp(2.4rem,1.7rem + 3vw,4rem);line-height:1;margin:1rem 0 1.2rem}
.page h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:2.6rem 0 .7rem}
.page p,.page li{color:var(--ink-2)}
.page p + p{margin-top:.9rem}
.page ul{padding-left:1.2rem;display:grid;gap:.5rem}
.page a:not(.btn){color:var(--accent-text)}
.page .btn{margin:.3rem .5rem .3rem 0}
.meta{font:400 .74rem/1.4 var(--mono);color:var(--muted);letter-spacing:.04em;margin-bottom:2rem}
.after-steps{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:1rem;counter-reset:s}
.after-steps li{counter-increment:s;display:grid;grid-template-columns:2.3rem 1fr;gap:.9rem;align-items:start}
.after-steps li::before{content:counter(s,decimal-leading-zero);font:500 .75rem/2.3rem var(--mono);text-align:center;border:1px solid var(--line-2);border-radius:50%;color:var(--ink)}
.after-steps b{color:var(--ink)}
form{margin-top:1.3rem;display:grid;gap:1.15rem;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(1.3rem,4vw,2rem)}
label{display:grid;gap:.45rem;font-weight:600;font-size:.95rem;color:var(--ink)}
label small{font:400 .82rem var(--sans);color:var(--muted)}
input,textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--ground);border:1px solid var(--line-2);border-radius:12px;padding:.85rem .95rem;min-height:50px;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease}
textarea{min-height:9rem;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(17,24,40,.12)}
form button{justify-self:start;border:0}
button[disabled]{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{display:none;border-radius:12px;padding:.95rem 1.1rem;font-size:.95rem;margin-top:1rem}
.msg.err{border:1px solid var(--accent);background:rgba(217,45,32,.06);color:var(--ink)}
.msg.ok{border:1px solid var(--ink);background:var(--card);color:var(--ink)}
.msg:target,.msg.show{display:block}   /* no-JS: server redirects to #err-<code> and :target reveals it */
.done{width:58px;height:58px;margin-bottom:1.2rem;color:var(--accent)}
.done circle{stroke:var(--line-2)}
.done path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .45s var(--ease) .12s forwards}
@media (prefers-reduced-motion:reduce){.done path{animation:none;stroke-dashoffset:0}}

/* ── UGC ads (v1 structure): contained card, gradient hairline, reels up front ── */
.ugc{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,4vw,3rem)}
.ugc::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-x)}
.ugc h2{font-size:clamp(1.9rem,1.4rem + 2vw,3rem);margin:1rem 0 1rem;max-width:20ch}
.ugc .lead{max-width:60ch}
@media (min-width:980px){
  .ugc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,31rem);column-gap:clamp(2rem,4vw,4rem);align-items:end}
  .ugc-head h2{margin-bottom:0}
  .ugc-head .lead{margin:0;padding-bottom:.3rem;font-size:clamp(1.02rem,.95rem + .3vw,1.18rem)}
}
.ugc .reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.2rem}   /* four across the full width: no empty column beside them */
.ugc .reel-slot{width:auto;margin:0;padding:0;border:0;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--bg,var(--ink));color:#fff;
  box-shadow:0 24px 44px -26px rgba(17,24,40,.6);transition:translate .45s var(--ease)}
.ugc .ai-badge{left:.7rem;bottom:1rem;font-size:.6rem;z-index:3}
/* the format, mocked: a presenter, a hook caption, the app's buttons, a playing progress bar */
.hook::before{content:"";position:absolute;inset:0;
  background:radial-gradient(42% 30% at 74% 30%,rgba(255,255,255,.5),transparent 72%),radial-gradient(80% 45% at 50% 0%,rgba(255,255,255,.18),transparent 70%),
    linear-gradient(to top,rgba(0,0,0,.35),transparent 42%)}
.hook .hk{position:absolute;top:.7rem;left:.7rem;z-index:3;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .5rem;border-radius:6px;background:rgba(12,17,32,.62);color:#fff}
.presenter{position:absolute;left:50%;bottom:0;width:80%;height:58%;translate:-50% 0}
.presenter::before{content:"";position:absolute;left:50%;top:0;width:40%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle at 62% 34%,rgba(255,255,255,.16),rgba(12,17,32,.5) 72%);box-shadow:inset -3px 2px 0 rgba(255,255,255,.3)}
.presenter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72%;border-radius:46% 46% 0 0/34% 34% 0 0;
  background:linear-gradient(180deg,rgba(12,17,32,.42),rgba(12,17,32,.7));box-shadow:inset -5px 3px 0 rgba(255,255,255,.2)}
.hook .acts{position:absolute;right:.6rem;top:44%;z-index:3;display:grid;gap:.8rem;color:rgba(255,255,255,.9)}
.hook .acts svg{width:20px;height:20px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.hook .cap{position:absolute;left:.8rem;right:2.6rem;top:17%;z-index:3;text-align:center}
.hook .cap-t{font:800 clamp(.92rem,.7rem + .45vw,1.18rem)/1.42 var(--display);letter-spacing:-.01em;color:#fff;
  background:rgba(12,17,32,.74);padding:.12em .4em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hook .prog{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:rgba(255,255,255,.22)}
.hook .prog i{display:block;height:100%;background:#fff;transform-origin:left;scale:.42 1}
/* the test, shown: after the four appear, one gets kept (an example — no numbers) */
.hook .keep{position:absolute;top:.6rem;right:.6rem;z-index:4;display:inline-flex;align-items:center;gap:.3rem;padding:.38rem .6rem .38rem .5rem;border-radius:99px;
  background:#15803D;color:#fff;font:700 .7rem/1 var(--sans);box-shadow:0 8px 18px -8px rgba(21,128,61,.8)}
.hook .keep svg{width:12px;height:12px;flex:none}
.ugc .hook--keep{box-shadow:0 0 0 3px #3DDC84,0 24px 44px -24px rgba(21,128,61,.75);transition:translate .45s var(--ease),box-shadow .6s var(--ease)}
.reel-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-slot:has(video) :is(.hk,.presenter,.acts,.cap,.prog){display:none}
@media (hover:hover){.ugc .reel-slot:hover{translate:0 -6px}}
.reels-note{margin-top:1rem;font-size:.92rem;color:var(--muted)} .reels-note b{color:var(--ink);font-weight:600}
/* volume, shown: one mini reel per variant, in the four hook colours, at the foot of each card */
.pack{display:flex;flex-direction:column}
.pack .vol{display:grid;gap:.55rem;margin-top:auto;padding-top:.95rem;font:500 .7rem/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.pack p.d{margin-bottom:1rem}
.pack .vol::before{content:"";height:1px;background:var(--line);margin-bottom:.35rem}
.pack .tiles{display:flex;flex-wrap:wrap;gap:4px}
.pack .tiles i{width:14px;height:25px;border-radius:4px;background:linear-gradient(165deg,#E3A57C,#8A4B35)}
.pack .tiles i:nth-child(4n+2){background:linear-gradient(165deg,#86BDB5,#2F6461)}
.pack .tiles i:nth-child(4n+3){background:linear-gradient(165deg,#DC93B6,#7A2E5A)}
.pack .tiles i:nth-child(4n){background:linear-gradient(165deg,#93B7EA,#34507F)}
/* the retainer no longer looks pre-selected: with a picker, only the chosen card is white with the ring */
.pack{position:relative;transition:translate .35s var(--ease),box-shadow .35s var(--ease),border-color .3s ease}
@media (hover:hover){.pack:hover{translate:0 -4px;border-color:var(--line-2);box-shadow:0 22px 44px -30px rgba(17,24,40,.45)}}
.pk-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;min-height:1.6rem}
.pk-pill--plain{background:var(--card);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.pk-pill{font:600 .66rem/1 var(--sans);padding:.35rem .55rem;border-radius:99px;background:#EFE9FC;color:#5B21B6}
.pk-price{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.6rem}
.pk-price .p{margin-top:0}
.pack .each{flex:none;font:600 .72rem/1 var(--mono);padding:.35rem .55rem;border-radius:7px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:600;letter-spacing:.02em}
/* closing row */
.ugc-cta{margin-top:.9rem;padding:1.1rem 1.1rem 1.1rem 1.4rem;
  border-radius:18px;border:1px solid var(--line);background:radial-gradient(60% 160% at 100% 50%,rgba(123,77,250,.08),transparent 70%),var(--ground)}
.ugc-cta .c{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.ugc-cta .c:not(.c-none){display:none}
.ugc-cta p{margin:0;flex:1 1 18rem;color:var(--ink-2)}
/* ── the pack picker, CSS-only (:has). Without :has support the controls are hidden and the section
      reads exactly as a static one. ── */
.pick-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;margin-top:2rem}
.pick-h b{font:700 1.05rem/1.2 var(--display);color:var(--ink)}
.pick-h span{font-size:.92rem;color:var(--muted)}
.pick-h + .packs{margin-top:.8rem}
/* ── Creative retainer = the featured pack, in the same dress as the "One person, both jobs" card: navy, the slowly
      turning gradient ring (::after spins, ::before is the navy face 2px inside it), outlined mono pill, gradient ticks. ── */
.pack--hot{overflow:hidden;isolation:isolate;border:0;padding:calc(1.1rem + 1px) calc(1.2rem + 1px);background:var(--night);color:var(--on-night);
  box-shadow:0 30px 60px -32px rgba(109,40,217,.6)}
.pack--hot::after{content:"";position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;translate:-50% -50%;z-index:-2;background:conic-gradient(#D400F5,#2E9BFF,#7B4DFA,#D400F5)}
.pack--hot::before{content:"";position:absolute;inset:2px;border-radius:12px;background:var(--night);z-index:-1;transition:inset .25s ease}
.pack--hot h3,.pack--hot .p{color:var(--on-night)}
.pack--hot .p small,.pack--hot .v,.pack--hot .vol{color:var(--on-night-muted)}
.pack--hot .pk-pill{border-radius:6px;background:none;box-shadow:inset 0 0 0 1px rgba(196,181,253,.45);color:var(--accent-night)}   /* outlined like the navy card's "1 invoice"; same font as the other pills, or it wraps and the prices stop lining up */
.pack--hot .each{background:rgba(196,181,253,.16);border-color:transparent;color:var(--accent-night)}
.pack--hot .vol::before{background:var(--night-line)}
.pk-checks{list-style:none;margin:.75rem 0 1rem;padding:0;display:grid;gap:.5rem;font-size:.93rem;line-height:1.4;color:var(--on-night)}
.pk-checks li{display:flex;gap:.55rem;align-items:flex-start}
.pk-checks li::before{content:"";flex:none;width:16px;height:16px;margin-top:.18em;background:var(--grad);
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
@media (hover:hover){.pack--hot:hover{box-shadow:0 36px 70px -30px rgba(109,40,217,.8)}}
@media (prefers-reduced-motion:no-preference){.pack--hot::after{animation:ring 9s linear infinite}}
.pk-in,.pk-dot,.pick-h span{display:none}
@supports selector(:has(*)){
  .pk-in{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;
    -webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;border-radius:inherit}
  .pk-in:focus-visible{outline:2.5px solid var(--accent-text);outline-offset:3px;box-shadow:none}
  .pick-h span{display:inline}
  .pk-dot{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--card);color:transparent;
    transition:background-color .2s ease,border-color .2s ease,scale .35s cubic-bezier(.34,1.56,.64,1)}
  .pk-dot svg{width:12px;height:12px;stroke-width:3.2}
  .pk-top{justify-content:flex-start}
  .pk-top .pk-pill{margin-left:auto}
  .pack:has(.pk-in:checked){background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#D400F5,#7B4DFA,#2E9BFF) border-box;border-color:transparent;
    box-shadow:0 0 0 1px #7B4DFA,0 24px 46px -28px rgba(109,40,217,.6)}
  .pack:has(.pk-in:checked) .pk-dot{background:linear-gradient(135deg,#A21CBF,#6D28D9 55%,#155FB8);border-color:transparent;color:#fff;scale:1.12}
  .pack:has(.pk-in:checked) .each{background:#EFE9FC;border-color:#DDD0F8;color:#5B21B6}
  .pack--hot .pk-dot{border-color:rgba(196,181,253,.6);background:transparent}
  .pack--hot .pk-in:focus-visible{outline-color:#fff;outline-offset:-6px}   /* inside the card: it clips what sticks out */
  .pack--hot:has(.pk-in:checked){background:var(--night);box-shadow:0 0 0 4px rgba(123,77,250,.28),0 36px 70px -28px rgba(109,40,217,.9)}
  .pack--hot:has(.pk-in:checked)::before{inset:3.5px}
  .pack--hot:has(.pk-in:checked) .each{background:rgba(196,181,253,.24);border-color:transparent;color:#fff}
  .ugc:has(.pk-in:checked) .c-none{display:none}
  .ugc:has(#pk-test:checked) .c-test,.ugc:has(#pk-retainer:checked) .c-retainer,.ugc:has(#pk-addon:checked) .c-addon{display:flex}
  .ugc:has(.pk-in:checked) .ugc-cta{border-color:#D9CCF6;background:radial-gradient(60% 160% at 100% 50%,rgba(123,77,250,.14),transparent 70%),var(--card)}
  @media (prefers-reduced-motion:no-preference){
    .pack:has(.pk-in:checked) .tiles i{animation:hop .5s var(--ease) calc(var(--i) * 35ms)}
    .ugc:has(.pk-in:checked) .ugc-cta .c{animation:pop-in .35s var(--ease)}
  }
}
@keyframes hop{40%{translate:0 -6px}}
.ugc-cta b{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .hook .prog i{animation:play var(--dur,9s) linear infinite;animation-delay:calc(var(--dur,9s) * -.4)}
  .presenter::before{animation:talk 2.6s ease-in-out infinite}
  .reveal-on .packs:not(.in) .tiles i{scale:1 0}
  .reveal-on .reels:not(.in) .keep{opacity:0;scale:.6}
  .reveal-on .reels .keep{transition:opacity .4s ease 1.3s,scale .6s var(--ease) 1.3s}
  .reveal-on .reels:not(.in) .hook--keep{box-shadow:0 0 0 0 rgba(61,220,132,0),0 24px 44px -26px rgba(17,24,40,.6)}
  .reveal-on .reels.in .hook--keep{transition:translate .45s var(--ease),box-shadow .7s var(--ease) 1.2s}
  .reveal-on .packs .tiles i{transform-origin:bottom;transition:scale .5s var(--ease) calc(.35s + var(--i) * 45ms)}
}
@keyframes play{from{scale:0 1}to{scale:1 1}}
@keyframes talk{50%{translate:-50% 3%}}
@media (max-width:640px){
  .ugc .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none}
  .ugc .reels::-webkit-scrollbar{display:none}
  .ugc .reel-slot{flex:0 0 62%;scroll-snap-align:start}
}