/* Section + component styles shared by every page. */

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(64px,9vw,130px);min-height:min(92vh,900px);display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,72px);align-items:center;width:100%}
@media(max-width:1080px){.hero-grid{grid-template-columns:1fr;gap:48px}.hero{min-height:0}}

.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);padding:7px 15px 7px 11px;border:1px solid var(--hairline);border-radius:var(--r-pill);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin-bottom:30px}
.hero-eyebrow .seed{color:var(--mint);font-size:8px;animation:pulse 2.4s ease-in-out infinite}

.hero h1{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 94,"wght" 500;font-size:clamp(42px,6.4vw,88px);line-height:.98;letter-spacing:-.035em;margin:0 0 26px;text-wrap:balance;perspective:600px}
.hero h1 em{font-style:normal;color:var(--mint);font-variation-settings:"opsz" 96,"wdth" 112,"wght" 500;text-shadow:0 0 60px var(--mint-glow-2)}
.hero h1 .light{color:var(--ink-faint)}
.hero-dek{font-size:clamp(15px,1.4vw,18.5px);line-height:1.62;color:var(--ink-soft);max-width:56ch;margin:0 0 32px;text-wrap:pretty}
.hero-dek b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.hero-tertiary{margin-bottom:26px;font-size:13.5px}
.hero-tertiary a{color:var(--ink-soft)}
.hero-tertiary a:hover{color:var(--mint)}
.cta-trust{display:grid;gap:6px;font-size:12px;color:var(--ink-mute);line-height:1.5;max-width:56ch;margin-bottom:26px}
.hero-explore{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:30px;font-size:13.5px}
.hero-explore a{color:var(--mint)}
.hero-meta{display:grid;gap:11px;padding-top:26px;border-top:1px solid var(--hairline);font-size:12.5px;color:var(--ink-faint)}
.hero-meta span{display:flex;align-items:baseline;gap:9px}
.hero-meta b{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:12px}
.hero-meta .dot{color:var(--mint);font-size:7px}

/* ── Band boundaries ──────────────────────────────────────────────
   Sections that share a background may couple tightly (padding-top:0 runs a
   hero into its own content). Across a colour change they must not: the edge
   is already the separation, and content sitting on it reads as a mistake. */
section:not(.band-invert)+section.band-invert,
section.band-invert+section:not(.band-invert){padding-top:clamp(80px,11vw,160px)!important}

/* Page hero (sub-pages) */
.phero{padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(40px,5vw,72px)}
.phero h1{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 94,"wght" 500;font-size:clamp(38px,5.6vw,76px);line-height:.99;letter-spacing:-.034em;margin:0 0 22px;max-width:20ch;text-wrap:balance;perspective:600px}
.phero h1 em{font-style:normal;color:var(--mint)}
.phero h1 .light{color:var(--ink-faint)}
.phero .dek{font-size:clamp(15px,1.4vw,18.5px);line-height:1.64;color:var(--ink-soft);max-width:62ch;margin:0 0 30px;text-wrap:pretty}
.phero .dek b{color:var(--ink);font-weight:600}

/* ── Chat simulator ───────────────────────────────────────────── */
.sim-stage{display:grid;place-items:center;perspective:1400px}
.hero-chat{margin-top:clamp(60px,14vw,220px)}
@media(max-width:1080px){.hero-chat{margin-top:0}}
.sim-monitor{width:min(100%,430px);transform-style:preserve-3d;transform:rotateY(-8deg) rotateX(3.5deg);transition:transform 900ms var(--ease-out-strong)}
.sim-monitor:hover{transform:rotateY(-3deg) rotateX(1deg)}
.sim-screen{border-radius:18px;padding:12px;background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border:1px solid var(--hairline-2);box-shadow:var(--sh-3),0 0 34px var(--mint-glow-3),inset 0 1px 0 rgba(255,255,255,.14)}
/* In light mode the monitor keeps its dark bezel — a light frame on a light
   page has no edge — but the SCREEN stays light, so the chat UI inside reads
   in light mode like the rest of the page. Explicit colours rather than token
   overrides, so nothing leaks into the screen contents. */
html[data-theme="light"] .sim-screen{background:linear-gradient(150deg,#143527 0%,#0A1F16 100%);border-color:rgba(255,255,255,.16);box-shadow:var(--sh-3),0 0 30px var(--mint-glow-3),inset 0 1px 0 rgba(255,255,255,.16)}
html[data-theme="light"] .sim-neck{background:linear-gradient(180deg,#143527,#0A1F16);border-inline-color:rgba(255,255,255,.14)}
html[data-theme="light"] .sim-base{background:linear-gradient(180deg,#16382A,#091C13);border-color:rgba(255,255,255,.14)}
.sim-screen-inner{border-radius:11px;overflow:hidden;background:rgba(3,14,9,.94);border:1px solid var(--hairline);backdrop-filter:blur(24px) saturate(120%);-webkit-backdrop-filter:blur(24px) saturate(120%)}
html[data-theme="light"] .sim-screen-inner{background:rgba(255,255,255,.97)}
.sim-neck{width:74px;height:22px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border-inline:1px solid var(--hairline)}
.sim-base{width:190px;height:9px;margin:0 auto;border-radius:0 0 12px 12px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));border:1px solid var(--hairline);border-top:none;box-shadow:0 22px 50px rgba(0,0,0,.5)}

.chat-head{display:flex;align-items:center;gap:12px;padding:15px 17px;border-bottom:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.chat-avatar{width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--hairline)}
.chat-avatar svg{width:100%;height:100%}
.chat-id{flex:1;min-width:0}
.chat-name{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-role{font-size:11px;color:var(--ink-faint);font-family:var(--mono);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);padding:5px 10px;border-radius:var(--r-pill);background:var(--mint-glow-3);border:1px solid var(--mint-rim);white-space:nowrap}
.chat-status .dot{width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint-glow);animation:pulse 2s ease-in-out infinite}
@media(max-width:420px){.chat-status{display:none}}

.chat-body{padding:16px 17px;display:grid;gap:13px;min-height:270px;align-content:start}
.sim-ticket-head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding-bottom:11px;border-bottom:1px dashed var(--hairline)}
.sim-ticket-id{color:var(--mint)}
.chat-msg{display:flex;opacity:0;transform:translateY(10px);animation:msgIn 480ms var(--ease-out-strong) forwards}
@keyframes msgIn{to{opacity:1;transform:none}}
.chat-msg-user{justify-content:flex-end}
.chat-bubble{max-width:84%;padding:11px 14px;border-radius:15px;font-size:13.5px;line-height:1.52;text-wrap:pretty}
.chat-msg-user .chat-bubble{background:var(--panel-2);border:1px solid var(--hairline);border-bottom-right-radius:5px;color:var(--ink-soft)}
.chat-msg-aria .chat-bubble{background:linear-gradient(160deg,var(--mint-glow-2),transparent);border:1px solid var(--mint-rim);border-bottom-left-radius:5px;color:var(--ink)}
.chat-stamp{font-family:var(--mono);font-size:9.5px;color:var(--ink-mute);margin-top:6px;letter-spacing:.06em}
.chat-typing{display:inline-flex;gap:4px;padding:13px 15px;border-radius:15px;border-bottom-left-radius:5px;background:var(--panel);border:1px solid var(--hairline)}
.chat-typing i{width:5px;height:5px;border-radius:50%;background:var(--mint);animation:typing 1.3s ease-in-out infinite}
.chat-typing i:nth-child(2){animation-delay:.16s}
.chat-typing i:nth-child(3){animation-delay:.32s}
@keyframes typing{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.sim-resolved{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;background:var(--mint-glow-3);border:1px solid var(--mint-rim);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mint);opacity:0;animation:msgIn 500ms var(--ease-spring) forwards}
.sim-check{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--mint);color:#001A0B;font-size:9px}
.sim-tag{color:var(--ink-soft)}
.sim-time{margin-left:auto;color:var(--ink-mute)}
.sim-footer{display:flex;align-items:center;gap:8px;padding:10px 17px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute)}
.sim-pulse{color:var(--mint);font-size:7px;animation:pulse 2s ease-in-out infinite}

/* ── KPI strip ────────────────────────────────────────────────── */
.kpis-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden}
@media(max-width:900px){.kpis-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.kpis-grid{grid-template-columns:1fr}}
.kpi{padding:26px 24px;background:rgba(6,22,15,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background var(--dur) var(--ease-out)}
html[data-theme="light"] .kpi{background:rgba(255,255,255,.62)}
.kpi:hover{background:rgba(10,31,22,.75)}
html[data-theme="light"] .kpi:hover{background:rgba(255,255,255,.85)}
.kpi .label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.kpi .value{font-family:var(--display);font-variation-settings:"opsz" 72,"wdth" 100,"wght" 500;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:-.03em;margin-bottom:12px;display:flex;align-items:baseline;gap:5px}
.kpi .value em{font-style:normal;color:var(--mint);text-shadow:0 0 40px var(--mint-glow-2)}
.kpi .value .unit{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-faint);letter-spacing:0}
.kpi .caption{font-size:12.5px;line-height:1.5;color:var(--ink-faint);text-wrap:pretty}

/* ── Built-on strip ───────────────────────────────────────────── */
.stack-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;padding:18px 24px;margin-top:22px;border:1px solid var(--hairline);border-radius:var(--r-pill);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12.5px;color:var(--ink-faint)}
.stack-strip .stack-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
@media(max-width:720px){.stack-strip{border-radius:var(--r-card)}}

/* ── Generic card ─────────────────────────────────────────────── */
.card{position:relative;padding:28px;border-radius:var(--r-card);border:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform-style:preserve-3d;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out);overflow:hidden}
html[data-theme="light"] .card{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5))}
.card::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--mint-glow-2),transparent 65%);transition:opacity var(--dur) var(--ease-out);pointer-events:none}
.card:hover{border-color:var(--mint-rim);box-shadow:var(--sh-3),0 0 44px var(--mint-glow-3)}
.card:hover::before{opacity:1}
.card > *{position:relative}

/* ── How it works ─────────────────────────────────────────────── */
.hiw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:900px){.hiw-grid{grid-template-columns:1fr}}
.hiw-step{position:relative;padding:30px 28px 34px;border-radius:var(--r-card);border:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform-style:preserve-3d;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);overflow:hidden}
html[data-theme="light"] .hiw-step{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5))}
.hiw-step::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--mint-glow-2),transparent 65%);transition:opacity var(--dur) var(--ease-out);pointer-events:none}
.hiw-step:hover{border-color:var(--mint-rim);box-shadow:var(--sh-3)}
.hiw-step:hover::before{opacity:1}
.hiw-step > *{position:relative}
.hiw-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}
.hiw-no{font-family:var(--display);font-variation-settings:"opsz" 72,"wght" 500;font-size:44px;line-height:1;color:var(--mint);opacity:.9;letter-spacing:-.04em}
.hiw-meta{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}
.hiw-title{font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:20px;line-height:1.22;letter-spacing:-.02em;margin:0 0 12px}
.hiw-body{font-size:14px;line-height:1.62;color:var(--ink-soft);margin:0;text-wrap:pretty}

/* ── Integrations ─────────────────────────────────────────────── */
.integ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:14px;perspective:1100px}
.integ{position:relative;display:flex;flex-direction:column;gap:22px;padding:24px 22px 22px;border-radius:18px;border:1px solid var(--hairline);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform-style:preserve-3d;overflow:hidden;transition:transform 560ms var(--ease-spring-soft),border-color 420ms var(--ease-out),background 420ms var(--ease-out),box-shadow 560ms var(--ease-out)}
.integ::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(120% 90% at 22% 0%,color-mix(in oklab,var(--swatch) 20%,transparent) 0%,transparent 62%);transition:opacity 480ms var(--ease-out)}
.integ:hover{transform:translateY(-6px);border-color:color-mix(in oklab,var(--swatch) 50%,transparent);background:var(--panel-2);box-shadow:0 22px 46px rgba(0,0,0,.16)}
.integ:hover::before{opacity:1}
.integ > *{position:relative}
/* Two nested elements on purpose: the outer owns the idle float animation, the
   inner owns rotation + the hover transform. On one element the keyframes and
   the transition would fight over transform. */
.integ-chip{width:56px;height:56px;transform-style:preserve-3d;animation:chipFloat 7.5s ease-in-out infinite;animation-delay:calc(var(--d,0) * -820ms)}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.integ-face{width:100%;height:100%;border-radius:16px;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;background:linear-gradient(152deg,color-mix(in oklab,var(--swatch) 86%,white 14%) 0%,var(--swatch) 46%,color-mix(in oklab,var(--swatch) 74%,black 26%) 100%);transform:rotateX(14deg) rotateY(-16deg);box-shadow:-2px 2px 0 color-mix(in oklab,var(--swatch) 62%,black 38%),-4px 4px 0 color-mix(in oklab,var(--swatch) 48%,black 52%),-6px 6px 0 color-mix(in oklab,var(--swatch) 34%,black 66%),-10px 14px 26px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.42);transition:transform 620ms var(--ease-spring-soft),box-shadow 620ms var(--ease-out)}
.integ-face svg{width:25px;height:25px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
/* Specular sweep, parked off-face until hover */
.integ-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(114deg,transparent 32%,rgba(255,255,255,.48) 50%,transparent 68%);transform:translateX(-120%);transition:transform 900ms var(--ease-out)}
.integ:hover .integ-face{transform:rotateX(3deg) rotateY(-4deg) scale(1.08);box-shadow:-1px 1px 0 color-mix(in oklab,var(--swatch) 62%,black 38%),-2px 2px 0 color-mix(in oklab,var(--swatch) 48%,black 52%),-3px 3px 0 color-mix(in oklab,var(--swatch) 34%,black 66%),-8px 18px 34px rgba(0,0,0,.28),0 0 32px color-mix(in oklab,var(--swatch) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.integ:hover .integ-face::after{transform:translateX(120%)}
.integ-meta{margin-top:auto}
.integ .name{font-size:16.5px;font-weight:600;letter-spacing:-.016em;margin-bottom:3px}
.integ .role{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
@media(prefers-reduced-motion:reduce){.integ-chip{animation:none}}

/* ── Teaser grid ──────────────────────────────────────────────── */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:1000px){.teaser-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.teaser-grid{grid-template-columns:1fr}}
.teaser-card{display:flex;flex-direction:column;padding:28px;border-radius:var(--r-card);border:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--ink);transform-style:preserve-3d;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);overflow:hidden;min-height:230px}
html[data-theme="light"] .teaser-card{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5))}
.teaser-card::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--mint-glow-2),transparent 65%);transition:opacity var(--dur) var(--ease-out);pointer-events:none}
.teaser-card:hover{border-color:var(--mint-rim);box-shadow:var(--sh-3),0 0 40px var(--mint-glow-3);color:var(--ink)}
.teaser-card:hover::before{opacity:1}
.teaser-card > *{position:relative}
.teaser-card.is-featured{border-color:var(--mint-rim);background:linear-gradient(165deg,var(--mint-glow-3),rgba(255,255,255,.02))}
.teaser-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:26px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.teaser-no{color:var(--mint)}
.teaser-label{color:var(--ink-mute)}
.teaser-title{font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:21px;line-height:1.2;letter-spacing:-.022em;margin:0 0 12px;text-wrap:balance}
.teaser-blurb{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px;text-wrap:pretty}
.teaser-cta{margin-top:auto;font-size:13px;font-weight:500;color:var(--mint);display:inline-flex;align-items:center;gap:6px;transition:gap var(--dur) var(--ease-drawer)}
.teaser-card:hover .teaser-cta{gap:11px}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-list{display:grid;gap:10px}
.faq-item{border:1px solid var(--hairline);border-radius:16px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.faq-item[open]{border-color:var(--mint-rim);background:var(--panel-2)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;cursor:pointer;list-style:none;user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{font-size:16px;font-weight:500;letter-spacing:-.012em;text-wrap:pretty}
.faq-toggle{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--hairline);color:var(--mint);font-size:15px;transition:transform var(--dur) var(--ease-spring),background var(--dur) ease}
.faq-item[open] .faq-toggle{transform:rotate(45deg);background:var(--mint-glow-2)}
.faq-body{padding:0 24px 22px;overflow:hidden;transition:height 320ms var(--ease-drawer),opacity 320ms ease}
.faq-body p{font-size:14.5px;line-height:1.68;color:var(--ink-soft);margin:0 0 14px;text-wrap:pretty}
.faq-body p:last-of-type{margin-bottom:0}
.faq-meta{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--hairline)}
.faq-teaser-more{margin-top:26px;font-size:14px}

/* ── Guarantee ────────────────────────────────────────────────── */
.guarantee{padding-block:clamp(72px,9vw,140px);text-align:center;position:relative}
.guarantee::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 40%,var(--mint-glow-2),transparent 70%)}
.guarantee .frame{position:relative}
.seal{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);padding:8px 18px;border:1px solid var(--mint-rim);border-radius:var(--r-pill);background:var(--mint-glow-3);margin-bottom:32px}
.seal-link{text-decoration:none;transition:border-color .2s,color .2s}
.seal-link .seal-ar{margin-left:.6em;opacity:.5;display:inline-block;transition:transform .2s,opacity .2s}
.seal-link:hover{border-color:currentColor;color:var(--mint)}
.seal-link:hover .seal-ar{transform:translateX(3px);opacity:1}
.guarantee h2{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 96,"wght" 500;font-size:clamp(30px,4.6vw,60px);line-height:1.04;letter-spacing:-.032em;margin:0 auto 26px;max-width:22ch;text-wrap:balance}
.guarantee h2 em{font-style:normal;color:var(--mint);text-shadow:0 0 60px var(--mint-glow-2)}
.guarantee p{font-size:15px;line-height:1.68;color:var(--ink-soft);max-width:74ch;margin:0 auto 18px;text-wrap:pretty}
.guarantee p b{color:var(--ink)}
.guarantee-fine{font-size:13px!important;color:var(--ink-faint)!important;max-width:64ch!important}
.guarantee-fine a{color:var(--mint);white-space:nowrap}
.guarantee .cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:34px}
.guarantee .cta-trust{justify-items:center;text-align:center;margin:22px auto 0;max-width:70ch}

/* ── Demo video ───────────────────────────────────────────────── */
.demo-video-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline-2);box-shadow:var(--sh-3),0 0 40px var(--mint-glow-3);background:#000;aspect-ratio:16/9}
.demo-video{width:100%;height:100%;display:block;object-fit:cover}

/* ── Pricing ──────────────────────────────────────────────────── */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
@media(max-width:1100px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.price-grid{grid-template-columns:1fr}}
.tier{display:flex;flex-direction:column;padding:28px 24px;border-radius:var(--r-card);border:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform-style:preserve-3d;position:relative;overflow:hidden;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
html[data-theme="light"] .tier{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.52))}
.tier::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--mint-glow-2),transparent 65%);transition:opacity var(--dur) var(--ease-out);pointer-events:none}
.tier:hover{border-color:var(--mint-rim);box-shadow:var(--sh-3)}
.tier:hover::before{opacity:1}
.tier > *{position:relative}
.tier.featured{border-color:var(--mint-rim);background:linear-gradient(170deg,var(--mint-glow-3),rgba(255,255,255,.02))}
.tier-flag{position:absolute;top:0;right:0;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#001A0B;background:var(--mint);padding:5px 12px;border-radius:0 var(--r-card) 0 12px}
html[data-theme="light"] .tier-flag{color:#fff}
.tier-name{font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:19px;letter-spacing:-.02em;margin:0 0 6px}
.tier-for{font-size:12.5px;color:var(--ink-faint);margin:0 0 22px;min-height:2.6em;text-wrap:pretty}
.tier-price{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.tier-price .cur{font-size:17px;color:var(--ink-faint)}
.tier-price .amt{font-family:var(--display);font-variation-settings:"opsz" 72,"wght" 500;font-size:clamp(34px,3.4vw,44px);line-height:1;letter-spacing:-.035em;color:var(--mint)}
.tier-price .per{font-size:12.5px;color:var(--ink-faint)}
.tier-setup{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-mute);margin-bottom:22px}
.tier-list{list-style:none;margin:0 0 auto;padding:0 0 24px;display:grid;gap:10px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.tier-list li{display:flex;gap:9px;align-items:baseline;text-wrap:pretty}
.tier-list li::before{content:"→";color:var(--mint);flex:none;font-size:11px}
/* The CTAs sit at the card foot (.tier-list carries the margin-bottom:auto),
   evenly spaced. margin-top:auto used to be on the buttons themselves, which
   put a second auto margin between them: flexbox then split the card's free
   space BETWEEN the two CTAs, so the gap varied with how long the feature
   list was -- nearly touching on Growth, far apart on Scale.
   :not([hidden]) keeps the gap off when the buy button is still gated. */
.tier .btn{justify-content:center}
.tier .btn:not([hidden]) + .btn{margin-top:10px}

/* ── Comparison table ─────────────────────────────────────────── */
.ctable-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-card);background:rgba(6,22,15,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme="light"] .ctable-wrap{background:rgba(255,255,255,.65)}
/* The comparison table scrolls sideways on anything narrower than a laptop.
   Without an edge treatment there is nothing on screen that says so, and the
   columns past the fold read as if they do not exist. compare-page.js turns
   this on only while there is actually more table to the right. */
.ctable-shell{position:relative}
.ctable-shell::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;border-radius:0 var(--r-card) var(--r-card) 0;background:linear-gradient(90deg,rgba(6,22,15,0),rgba(6,22,15,.72));opacity:0;transition:opacity var(--dur) var(--ease-out)}
html[data-theme="light"] .ctable-shell::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.88))}
.ctable-shell.can-scroll::after{opacity:1}
.ctable{width:100%;border-collapse:collapse;min-width:760px;font-size:13.5px}
.ctable th,.ctable td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top;text-wrap:pretty}
.ctable thead th{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;position:sticky;top:0;background:rgba(6,22,15,.92);backdrop-filter:blur(12px);z-index:2}
html[data-theme="light"] .ctable thead th{background:rgba(248,250,247,.95)}
.ctable thead th.us{color:var(--mint)}
.ctable tbody tr{transition:background var(--dur-fast) ease}
.ctable tbody tr:hover{background:var(--panel)}
.ctable tbody tr:last-child td,.ctable tbody tr:last-child th{border-bottom:none}
.ctable .feat{color:var(--ink);font-weight:500;text-align:left}
.ctable td.us{color:var(--ink);background:var(--mint-glow-3)}
.ctable .yes{color:var(--mint)}
.ctable .no{color:var(--ink-mute)}
.ctable .part{color:var(--amber)}

/* ── Flow rows ────────────────────────────────────────────────── */
.flow-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--hairline)}
.flow-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.35fr) auto;gap:20px;align-items:center;padding:22px 24px;background:rgba(6,22,15,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background var(--dur) var(--ease-out),padding-left var(--dur) var(--ease-out)}
html[data-theme="light"] .flow-row{background:rgba(255,255,255,.7)}
.flow-row:hover{background:rgba(12,36,24,.85);padding-left:32px}
html[data-theme="light"] .flow-row:hover{background:rgba(255,255,255,.92)}
.flow-no{font-family:var(--display);font-variation-settings:"opsz" 48,"wght" 500;font-size:30px;line-height:1;color:var(--mint);opacity:.85;letter-spacing:-.04em}
.flow-name{font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:18px;letter-spacing:-.02em;line-height:1.25}
.flow-desc{font-size:13.5px;line-height:1.58;color:var(--ink-soft);text-wrap:pretty}
.flow-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.flow-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--hairline);white-space:nowrap}
@media(max-width:1000px){
  .flow-row{grid-template-columns:48px 1fr;gap:8px 16px;padding:20px}
  .flow-desc{grid-column:2}
  .flow-tags{grid-column:2;justify-content:flex-start;margin-top:4px}
}

/* ── Tone registers / feature cards ───────────────────────────── */
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:900px){.tri-grid{grid-template-columns:1fr}}
.duo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media(max-width:820px){.duo-grid{grid-template-columns:1fr}}
.card-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:18px}
.card-title{font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:20px;line-height:1.22;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.card-body{font-size:14px;line-height:1.62;color:var(--ink-soft);margin:0;text-wrap:pretty}
.card-quote{margin:18px 0 0;padding:14px 16px;border-left:2px solid var(--mint-rim);background:var(--mint-glow-3);border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.58;color:var(--ink-soft);font-style:italic;text-wrap:pretty}

/* ── Spec list (definition rows) ──────────────────────────────── */
.spec-list{display:grid;gap:0;border-top:1px solid var(--hairline)}
.spec-row{display:grid;grid-template-columns:minmax(160px,.42fr) 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--hairline)}
.spec-key{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.spec-val{font-size:14.5px;line-height:1.64;color:var(--ink-soft);text-wrap:pretty}
.spec-val b{color:var(--ink)}
@media(max-width:680px){.spec-row{grid-template-columns:1fr;gap:8px}}

/* ── Slot meter (founding) ────────────────────────────────────── */
.slots{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 34px}
.slot{flex:1 1 120px;min-width:110px;padding:18px 16px;border-radius:14px;border:1px solid var(--hairline);background:var(--panel);text-align:center;transition:border-color var(--dur) ease,background var(--dur) ease}
.slot.taken{opacity:.42}
.slot.open{border-color:var(--mint-rim);background:var(--mint-glow-3)}
.slot-no{font-family:var(--display);font-variation-settings:"opsz" 48,"wght" 500;font-size:26px;line-height:1;letter-spacing:-.03em;margin-bottom:7px}
.slot.open .slot-no{color:var(--mint)}
.slot-state{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.slot.open .slot-state{color:var(--mint)}

/* ── Callout ──────────────────────────────────────────────────── */
.callout{padding:26px 28px;border-radius:var(--r-card);border:1px solid var(--mint-rim);background:linear-gradient(165deg,var(--mint-glow-3),transparent);display:grid;gap:10px}
.callout :is(h2,h3){font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:19px;margin:0;letter-spacing:-.02em}
.callout p{margin:0;font-size:14px;line-height:1.62;color:var(--ink-soft);text-wrap:pretty}

/* ── Closing CTA ──────────────────────────────────────────────── */
.closer{padding-block:clamp(72px,9vw,140px);text-align:center;position:relative}
.closer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 65% at 50% 45%,var(--mint-glow-2),transparent 70%)}
.closer .frame{position:relative}
.closer h2{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 96,"wght" 500;font-size:clamp(32px,5vw,66px);line-height:1.02;letter-spacing:-.034em;margin:0 auto 22px;max-width:20ch;text-wrap:balance}
.closer h2 em{font-style:normal;color:var(--mint);text-shadow:0 0 60px var(--mint-glow-2)}
.closer p{font-size:15.5px;line-height:1.65;color:var(--ink-soft);max-width:60ch;margin:0 auto 32px;text-wrap:pretty}
.closer .btn-row{justify-content:center}

/* ── Section rail ─────────────────────────────────────────────── */
.rail{position:sticky;top:104px;align-self:start;display:grid;gap:3px;font-size:13px}
.rail a{padding:8px 14px;border-radius:var(--r-pill);color:var(--ink-mute);border:1px solid transparent;transition:color var(--dur-fast) ease,background var(--dur-fast) ease,border-color var(--dur-fast) ease}
.rail a:hover{color:var(--ink-soft);background:var(--panel)}
.rail a.on{color:var(--mint);border-color:var(--mint-rim);background:var(--mint-glow-3)}
.rail-layout{display:grid;grid-template-columns:200px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:1000px){.rail-layout{grid-template-columns:minmax(0,1fr)}.rail{display:none}}

/* ── Tone stage (Meet Aria) ───────────────────────────────────── */
.tone-stage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:940px){.tone-stage{grid-template-columns:1fr}}
.tone-left h3{font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:21px;letter-spacing:-.02em;margin:0 0 12px}
.tone-left p{font-size:14.5px;line-height:1.64;color:var(--ink-soft);margin:0 0 24px;text-wrap:pretty}
.tone-bar{display:inline-flex;padding:5px;gap:4px;border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tone-bar button{min-height:44px;padding:9px 17px;border-radius:var(--r-pill);border:none;background:transparent;color:var(--ink-faint);font-size:13px;cursor:pointer;transition:color var(--dur-fast) ease,background var(--dur) var(--ease-drawer)}
.tone-bar button:hover{color:var(--ink-soft)}
.tone-bar button[aria-pressed="true"]{background:var(--mint);color:#001A0B;font-weight:600}
html[data-theme="light"] .tone-bar button[aria-pressed="true"]{color:#fff}
@media(max-width:420px){.tone-bar{flex-direction:column;border-radius:var(--r-sm)}.tone-bar button{border-radius:var(--r-sm)}}

.tone-card{padding:26px;border-radius:var(--r-card);border:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--sh-2)}
html[data-theme="light"] .tone-card{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.52))}
.tone-card .meta{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding-bottom:16px;margin-bottom:18px;border-bottom:1px dashed var(--hairline)}
.tone-card .meta b{color:var(--mint);font-weight:500}
.tone-card .customer{font-size:14px;line-height:1.6;color:var(--ink-soft);padding:13px 16px;border-radius:14px;border-bottom-right-radius:5px;background:var(--panel-2);border:1px solid var(--hairline);margin-bottom:14px;text-wrap:pretty}
.tone-card .reply{font-size:14.5px;line-height:1.64;color:var(--ink);padding:15px 17px;border-radius:14px;border-bottom-left-radius:5px;background:linear-gradient(160deg,var(--mint-glow-2),transparent);border:1px solid var(--mint-rim);margin-bottom:18px;text-wrap:pretty;min-height:6.5em}
.tone-card .stamp{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)}
.tone-card .stamp .ok{color:var(--mint)}
.tone-fade{animation:toneFade 420ms var(--ease-out)}
@keyframes toneFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ── Configurator ─────────────────────────────────────────────── */
.cfg{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3.5vw,48px);align-items:start}
@media(max-width:940px){.cfg{grid-template-columns:minmax(0,1fr)}}
.cfg-panel{display:grid;gap:20px;padding:26px;border-radius:var(--r-card);border:1px solid var(--hairline);background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.cfg-field{display:grid;gap:9px}
.cfg-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.cfg-input{width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--hairline);background:rgba(0,0,0,.22);color:var(--ink);font:inherit;font-size:14px;transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease}
html[data-theme="light"] .cfg-input{background:rgba(255,255,255,.8)}
.cfg-input:focus{outline:none;border-color:var(--mint-rim);background:rgba(0,0,0,.32)}
.cfg-input::placeholder{color:var(--ink-mute)}
select.cfg-input{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mint) 50%),linear-gradient(135deg,var(--mint) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.cfg-input option{background:var(--bg-2);color:var(--ink)}
.cfg-pills{display:flex;flex-wrap:wrap;gap:7px}
.cfg-pill{padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--hairline);background:transparent;color:var(--ink-faint);font-size:12.5px;cursor:pointer;transition:all var(--dur-fast) ease}
.cfg-pill:hover{color:var(--ink-soft);border-color:var(--hairline-2)}
.cfg-pill[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#001A0B;font-weight:600}
html[data-theme="light"] .cfg-pill[aria-pressed="true"]{color:#fff}

.chat-card.compact{border-radius:var(--r-card);border:1px solid var(--hairline);background:rgba(3,14,9,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;box-shadow:var(--sh-2)}
html[data-theme="light"] .chat-card.compact{background:rgba(255,255,255,.82)}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:7px;padding:0 17px 14px}
.chat-chip{padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--panel);color:var(--ink-soft);font-size:12px;cursor:pointer;transition:all var(--dur-fast) ease}
.chat-chip:hover{border-color:var(--mint-rim);color:var(--ink);background:var(--panel-2)}
.chat-form{display:flex;gap:9px;padding:13px 17px;border-top:1px solid var(--hairline)}
.chat-form input{flex:1;min-width:0;padding:11px 14px;border-radius:var(--r-pill);border:1px solid var(--hairline);background:rgba(0,0,0,.22);color:var(--ink);font:inherit;font-size:13.5px}
html[data-theme="light"] .chat-form input{background:rgba(255,255,255,.85)}
.chat-form input:focus{outline:none;border-color:var(--mint-rim)}
.chat-send{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;border:none;background:var(--mint);color:#001A0B;cursor:pointer;transition:opacity var(--dur-fast) ease,transform var(--dur-fast) var(--ease-spring)}
html[data-theme="light"] .chat-send{color:#fff}
.chat-send:disabled{opacity:.35;cursor:not-allowed}
.chat-send:not(:disabled):hover{transform:scale(1.08)}
.chat-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 17px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.chat-foot .lock{color:var(--mint)}

/* ── Ops explorer (Flows) ─────────────────────────────────────── */
.ops-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:980px){.ops-grid{grid-template-columns:1fr}}
.ops-list{display:grid;gap:2px;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--hairline)}
.ops-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border:none;background:rgba(6,22,15,.62);color:var(--ink-soft);cursor:pointer;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),padding-left var(--dur) var(--ease-out)}
html[data-theme="light"] .ops-row{background:rgba(255,255,255,.72)}
.ops-row:hover{background:rgba(12,36,24,.85);color:var(--ink);padding-left:24px}
html[data-theme="light"] .ops-row:hover{background:rgba(255,255,255,.92)}
.ops-row.active{background:linear-gradient(90deg,var(--mint-glow-2),rgba(12,36,24,.85));color:var(--ink);padding-left:24px}
.ops-row-n{font-family:var(--mono);font-size:12px;color:var(--mint);letter-spacing:.04em}
.ops-row-name{font-size:14.5px;font-weight:500;letter-spacing:-.012em}
.ops-row-dest{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.ops-detail{position:sticky;top:104px;padding:30px;border-radius:var(--r-card);border:1px solid var(--mint-rim);background:linear-gradient(170deg,var(--mint-glow-3),rgba(255,255,255,.02));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--sh-2)}
@media(max-width:980px){.ops-detail{position:static}}
.ops-ix{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:18px}
.ops-detail :is(h2,h3){font-family:var(--display);font-variation-settings:"opsz" 48,"wght" 500;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.028em;margin:0 0 14px;line-height:1.1}
.ops-desc{font-size:14.5px;line-height:1.66;color:var(--ink-soft);margin:0 0 26px;text-wrap:pretty;min-height:4.8em}
.ops-pipe{display:grid;gap:2px;border:1px solid var(--hairline);border-radius:14px;overflow:hidden;background:var(--hairline)}
.ops-step{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:center;padding:14px 16px;background:rgba(3,14,9,.55)}
html[data-theme="light"] .ops-step{background:rgba(255,255,255,.7)}
.ops-step .num{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--mint-glow-2);border:1px solid var(--mint-rim);color:var(--mint);font-family:var(--mono);font-size:10px}
.ops-step .lbl{font-size:13.5px;color:var(--ink-soft)}
.ops-step .lbl b{color:var(--ink);font-weight:600}
.ops-fade{animation:toneFade 380ms var(--ease-out)}

/* ── ROI strip + implementation breakdown (Pricing) ───────────── */
.roi-strip{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;justify-content:space-between;padding:20px 26px;margin-top:26px;border-radius:var(--r-card);border:1px solid var(--mint-rim);background:linear-gradient(120deg,var(--mint-glow-3),transparent);font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.roi-strip b{color:var(--mint);font-size:15px;letter-spacing:0}
.vol-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:24px 0 8px}
.vol-cta-note{font-size:12.5px;line-height:1.5;color:var(--ink-faint);max-width:26em;text-wrap:pretty}
.roi-disclaimer,.overage-policy{font-size:12.5px;line-height:1.6;color:var(--ink-mute);margin:14px 0 0;max-width:90ch;text-wrap:pretty}
.overage-policy b{color:var(--ink-soft)}
.impl-title{font-family:var(--display);font-variation-settings:"opsz" 48,"wght" 500;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.026em;margin:0 0 12px}
.impl-lede{font-size:14.5px;line-height:1.64;color:var(--ink-soft);margin:0 0 24px;text-wrap:pretty}
.impl-list{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:820px){.impl-list{grid-template-columns:1fr}}
.impl-list li{display:flex;gap:11px;align-items:baseline;padding:14px 16px;border-radius:12px;border:1px solid var(--hairline);background:var(--panel);font-size:13.5px;line-height:1.56;color:var(--ink-soft);text-wrap:pretty}
.impl-list li::before{content:"✓";color:var(--mint);flex:none;font-size:11px}
.impl-foot{font-size:13px;color:var(--ink-faint);margin:0;text-wrap:pretty}

/* Volume slider (Pricing) */
.vol-ctrl{--p:6.8%;margin:clamp(22px,3vw,34px) 0 0;padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px);border-radius:var(--r-card);border:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.016));backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
html[data-theme="light"] .vol-ctrl{background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.54))}
.vol-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px;flex-wrap:wrap}
.vol-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:5px}
.vol-out{font-family:var(--display);font-variation-settings:"opsz" 72,"wght" 500;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.038em;color:var(--mint);font-variant-numeric:tabular-nums}
.vol-out span{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-faint);letter-spacing:0;margin-left:5px}
.vol-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;display:block;background:transparent;cursor:grab}
.vol-range:active{cursor:grabbing}
.vol-range:focus:not(:focus-visible){outline:none}
.vol-range:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:var(--r-pill)}
.vol-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--mint-deep) 0%,var(--mint) var(--p),var(--hairline-2) var(--p),var(--hairline-2) 100%)}
.vol-range::-moz-range-track{height:6px;border-radius:999px;background:var(--hairline-2)}
.vol-range::-moz-range-progress{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--mint-deep),var(--mint))}
.vol-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#F2FFF8 0%,var(--mint-soft) 42%,var(--mint) 68%,var(--mint-deep) 100%);border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(0,0,0,.42),0 0 0 5px var(--mint-glow-3);transition:box-shadow 220ms var(--ease-out),transform 160ms var(--ease-spring)}
.vol-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#F2FFF8 0%,var(--mint-soft) 42%,var(--mint) 68%,var(--mint-deep) 100%);border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(0,0,0,.42),0 0 0 5px var(--mint-glow-3)}
.vol-range:hover::-webkit-slider-thumb{transform:scale(1.09);box-shadow:0 3px 14px rgba(0,0,0,.46),0 0 0 9px var(--mint-glow-2)}
.vol-range:active::-webkit-slider-thumb{transform:scale(1.02);box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 12px var(--mint-glow-2)}
.vol-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--mint)}
.vol-scale{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-mute)}
.vol-hint{margin:16px 0 0;padding-top:15px;border-top:1px solid var(--hairline);font-size:13px;color:var(--ink-faint);text-wrap:pretty}
.vol-hint b{color:var(--mint);font-weight:600}
.tier.is-match{border-color:var(--mint);box-shadow:var(--sh-3),0 0 46px var(--mint-glow-2)}
.tier.is-match::after{content:"Your volume";position:absolute;top:0;right:0;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#001A0B;background:var(--mint);padding:5px 12px;border-radius:0 var(--r-card) 0 12px}
html[data-theme="light"] .tier.is-match::after{color:#fff}

/* ── Outcome calculator (Compare) ─────────────────────────────── */
.calcbox{padding:26px;border-radius:var(--r-card);border:1px solid var(--hairline);background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.calc-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 22px}
@media(max-width:720px){.calc-inputs{grid-template-columns:1fr}}
.calc-inputs label{display:grid;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.calc-result{font-size:15px;line-height:1.62;color:var(--ink);margin:0 0 12px;text-wrap:pretty}
.calc-result b{color:var(--mint)}
.calc-note{font-size:12.5px;line-height:1.6;color:var(--ink-mute);margin:0;text-wrap:pretty}

/* ── Standards panels ─────────────────────────────────────────── */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check-list li{display:flex;gap:10px;align-items:baseline;font-size:13.5px;color:var(--ink-soft)}
.check-list li::before{content:"✓";color:var(--mint);flex:none;font-size:11px}
.sla-group{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin:24px 0 12px;font-weight:500}
.sla-group:first-of-type{margin-top:0}

/* ── Founding ─────────────────────────────────────────────────── */
.fo-head-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:940px){.fo-head-grid{grid-template-columns:1fr}}
.fo-counter{padding:28px;border-radius:var(--r-card);border:1px solid var(--mint-rim);background:linear-gradient(170deg,var(--mint-glow-3),rgba(255,255,255,.02));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);text-align:center}
.fo-counter-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.fo-counter-num{font-family:var(--display);font-variation-settings:"opsz" 96,"wght" 500;font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.04em;color:var(--mint);margin-bottom:6px}
.fo-counter-num span{font-family:var(--sans);font-size:14px;color:var(--ink-faint);letter-spacing:0;margin-left:8px}
.fo-counter-cap{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-bottom:22px;text-wrap:pretty}
.fo-counter-state{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-top:18px}
.fo-benefit-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mint);margin-bottom:14px}
.fo-caveat-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--amber);color:var(--amber);font-size:14px;margin-bottom:16px}
.fit-head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:20px}
.fit-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px}
.fit-mark.yes{background:var(--mint-glow-2);border:1px solid var(--mint-rim);color:var(--mint)}
.fit-mark.no{background:var(--panel-2);border:1px solid var(--hairline);color:var(--ink-mute)}
.fit-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fit-list li{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.56;color:var(--ink-soft);text-wrap:pretty}
.fit-list li::before{content:"—";color:var(--ink-mute);flex:none}
.fit-yes .fit-list li::before{content:"✓";color:var(--mint);font-size:11px}
.fit-note{margin:20px 0 0;font-size:13px;line-height:1.56;color:var(--ink-mute);text-wrap:pretty}

/* ── Animated logo mark (nav + chat avatar) ───────────────────── */
.logo-iris{transform-origin:140px 100px;transform-box:view-box;animation:markLook 13s var(--ease-out) infinite;will-change:transform}
.logo-lid{clip-path:circle(50%);transform:scaleY(0);transform-origin:50% 0;transform-box:fill-box;animation:markBlink 5.4s var(--ease-blink) infinite;will-change:transform}
.brand:hover .logo-iris,.brand:hover .logo-lid{animation-play-state:paused}
@keyframes markLook{
  0%,9%{transform:translate(0,0)}
  14%,26%{transform:translate(-11px,2px)}
  31%,43%{transform:translate(-17px,-6px)}
  48%,58%{transform:translate(8px,-7px)}
  63%,74%{transform:translate(15px,4px)}
  79%,89%{transform:translate(2px,9px)}
  94%,100%{transform:translate(0,0)}
}
@keyframes markBlink{
  0%,15%{transform:scaleY(0)}
  17.5%{transform:scaleY(.6)}
  19%{transform:scaleY(1)}
  20%{transform:scaleY(1)}
  23%{transform:scaleY(.5)}
  26%,71%{transform:scaleY(0)}
  73.5%{transform:scaleY(.6)}
  75%{transform:scaleY(1)}
  76%{transform:scaleY(1)}
  79%{transform:scaleY(.5)}
  82%,100%{transform:scaleY(0)}
}
@media(prefers-reduced-motion:reduce){
  .logo-iris,.logo-lid{animation:none!important}
  .logo-lid{transform:scaleY(0)!important}
}

/* ── Inverted bands ───────────────────────────────────────────── */
/* A band always contrasts with the page it sits on: a light page gets dark
   bands, a dark page gets light bands. Each side re-declares the OPPOSITE
   token set locally, so every component inside flips without its own variant.
   Both sides are scoped by theme, so they never apply at the same time. */
.band-invert{
  position:relative; color:var(--ink);
  /* No bleed math here, on purpose. `margin-inline:calc(50% - 50vw)` LOOKS like
     it resolves to zero when the parent is already full width — but 50vw counts
     the scrollbar and 50% does not, so each band came out ~8px wider than the
     viewport and the whole page panned sideways. (body{overflow-x:hidden} does
     not contain it: html is overflow-x:visible, so body's value isn't
     propagated to the viewport and body becomes the scroll container instead.)
     Bands are top-level <section> siblings and are already full-bleed; the
     inner .frame constrains the content. If a band ever has to live inside a
     width-constrained wrapper, bleed THAT wrapper — don't restore this. */
}


/* ── Light page → dark band ───────────────────────────────────── */
html[data-theme="light"] .band-invert{
  --bg:#04120C; --bg-2:#06160F; --bg-3:#0A1F16; --bg-4:#0E2A1E;
  --rose:#FF7A8A; --amber:#FFC56A; --violet:#9B8CFF;
  --panel:rgba(255,255,255,.05); --panel-2:rgba(255,255,255,.085); --panel-3:rgba(255,255,255,.12);
  --hairline:rgba(255,255,255,.09); --hairline-2:rgba(255,255,255,.16); --hairline-3:rgba(255,255,255,.24);
  --ink:#F4FBF7; --ink-soft:#B7C5BD; --ink-faint:#7C9187; --ink-mute:#57685E;
  --mint:#43D998; --mint-soft:#6FE1AA; --mint-bright:#9CFFD0;
  --mint-glow:rgba(67,217,152,.42); --mint-glow-2:rgba(67,217,152,.15); --mint-glow-3:rgba(67,217,152,.055);
  --mint-rim:rgba(67,217,152,.5);
  background:
    radial-gradient(85% 70% at 72% 0%, rgba(67,217,152,.13) 0%, transparent 58%),
    linear-gradient(180deg,#07190F 0%,#04120C 60%,#03100A 100%);
}
html[data-theme="light"] .band-invert .glass,
html[data-theme="light"] .band-invert .card,
html[data-theme="light"] .band-invert .tier,
html[data-theme="light"] .band-invert .teaser-card,
html[data-theme="light"] .band-invert .hiw-step{
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.018) 100%);
  border-color:var(--hairline);
}
html[data-theme="light"] .band-invert .teaser-card.is-featured,
html[data-theme="light"] .band-invert .tier.featured{
  background:linear-gradient(165deg,rgba(67,217,152,.10),rgba(255,255,255,.02));
  border-color:var(--mint-rim);
}
html[data-theme="light"] .band-invert .kpi{background:rgba(6,22,15,.55)}
html[data-theme="light"] .band-invert .kpi:hover{background:rgba(10,31,22,.78)}
html[data-theme="light"] .band-invert .ctable-wrap{background:rgba(6,22,15,.55)}
html[data-theme="light"] .band-invert .flow-row,
html[data-theme="light"] .band-invert .ops-row,
html[data-theme="light"] .band-invert .ops-step{background:rgba(6,22,15,.55)}
html[data-theme="light"] .band-invert .ctable thead th{background:rgba(6,22,15,.94)}
html[data-theme="light"] .band-invert .cfg-input,
html[data-theme="light"] .band-invert .chat-form input,
html[data-theme="light"] .band-invert .field input,
html[data-theme="light"] .band-invert .field select,
html[data-theme="light"] .band-invert .field textarea{background:rgba(0,0,0,.26)}
html[data-theme="light"] .band-invert .sim-screen-inner{background:rgba(3,14,9,.94)}
html[data-theme="light"] .band-invert .tone-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014))}
html[data-theme="light"] .band-invert .chat-card.compact{background:rgba(3,14,9,.62)}
html[data-theme="light"] .band-invert .faq-item{background:rgba(255,255,255,.04)}
html[data-theme="light"] .band-invert .faq-item[open]{background:rgba(255,255,255,.07)}
html[data-theme="light"] .band-invert .integ{background:rgba(255,255,255,.05)}
html[data-theme="light"] .band-invert .integ:hover{background:rgba(255,255,255,.08)}
html[data-theme="light"] .band-invert .stack-strip{background:rgba(255,255,255,.05)}
html[data-theme="light"] .band-invert .status-row{background:rgba(6,22,15,.55)}
html[data-theme="light"] .band-invert .status-row:hover{background:rgba(10,31,22,.78)}
/* The band's mint is lifted for dark surfaces, which makes a solid fill glare.
   Seat the primary button a few steps deeper inside bands. */
html[data-theme="light"] .band-invert .btn.primary{
  background:#2CAF74; border-color:#2CAF74; color:#03150C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 26px rgba(44,175,116,.16);
}
html[data-theme="light"] .band-invert .btn.primary:hover{
  background:#36C283; border-color:#36C283; color:#03150C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 34px rgba(44,175,116,.24);
}
html[data-theme="light"] .band-invert .btn.primary .ico{background:rgba(3,21,12,.2)}

/* ── Two-tone headline (black line + mint line) ───────────────── */
.duo{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 96,"wght" 500;font-size:clamp(32px,4.8vw,64px);line-height:1.02;letter-spacing:-.033em;margin:0 0 22px;text-wrap:balance}
.duo > span{display:block}
.duo > em{display:block;font-style:normal;color:var(--mint)}

/* Italic-serif accent inside a display headline */
.h-accent i,.duo i,.hero h1 i,.phero h1 i,.sec-head h2 i{
  font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 96,"wght" 500,"SOFT" 60;
  letter-spacing:-.018em;padding-right:.04em;
}

/* ── Photography cards ────────────────────────────────────────── */
.photo-card{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--sh-2);aspect-ratio:4/3}
.photo-plate{position:absolute;left:16px;bottom:16px;right:16px;padding:14px 16px;border-radius:14px;background:rgba(4,18,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#F4FBF7;pointer-events:none}
.photo-plate .pp-name{font-size:15px;font-weight:600;letter-spacing:-.012em}
.photo-plate .pp-meta{font-size:13px;color:#B7C5BD;line-height:1.45}

/* ── Founder ──────────────────────────────────────────────────── */
.founder-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:900px){.founder-grid{grid-template-columns:1fr;gap:40px}}
.founder-copy h2{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 96,"wght" 500;font-size:clamp(34px,5vw,64px);line-height:1.0;letter-spacing:-.034em;margin:0 0 22px;text-wrap:balance}
.founder-copy .lede{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--ink-soft);margin:0 0 26px;max-width:44ch;text-wrap:pretty}
.founder-note{font-family:var(--mono);font-size:11px;line-height:1.75;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);max-width:52ch;margin:0 0 28px}
.founder-sig{display:grid;gap:14px;padding-top:24px;border-top:1px solid var(--hairline)}
.founder-sig-row{display:flex;align-items:baseline;gap:12px;font-size:13.5px;color:var(--ink-soft)}
.founder-sig-row b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);min-width:9ch}
.founder-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--sh-3);aspect-ratio:1/1;max-width:520px;margin-inline:auto;width:100%}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
.founder-plate{position:absolute;left:18px;bottom:18px;padding:15px 19px;border-radius:15px;background:rgba(4,18,12,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#F4FBF7}
.founder-plate .fp-name{font-size:16px;font-weight:600;letter-spacing:-.014em;margin-bottom:2px}
.founder-plate .fp-role{font-size:13.5px;color:#B7C5BD;line-height:1.42}


/* ── Editorial letter (story) ─────────────────────────────────── */
.letter{max-width:68ch}
.letter p{font-size:clamp(16px,1.5vw,19px);line-height:1.72;color:var(--ink-soft);margin:0 0 26px;text-wrap:pretty}
.letter p b{color:var(--ink);font-weight:600}
.letter p.lead{font-size:clamp(19px,2vw,25px);line-height:1.5;color:var(--ink);font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 450;letter-spacing:-.018em}
.pullquote{margin:38px 0;padding:0 0 0 26px;border-left:3px solid var(--mint);font-family:var(--serif);font-variation-settings:"opsz" 72,"wght" 500,"SOFT" 40;font-style:italic;font-size:clamp(21px,2.4vw,30px);line-height:1.32;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sig{display:flex;align-items:center;gap:22px;margin-top:44px;padding-top:32px;border-top:1px solid var(--hairline)}
.sig-photo{width:76px;height:76px;flex:none;border-radius:50%;overflow:hidden;border:1px solid var(--hairline-2);box-shadow:var(--sh-2)}
.sig-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.sig-name{font-family:var(--serif);font-variation-settings:"opsz" 48,"wght" 500,"SOFT" 30;font-size:22px;letter-spacing:-.02em;margin-bottom:3px}
.sig-role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:560px){.sig{flex-direction:column;align-items:flex-start;gap:16px}}

/* ── Forms ────────────────────────────────────────────────────── */
.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.field-row{grid-template-columns:1fr}}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
.field label .opt{color:var(--ink-mute);text-transform:none;letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:12px;font:inherit;font-size:14.5px;
  background:var(--panel);border:1px solid var(--hairline);color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:rgba(255,255,255,.72)}
.field textarea{min-height:148px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--mint);background:var(--panel-2);box-shadow:0 0 0 4px var(--mint-glow-3)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:12.5px;color:var(--ink-mute);line-height:1.55}
.form-aside{display:grid;gap:14px;align-content:start}

/* ── Press brand assets ───────────────────────────────────────── */
.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.asset-grid{grid-template-columns:1fr}}
.asset{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:16px;border:1px solid var(--hairline);background:var(--panel);transition:border-color var(--dur) ease,transform var(--dur) var(--ease-spring)}
.asset:hover{border-color:var(--mint-rim);transform:translateY(-3px)}
.asset-swatch{aspect-ratio:16/9;border-radius:10px;display:grid;place-items:center;background:#04120C;border:1px solid var(--hairline)}
.asset-swatch svg{width:44px;height:44px}
.asset-swatch .mark-img{width:52px;height:52px;display:block}
.asset-swatch.mono{background:var(--panel-2);color:var(--ink)}
.asset-kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}
.asset-dl{font-size:13px;font-weight:500;color:var(--mint)}

/* ── Status board ─────────────────────────────────────────────── */
.status-hero{display:flex;align-items:center;gap:16px;padding:24px 26px;border-radius:var(--r-card);border:1px solid var(--mint-rim);background:linear-gradient(165deg,var(--mint-glow-3),transparent);margin-bottom:36px}
.status-beacon{width:12px;height:12px;flex:none;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px var(--mint-glow-2),0 0 18px var(--mint-glow);animation:pulse 2.4s ease-in-out infinite}
.status-headline{font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:19px;letter-spacing:-.02em;margin-bottom:3px}
.status-sub{font-size:13px;color:var(--ink-soft)}
.status-list{display:grid;gap:2px;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--hairline)}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 22px;background:var(--bg-2);transition:background var(--dur-fast) ease}
html[data-theme="light"] .status-row{background:rgba(255,255,255,.72)}
.status-row:hover{background:var(--bg-3)}
html[data-theme="light"] .status-row:hover{background:#fff}
.status-name{font-size:14.5px;font-weight:500}
.status-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--mint-rim);background:var(--mint-glow-3);white-space:nowrap}
.status-val{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--mint);white-space:nowrap}
.status-pill i{width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none}

/* The low-threshold door: a capture for the visitor who is convinced but not
   ready, sitting under the closer rather than competing with it. */
.closer-alt{margin:34px auto 0;max-width:56ch;font-size:13.5px;line-height:1.6;color:var(--ink-mute);text-wrap:pretty}
.closer-alt a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--mint-rim);text-underline-offset:3px;font-weight:500}
.closer-alt a:hover{color:var(--mint);text-decoration-color:var(--mint)}
/* The alternative door is a separate beat from the primary ask, so it gets real
   air rather than a rule — after a button row a hairline sits right under the
   buttons and crowds them. The rule stays only where two quiet lines follow
   each other and need telling apart (the home page's guarantee band). */
.btn-row+.closer-alt{margin-top:52px}
.cta-trust+.closer-alt{margin-top:30px;padding-top:26px;border-top:1px solid var(--hairline)}

/* ── Utility pages (thanks / 404) ─────────────────────────────── */
.util{min-height:72vh;display:grid;place-items:center;text-align:center;padding-block:clamp(60px,10vw,120px)}
.util-inner{max-width:56ch}
.util h1{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 95,"wght" 500;font-size:clamp(44px,7vw,92px);line-height:.98;letter-spacing:-.035em;margin:0 0 20px}
.util h1 em{font-style:normal;color:var(--mint)}
.util p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 30px;text-wrap:pretty}
.util .btn-row{justify-content:center}


/* ── Long-form document sections (security / legal) ───────────── */
.doc-sec{margin-bottom:clamp(36px,4vw,56px);scroll-margin-top:110px}
.doc-sec h2{font-family:var(--display);font-variation-settings:"opsz" 48,"wght" 500;font-size:clamp(21px,2.3vw,29px);line-height:1.16;letter-spacing:-.025em;margin:0 0 16px;text-wrap:balance}
.doc-sec h2 .n{color:var(--mint);font-family:var(--mono);font-size:.48em;letter-spacing:.1em;vertical-align:.42em;margin-right:11px}
.doc-sec h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:26px 0 10px}
.doc-sec p{font-size:15px;line-height:1.7;color:var(--ink-soft);margin:0 0 16px;text-wrap:pretty}
.doc-sec p b{color:var(--ink);font-weight:600}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:11px}
.doc-sec ul li{display:flex;gap:11px;align-items:baseline;font-size:14.5px;line-height:1.62;color:var(--ink-soft);text-wrap:pretty}
.doc-sec ul li::before{content:"→";color:var(--mint);flex:none;font-size:11px}
.doc-sec ul li b{color:var(--ink);font-weight:600}
.doc-updated{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}

/* Contact: form + aside. Its own class rather than an inline override on
   .rail-layout, so the single-column breakpoint still applies. */
.form-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:900px){.form-layout{grid-template-columns:1fr;gap:32px}}

/* ── Billing period control ───────────────────────────────────── */
.billing{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(28px,3.5vw,44px)}
.billing-seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* The thumb is positioned in JS from the active button's box, so the two
   options can have different widths (Annual carries a savings badge). */
.billing-thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:var(--r-pill);background:var(--mint);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 16px var(--mint-glow-2);transition:transform 420ms var(--ease-spring-soft),width 420ms var(--ease-spring-soft);z-index:0}
.billing-opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:9px;padding:10px 20px;border:none;background:none;border-radius:var(--r-pill);cursor:pointer;font-size:13.5px;font-weight:500;letter-spacing:.005em;color:var(--ink-soft);transition:color 300ms var(--ease-out)}
.billing-opt:hover{color:var(--ink)}
.billing-opt.is-on{color:#fff;font-weight:600}
.billing-save{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);background:var(--mint-glow-2);color:var(--mint);transition:background 300ms var(--ease-out),color 300ms var(--ease-out)}
.billing-opt.is-on .billing-save{background:rgba(255,255,255,.22);color:#fff}
.billing-note{margin:0;font-size:12.5px;color:var(--ink-faint);text-align:center;text-wrap:pretty}
/* Month-to-month reference price, shown only while annual is selected */
/* Always occupies its slot so switching cycle never reflows the card. */
.tier-was{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-mute);margin:-6px 0 20px;min-height:1.3em}
.tier-was s{text-decoration-color:var(--mint-rim)}
.tier-price .amt{font-variant-numeric:tabular-nums}
@media(max-width:420px){.billing-opt{padding:10px 14px;font-size:12.5px}}


/* ── Post-value capture (Aria configurator) ────────────────────── */
/* Sits directly under the configurator: the visitor has just named a
   specialist and watched her answer, so this is the highest-intent moment on
   the site. Deliberately quiet — one field, no gate over the demo above it. */
.cap{margin-top:clamp(22px,3vw,38px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(22px,2.6vw,32px) clamp(22px,3vw,36px);border:1px solid var(--hairline-2);border-radius:var(--r-lg);background:linear-gradient(140deg,var(--panel-2),var(--panel));box-shadow:var(--sh-2)}
.cap-copy h3{font-family:var(--display);font-size:clamp(19px,2vw,25px);line-height:1.14;letter-spacing:-.02em;font-weight:600;margin:0 0 8px;text-wrap:pretty}
.cap-copy p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.56;max-width:38em;text-wrap:pretty}
.cap-form{min-width:0}
.cap-row{display:flex;gap:10px;margin-top:7px}
.cap-row .cfg-input{flex:1;min-width:0}
.cap-row .btn{flex:none;white-space:nowrap}
.cap-fine{margin:10px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.5}
.cap-status{margin-top:0;font-size:13px;line-height:1.5;font-weight:500}
.cap-status.is-ok,.cap-status.is-error,.cap-status.is-pending{margin-top:10px}
.cap-status.is-ok{color:var(--mint-bright)}
.cap-status.is-error{color:var(--rose)}
.cap-form.is-done .cap-row,.cap-form.is-done .cfg-label,.cap-form.is-done .cap-fine{display:none}
@media(max-width:900px){
  .cap{grid-template-columns:1fr;gap:18px}
  .cap-row{flex-direction:column}
  .cap-row .btn{width:100%;justify-content:center}
}

/* ── Contact form status ───────────────────────────────────────── */
/* The Worker answers a failed submission with text/plain; js/contact-page.js
   renders it here instead of navigating away and losing the typed message. */
.form-context{margin:0;padding:11px 15px;border-radius:12px;border:1px solid var(--mint-rim);background:var(--mint-glow-3);font-size:13.5px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.form-context b{color:var(--mint);font-weight:600}
.form-status{font-size:13.5px;line-height:1.55;font-weight:500}
.form-status.is-error,.form-status.is-pending{margin:4px 0 -4px}
.form-status.is-error{color:var(--rose)}
.cf-turnstile{margin:4px 0 0;min-height:0}
.cf-turnstile:not(:empty){min-height:65px}

/* ── Operator console sim ─────────────────────────────────────────
   A miniature of the real operator console (app.customerserviceprofessional.com)
   during shadow mode: Aria drafts against historical tickets, a human reviews
   each draft before it can reach a customer. Chrome, tokens, pills, bubble
   geometry and nav labels are lifted from the app's own stylesheet so the two
   surfaces stay recognisably the same product. Lives inside .band-invert, which
   pins the dark token set even on the light theme -- same as the app. */
.csim{position:absolute;inset:0;display:grid;grid-template-columns:154px minmax(0,1fr) minmax(0,1.18fr);gap:10px;padding:12px 12px 74px;font-family:var(--sans);background:radial-gradient(900px 620px at 78% -8%,var(--mint-glow-2),transparent 70%),var(--bg)}
.csim-pane{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--hairline);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018)),var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 44px -30px rgba(0,0,0,.55);overflow:hidden}
/* The app's .panel.is-feature mint capline -- its most recognisable card detail. */
.csim-pane::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,transparent,var(--mint),transparent);opacity:.5}

/* Rail */
.csim-rail{padding:11px 9px;gap:11px}
.csim-brand{display:flex;align-items:center;gap:7px}
.csim-mark{display:grid;place-items:center;width:21px;height:21px;flex:none;border-radius:7px;background:var(--mint);color:#001A0B;font-family:var(--mono);font-size:8px;font-weight:750;letter-spacing:.04em}
.csim-brand b{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.csim-navgroup{font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);padding:0 6px;margin:5px 0 3px}
.csim-navlink{display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:6px;font-size:10px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csim-navlink i{width:4px;height:4px;flex:none;border-radius:50%;background:currentColor;opacity:.35}
.csim-navlink.is-active{background:var(--mint-glow-2);color:var(--mint);font-weight:600}
.csim-navlink.is-active i{opacity:1;box-shadow:0 0 6px var(--mint-glow)}

/* Queue */
.csim-queue{padding:11px 10px;gap:9px}
.csim-stats{display:flex;flex-wrap:wrap;gap:11px 16px;padding-bottom:9px;border-bottom:1px solid var(--hairline)}
.csim-stat{display:grid;gap:1px;min-width:0}
.csim-stat b{font-family:var(--display);font-size:15px;font-weight:650;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.csim-stat.is-mint b{color:var(--mint)}
.csim-stat span{font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.csim-rows{display:flex;flex-direction:column;gap:5px;min-height:0;overflow:hidden}
.csim-row{padding:7px 9px;border:1px solid var(--hairline);border-radius:9px;opacity:0}
.csim-row.is-in{animation:csimUp 620ms var(--ease-drawer) both;animation-delay:calc(var(--n,0) * 90ms)}
.csim-row.is-current{background:var(--panel-2);border-color:var(--mint)}
.csim-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.csim-row-name{font-size:10.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csim-row-time{font-family:var(--mono);font-size:8px;color:var(--ink-faint);flex:none}
.csim-row-prev{margin-top:2px;font-size:9.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csim-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}

/* The app's .pill, including the currentColor LED and its glow. */
.csim-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border:1px solid var(--hairline-2);border-radius:var(--r-pill);background:var(--panel-2);color:var(--ink-soft);font-family:var(--mono);font-size:7.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.csim-pill::before{content:"";width:4px;height:4px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.csim-pill.is-mint{color:var(--mint);border-color:var(--mint-rim);background:rgba(63,207,142,.10)}
.csim-pill.is-amber{color:var(--amber);border-color:rgba(255,197,106,.35);background:rgba(255,197,106,.10)}

/* Review pane */
.csim-review{padding:0}
.csim-rhead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--hairline)}
.csim-rhead-id{min-width:0}
.csim-rhead-id b{display:block;font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csim-rhead-id span{display:block;margin-top:1px;font-family:var(--mono);font-size:8px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csim-rhead .csim-pill{margin-left:auto}
.csim-log{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:11px 12px;min-height:0;overflow:hidden}
.csim-msg{max-width:82%;padding:7px 10px;font-size:10.5px;line-height:1.45;color:var(--ink);opacity:0;animation:csimUp 420ms var(--ease-out) both}
.csim-msg.is-customer{align-self:flex-start;border-radius:11px 11px 11px 3px;background:var(--panel-2);border:1px solid var(--hairline)}
.csim-msg.is-aria{align-self:flex-end;border-radius:11px 11px 3px 11px;background:var(--mint-glow-2);border:1px solid var(--hairline)}
.csim-msg.is-aria.is-approved{border-color:var(--mint-rim)}
.csim-sys{align-self:center;max-width:none;padding:2px 0;font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);text-align:center;opacity:0;animation:csimUp 420ms var(--ease-out) both}
.csim-who{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:3px}
.csim-caret{display:inline-block;width:1px;height:.95em;margin-left:1px;vertical-align:-2px;background:var(--mint);animation:csimBlink 1s var(--ease-blink) infinite}
.csim-typing{align-self:flex-end;display:flex;gap:3px;padding:8px 11px;border-radius:11px 11px 3px 11px;background:var(--mint-glow-2);border:1px solid var(--hairline)}
.csim-typing i{width:4px;height:4px;border-radius:50%;background:var(--mint);opacity:.4;animation:csimDot 1.15s ease-in-out infinite}
.csim-typing i:nth-child(2){animation-delay:.16s}
.csim-typing i:nth-child(3){animation-delay:.32s}
.csim-verdict{align-self:stretch;display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;background:var(--mint-glow-3);border:1px solid var(--mint-rim);font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);opacity:0;animation:csimUp 420ms var(--ease-spring) both}
.csim-verdict.is-amber{background:rgba(255,197,106,.08);border-color:rgba(255,197,106,.35);color:var(--amber)}
.csim-verdict i{display:grid;place-items:center;width:13px;height:13px;flex:none;border-radius:50%;background:var(--mint);color:#001A0B;font-size:8px;font-weight:700;font-style:normal}
.csim-verdict.is-amber i{background:var(--amber)}
.csim-verdict em{margin-left:auto;font-style:normal;color:var(--ink-faint)}
.csim-composer{display:flex;align-items:center;gap:7px;padding:9px 12px;border-top:1px solid var(--hairline)}
.csim-field{flex:1;min-width:0;padding:6px 9px;border:1px solid var(--hairline);border-radius:8px;background:var(--panel-2);font-size:9.5px;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csim-btn{flex:none;padding:6px 11px;border-radius:var(--r-pill);background:var(--mint);color:#001A0B;font-size:9.5px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}

/* Honest footer -- this is a replay, not a live console. */
.csim-foot{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;padding:7px 11px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)}
.csim-foot b{color:var(--mint);font-size:6px;animation:csimPulse 2s ease-in-out infinite}

@keyframes csimUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes csimBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes csimDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@keyframes csimPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* The caption plate reserves the bottom strip. Below ~880px the rail is noise,
   and below ~620px the queue and the review pane cannot both stay legible. */
@container (max-width:880px){.csim{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}.csim-rail{display:none}}
@container (max-width:620px){.csim{grid-template-columns:minmax(0,1fr)}.csim-queue{display:none}.csim-msg{max-width:88%;font-size:10px;padding:6px 9px}}
.csim-card{aspect-ratio:21/9;container-type:inline-size}
@media(max-width:760px){.csim-card{aspect-ratio:4/3}.csim{padding-bottom:88px}}

@media(prefers-reduced-motion:reduce){
  .csim-row.is-in,.csim-msg,.csim-sys,.csim-verdict{animation:none;opacity:1}
  .csim-caret,.csim-typing i,.csim-foot b{animation:none}
}