:root{
  --ink-deep:#04090d; --panel:#0b1418; --line-d:#16242a;
  --teal:#2ff5e6; --teal-deep:#17a396; --teal-dim:#0e3b38;
  /* --teal-deep is the BRAND teal and is correct on borders, fills and large type,
     but as small text on paper it measures 2.87:1 — below the 4.5 AA needs. This is
     the same hue darkened to 4.65:1 on --paper, for teal TEXT LINKS only. Do not
     swap --teal-deep itself: it is load-bearing on buttons and rings where the
     contrast is already fine and the brand colour is the point. */
  --teal-link:#0f7c72;
  --paper:#f7f5f0; --card:#ffffff; --line:#e6e1d6;
  --ink:#10181a; --mut:#5f6d6b; --mut-d:#7d948c;
  /* --mut was #6b7a78, which measured 4.11-4.49:1 against the three light grounds this site
     uses -- under the 4.5 AA floor for small text on ALL of them. Lighthouse flagged eight
     elements across the pages it audited, and the token is used on every page including the
     footer, so the real count is higher. #5f6d6b clears AA everywhere (paper 4.96, card 5.40,
     tint 5.13) and is a barely perceptible darkening. Signed off 2026-08-27. */
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Archivo',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font:600 clamp(12px,1.15vw,15px) ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:99px;padding:13px 24px;font:700 13.5px 'Archivo';cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.btn-teal{background:var(--teal);color:#062a27}
.btn-teal:hover{box-shadow:0 6px 24px rgba(47,245,230,.35)}
.btn-ghost{background:transparent;color:#e9f5f2;border:1px solid rgba(255,255,255,.25)}
.btn-dark{background:var(--ink);color:#fff}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
section{padding:88px 0}
/* keep anchored sections clear of the fixed nav when jumped to via #hash */
section[id],header[id]{scroll-margin-top:76px}
h2{font-size:clamp(30px,4.1vw,46px);font-weight:800;letter-spacing:-.022em;line-height:1.1}
.sec-eyebrow{color:var(--teal-deep);text-align:center;margin-bottom:14px}
/* default VISIBLE; the hidden state is gated on html.js so a slow or failed
   script can never leave the page blank */
.reveal{transition:opacity .6s ease,transform .6s ease}
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}.btn{transition:none}}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:26px;padding:calc(14px + env(safe-area-inset-top)) 34px 14px;background:rgba(4,9,13,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.logo{display:flex;align-items:center;gap:10px;font:800 14.5px 'Archivo';letter-spacing:.08em;color:#fff}
.logo-mark{width:38px;height:38px;display:grid;place-items:center;flex:none}
.logo-mark img{width:100%;height:100%;object-fit:cover;display:block;border-radius:9px}
.nav-links{display:flex;gap:22px;margin-left:18px;font:600 13px 'Archivo';color:#c9d6d3}
.nav-links a:hover{color:var(--teal)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav-login{font:600 13px 'Archivo';color:#c9d6d3;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:9px 18px}
@media(max-width:900px){.nav-links{display:none}nav{padding:10px 16px;gap:12px}.nav-login{display:none}.logo{font-size:12.5px}.logo sup{display:none}.nav-cta .btn{padding:10px 16px;font-size:12px}}

/* .hero lives in the home page — it carries the base64 artwork */
/* The tree is the hero, not wallpaper. At 70% it sat shoved off to the right
   under a scrim that was .93 opaque on the left — it read as texture. 60%
   brings it into frame, and the scrim now clears to .10 on the right so the
   canopy and the aurora actually show. Left stays dark enough to carry the
   white h1 and the #b9c9c6 body copy. */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;opacity:1}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,13,.92) 0%,rgba(4,9,13,.74) 30%,rgba(4,9,13,.30) 58%,rgba(4,9,13,.10) 100%)}
/* symmetric: 130/90 fought the flex centring and left a 230px void above the
   content against 190px below. Equal padding centres it honestly. */
.hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:96px 28px 96px;width:100%}
@media(max-width:760px){
  .hero-inner{padding:110px 20px 130px}
  .hero video{object-position:center 68%}
  .hero-scrim{background:linear-gradient(180deg,rgba(4,9,13,.9) 0%,rgba(4,9,13,.68) 45%,rgba(4,9,13,.18) 80%,rgba(4,9,13,.05) 100%)}
  .hero p{font-size:clamp(14px,3.8vw,16px)}
  .hero-ctas .btn{width:100%;justify-content:center}
  .trusted-row{gap:16px;font-size:13px}
  section{padding:60px 0}
  .wrap{padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
  h2{font-size:clamp(23px,6vw,32px)}
  .statbar{margin-top:-18px;padding:0 16px}
  .cta-band{padding:34px 24px;margin:0 16px;gap:22px}
  .cta-right{margin-left:0}
  .resstats{gap:22px}
  .demo-main{padding:18px 16px}
  .demo-bar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .dpost{flex-wrap:wrap}
  .iq{margin-left:0}
}
.hero .eyebrow{color:var(--teal);margin-bottom:20px}
/* 740px, not 640 — "We run your marketing." needs ~708px at 62px, and at 640
   it wrapped early, orphaning "marketing." onto its own line and breaking the
   intended two-line lockup. */
.hero h1{font-size:clamp(38px,5.4vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:#fff;max-width:740px}
.hero h1 .accent{color:var(--teal)}

/* ── HERO TYPING ──
   The character spans are the only copy of the text — no sr-only duplicate,
   which would double h1.textContent. An explicit aria-label on the h1 keeps
   the accessible name a single clean string, so screen readers announce the
   headline normally instead of spelling it out. Built by JS at runtime; with
   JS off the plain <h1> renders exactly as it does today. */
.hero h1 .ch{opacity:0}
.hero h1 .ch.on{opacity:1}
.hero h1 .caret{display:inline-block;width:3px;height:.82em;margin-left:.06em;background:var(--teal);vertical-align:-.06em;animation:caretBlink 1s steps(1,end) infinite}
.hero h1 .caret.done{animation:caretFade .5s ease forwards}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}} /* unused: the caret is now a smudge, see fingerPress */
@keyframes caretFade{to{opacity:0}}
/* reduced motion: no typing, no caret — the headline is simply there */
@media(prefers-reduced-motion:reduce){
  .hero h1 .ch{opacity:1}
  .hero h1 .caret{display:none}
}
.hero p{margin-top:22px;max-width:480px;font-size:16.5px;line-height:1.6;color:#b9c9c6}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.trusted{margin-top:54px}
.trusted-label{font:600 12px 'Archivo';color:#8fa39f;margin-bottom:16px}
.trusted-row{display:flex;gap:34px;align-items:center;flex-wrap:wrap;font:700 15px 'Archivo';color:#dce8e5;opacity:.85}
.trusted-row .tag{font:500 12px 'Archivo';color:var(--teal);opacity:.9}

/* ── STAT BAR ── */
/* -58px was designed for a dark hero it could safely overlap. It was painting
   over the bottom 28px of the 43px CTA row. Fixed with space, not stacking. */
.statbar{position:relative;z-index:3;margin:-24px auto 0;max-width:1180px;padding:0 28px}
.statbar-inner{background:var(--panel);border:1px solid var(--line-d);border-radius:18px;display:grid;grid-template-columns:repeat(6,1fr);padding:26px 10px}
.stat{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 8px;border-left:1px solid var(--line-d);text-align:center}
.stat:first-child{border-left:none}
.stat b{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em}
.stat span{font:500 11px 'Archivo';color:var(--mut-d);line-height:1.35}
.stat svg{stroke:var(--teal);width:20px;height:20px}
@media(max-width:960px){.statbar-inner{grid-template-columns:repeat(3,1fr);row-gap:18px}.stat:nth-child(4){border-left:none}}
@media(max-width:560px){.statbar-inner{grid-template-columns:repeat(2,1fr)}.stat{border-left:none}}

/* ── HOW IT WORKS ── */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:52px}
.step{text-align:center;position:relative;padding:0 8px}
.step-num{font:600 11px ui-monospace,monospace;color:var(--teal-deep);letter-spacing:.15em}
.step-ic{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--teal-deep);display:grid;place-items:center;margin:12px auto 14px;background:#fff}
.step-ic svg{width:22px;height:22px;stroke:var(--teal-deep)}
.step b{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.step span{font-size:12px;line-height:1.5;color:var(--mut)}
.step::after{content:'';position:absolute;top:52px;right:-4px;width:8px;height:8px;border-top:1.5px solid #c9d3ce;border-right:1.5px solid #c9d3ce;transform:rotate(45deg)}
.step:last-child::after{display:none}
@media(max-width:960px){.steps{grid-template-columns:repeat(3,1fr);row-gap:34px}.step:nth-child(3)::after{display:none}
#how .step::after{display:none}}
@media(max-width:600px){.steps{grid-template-columns:repeat(2,1fr)}.step::after{display:none}}

/* ── TT STUDIO ── */
.studio{background:var(--paper)}
.studio-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:54px;align-items:center;margin-top:8px}
.studio-copy .eyebrow{color:var(--teal-deep);margin-bottom:14px}
.studio-copy h2{margin-bottom:16px}
.studio-copy p{color:var(--mut);font-size:15px;line-height:1.6;max-width:400px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:11px 26px;margin:26px 0 30px;font:600 13.5px 'Archivo'}
.checks div{display:flex;gap:9px;align-items:center}
.checks svg{width:16px;height:16px;stroke:var(--teal-deep);flex-shrink:0}
.dash{max-width:100%;overflow:hidden;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(16,24,26,.12);overflow:hidden}
.dash-top{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);font:600 11.5px 'Archivo';color:var(--mut)}
.dash-top .pill{margin-left:auto;background:#fef6e3;color:#8a6d1f;border:1px solid #efdfae;border-radius:99px;padding:3px 10px;font:700 10px 'Archivo';letter-spacing:.05em}
.dash-body{display:grid;grid-template-columns:150px minmax(0,1fr)}
.dash-side{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px;font:600 11.5px 'Archivo';color:var(--mut)}
.dash-side div{padding:7px 10px;border-radius:8px}
.dash-side .on{background:var(--teal-dim);color:#d9fffb}
.dash-main{padding:16px}
/* auto-fit so the fourth KPI wraps to a second row rather than being cut in
   half — clipping left "LEADS 1,24..." visible on screen */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.kpi span{display:block;font:600 9.5px ui-monospace,monospace;letter-spacing:.08em;color:var(--mut)}
.kpi b{font-size:21px;font-weight:800;letter-spacing:-.02em}
.kpi i{display:block;font-style:normal;font:500 10px 'Archivo';color:var(--teal-deep);margin-top:2px}
.chart{margin-top:12px;border:1px solid var(--line);border-radius:11px;padding:12px}
.chart span{font:600 10px 'Archivo';color:var(--mut)}
.bars{display:flex;align-items:flex-end;gap:7px;height:74px;margin-top:10px}
.bars i{flex:1;background:linear-gradient(180deg,var(--teal) 0%,var(--teal-deep) 100%);border-radius:4px 4px 0 0;opacity:.85}
@media(max-width:960px){.studio-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.shots img{width:100%;border-radius:12px;border:1px solid var(--line);box-shadow:0 8px 22px rgba(16,24,26,.08)}

@media(max-width:760px){.shots{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px}.shots img{width:72%;flex-shrink:0}}
@media(max-width:560px){.dash-body{grid-template-columns:1fr}.dash-side{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);padding:10px;position:relative;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);scrollbar-width:none}
  .dash-side::-webkit-scrollbar{display:none}
  .dash-side>div{flex:0 0 auto}.dash-side div{white-space:nowrap}}
/* ── WHAT WE DO ── */
.dogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.docard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;text-align:center;transition:transform .15s ease,box-shadow .15s ease}
.docard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,24,26,.1)}
.docard svg{width:26px;height:26px;stroke:var(--teal-deep);margin-bottom:12px}
.docard b{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.docard span{font-size:12px;line-height:1.5;color:var(--mut)}
@media(max-width:960px){.dogrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dogrid{grid-template-columns:1fr}}

/* ── RESULTS ── */
.results{background:#eef0ea}
.resgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:48px}
.rescard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.rescard .rtag{font:600 10.5px ui-monospace,monospace;letter-spacing:.14em;color:var(--teal-deep)}
.rescard h3{font-size:21px;font-weight:800;margin:10px 0 14px;letter-spacing:-.01em}
.resstats{display:flex;gap:34px;margin:18px 0;flex-wrap:wrap}
.resstats div b{font-size:30px;font-weight:800;color:var(--teal-deep);letter-spacing:-.02em}
.resstats div span{display:block;font:500 11.5px 'Archivo';color:var(--mut);margin-top:3px;max-width:150px;line-height:1.4}
.rescard p{font-size:13.5px;line-height:1.6;color:var(--mut)}
.res-next{background:var(--ink-deep);color:#e9f5f2;display:flex;flex-direction:column;justify-content:space-between;border:none}
.res-next h3{color:#fff}
.res-next p{color:#9fb3af}
@media(max-width:900px){.resgrid{grid-template-columns:1fr}}

/* ── PRICING ── */
.pricing{background:var(--paper)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;position:relative}
/* The highlighted plan used border:2px against 1px on the other three. Cards are equal size
   either way (grid 1fr + align-items:stretch), but the extra border pushed THIS card's inner
   content down by exactly 1px, so price, feature list and CTA sat one pixel below the other
   three — measured on the live page. An inset ring gives the same visual weight with no
   layout cost, because it is painted, not laid out. */
.plan.pop{border-color:var(--teal-deep);box-shadow:0 0 0 1px var(--teal-deep) inset,0 18px 44px rgba(23,163,150,.16)}
.pop-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--teal);color:#062a27;font:800 9.5px 'Archivo';letter-spacing:.09em;border-radius:99px;padding:4px 12px}
.plan .pname{font:700 12px ui-monospace,monospace;letter-spacing:.1em;color:var(--mut)}
.plan .prole{font:600 12.5px 'Archivo';margin-top:6px;color:var(--ink)}
.plan .pprice{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:14px}
.plan .pprice small{font:500 12px 'Archivo';color:var(--mut)}
/* 'from' on the top tier: full-size it wrapped to a second line and pushed
   that card's feature list out of alignment with the other three. */
.plan .pprice .pfrom{font:600 14px 'Archivo';font-style:normal;color:var(--mut);letter-spacing:0}
.plan .plocal{font:500 11px ui-monospace,monospace;color:var(--mut);margin-top:3px;line-height:1.5}
.psub{text-align:center;max-width:640px;margin:14px auto 0;font:500 14.5px/1.6 'Archivo';color:var(--mut)}
.pdeal{margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;background:rgba(47,245,230,.14);border:1px solid var(--teal-deep);border-radius:9px;padding:7px 10px}
.pdeal b{font:800 12.5px 'Archivo';color:#0d5a53;letter-spacing:-.01em}
.pdeal span{font:500 10.5px ui-monospace,monospace;color:var(--mut)}
.plan ul{list-style:none;margin:18px 0;display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:#33413f;flex:1}
.plan li{display:flex;gap:8px;align-items:flex-start}
.plan li svg{width:14px;height:14px;stroke:var(--teal-deep);flex-shrink:0;margin-top:1px}
.plan .btn{width:100%;justify-content:center}
/* .btn-line carries a 1px border and .btn-teal carries none, so the teal button measured 41px
   against 43px. The CTA is bottom-anchored (.plan ul{flex:1}), so the shorter button STARTED
   2px lower and the highlighted plan's CTA sat out of line with the other three — measured on
   the built page. A transparent border equalises the box without changing how it looks, and it
   is scoped to .plan so no other teal button on the site changes height. */
.plan .btn-teal{border:1px solid transparent}
.truth{grid-column:1/-1;background:var(--panel);border:1px solid var(--line-d);border-radius:var(--r);padding:26px 22px;color:#dce8e5}
.truth h3{font-size:17px;font-weight:800;color:#fff;margin-bottom:4px}
.truth .tsub{font:500 11px 'Archivo';color:var(--mut-d);margin-bottom:18px}
.truth table{width:100%;border-collapse:collapse;font:500 12px 'Archivo'}
.truth th{font:600 10px ui-monospace,monospace;letter-spacing:.06em;color:var(--mut-d);text-align:right;padding-bottom:10px;font-weight:600}
.truth th:first-child{text-align:left}
.truth td{padding:9px 0;border-top:1px solid var(--line-d)}
.truth td:nth-child(2),.truth td:nth-child(3){text-align:right;width:64px}
.yes{color:var(--teal);font-weight:800}
.no{color:#5c6f6c}
@media(max-width:1020px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pfoot{grid-column:1/-1;text-align:center;font-size:12px;line-height:1.6;color:var(--mut);margin-top:22px;max-width:none}
/* ── price anchor strip ── */
.anchors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.anchor{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--card)}
.anchor.is-us{border:2px solid var(--teal-deep);background:#f2fbf9}
.anchor .alab{font:700 11px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.anchor .aprice{font:800 24px 'Archivo';letter-spacing:-.02em;color:var(--ink);margin:6px 0 8px}
.anchor .aprice small{font:600 12px 'Archivo';color:var(--mut);letter-spacing:0}
.anchor p{font:500 12.5px/1.55 'Archivo';color:var(--mut);margin:0}
/* heading between the anchor strip and the plan cards */
.plans-head{margin:44px 0 -30px;text-align:center;font:800 clamp(20px,2.2vw,26px) 'Archivo';letter-spacing:-.02em;color:var(--ink)}
@media(max-width:640px){.plans-head{margin:34px 0 -34px}}
@media(max-width:900px){.anchors{gap:10px}.anchor{padding:14px 15px}.anchor .aprice{font-size:20px}}
@media(max-width:680px){.anchors{grid-template-columns:1fr}}
@media(max-width:600px){

}
/* the two objections that stop a purchase — surfaced under the table rather
   than buried in the FAQ accordion */
.pblock{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.pblock>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.pblock b{display:block;font:800 14px 'Archivo';color:var(--ink);margin-bottom:6px}
.pblock span{font:500 13.5px/1.6 'Archivo';color:var(--mut)}
@media(max-width:760px){.pblock{grid-template-columns:1fr}}

/* ── FOOTER CTA ── */
.cta-band{background:var(--ink-deep);border-radius:22px;margin:0 28px;max-width:1180px;margin-left:auto;margin-right:auto;display:flex;align-items:center;gap:38px;padding:52px 54px;color:#fff;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;left:-60px;top:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(47,245,230,.18) 0%,transparent 70%)}
.cta-band h2{max-width:430px;position:relative}
.cta-band .accent{color:var(--teal)}
.cta-right{margin-left:auto;position:relative;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cta-points{display:flex;gap:20px;flex-wrap:wrap;font:600 12px 'Archivo';color:#9fb3af}
.cta-points div{display:flex;gap:7px;align-items:center}
.cta-points svg{width:14px;height:14px;stroke:var(--teal)}
footer{padding:34px 28px 44px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;max-width:1180px;margin:0 auto;font:500 12.5px 'Archivo';color:var(--mut)}
footer a:hover{color:var(--teal-deep)}
.foot-social{display:flex;gap:12px;align-items:center}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line-d,#dfe6e3);color:var(--mut);transition:color .16s,border-color .16s,background .16s}
.foot-social a:hover{color:#fff;background:var(--teal-deep);border-color:var(--teal-deep)}
.foot-social svg{width:17px;height:17px;fill:currentColor}

/* ── mobile nav + responsive hardening ── */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 9px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:10px;cursor:pointer}
.nav-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:0;right:0;width:min(80vw,300px);height:100vh;z-index:59;flex-direction:column;gap:6px;padding:calc(80px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) 22px;background:rgba(4,9,13,.97);backdrop-filter:blur(14px);border-left:1px solid var(--line-d);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{font:700 15px 'Archivo';color:#e7f1ef;padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.07)}
.mobile-menu a.btn{margin-top:16px;justify-content:center;border-bottom:none;color:var(--ink-deep)}
body.nav-open{overflow:hidden}
@media(max-width:900px){.nav-burger{display:flex}.mobile-menu{display:flex}}
/* the header booking button now stays visible at every width — it used to be
   hidden below 900px, leaving phones with no call to action in the header */
.nav-links a{white-space:nowrap}
.nav-cta .btn-teal{white-space:nowrap}
/* promoting booking into the header added a second control; below ~1180px the
   quiet Client Login link is the first thing to go, so the nav never wraps */
@media(max-width:1180px){.nav-login{display:none}.nav-links{gap:16px;margin-left:10px}}
@media(max-width:1020px){.nav-links{gap:13px;font-size:12.5px}nav{padding:14px 20px}}
@media(max-width:900px){.nav-cta .btn-teal{padding:9px 14px;font-size:12px}}
/* below 560px the header pill leaves no room and pushed 17px of the 40px
   burger outside the viewport. The hero already carries a strong CTA. */
@media(max-width:560px){
  .nav-cta .btn-teal{display:none}
  nav{padding-right:calc(16px + env(safe-area-inset-right));padding-left:calc(16px + env(safe-area-inset-left))}
  .nav-burger{flex:0 0 auto}
}
@media(max-width:900px){.mobile-menu .btn-teal{display:inline-flex}}
@media(max-width:480px){
  .hero h1{font-size:clamp(18px,5.4vw,26px);line-height:1.16}
  h2{font-size:clamp(22px,6.2vw,29px)!important}
  .steps{grid-template-columns:1fr 1fr;gap:6px}
  .step span{font-size:11.5px}
  section{padding:52px 0}
  .agentic h3{font-size:20px}
  .plan{padding:22px 18px}
  .cta-band{flex-direction:column;text-align:center}
}
img,video{max-width:100%}


/* ==== logo-tag-css ==== */

.logo-txt{display:inline-flex;flex-direction:column;line-height:1.05}
.logo-tag{font:600 8px ui-monospace,monospace;letter-spacing:.12em;color:var(--teal);opacity:.9;margin-top:3px;text-transform:none}
@media(max-width:640px){.logo-tag{display:none}}

/* ==== shine-btn-css ==== */

/* Travelling highlight on the primary CTA: a short dash chases the pill's
   perimeter. Drawn as an SVG stroke rather than a sweeping gradient so the
   light follows the rounded corners instead of cutting across them.
   preserveAspectRatio="none" lets one viewBox stretch to any button size;
   the dash pattern (48 on, 312 off) and the 360 offset are a matched pair —
   change one and the loop stops being seamless. */
.shine-btn{position:relative;overflow:visible}
/* the ring orbits just OUTSIDE the pill: on a filled teal button a white line
   on the fill barely reads, but against the dark navbar a teal one glows */
.shine-btn .shine{position:absolute;inset:-5px;width:auto;height:auto;overflow:visible;pointer-events:none}
.shine-btn .shine rect{fill:none;stroke-linecap:round}
.shine-btn .shine .track{stroke:rgba(47,245,230,.30);stroke-width:1.5}
.shine-btn .shine .dash{
  stroke:var(--teal);stroke-width:2.6;
  /* 48 on + 400 off = 448, the rect's exact path length in user units, so a
     single dash travels the pill and the loop closes with no seam. (The site
     this is borrowed from uses a 360 period against a ~458 perimeter, which
     leaves a visible break where the pattern restarts.) */
  stroke-dasharray:48 400;
  filter:drop-shadow(0 0 5px rgba(47,245,230,.95)) drop-shadow(0 0 12px rgba(47,245,230,.55));
  animation:shineLine 2.4s linear infinite;
}
@keyframes shineLine{from{stroke-dashoffset:448}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .shine-btn .shine .dash{animation:none;stroke-dasharray:none;opacity:.5}
}

/* ==== nav-menu-css ==== */

/* Grouped navigation. Each trigger is a real <button> with aria-expanded, so
   the menu is operable by keyboard and announced correctly; hover opens it on
   pointer devices as a convenience, not as the only way in. */
.nav-links{position:relative;display:flex;align-items:center;gap:22px}
.navgrp{position:relative;display:flex;align-items:center}
/* one shared box so the dropdown triggers and the plain link share a baseline,
   a height and a hit area */
.navgrp > button,.nav-links > a{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;cursor:pointer;padding:6px 2px;
  font:600 13px 'Archivo';line-height:1.2;color:#c9d6d3;
  text-decoration:none;
}
.nav-links > a:hover{color:var(--teal)}
.navgrp > button::after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .18s ease}
.navgrp[data-open="true"] > button::after{transform:rotate(-135deg) translateY(-1px)}
.navgrp > button:hover,.navgrp[data-open="true"] > button{color:var(--teal)}
.navgrp > button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
.navgrp ul{
  position:absolute;top:calc(100% + 12px);left:-14px;z-index:60;
  min-width:238px;margin:0;padding:8px;list-style:none;
  background:rgba(9,20,24,.97);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.navgrp[data-open="true"] ul{opacity:1;visibility:visible;transform:none}
.navgrp ul a{display:block;padding:9px 11px;border-radius:7px;font:600 13px 'Archivo';color:#dbe7e4}
.navgrp ul a small{display:block;font:500 11.5px 'Archivo';color:#8aa39d;margin-top:2px}
.navgrp ul a:hover{background:rgba(47,245,230,.10);color:var(--teal)}
.navgrp ul a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.navgrp ul{transition:none}}
/* burger takes over below 900px — this must come after `.nav-links{display:flex}`
   above, or the desktop links reappear next to the burger on every phone */
@media(max-width:900px){.nav-links{display:none}}
/* mobile menu sub-items */
.mobile-menu .mm-group{font:800 10.5px ui-monospace,monospace;letter-spacing:.16em;color:var(--teal);padding:14px 6px 4px;border-bottom:0}
.mobile-menu a.mm-sub{font:600 13.5px 'Archivo';color:#c9d6d3;padding:10px 6px 10px 14px}

/* ==== tap-targets-css ==== */

/* ── TAP TARGETS ──────────────────────────────────────────────────────────
   Apple HIG says 44pt, Material says 48dp, WCAG 2.2 AAA says 44px. These
   rules grow the HIT AREA only — every font size, colour and border stays
   as authored, so nothing looks different; the boxes just stop being
   smaller than a fingertip. Measured before: footer links 14px, mobile
   menu links 36px, logo 38px, sound toggle 38px, burger 40px, CTAs 41px.
   Authored last in the document so it wins on source order without
   needing !important. */
@media(max-width:900px){
  footer a{display:inline-flex;align-items:center;min-height:44px}
  .mobile-menu a.mm-sub{display:flex;align-items:center;min-height:44px;padding-top:6px;padding-bottom:6px}
  .mobile-menu a{min-height:44px;display:flex;align-items:center}
  .nav-burger{width:44px;height:44px}
  .snd{width:44px;height:44px}
  .btn{min-height:44px}
  .logo{display:inline-flex;align-items:center;min-height:44px}
  .faq summary{min-height:44px;display:flex;align-items:center}
}

/* Hand-maintained, appended to site.css at build time. The extractor never
   overwrites this file — put anything new here, not in the generated CSS. */

/* .cta-strip is the multi-page replacement for the old
   <section id="contact" style="padding-top:20px"> wrapper. Its inner .cta-band
   is already styled in the extracted CSS; only the wrapper padding was lost. */
.cta-strip{padding-top:20px}

/* ── MULTI-PAGE SPACING ────────────────────────────────────────────────
   These sections were authored for ONE long page, where each had content
   above and below it. Standing alone at the top or bottom of their own page
   they render squashed:
     · nav is position:fixed at 70px, and every sub-page's first block starts
       at top:0 — #studio's heading was landing 7px clear of the nav.
     · #arrives ends with padding-bottom:10px and .faq with 10px, because both
       used to butt against the next section.
     · .cta-strip opened with 20px, fine mid-page, tight as a page closer.
   Home is exempt: its 100svh hero is designed to sit under the nav. */
body.sub > nav + *{padding-top:118px}          /* 70px nav + 48px breathing */
/* .cta-strip already contributes 64px above; 72px here stacked to a 136px
   void. 24px + 64px = an 88px gap, matching the section rhythm elsewhere. */
body.sub #arrives,
body.sub .faq{padding-bottom:24px}
/* #how and #arrives were never adjacent on the old page (#arrives came first),
   so #how's 88px bottom met #arrives' 44px top for a 132px void. */
body.sub #how + #arrives{padding-top:0}
.cta-strip{padding-top:64px}
@media(max-width:640px){
  body.sub > nav + *{padding-top:96px}
  body.sub #arrives, body.sub .faq{padding-bottom:18px}
  .cta-strip{padding-top:44px}
}

/* Section pairs that are new neighbours on the split pages: each kept its own
   88px bottom against the next block's 64px top, giving 152px voids where the
   rest of the site uses ~88px. Measured, not eyeballed. */
body.sub #studio,
body.sub #pricing,
body.sub #social,
body.sub #about{padding-bottom:24px}
@media(max-width:640px){
  body.sub #studio, body.sub #pricing, body.sub #social, body.sub #about{padding-bottom:16px}
}

/* ── WhatsApp click-to-chat ──────────────────────────────────────────────
   Ships inert: site.js only injects .tt-wa once TT_WA holds a real number.
   Bottom-right and small on purpose — it sits under the fold-level CTAs, not
   over them, and it is suppressed entirely on /book. */
.tt-wa{position:fixed;right:18px;bottom:18px;z-index:55;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;box-shadow:0 8px 26px rgba(0,0,0,.22);
  transition:transform .15s ease}
.tt-wa:hover{transform:translateY(-2px)}
.tt-wa svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tt-wa:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tt-wa{transition:none}}
@media(max-width:640px){.tt-wa{right:14px;bottom:14px;width:48px;height:48px}}