/* Booked theme — home page styles (extracted from home.html). */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink:#0D1B1E;
  --petrol:#0F4C4A;
  --petrol-deep:#072826;
  --mint:#CFE8DE;
  --mint-2:#EAF4EF;
  --chalk:#F2F4F1;
  --paper:#FFFFFF;
  --amber:#FFC65A;
  --clay:#C46A4F;

  --line:color-mix(in oklab, var(--ink) 14%, transparent);
  --line-mid:color-mix(in oklab, var(--ink) 22%, transparent);
  --muted:color-mix(in oklab, var(--ink) 58%, transparent);
  --faint:color-mix(in oklab, var(--ink) 32%, transparent);

  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Public Sans', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --pad:clamp(14px, 3vw, 28px);
  --maxw:1240px;
  --sec:clamp(56px, 8vw, 108px);
  --grid-bg:
    linear-gradient(color-mix(in oklab,var(--ink) 5%,transparent) 1px, transparent 1px) 0 0/100% 40px,
    linear-gradient(90deg, color-mix(in oklab,var(--ink) 5%,transparent) 1px, transparent 1px) 0 0/40px 100%;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;transition:padding-bottom .3s}
body.cta-open{padding-bottom:74px}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec);scroll-margin-top:78px}
.sec-line{border-top:1px solid var(--line)}
.bg-chalk{background:var(--chalk)}
.bg-mint{background:var(--mint-2)}
.bg-ink{background:var(--ink);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}

.eyebrow{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:currentColor;font-style:normal;flex:none}
.h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;font-size:clamp(30px,4.2vw,52px);text-wrap:balance}
.h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;font-size:clamp(18px,1.6vw,22px);line-height:1.15}
.lede{font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.mono{font-family:var(--mono)}
.sec-head{display:grid;gap:18px;max-width:64ch;margin-bottom:clamp(32px,4vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head.split{max-width:none;grid-template-columns:1.25fr .75fr;align-items:end;gap:clamp(20px,4vw,56px)}
.sec-head.split .lede{max-width:42ch}
.sec-head.split > div{display:grid;gap:18px}
/* Below a wide viewport the two-column masthead reads as one broken line — the
   big heading and the small lede end up on the same baseline. Stack them so the
   heading sits cleanly above its supporting text. */
@media (max-width:1200px){
  .sec-head.split{grid-template-columns:1fr;align-items:start;gap:16px}
  .sec-head.split .lede{max-width:60ch}
}

.btn-solid{display:inline-flex;align-items:center;gap:8px;background:var(--petrol);color:#fff;font-weight:600;font-size:15px;padding:14px 22px;border-radius:999px;transition:background .18s}
.btn-solid:hover{background:var(--petrol-deep)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:15px;padding:13px 20px;border:1px solid var(--line-mid);border-radius:999px;transition:border-color .18s,background .18s}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper)}
.btn-sm{font-size:14px;padding:11px 17px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.on-ink .btn-solid{background:var(--mint);color:var(--ink)}
.on-ink .btn-solid:hover{background:#fff}
.on-ink .btn-ghost{border-color:color-mix(in oklab,#fff 30%,transparent)}
.on-ink .btn-ghost:hover{border-color:var(--mint);color:var(--mint);background:transparent}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 4% cover 24%}
    @keyframes rise{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
  }
}

/* shared mock chrome */
.mock{border:1px solid var(--line-mid);border-radius:16px;background:var(--paper);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--chalk);font-family:var(--mono);font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.mock-bar .dots{display:flex;gap:5px;flex:none}
.mock-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-mid);font-style:normal}
.mock-bar .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line-mid);color:var(--muted);white-space:nowrap}
.pill-on{border-color:var(--petrol);background:var(--mint-2);color:var(--petrol)}
.pill-live{border-color:var(--clay);color:var(--clay);display:inline-flex;align-items:center;gap:6px}
.pill-live i{width:6px;height:6px;border-radius:50%;background:var(--clay);font-style:normal}
@media (prefers-reduced-motion:no-preference){.pill-live i{animation:beat 1.6s ease-in-out infinite}@keyframes beat{50%{opacity:.25}}}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;border:1px solid var(--line-mid);background:var(--mint-2);color:var(--petrol);flex:none}

/* ============================================================
   3. ANNOUNCEMENT + NAV
   ============================================================ */
.annbar{background:var(--petrol);color:#fff}
.annbar .wrap{display:flex;gap:12px;align-items:center;justify-content:center;padding-block:9px;flex-wrap:wrap}
.annbar p{font-size:13.5px}
.annbar .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid color-mix(in oklab,#fff 45%,transparent);padding:2px 7px;border-radius:999px}
.annbar a{font-size:13.5px;border-bottom:1px solid color-mix(in oklab,#fff 55%,transparent)}
.annbar a:hover{border-bottom-color:#fff}

.nav{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--chalk) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em}
.brand .mk{color:var(--petrol);flex:none}
.brand .ver{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--petrol);border:1px solid var(--mint);background:var(--mint-2);padding:2px 6px;border-radius:999px;font-weight:400;translate:0 -6px}
.nav-links{display:flex;gap:4px;margin-inline:auto;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.nav-links a{font-size:14px;padding:8px 14px;border-radius:999px;color:var(--muted)}
.nav-links a:hover{background:var(--mint-2);color:var(--petrol)}
.nav-cta{display:flex;gap:10px;align-items:center}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{background:var(--chalk);border-bottom:1px solid var(--line);position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grid-bg);mask-image:radial-gradient(120% 90% at 78% 30%,#000 20%,transparent 76%)}
.hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,68px);align-items:center;padding-block:clamp(44px,7vw,84px)}
.hero h1{font-family:var(--display);font-size:clamp(38px,5.4vw,68px);line-height:.98;letter-spacing:-.035em;font-weight:800;text-wrap:balance;margin-top:22px}
.hero h1 em{font-style:normal;color:var(--petrol)}
.hero .lede{margin-top:22px;max-width:46ch}
.hero .actions{margin-top:32px}
.hero .actions .btn-solid{padding:15px 24px;font-size:15.5px}
.hero .actions .btn-ghost{padding:14px 22px;font-size:15.5px}
.hero-facts{display:flex;gap:24px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.hero-facts div{font-size:13.5px;color:var(--muted)}
.hero-facts b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink);text-transform:uppercase;margin-bottom:4px;font-weight:500}
.hero-visual{display:grid;gap:14px;align-content:start}
.panel{border:1px solid var(--line-mid);border-radius:20px;background:var(--paper);overflow:hidden}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--mint-2);flex-wrap:wrap}
.panel-head strong{font-size:14px;font-weight:600;min-width:0}
.panel-head span{font-family:var(--mono);font-size:11.5px;color:var(--petrol);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.steps-rail{display:flex;border-bottom:1px solid var(--line);background:var(--paper)}
.steps-rail div{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);border-right:1px solid var(--line);min-width:0}
.steps-rail div:last-child{border-right:0}
.steps-rail b{width:16px;height:16px;border-radius:50%;border:1px solid var(--line-mid);display:grid;place-items:center;font-size:9px;font-weight:400;flex:none}
.steps-rail div.done{color:var(--petrol)}
.steps-rail div.done b{background:var(--petrol);border-color:var(--petrol);color:#fff}
.steps-rail div.is-now{color:var(--ink)}
.steps-rail div.is-now b{border-color:var(--ink)}
@media (max-width:400px){.steps-rail div em{display:none}}
.days{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line)}
.days button{padding:10px 0 9px;color:var(--muted);border-right:1px solid var(--line);text-align:center;display:grid;gap:2px;justify-items:center}
.days button .dn{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.days button:last-child{border-right:0}
.days button .d{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1}
.days button .dotrow{display:flex;gap:3px;justify-content:center;margin-top:3px}
.days button .dotrow i{width:4px;height:4px;border-radius:50%;background:var(--mint);font-style:normal}
.days button .dotrow i.f{background:var(--line-mid)}
.days button[aria-pressed="true"]{background:var(--ink);color:#fff}
.days button[aria-pressed="true"] .d{color:#fff}
.days button[aria-pressed="true"] .dotrow i{background:var(--mint)}
.days button[aria-pressed="true"] .dotrow i.f{background:color-mix(in oklab,#fff 30%,transparent)}
.slots-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;padding:15px 16px 0;flex-wrap:wrap}
.slots-head strong{font-size:13.5px;font-weight:600}
.slots-head span{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--petrol);white-space:nowrap}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 16px 16px}
.slot{font-family:var(--mono);font-size:13px;padding:11px 0;text-align:center;border:1px solid var(--line-mid);border-radius:9px;background:var(--paper);transition:border-color .15s,color .15s,background .15s}
.slot:hover{border-color:var(--petrol);color:var(--petrol)}
.slot[data-state="taken"]{color:var(--faint);border-color:var(--line);cursor:not-allowed;background:repeating-linear-gradient(-45deg,transparent 0 5px,var(--chalk) 5px 10px)}
.slot[data-state="taken"]:hover{border-color:var(--line);color:var(--faint)}
.slot[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.panel-after{border-top:1px solid var(--line);padding:14px 16px;display:grid;gap:10px;background:var(--chalk)}
.panel-row{display:flex;gap:10px;align-items:center;font-size:13.5px}
.panel-row .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--line-mid);background:var(--paper);flex:none;color:var(--petrol)}
.panel-row .mono{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.hero-note{border:1px solid var(--petrol);border-radius:14px;background:var(--paper);padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:start}
.hero-note .top{grid-row:1;grid-column:1}
.hero-note .body{grid-column:2;grid-row:1 / span 2}
.hero-note .foot{grid-column:1;grid-row:2;border-top:0;padding-top:0}
.hero-note .top{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);white-space:nowrap}
.hero-note .top svg{flex:none}
.hero-note p{font-size:13px;line-height:1.45}
.hero-note .foot{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  .slot{animation:pop .5s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--i) * 42ms + 180ms)}
  @keyframes pop{from{opacity:0;translate:0 8px}}
  .panel-row{animation:slidein .6s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--i) * 150ms + 820ms)}
  @keyframes slidein{from{opacity:0;translate:-10px 0}}
  .hero-note{animation:noteIn .7s cubic-bezier(.2,.7,.3,1) 1.5s backwards}
  @keyframes noteIn{from{opacity:0;translate:0 14px}}
}

/* ============================================================
   5. STRIPS
   ============================================================ */
.strip{border-bottom:1px solid var(--line);background:var(--paper)}
.strip .wrap{display:flex;gap:clamp(14px,3vw,38px);flex-wrap:wrap;justify-content:space-between;padding-block:16px}
.strip span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.strip span b{color:var(--ink);font-weight:500}

.integ{border-bottom:1px solid var(--line);background:var(--chalk)}
.integ .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:20px}
.integ p{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-mid);background:var(--paper);border-radius:999px;padding:7px 13px;font-size:13px}
.chip svg{color:var(--petrol);flex:none}

/* ============================================================
   6. SHOWCASE TABS
   ============================================================ */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;padding:5px;border:1px solid var(--line-mid);border-radius:999px;background:var(--paper);width:fit-content}
.tabs button{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:9px 16px;border-radius:999px;color:var(--muted);transition:background .18s,color .18s;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.tabs button i{font-family:var(--mono);font-size:10.5px;opacity:.7;font-style:normal}
.tabpanel[hidden]{display:none}

/* 6a. service setup */
.setup-mock{display:grid;grid-template-columns:1.35fr .65fr}
.sm-main{padding:clamp(18px,2.4vw,28px);display:grid;gap:20px}
.sm-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sm-title h4{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.sm-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.field{border:1px solid var(--line);border-radius:11px;padding:11px 13px;display:grid;gap:5px}
.field b{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:400}
.field span{font-size:15px}
.field.wide{grid-column:span 3}
.months{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.months i{font-style:normal;font-family:var(--mono);font-size:10.5px;padding:4px 7px;border-radius:6px;border:1px solid var(--line);color:var(--faint);min-width:34px;text-align:center}
.months i.on{border-color:var(--petrol);background:var(--mint-2);color:var(--petrol)}
.toggles{display:grid;gap:9px}
.tog{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14.5px}
.tog .sw{width:34px;height:19px;border-radius:999px;background:var(--line-mid);position:relative;flex:none;margin-left:auto}
.tog .sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--paper)}
.tog.on .sw{background:var(--petrol)}
.tog.on .sw::after{left:auto;right:2px}
.tog em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint)}
.sm-side{border-left:1px solid var(--line);background:var(--chalk);padding:clamp(16px,2.2vw,22px);display:grid;gap:16px;align-content:start}
.sm-side h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:400}
.staff{display:grid;gap:8px}
.staff div{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:9px 11px;background:var(--paper);font-size:14px}
.staff div .avatar{width:26px;height:26px;font-size:10px}
.staff div em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:auto;white-space:nowrap}
.staff div.off{opacity:.5}
.sm-side .q{display:grid;gap:7px}
.sm-side .q i{font-style:normal;font-size:13px;line-height:1.45;border-left:2px solid var(--mint);padding-left:10px;color:var(--muted)}

/* 6b. video */
.vid-wrap{display:grid;grid-template-columns:1.4fr .6fr}
.stage{position:relative;background:var(--petrol-deep);min-height:340px;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 70% at 50% 35%,color-mix(in oklab,var(--mint) 26%,transparent),transparent 72%)}
.stage .big{width:96px;height:96px;border-radius:50%;border:1px solid color-mix(in oklab,#fff 35%,transparent);display:grid;place-items:center;font-family:var(--display);font-size:30px;font-weight:600;color:var(--mint)}
.stage .nm{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:11.5px;color:#fff;border:1px solid color-mix(in oklab,#fff 26%,transparent);padding:5px 10px;border-radius:999px;background:color-mix(in oklab,#000 24%,transparent);max-width:calc(100% - 28px)}
.stage .self{position:absolute;right:14px;top:14px;width:84px;height:60px;border-radius:10px;border:1px solid color-mix(in oklab,#fff 30%,transparent);background:color-mix(in oklab,#000 28%,transparent);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:color-mix(in oklab,#fff 70%,transparent)}
.stage .timer{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:11px;color:#fff;display:flex;align-items:center;gap:7px}
.stage .timer i{width:7px;height:7px;border-radius:50%;background:var(--clay);font-style:normal}
.stage .ctrls{position:absolute;left:50%;translate:-50% 0;bottom:58px;display:flex;gap:8px}
.stage .ctrls button{width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in oklab,#fff 30%,transparent);color:#fff;display:grid;place-items:center;background:color-mix(in oklab,#000 22%,transparent)}
.stage .ctrls button:hover{background:color-mix(in oklab,#fff 16%,transparent)}
.stage .ctrls button.end{background:var(--clay);border-color:var(--clay)}
.vid-side{border-left:1px solid var(--line);display:grid;grid-template-rows:auto 1fr auto}
.vid-side .h{padding:13px 15px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);display:flex;align-items:center;gap:8px}
.vid-side .body{padding:15px;display:grid;gap:13px;align-content:start}
.vfield{display:grid;gap:5px}
.vfield b{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:400}
.vfield p{font-size:13.5px;line-height:1.5}
.vline{height:9px;border-radius:999px;background:var(--chalk)}
.vline.w70{width:70%}.vline.w45{width:45%}
.vid-side .f{padding:13px 15px;border-top:1px solid var(--line);background:var(--chalk);display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){
  .vfield{animation:fadeUp .6s ease-out backwards;animation-delay:calc(var(--i) * 500ms + 300ms)}
  @keyframes fadeUp{from{opacity:0;translate:0 8px}}
}

/* 6c. note */
.note-mock{display:grid;grid-template-columns:1fr 300px}
.note-doc{padding:clamp(18px,2.4vw,30px);display:grid;gap:20px}
.note-doc .hd{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.note-doc .hd h4{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.nrow{display:grid;grid-template-columns:148px 1fr;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.nrow:last-child{border-bottom:0;padding-bottom:0}
.nrow dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);padding-top:2px}
.nrow dd{font-size:14.5px;line-height:1.6}
.note-side{border-left:1px solid var(--line);background:var(--chalk);padding:18px;display:grid;gap:14px;align-content:start}
.note-side .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.note-side .meta{display:grid;gap:9px}
.note-side .meta div{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.note-side .meta span{color:var(--muted)}
.note-side .btn-solid,.note-side .btn-ghost{justify-content:center;width:100%;font-size:14px;padding:11px 14px}
.note-side .warn{font-size:13px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}

/* 6d. insights */
.ins{display:grid;grid-template-columns:1.5fr 1fr}
.ins-main{padding:clamp(16px,2.2vw,26px);display:grid;gap:20px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:13px}
.kpi b{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:block;font-weight:400}
.kpi strong{font-family:var(--display);font-size:clamp(19px,2vw,26px);font-weight:800;letter-spacing:-.03em;display:block;margin-top:6px}
.kpi span{font-family:var(--mono);font-size:10.5px;color:var(--petrol)}
.kpi span.dn{color:var(--clay)}
.chartbox{border:1px solid var(--line);border-radius:12px;padding:16px}
.chartbox .ch-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.chartbox .ch-h b{font-size:14px;font-weight:600}
.chartbox .ch-h span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.bars{display:flex;align-items:flex-end;gap:clamp(4px,1vw,11px);height:132px;border-bottom:1px solid var(--line)}
.bars div{flex:1;display:grid;align-content:end;gap:5px;text-align:center;min-width:0}
.bars i{display:block;border-radius:5px 5px 0 0;background:var(--mint);border:1px solid var(--petrol);border-bottom:0;height:var(--h)}
.bars i.hi{background:var(--petrol)}
.bars em{font-family:var(--mono);font-size:9.5px;font-style:normal;color:var(--faint);padding-top:6px}
.ins-side{border-left:1px solid var(--line);background:var(--chalk);padding:clamp(16px,2.2vw,24px);display:grid;gap:20px;align-content:start}
.ins-side h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:400}
.donut{display:flex;gap:16px;align-items:center;margin-top:14px}
.donut .ring{width:84px;height:84px;border-radius:50%;flex:none;background:conic-gradient(var(--petrol) 0 46%, var(--clay) 46% 71%, var(--amber) 71% 88%, var(--line-mid) 88% 100%);mask:radial-gradient(circle,transparent 52%,#000 53%)}
.donut ul{display:grid;gap:7px;min-width:0}
.donut li{font-family:var(--mono);font-size:11px;display:flex;align-items:center;gap:7px;color:var(--muted)}
.donut li b{width:9px;height:9px;border-radius:2px;flex:none}
.donut li span{color:var(--ink);margin-left:auto}
.toplist{display:grid;border-top:1px solid var(--line);margin-top:12px}
.toplist div{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.toplist .rev{font-family:var(--mono);font-size:12px}
.toplist .track{grid-column:1/-1;height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.toplist .track i{display:block;height:100%;background:var(--petrol);width:var(--w)}

/* ============================================================
   7. THE GAP
   ============================================================ */
.gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.gap-list{display:grid;border-top:1px solid var(--line)}
.gap-list div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}
.gap-list .ic{width:32px;height:32px;border:1px solid var(--line-mid);border-radius:9px;display:grid;place-items:center;color:var(--clay);flex:none}
.gap-list p{font-size:15.5px;line-height:1.55}
.gap-list p b{font-weight:600}
.gap-list p span{display:block;color:var(--muted);font-size:14.5px;margin-top:4px}

/* ============================================================
   8. FEATURES
   ============================================================ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid var(--line-mid);border-radius:16px;background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:16px;transition:border-color .2s}
.card:hover{border-color:var(--petrol)}
.card .label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);display:flex;align-items:center;gap:9px}
.card .label::after{content:"";height:1px;flex:1;background:var(--line)}
.card ul{display:grid;gap:12px}
.card li{font-size:14.5px;line-height:1.5}
.card li b{display:block;font-weight:600}
.card li span{color:var(--muted)}
.fmini{border:1px solid var(--line);border-radius:12px;background:var(--chalk);padding:13px;min-height:96px;display:grid;align-content:center;gap:8px}
.fmini-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.fmini-slots i{height:20px;border-radius:5px;border:1px solid var(--line-mid);background:var(--paper);font-style:normal}
.fmini-slots i.on{background:var(--petrol);border-color:var(--petrol)}
.fmini-slots i.x{background:repeating-linear-gradient(-45deg,transparent 0 4px,var(--line) 4px 8px)}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchips span{font-family:var(--mono);font-size:10.5px;padding:5px 9px;border-radius:999px;border:1px solid var(--line-mid);background:var(--paper)}
.fchips span.hi{border-color:var(--petrol);background:var(--mint-2);color:var(--petrol)}
.fsms{display:grid;gap:6px}
.fsms i{font-style:normal;font-family:var(--mono);font-size:10.5px;padding:8px 10px;border-radius:10px 10px 10px 3px;border:1px solid var(--line-mid);background:var(--paper);color:var(--muted)}
.fsms i.me{border-color:var(--petrol);background:var(--mint-2);color:var(--petrol);border-radius:10px 10px 3px 10px;justify-self:end}

.card-wide{grid-column:span 3;flex-direction:row;align-items:center;gap:clamp(20px,4vw,52px);background:var(--ink);border-color:var(--ink);color:#fff;padding:26px}
.card-wide:hover{border-color:var(--ink)}
.card-wide .txt{max-width:44ch;display:grid;gap:12px}
.card-wide .label{color:var(--mint)}
.card-wide .label::after{background:color-mix(in oklab,#fff 20%,transparent)}
.card-wide p{font-size:15px;line-height:1.6;color:color-mix(in oklab,#fff 74%,transparent)}
.advisor{flex:1;border:1px solid color-mix(in oklab,#fff 22%,transparent);border-radius:12px;padding:16px;display:grid;gap:12px;min-width:0}
.advisor .q{font-family:var(--mono);font-size:11.5px;color:var(--mint);letter-spacing:.04em}
.advisor .a{font-size:14.5px;line-height:1.55}
.advisor .a b{color:var(--amber);font-weight:600}
.advisor .sparks{display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid color-mix(in oklab,#fff 18%,transparent);padding-top:12px}
.advisor .sparks div{font-family:var(--mono);font-size:10.5px;color:color-mix(in oklab,#fff 60%,transparent)}
.advisor .sparks b{display:block;color:#fff;font-size:14px;font-weight:500;margin-top:3px}

/* ============================================================
   9. DAY BOARD (grid-placed, no absolute blocks)
   ============================================================ */
.board{border:1px solid var(--line-mid);border-radius:16px;background:var(--paper);overflow:hidden;position:relative}
.board-head{display:grid;grid-template-columns:repeat(9,1fr);border-bottom:1px solid var(--line);background:var(--chalk)}
.board-head span{font-family:var(--mono);font-size:11px;color:var(--muted);padding:10px 0 9px 10px;border-right:1px solid var(--line)}
.board-head span:last-child{border-right:0}
.board-body{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(3,minmax(58px,auto));padding-bottom:8px}
.board-col{border-right:1px solid var(--line);grid-row:1 / -1}
.board-col:last-of-type{border-right:0}
.blk{margin:8px 7px;border-radius:9px;padding:8px 9px;font-family:var(--mono);font-size:10.5px;line-height:1.4;border:1px solid var(--petrol);background:var(--mint-2);color:var(--petrol);display:grid;gap:5px;position:relative;z-index:2;min-width:0}
.blk b{font-weight:500;color:var(--ink);font-size:11px;overflow-wrap:anywhere}
.blk .who{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.blk .who i{width:16px;height:16px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:8px;font-style:normal;flex:none}
.blk .bt{display:none}
.blk.b2{border-color:var(--line-mid);background:var(--chalk);color:var(--muted)}
.blk.b3{border-color:color-mix(in oklab,var(--amber) 70%,var(--ink));background:color-mix(in oklab,var(--amber) 32%,var(--paper));color:var(--ink)}
.blk.b4{border-color:var(--clay);background:color-mix(in oklab,var(--clay) 10%,var(--paper));color:var(--clay)}
.board-now{position:absolute;top:0;bottom:0;width:1px;background:var(--ink);z-index:3;pointer-events:none}
.board-now::before{content:"now";position:absolute;top:0;left:0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;padding:3px 6px;border-radius:0 0 5px 0}
.board-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px}
.board-key span{font-family:var(--mono);font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.board-key i{width:11px;height:11px;border-radius:3px;border:1px solid var(--petrol);background:var(--mint-2);font-style:normal;flex:none}
.board-key i.k2{border-color:var(--line-mid);background:var(--chalk)}
.board-key i.k3{border-color:color-mix(in oklab,var(--amber) 70%,var(--ink));background:color-mix(in oklab,var(--amber) 32%,var(--paper))}
.board-key i.k4{border-color:var(--clay);background:color-mix(in oklab,var(--clay) 10%,var(--paper))}

/* ============================================================
   10. ARCHITECTURE
   ============================================================ */
.sides{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.4vw,26px);align-items:stretch}
.side{border:1px solid var(--line-mid);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:15px;background:var(--paper)}
.side.dark{background:var(--petrol-deep);border-color:var(--petrol-deep);color:#fff}
.side .who{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line-mid);align-self:flex-start;color:var(--muted)}
.side.dark .who{border-color:color-mix(in oklab,#fff 30%,transparent);color:var(--mint)}
.side p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.side.dark p{color:color-mix(in oklab,#fff 74%,transparent)}
.side ul{display:grid;gap:9px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}
.side.dark ul{border-top-color:color-mix(in oklab,#fff 18%,transparent)}
.side li{font-family:var(--mono);font-size:12.5px;display:flex;gap:9px}
.side li::before{content:"—";color:var(--petrol)}
.side.dark li::before{color:var(--mint)}
.sides-arrow{display:grid;place-items:center;align-content:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center;min-width:96px}
.sides-arrow .flow{display:grid;gap:6px;width:100%}
.sides-arrow .flow i{height:1px;background:repeating-linear-gradient(90deg,var(--line-mid) 0 5px,transparent 5px 10px);font-style:normal}
.arch-note{margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--faint);text-align:center}

/* ============================================================
   11. COST + COMPARISON
   ============================================================ */
.costs{display:grid;gap:14px;border:1px solid var(--line-mid);border-radius:16px;padding:clamp(18px,2.4vw,28px);background:var(--paper);margin-bottom:22px}
.costs h3{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.02em}
.crow{display:grid;grid-template-columns:190px 1fr 62px;gap:14px;align-items:center;font-size:14px}
.crow .bar{height:26px;border-radius:6px;background:var(--chalk);border:1px solid var(--line);overflow:hidden}
.crow .bar i{display:block;height:100%;width:var(--w);background:var(--mint);border-right:1px solid var(--petrol);font-style:normal}
.crow.us .bar i{background:var(--petrol)}
.crow .amt{font-family:var(--mono);font-size:13px;text-align:right}
.crow.us{font-weight:600}
.costs .cn{font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.5}

.tablewrap{border:1px solid var(--line-mid);border-radius:16px;overflow:auto;background:var(--paper)}
table{width:100%;min-width:740px;border-collapse:collapse;text-align:left}
thead th{padding:18px 20px;border-bottom:1px solid var(--line-mid);vertical-align:bottom;font-weight:600;font-size:15px}
thead th:first-child{width:30%;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
thead .us{background:var(--mint-2);color:var(--petrol);font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;border-left:1px solid var(--line);border-right:1px solid var(--line)}
thead .them{color:var(--muted);font-weight:500;font-size:14.5px}
tbody th{font-weight:500;font-size:14.5px;padding:15px 20px;border-bottom:1px solid var(--line)}
tbody td{padding:15px 20px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
tbody td.us{background:var(--mint-2);color:var(--ink);font-weight:500;border-left:1px solid var(--line);border-right:1px solid var(--line)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.yes,.no{display:inline-flex;align-items:flex-start;gap:7px}
.yes svg{color:var(--petrol);flex:none;margin-top:3px}
.no svg{color:var(--faint);flex:none;margin-top:3px}
.tnote{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:14px;line-height:1.5}

/* ============================================================
   12. INDUSTRIES
   ============================================================ */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ind{border:1px solid var(--line-mid);border-radius:16px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.ind:hover{border-color:var(--petrol)}
.ind .art{height:112px;border-bottom:1px solid var(--line);background:var(--chalk);display:grid;place-items:center;color:var(--petrol)}
.ind .bd{padding:20px;display:grid;gap:11px}
.ind p{font-size:14px;line-height:1.55;color:var(--muted)}
.ind ul{display:flex;flex-wrap:wrap;gap:6px}
.ind li{font-family:var(--mono);font-size:10.5px;padding:4px 8px;border-radius:999px;background:var(--chalk)}

/* ============================================================
   13. QUOTES
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{border:1px solid color-mix(in oklab,#fff 20%,transparent);border-radius:16px;padding:24px;display:grid;gap:16px;align-content:start}
.quote .stars{display:flex;gap:3px;color:var(--amber)}
.quote blockquote{font-family:var(--display);font-size:clamp(17px,1.5vw,20px);line-height:1.35;font-weight:600;letter-spacing:-.02em;text-wrap:pretty}
.quote .by{display:flex;align-items:center;gap:11px;padding-top:16px;border-top:1px solid color-mix(in oklab,#fff 16%,transparent)}
.quote .by .avatar{background:transparent;border-color:color-mix(in oklab,#fff 30%,transparent);color:var(--mint)}
.quote .by div{font-size:13.5px}
.quote .by span{display:block;font-family:var(--mono);font-size:11px;color:color-mix(in oklab,#fff 58%,transparent);margin-top:2px}

/* ============================================================
   14. PRICING
   ============================================================ */
.toggle{display:inline-flex;border:1px solid var(--line-mid);border-radius:999px;padding:4px;background:var(--paper)}
.toggle label{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:8px 15px;border-radius:999px;cursor:pointer;color:var(--muted)}
#billing{position:absolute;opacity:0;pointer-events:none}
#billing:focus-visible + .toggle{outline:2px solid var(--petrol);outline-offset:3px}
.toggle .lm{background:var(--ink);color:#fff}
body:has(#billing:checked) .toggle .lm{background:transparent;color:var(--muted)}
body:has(#billing:checked) .toggle .ly{background:var(--ink);color:#fff}
.per-y{display:none}
body:has(#billing:checked) .per-m{display:none}
body:has(#billing:checked) .per-y{display:block}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.price-grid.two{grid-template-columns:repeat(2,1fr)}

/* Booked Payments block */
.pay{margin-top:16px;border:1px solid var(--line-mid);border-radius:18px;background:var(--paper);display:grid;grid-template-columns:.86fr 1.14fr;overflow:hidden}
.pay-l{padding:clamp(22px,3vw,32px);display:grid;gap:16px;align-content:start;border-right:1px solid var(--line)}
.pay-l .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pay-l h3{font-family:var(--display);font-size:clamp(21px,2.2vw,26px);font-weight:800;letter-spacing:-.03em}
.pay-l p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.rates{display:grid;border-top:1px solid var(--line)}
.rates div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.rates b{font-family:var(--mono);font-size:12.5px;font-weight:500;white-space:nowrap}
.rates .free b{color:var(--petrol)}
.pay-note{font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.5}

.pay-r{padding:clamp(22px,3vw,32px);background:var(--chalk);display:grid;gap:18px;align-content:start;min-width:0}
.pay-r .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.dial{display:grid;gap:9px}
.dial .l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}
.dial .l span{font-family:var(--mono);font-size:13px}
.dials{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gross{display:grid;gap:4px;padding-top:4px}
.gross b{font-family:var(--display);font-size:clamp(38px,5.4vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1}
.gross em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.keepbar{display:flex;height:26px;border:1px solid var(--line-mid);border-radius:8px;overflow:hidden;background:var(--paper)}
.keepbar i{display:block;height:100%;font-style:normal}
.keepbar .keep{background:var(--petrol)}
.keepbar .fee{background:color-mix(in oklab,var(--clay) 30%,var(--paper));border-left:1px solid var(--clay);min-width:3px}
.legend{display:grid;gap:9px}
.legend div{display:flex;align-items:baseline;gap:9px;font-size:14.5px}
.legend i{width:10px;height:10px;border-radius:3px;flex:none;translate:0 -1px}
.legend .k i{background:var(--petrol)}
.legend .f i{background:color-mix(in oklab,var(--clay) 30%,var(--paper));border:1px solid var(--clay)}
.legend b{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap}
.legend .f{color:var(--muted)}
.sms-row{display:grid;gap:9px;padding-top:16px;border-top:1px solid var(--line-mid)}
.plan{border:1px solid var(--line-mid);border-radius:18px;padding:26px;background:var(--paper);display:flex;flex-direction:column;gap:18px}
.plan.pick{border-color:var(--petrol);background:var(--mint-2)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.plan h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.plan .flag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--petrol);color:#fff;padding:4px 9px;border-radius:999px}
.plan .flag.alt{background:var(--ink)}
.amount{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.amount b{font-family:var(--display);font-size:clamp(38px,4.4vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1}
.amount span{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.4}
.plan > p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.plan ul{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line);margin-top:auto}
.plan.pick ul{border-top-color:color-mix(in oklab,var(--petrol) 26%,transparent)}
.plan li{font-size:14.5px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;line-height:1.5}
.plan li svg{color:var(--petrol);margin-top:4px}
.plan .btn-solid,.plan .btn-ghost{justify-content:center;width:100%}
.calc{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.calc .l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.calc output{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:var(--line-mid);outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--petrol);border:3px solid var(--paper);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--petrol);border:3px solid var(--paper);cursor:pointer}
.price-foot{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.price-foot span{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* ============================================================
   15. SECURITY
   ============================================================ */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trust{border:1px solid color-mix(in oklab,#fff 20%,transparent);border-radius:16px;padding:24px;display:grid;gap:12px;align-content:start}
.trust .ic{width:38px;height:38px;border:1px solid color-mix(in oklab,#fff 26%,transparent);border-radius:11px;display:grid;place-items:center;color:var(--mint)}
.trust h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.trust p{font-size:14.5px;line-height:1.55;color:color-mix(in oklab,#fff 72%,transparent)}
.trust .code{font-family:var(--mono);font-size:11px;color:var(--mint);border:1px solid color-mix(in oklab,#fff 18%,transparent);border-radius:8px;padding:9px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   16. SETUP
   ============================================================ */
.setup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.setup-steps{display:grid;border-top:1px solid var(--line);margin-top:28px}
.setup-steps div{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.setup-steps b{font-family:var(--mono);font-size:11px;color:var(--petrol);width:24px;height:24px;border:1px solid var(--mint);background:var(--mint-2);border-radius:50%;display:grid;place-items:center;font-weight:400;flex:none}
.setup-steps p{font-size:15.5px;line-height:1.5}
.setup-steps span{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.codebox{border:1px solid var(--line-mid);border-radius:16px;overflow:hidden;background:var(--ink)}
.codebox .cb{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid color-mix(in oklab,#fff 14%,transparent);font-family:var(--mono);font-size:11px;color:color-mix(in oklab,#fff 58%,transparent)}
.codebox .cb i{width:8px;height:8px;border-radius:50%;background:color-mix(in oklab,#fff 24%,transparent);font-style:normal;flex:none}
.codebox pre{margin:0;padding:20px 16px 24px;font-family:var(--mono);font-size:clamp(12px,1.05vw,13.5px);line-height:1.8;color:#fff;overflow-x:auto}
.codebox .k{color:var(--mint)}
.codebox .v{color:var(--amber)}
.codebox .c{color:color-mix(in oklab,#fff 42%,transparent)}
.codebox .caret{display:inline-block;width:7px;height:1em;translate:0 2px;background:var(--mint)}
@media (prefers-reduced-motion:no-preference){.codebox .caret{animation:blink 1.1s steps(1,end) infinite}@keyframes blink{50%{opacity:0}}}

/* ============================================================
   17. FAQ
   ============================================================ */
.faq{max-width:880px;margin-inline:auto;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{display:flex;gap:16px;align-items:center;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--display);font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary .pm{margin-left:auto;width:26px;height:26px;border:1px solid var(--line-mid);border-radius:50%;display:grid;place-items:center;flex:none;transition:rotate .2s,border-color .2s}
details[open] summary .pm{rotate:45deg;border-color:var(--petrol);color:var(--petrol)}
details p{padding:0 46px 22px 0;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:70ch}

/* ============================================================
   18. CTA + STICKY BAR + FOOTER
   ============================================================ */
.cta{background:var(--petrol);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(color-mix(in oklab,#fff 7%,transparent) 1px,transparent 1px) 0 0/100% 40px,
  linear-gradient(90deg,color-mix(in oklab,#fff 7%,transparent) 1px,transparent 1px) 0 0/40px 100%;
  mask-image:radial-gradient(90% 80% at 82% 40%,#000 10%,transparent 70%)}
.cta .inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(48px,6vw,84px)}
.cta h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.2vw,52px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.cta p{margin-top:18px;font-size:16.5px;line-height:1.6;color:color-mix(in oklab,#fff 78%,transparent);max-width:44ch}
.cta .actions{margin-top:30px}
.cta-card{border:1px solid color-mix(in oklab,#fff 26%,transparent);border-radius:16px;padding:22px;display:grid;gap:14px}
.cta-card .h{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mint)}
.cta-card .field2{display:flex;align-items:center;gap:10px;border:1px solid color-mix(in oklab,#fff 30%,transparent);border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:12.5px;color:color-mix(in oklab,#fff 70%,transparent);flex-wrap:wrap}
.cta-card .field2 b{margin-left:auto;color:var(--mint);font-weight:400}
.cta-card ul{display:grid;gap:9px;padding-top:12px;border-top:1px solid color-mix(in oklab,#fff 20%,transparent)}
.cta-card li{font-size:13.5px;display:grid;grid-template-columns:auto 1fr;gap:10px;color:color-mix(in oklab,#fff 80%,transparent)}
.cta-card li svg{color:var(--mint);margin-top:4px;flex:none}

.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  border-top:1px solid var(--line-mid);
  background:color-mix(in oklab,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px);
  translate:0 100%;transition:translate .28s cubic-bezier(.2,.7,.3,1);
}
.stickybar[data-show="true"]{translate:0 0}
.stickybar .wrap{display:flex;align-items:center;gap:14px;padding-block:13px}
.stickybar .mk{color:var(--petrol);flex:none}
.stickybar .txt{min-width:0}
.stickybar .txt b{display:block;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.02em}
.stickybar .txt span{font-size:13px;color:var(--muted)}
.stickybar .acts{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.stickybar .close{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);flex:none}
.stickybar .close:hover{border-color:var(--ink);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.stickybar{transition:none}}

footer{background:var(--ink);color:#fff;padding-block:clamp(44px,5vw,68px) 26px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,48px)}
.foot-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-bottom:14px}
.foot-grid ul{display:grid;gap:10px}
.foot-grid a{font-size:14.5px;color:color-mix(in oklab,#fff 76%,transparent)}
.foot-grid a:hover{color:#fff}
.foot-about .brand .mk{color:var(--mint)}
.foot-about p{font-size:14.5px;line-height:1.6;color:color-mix(in oklab,#fff 66%,transparent);max-width:36ch;margin-top:14px}
.foot-about .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.foot-about .badges span{font-family:var(--mono);font-size:10.5px;border:1px solid color-mix(in oklab,#fff 22%,transparent);border-radius:999px;padding:5px 10px;color:color-mix(in oklab,#fff 70%,transparent)}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(34px,4vw,54px);padding-top:20px;border-top:1px solid color-mix(in oklab,#fff 16%,transparent)}
.foot-bottom p{font-family:var(--mono);font-size:11.5px;color:color-mix(in oklab,#fff 54%,transparent)}

/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .card-wide{grid-column:span 2;flex-direction:column;align-items:stretch}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid,.price-grid.two,.sec-grid,.quotes{grid-template-columns:1fr}
  .pay{grid-template-columns:1fr}
  .pay-l{border-right:0;border-bottom:1px solid var(--line)}
  .ins,.note-mock,.vid-wrap,.setup-mock{grid-template-columns:1fr}
  .ins-side,.note-side,.vid-side,.sm-side{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr}
  .hero-note{grid-template-columns:1fr;gap:9px}
  .hero-note .top,.hero-note .body,.hero-note .foot{grid-column:1;grid-row:auto}
  .hero-note .foot{border-top:1px solid var(--line);padding-top:9px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .gap-grid,.setup,.sec-head.split{grid-template-columns:1fr}
  .sides{grid-template-columns:1fr}
  .sides-arrow{min-width:0;padding-block:4px}
  .sides-arrow .flow{max-width:200px;margin-inline:auto}
  .cta .inner{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .sm-fields{grid-template-columns:repeat(2,1fr)}
  .field.wide{grid-column:span 2}
  /* day board becomes a vertical list */
  .board-head,.board-col,.board-now{display:none}
  .board-body{display:grid;grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;padding-bottom:0}
  .blk{margin:0;border-radius:0;border-inline:0;border-top:0;grid-column:auto !important;grid-row:auto !important}
  .blk:first-of-type{border-top:1px solid var(--line)}
  .blk .bt{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint)}
}
@media (max-width:660px){
  .feat-grid,.ind-grid{grid-template-columns:1fr}
  .card-wide{grid-column:span 1}
  .nrow{grid-template-columns:1fr;gap:6px}
  .tabs{width:100%}
  .tabs button{flex:1;justify-content:center;padding-inline:10px}
  .crow{grid-template-columns:1fr auto;gap:8px 12px}
  .crow .bar{grid-column:1/-1;order:3}
  .sm-fields{grid-template-columns:1fr}
  .field.wide{grid-column:span 1}
  .dials{grid-template-columns:1fr}
  .stickybar .txt span{display:none}
  .stickybar .btn-ghost{display:none}
}

/* ── Security & GDPR grid ─────────────────────────────────────────────── */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.seccard{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:18px;transition:border-color .18s,transform .18s}
.seccard:hover{border-color:var(--line-mid);transform:translateY(-2px)}
.seccard-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--mint-2);color:var(--petrol);margin-bottom:14px}
.seccard h3{margin:0 0 8px}
.seccard p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.seccard code,.tnote code{font-family:var(--mono);font-size:.88em;background:color-mix(in oklab,var(--ink) 6%,transparent);padding:1px 5px;border-radius:5px}