/* Hazel micro-site · iomer.com/hazel
   Layout concept: "dive down the page" — a Teal header and hero, white reading
   sections, Ice panels, a Deep band for emphasis, an Ocean band, then the Sky
   footer. Square blocks, pill actions, wave seams. Single light theme, matching
   iomer.com. Tokens from the iomer design guide v1.0 (6 Oct 2026). */
:root{
  --sky:#00bbff;      /* CTA fill and footer band; fill only, Deep labels on it */
  --accent:var(--sky);       /* the accelerator's own colour, set per site by build.py (marks.py) */
  --accent-ink:var(--ocean); /* accent for text on light backgrounds, 4.5:1 or better */
  --accent-tint:var(--tint);
  --sky-hover:#00a6e3;
  --ocean:#0071a3;    /* links, secondary buttons, Ocean band */
  --ocean-hover:#006693;
  --teal:#008e9e;     /* iomer Teal: no longer used for the header and hero (Deep since Oct 2026) */
  --deep:#143949;     /* headings, Deep band, label on Sky */
  --ground:#ecf1f4;   /* Ice panels */
  --sand:#f1e9dc;     /* form ground */
  --tint:#e6f7ff;     /* info alerts */
  --surface:#ffffff;
  --hairline:#e3e8eb;
  --body:#212529;
  --muted:#54595f;
  --on-dark:#ffffff;
  --on-dark-soft:#cfe3ea;
  --ok:#1d7a4c; --ok-bg:#e3f2ea;
  --warn:#8a5a12; --warn-bg:#f6ecdc;
  --bad:#b3261e; --bad-bg:#fbe7e5;

  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:"Poppins","Segoe UI",system-ui,sans-serif;
  --f-ui:"Roboto","Segoe UI",system-ui,sans-serif;

  --r-btn:90px; --r-input:2px;
  --shadow:0 5px 15px rgba(0,0,0,.13);
  --ease:.3s ease;
  --wrap:1140px;
  --gutter:clamp(16px,4vw,32px);
  --band:clamp(56px,8vw,104px);
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--surface);color:var(--body);font:400 17px/1.65 var(--f-ui);text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:var(--ocean);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--ease)}
a:hover{color:var(--ocean-hover)}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.on-dark :focus-visible{outline-color:#fff}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
p,li{text-wrap:pretty}
ul,ol{margin:0;padding:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
.stack>*+*{margin-top:1rem}
.stack-lg>*+*{margin-top:1.75rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--sky);color:var(--deep);padding:10px 18px;border-radius:var(--r-btn);font:500 16px var(--f-ui);text-decoration:none}
.skip:focus{top:12px}
.tnum{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---------- type ---------- */
.eyebrow{font:500 13px/1.4 var(--f-body);letter-spacing:.28em;text-transform:uppercase;color:var(--accent-ink)}
.on-dark .eyebrow{color:#9fe3ff}
.hero .eyebrow{color:var(--accent)} /* every accent is 5:1 or better on Deep */
.h1{font:600 clamp(38px,5.4vw,62px)/1.06 var(--f-display);color:var(--deep)}
.h2{font:600 clamp(30px,3.8vw,42px)/1.12 var(--f-display);color:var(--deep)}
.subtitle{font:400 clamp(20px,2.3vw,26px)/1.3 var(--f-display);color:var(--deep)}
.h3{font:500 clamp(21px,2vw,24px)/1.25 var(--f-body);color:var(--deep)}
.h4{font:600 17px/1.35 var(--f-body);color:var(--deep)}
.lede{font:300 clamp(18px,1.8vw,20px)/1.6 var(--f-ui);color:var(--body);max-width:68ch}
.small{font-size:15px;line-height:1.6;color:var(--muted)}
.on-dark,.on-dark .h1,.on-dark .h2,.on-dark .h3,.on-dark .h4,.on-dark .subtitle{color:var(--on-dark)}
.on-dark .lede{color:var(--on-dark)}
.on-dark .small{color:var(--on-dark-soft)}
.on-dark a:not(.btn){color:#fff}
.prose{max-width:68ch}
.prose>*+*{margin-top:1em}
.prose ul{padding-left:1.2em}
.prose li+li{margin-top:.4em}
.section-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:780px}
.section-head.center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 30px;border-radius:var(--r-btn);font:500 17px/1.2 var(--f-ui);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--sky);color:var(--deep)}
.btn-primary:hover{background:var(--sky-hover);color:var(--deep)}
.btn-secondary{background:var(--ocean);color:#fff}
.btn-secondary:hover{background:var(--ocean-hover);color:#fff}
.btn-white{background:#fff;color:var(--deep)}
.btn-white:hover{background:var(--tint);color:var(--deep)}
.btn-outline{background:transparent;border-color:var(--ocean);color:var(--ocean)}
.btn-outline:hover{background:var(--ocean);color:#fff}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font:500 16px var(--f-ui);text-decoration:none}
.link-arrow svg{width:18px;height:18px;transition:transform var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- header ---------- */
.site-header{background:var(--deep);color:#fff;position:relative;z-index:20}
.site-header .bar{display:flex;align-items:center;gap:18px;min-height:78px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;flex:none}
.brand img{height:30px;width:auto}
.brand .divider{width:1px;height:28px;background:rgba(255,255,255,.55)}
.brand .product{font:400 24px/1 var(--f-display);color:#fff;letter-spacing:.01em}
.ptile{display:inline-block;flex:none;line-height:0}
.ptile svg{display:block;width:100%;height:100%}
.brand .ptile{width:34px;height:34px;margin-right:-4px}
.brand-mini .ptile{width:24px;height:24px}
.site-footer h2.with-tile{display:flex;align-items:center;gap:8px}
.site-footer h2 .ptile{width:22px;height:22px}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.site-nav ul{list-style:none;display:flex;gap:2px}
.site-nav a{display:block;white-space:nowrap;padding:10px 11px;color:#fff;text-decoration:none;font:500 15.5px/1.2 var(--f-ui);box-shadow:inset 0 -2px transparent;transition:box-shadow var(--ease)}
.site-nav a:hover{box-shadow:inset 0 -2px rgba(255,255,255,.6);color:#fff}
.site-nav a[aria-current="page"]{box-shadow:inset 0 -2px #fff;font-weight:700}
.site-nav .btn-white,.site-nav .btn-white:hover{color:var(--deep);box-shadow:none}
.site-nav .btn-white[aria-current="page"]{box-shadow:0 0 0 2px var(--sky)}
.site-nav .btn{display:inline-flex;white-space:nowrap;margin-left:10px;min-height:44px;padding:0 22px;font-size:15.5px;box-shadow:none}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff;border-radius:var(--r-btn);min-height:44px;padding:0 16px;font:500 15px var(--f-ui);gap:8px;align-items:center;cursor:pointer}
.nav-toggle svg{width:20px;height:20px}
.crumbs{font:400 14px/1.4 var(--f-ui);color:var(--on-dark-soft)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.7}
.crumbs a{color:#fff;font-weight:400}
@media (max-width:1120px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--deep);flex-direction:column;align-items:stretch;padding:8px var(--gutter) 22px;box-shadow:var(--shadow)}
  .site-nav.open{display:flex}
  .site-nav ul{flex-direction:column}
  .site-nav a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.14);font-size:17px}
  .site-nav a[aria-current="page"]{box-shadow:inset 3px 0 var(--sky);padding-left:14px}
  .site-nav .btn{margin:16px 0 0;align-self:flex-start}
}
@media (max-width:480px){.brand .product{font-size:21px}.brand img{height:26px}.brand .ptile{width:28px;height:28px}.nav-toggle .label{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--deep);color:#fff;position:relative;padding-block:clamp(28px,4vw,56px) clamp(96px,10vw,140px)}
.hero .grid-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero .copy{display:grid;gap:20px;min-width:0}
.hero .copy .lede{color:#fff}
.hero-inner{display:grid;gap:18px;padding-top:8px}
.hero-inner>*{max-width:820px}
.hero-inner .lede{color:#fff}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(48px,6vw,84px);display:block}
.wave-top{position:absolute;left:0;right:0;top:-1px;width:100%;height:clamp(40px,5vw,70px);display:block;transform:scaleY(-1)}
@media (max-width:900px){.hero .grid-hero{grid-template-columns:minmax(0,1fr)}}

/* ---------- bands ---------- */
.band{padding-block:var(--band);position:relative}
.band-ice{background:var(--ground)}
.band-sand{background:var(--sand)}
.band-deep{background:var(--deep)}
.band-ocean{background:var(--ocean)}
.band-tight{padding-block:clamp(40px,5vw,64px)}
.band-wave-top{padding-top:calc(var(--band) + 40px)}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:clamp(14px,2vw,22px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);padding:clamp(20px,2.4vw,28px);display:grid;gap:10px;align-content:start;min-width:0}
.band-ice .card,.band-sand .card{box-shadow:var(--shadow)}
.card.line{border:1px solid var(--hairline)}
.card .icon{width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--ocean);display:grid;place-items:center;margin-bottom:4px}
.card .icon svg{width:22px;height:22px}
.card p{font-size:16px;line-height:1.6;color:var(--body)}
.card a.cover{position:static}
.card-link{text-decoration:none;color:inherit;transition:box-shadow var(--ease),transform var(--ease)}
.card-link:hover{color:inherit;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.card-link .link-arrow{margin-top:6px}
.on-dark .card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.on-dark .card p{color:var(--on-dark-soft)}
.on-dark .card .icon{background:rgba(0,187,255,.16);color:#9fe3ff}

/* feature rows on Deep */
.feature-rows{display:grid;gap:clamp(36px,5vw,64px)}
.feature-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center}
.feature-row:nth-child(even) .feature-art{order:2}
.feature-row .stack{min-width:0}
@media (max-width:860px){.feature-row{grid-template-columns:minmax(0,1fr)}.feature-row:nth-child(even) .feature-art{order:0}}
.ticks{list-style:none;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.ticks li svg{width:20px;height:20px;color:var(--ok);margin-top:4px}
.on-dark .ticks li svg{color:var(--accent)}
.on-dark .ticks li{color:#fff}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,32px)}
@media (max-width:760px){.stats{grid-template-columns:minmax(0,1fr)}}
.stat{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:3px solid var(--accent)}
.stat b{font:600 clamp(48px,6vw,68px)/1 var(--f-ui);color:var(--deep);font-variant-numeric:tabular-nums}
.stat p{font:500 16px/1.5 var(--f-body);color:var(--body)}
.stat cite{font:400 14px/1.4 var(--f-ui);font-style:normal;color:var(--muted)}

/* before/after */
.compare{display:grid;gap:0;border-top:1px solid var(--hairline)}
.compare .row{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hairline)}
.compare .head{font:500 12.5px var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);padding:12px 0}
.compare .head span:last-child{color:var(--accent-ink)}
.compare .row svg{width:22px;height:22px;color:var(--ocean)}
.compare .after{font:600 17px/1.45 var(--f-ui);color:var(--deep)}
@media (max-width:600px){.compare .row{grid-template-columns:minmax(0,1fr)}.compare .row svg{transform:rotate(90deg)}.compare .head span:nth-child(2){display:none}}

/* steps (a real sequence, so numbered) */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,20px);counter-reset:step}
.steps li{counter-increment:step;display:grid;gap:8px;align-content:start;padding-top:16px;border-top:3px solid var(--accent);min-width:0}
.steps li::before{content:counter(step);font:600 34px/1 var(--f-display);color:var(--accent-ink)}
.on-dark .steps li::before{color:var(--accent)}
.band-ocean .steps li::before{color:#fff} /* accents fall below 3:1 on Ocean */
.steps b{font:500 19px/1.3 var(--f-body);color:var(--deep)}
.on-dark .steps b{color:#fff}
.steps p{font-size:15.5px;line-height:1.55}
.steps.steps-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.steps,.steps.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps,.steps.steps-2,.steps.steps-4{grid-template-columns:minmax(0,1fr)}}

/* pills / chips */
.pill{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 var(--f-ui);padding:6px 11px;border-radius:var(--r-btn);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--tint);color:var(--ocean)}
.pill.plain{background:var(--ground);color:var(--deep)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-btn);border:1.5px solid var(--ocean);color:var(--ocean);text-decoration:none;font:500 15px var(--f-ui);transition:background var(--ease),color var(--ease)}
.chips a:hover{background:var(--ocean);color:#fff}
.on-dark .chips a{border-color:rgba(255,255,255,.7);color:#fff}
.on-dark .chips a:hover{background:#fff;color:var(--deep)}

/* content-type strip */
.types{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.types div{background:var(--surface);padding:18px 16px;display:grid;gap:6px;align-content:start;min-width:0}
.types b{font:600 20px/1.2 var(--f-display);color:var(--deep)}
.types span{font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.types{grid-template-columns:minmax(0,1fr)}}

/* alert / note */
.note{background:var(--tint);border-left:4px solid var(--accent);padding:16px 18px;font-size:15.5px;line-height:1.6;color:var(--deep)}
.note b{color:var(--deep)}
.quote{font:400 clamp(22px,2.4vw,28px)/1.4 var(--f-display);color:var(--deep);border-left:3px solid var(--accent);padding-left:18px;max-width:40ch}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hairline);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px;line-height:1.55}
th,td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--hairline)}
thead th{font:500 12.5px/1.4 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);background:var(--ground)}
tbody th{font:600 16px/1.4 var(--f-ui);color:var(--deep);width:24%}
tbody tr:last-child>*{border-bottom:0}

/* spec list */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,4vw,48px)}
.specs div{padding:18px 0;border-top:1px solid var(--hairline);display:grid;gap:6px;min-width:0}
.specs dt{font:500 12.5px/1.4 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink)}
.specs dd{margin:0;font-size:16px;line-height:1.6}
@media (max-width:700px){.specs{grid-template-columns:minmax(0,1fr)}}

/* accordion */
.acc{border-top:1px solid var(--hairline)}
.acc details{border-bottom:1px solid var(--hairline)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 2px;font:500 18px/1.4 var(--f-body);color:var(--deep)}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{width:22px;height:22px;flex:none;color:var(--ocean);transition:transform var(--ease)}
.acc details[open] summary svg{transform:rotate(180deg)}
.acc summary:hover{color:var(--ocean)}
.acc .answer{padding:0 2px 22px;max-width:72ch}
.acc .answer>*+*{margin-top:.8em}
.acc .answer ul{padding-left:1.2em}

/* role page */
.role{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(20px,4vw,56px);padding-block:clamp(36px,5vw,56px);border-top:1px solid var(--hairline);scroll-margin-top:16px}
.role:first-of-type{border-top:0}
.role .meta{display:grid;gap:12px;align-content:start;min-width:0}
.role .meta .who{font-size:15.5px;color:var(--muted)}
.role .body{display:grid;gap:22px;min-width:0}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.two-col h4{margin-bottom:8px}
.two-col ul{list-style:none;display:grid;gap:8px}
.two-col li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:16px;line-height:1.55}
.two-col li svg{width:16px;height:16px;margin-top:5px}
.two-col .gets svg{color:var(--ok)}
.two-col .gaps svg{color:var(--warn)}
@media (max-width:860px){.role{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.two-col{grid-template-columns:minmax(0,1fr)}}
.scenario{background:var(--ground)}
.scenario summary{padding:16px 18px}
.scenario .answer{padding:0 18px 20px}
.scenario + .scenario{margin-top:10px}
.scenario summary .tag{font:500 12px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:4px}
.sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sc-grid>div{background:var(--surface);padding:16px;display:grid;gap:6px;align-content:start;min-width:0}
.sc-grid h5{margin:0;font:500 12px/1.4 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sc-grid .with h5{color:var(--accent-ink)}
.sc-grid p{font-size:15.5px;line-height:1.6}
@media (max-width:640px){.sc-grid{grid-template-columns:minmax(0,1fr)}}
.role-index{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--hairline);padding-block:12px}
.role-index .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.role-index .chips a{white-space:nowrap;min-height:36px;font-size:14px}
.group-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-top:clamp(40px,5vw,64px)}

/* product mock (illustrative, sample data) */
.mock{background:var(--surface);color:var(--body);box-shadow:0 18px 40px rgba(10,30,40,.28);font:400 14px/1.45 var(--f-ui);min-width:0}
.mock .top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--hairline);background:#f7f9fa}
.mock .top .title{font:600 13px var(--f-ui);color:var(--deep)}
.mock .search{flex:1;display:flex;align-items:center;gap:8px;border:1.5px solid var(--ocean);border-radius:var(--r-input);padding:6px 10px;min-width:0;color:var(--deep);font-weight:500}
.mock .search svg{width:15px;height:15px;color:var(--ocean);flex:none}
.mock .avatar{width:28px;height:28px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font:600 11px var(--f-ui);flex:none}
.mock .cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.mock .results{padding:12px 14px;display:grid;gap:10px;border-right:1px solid var(--hairline);min-width:0}
.mock .result{border:1px solid var(--hairline);padding:10px 12px;display:grid;gap:4px;min-width:0}
.mock .result.rec{border-color:var(--accent);background:var(--accent-tint)}
.mock .result .t{font:600 14px/1.35 var(--f-ui);color:var(--ocean)}
.mock .result .m{font-size:12px;color:var(--muted)}
.mock .result .x{font-size:12.5px;color:var(--body)}
.mock .side{padding:12px 14px;display:grid;gap:10px;align-content:start;min-width:0}
.mock .side .lbl{font:600 10.5px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mock .side .box{border:1px solid var(--hairline);padding:10px;display:grid;gap:6px}
.mock .side .box b{font:600 13px/1.35 var(--f-ui);color:var(--deep)}
.mock .fakebtn{display:inline-flex;justify-content:center;background:var(--sky);color:var(--deep);border-radius:var(--r-btn);font:500 12px var(--f-ui);padding:6px 10px}
.on-dark .screen .small,.on-dark .mock .small,.on-dark .screen .m{color:var(--muted)}
.on-dark .screen,.on-dark .mock{color:var(--body)}
.mock-cap{font:400 13px/1.4 var(--f-ui);color:var(--on-dark-soft);margin-top:10px}
.band-ice .mock-cap,.mock-cap.dark{color:var(--muted)}
@media (max-width:520px){.mock .cols{grid-template-columns:minmax(0,1fr)}.mock .results{border-right:0;border-bottom:1px solid var(--hairline)}}

/* small screen illustrations */
.screen{background:var(--surface);box-shadow:var(--shadow);font:400 14px/1.45 var(--f-ui);color:var(--body);min-width:0}
.screen .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--hairline);font:600 13px var(--f-ui);color:var(--deep);background:#f7f9fa}
.screen .bd{padding:14px;display:grid;gap:10px}
.screen .line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hairline);min-width:0}
.screen .line:last-child{border-bottom:0}
.screen .line span:first-child{min-width:0}
.screen .stage{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center}
.screen .stage i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--f-ui);font-style:normal}
.screen .stage i.done{background:var(--ok);color:#fff}
.screen .stage i.now{background:var(--accent);color:var(--deep)}
.screen .stage i.next{background:var(--ground);color:var(--muted)}
.screen ins{background:#e3f2ea;text-decoration:none;color:var(--ok)}
.screen del{background:#fbe7e5;color:var(--bad)}
.screen .check{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.screen .check span.box{width:16px;height:16px;border:1.5px solid var(--deep);border-radius:3px;flex:none;margin-top:2px;display:grid;place-items:center}
.screen .check span.box svg{width:12px;height:12px;color:var(--deep)}
.screen .meter{height:8px;background:var(--ground)}
.screen .meter span{display:block;height:100%;background:var(--ocean)}

/* diagram */
.diagram{background:var(--surface);border:1px solid var(--hairline);padding:clamp(12px,2vw,24px);overflow-x:auto}
.diagram svg{display:block;width:100%;min-width:640px;height:auto}

/* CTA band */
.cta-band{background:var(--deep);color:#fff;position:relative;padding-block:clamp(64px,8vw,104px) clamp(96px,10vw,140px)}
.cta-band .inner{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px;align-items:center}
@media (max-width:800px){.cta-band .inner{grid-template-columns:minmax(0,1fr)}}

/* footer */
.site-footer{background:var(--sky);color:var(--deep);padding-block:24px 40px;font:400 15px/1.6 var(--f-ui)}
.site-footer .cols{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px}
.site-footer .logo img{height:54px;width:auto;margin-bottom:14px}
.site-footer h2{font:600 13px/1.4 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--deep);margin-bottom:10px}
.site-footer ul{list-style:none;display:grid;gap:6px}
.site-footer a{color:var(--deep);font-weight:500}
.site-footer a:hover{color:#000}
.site-footer .tag{font:400 20px/1.35 var(--f-display);color:var(--deep);margin-top:6px}
.site-footer .legal{margin-top:28px;padding-top:16px;border-top:1px solid rgba(20,57,73,.25);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13.5px}
@media (max-width:860px){.site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.site-footer .cols{grid-template-columns:minmax(0,1fr)}}

/* form */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}}
label,.label{display:block;font:500 15px/1.4 var(--f-ui);color:var(--body);margin-bottom:8px}
.req{color:var(--bad)}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;min-height:49px;border:1px solid #cfd6da;border-radius:var(--r-input);padding:10px 12px;font:400 16px/1.4 var(--f-ui);background:#fff;color:var(--body)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ocean);outline-offset:1px;border-color:var(--ocean)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--bad);outline-color:var(--bad)}
.hint{font-size:13.5px;color:var(--muted);margin-top:6px}
.err{font-size:14px;color:var(--bad);margin-top:6px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font:500 15px/1.4 var(--f-ui);color:var(--body);margin-bottom:10px;padding:0}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
@media (max-width:640px){.checks{grid-template-columns:minmax(0,1fr)}}
.checks label{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:0;cursor:pointer}
.checks input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--ocean);flex:none}
.form-panel{background:var(--surface);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow)}
.result-panel{display:grid;gap:14px}
.result-panel pre{white-space:pre-wrap;word-break:break-word;background:var(--ground);padding:14px;font:400 14px/1.55 var(--f-ui);margin:0;max-height:320px;overflow:auto}
.contact-list{list-style:none;display:grid;gap:14px}
.contact-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
.contact-list .icon{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ocean);display:grid;place-items:center}
.contact-list .icon svg{width:18px;height:18px}
.contact-list b{display:block;color:var(--deep);font:600 15px var(--f-ui)}
.copy-btn{background:none;border:1px solid var(--ocean);color:var(--ocean);border-radius:var(--r-btn);font:500 13px var(--f-ui);padding:4px 12px;cursor:pointer;margin-left:8px}
.copy-btn:hover{background:var(--ocean);color:#fff}

/* layout helpers */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.split-60{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.split-faq{grid-template-columns:minmax(0,.55fr) minmax(0,1.6fr)}
@media (max-width:860px){.split,.split-60,.split-faq{grid-template-columns:minmax(0,1fr)}}
.toc{list-style:none;display:grid;gap:4px;font-size:15.5px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.aside-sticky{position:sticky;top:20px}
@media (max-width:860px){.aside-sticky{position:static}}
.family{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.2)}
.family>div{background:var(--ocean);padding:22px;display:grid;gap:6px;align-content:start}
.family b{font:600 26px/1.1 var(--f-display);color:#fff}
.family span{color:#dff3ff;font-size:15.5px}
.family .this{background:#005f8a;box-shadow:inset 0 4px var(--accent)}
.family .ptile{width:44px;height:44px;margin-bottom:6px}
@media (max-width:700px){.family{grid-template-columns:minmax(0,1fr)}}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fit ul{list-style:none;display:grid;gap:10px}
.fit li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:16px;line-height:1.55}
.fit li svg{width:18px;height:18px;margin-top:4px}
.fit .yes svg{color:var(--ok)}
.fit .no svg{color:var(--bad)}
@media (max-width:700px){.fit{grid-template-columns:minmax(0,1fr)}}
.sources{font-size:13.5px;color:var(--muted);line-height:1.55;max-width:90ch}
.badge-row{display:flex;flex-wrap:wrap;gap:8px}

/* ===== CRO revision (7 Oct 2026) ===== */

/* suite bar */
.suite-bar{background:#0d2733;border-bottom:1px solid rgba(255,255,255,.08);color:var(--on-dark-soft);font:400 13.5px/1.4 var(--f-ui);padding-block:8px}
.suite-bar a{color:#fff;font-weight:500;margin-left:6px}

/* grouped navigation */
.nav-groups{list-style:none;display:flex;gap:2px;align-items:center}
.nav-group{position:relative}
.nav-group-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#fff;font:500 16px/1.2 var(--f-ui);padding:12px 12px;cursor:pointer;box-shadow:inset 0 -2px transparent;transition:box-shadow var(--ease)}
.nav-group-btn svg{width:16px;height:16px;transition:transform var(--ease)}
.nav-group-btn:hover{box-shadow:inset 0 -2px rgba(255,255,255,.6)}
.nav-group.current>.nav-group-btn{box-shadow:inset 0 -2px #fff;font-weight:700}
.nav-group-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-group-label{display:none}
.nav-panel{list-style:none;position:absolute;top:calc(100% + 6px);left:0;min-width:300px;background:#fff;box-shadow:0 12px 30px rgba(10,30,40,.22);padding:8px;display:none;z-index:30}
.site-nav .nav-panel{display:none}
.site-nav .nav-group.open .nav-panel{display:grid;gap:2px}
.site-nav .nav-panel a{display:grid;gap:2px;padding:10px 12px;color:var(--deep);white-space:normal;box-shadow:none;font-weight:400}
.site-nav .nav-panel a b{font:600 15.5px/1.3 var(--f-ui);color:var(--deep)}
.site-nav .nav-panel a span{font:400 13.5px/1.4 var(--f-ui);color:var(--muted)}
.site-nav .nav-panel a:hover{background:var(--ground);box-shadow:none}
.site-nav .nav-panel a[aria-current="page"]{background:var(--tint);box-shadow:inset 3px 0 var(--ocean)}
@media (max-width:1120px){
  .nav-groups{flex-direction:column;align-items:stretch;gap:14px}
  .nav-group-btn{display:none}
  .nav-group-label{display:block;font:500 12.5px/1.4 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:#9fe3ff;padding:14px 4px 4px}
  .site-nav .nav-panel{display:grid;position:static;background:transparent;box-shadow:none;padding:0;min-width:0;gap:0}
  .site-nav .nav-panel a{color:#fff;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.14)}
  .site-nav .nav-panel a b{color:#fff;font-size:17px}
  .site-nav .nav-panel a span{color:var(--on-dark-soft)}
  .site-nav .nav-panel a:hover{background:rgba(255,255,255,.06)}
  .site-nav .nav-panel a[aria-current="page"]{background:transparent;box-shadow:inset 3px 0 var(--sky);padding-left:14px}
}

/* home hero: copy, art, then actions; on phones the screen sits right under the headline */
.hero .grid-hero.hero-home{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"top art" "bottom art";grid-template-rows:auto 1fr;row-gap:22px;align-items:start}
.hero-home .hero-top{grid-area:top;display:grid;gap:16px;min-width:0;align-self:end}
.hero-home .hero-art{grid-area:art;min-width:0;align-self:center}
.hero-home .hero-bottom{grid-area:bottom;display:grid;gap:18px;min-width:0;align-content:start}
.hero-home .subhead{font:400 clamp(18px,1.7vw,20px)/1.55 var(--f-ui);color:#fff;max-width:60ch}
.proof-line{display:flex;gap:10px;align-items:flex-start;font:500 15.5px/1.5 var(--f-body);color:#fff;max-width:60ch}
.proof-line svg{width:20px;height:20px;flex:none;margin-top:2px;color:#9fe3ff}
.router{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:400 15px var(--f-ui);color:var(--on-dark-soft)}
.router a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:var(--r-btn);background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font:500 14.5px var(--f-ui)}
.router a:hover{background:rgba(255,255,255,.24);color:#fff}
@media (max-width:900px){
  .hero .grid-hero.hero-home{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "art" "bottom";grid-template-rows:auto}
  .mock .side .effect{display:none}
}

/* callouts on the product screen */
.mock{position:relative}
.co{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--deep);font:700 11.5px/1 var(--f-ui);flex:none;vertical-align:middle;margin-right:6px}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font:400 14px/1.4 var(--f-ui);color:#fff}
.legend li{display:flex;align-items:center}
.legend .co{background:var(--accent);color:var(--deep)}

/* trust strip */
.trust{border-bottom:1px solid var(--hairline);padding-block:18px}
.trust ul{list-style:none;display:grid;grid-template-columns:repeat(4,auto);gap:10px 28px;justify-content:space-between}
@media (max-width:1000px){.trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.trust ul{grid-template-columns:minmax(0,1fr)}}
.trust li{display:flex;gap:8px;align-items:center;font:500 15px/1.4 var(--f-body);color:var(--deep)}
.trust svg{width:20px;height:20px;color:var(--ok);flex:none}

/* included out of the box */
.included{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.included div{background:var(--surface);padding:20px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-content:start}
.included .icon{grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--ocean);display:grid;place-items:center}
.included .icon svg{width:20px;height:20px}
.included b{font:600 16.5px/1.35 var(--f-body);color:var(--deep)}
.included span.d{font-size:15px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.included{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.included{grid-template-columns:minmax(0,1fr)}}

/* lead stat */
.lead-stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;background:var(--deep);color:#fff;padding:clamp(22px,3vw,34px);margin-bottom:clamp(28px,4vw,44px)}
.lead-stat b{font:600 clamp(52px,7vw,80px)/1 var(--f-ui);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.lead-stat p{font:500 clamp(17px,1.8vw,20px)/1.5 var(--f-body);color:#fff}
.lead-stat cite{display:block;margin-top:8px;font:400 14px/1.5 var(--f-ui);font-style:normal;color:var(--on-dark-soft)}
@media (max-width:600px){.lead-stat{grid-template-columns:minmax(0,1fr)}}

/* tour */
.player{background:#000;box-shadow:0 18px 40px rgba(10,30,40,.28)}
.player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.chapters{list-style:none;display:grid;gap:6px;counter-reset:none}
.chapters button{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline;text-align:left;background:var(--surface);border:1px solid var(--hairline);padding:12px 14px;cursor:pointer;font:400 15.5px/1.45 var(--f-ui);color:var(--body);transition:background var(--ease),border-color var(--ease)}
.chapters button:hover{border-color:var(--ocean)}
.chapters button[aria-current="true"]{background:var(--tint);border-color:var(--ocean)}
.chapters time{font:600 14px var(--f-ui);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.chapters b{color:var(--deep);font-weight:600}
.tour-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
@media (max-width:900px){.tour-grid{grid-template-columns:minmax(0,1fr)}}
.hero .tour-grid .small{color:var(--on-dark-soft)}

/* resource links */
.res-links{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:15.5px}
.on-dark .res-links a{color:#fff}
.bookings{display:grid;gap:10px;background:var(--surface);padding:20px;box-shadow:var(--shadow)}
.thanks{display:grid;gap:12px}

.hero-home .h1{font-size:clamp(34px,4.4vw,54px);line-height:1.08}
.mock .fakebtn{white-space:nowrap}
@media (max-width:700px){.suite-more{display:none}}
.accel-why{list-style:none}
.accel-why li{display:grid;gap:6px;align-content:start;padding-top:14px;border-top:3px solid var(--accent)}
.accel-why b{font:600 17px/1.35 var(--f-body);color:var(--deep)}
.accel-why span{font-size:15.5px;line-height:1.55;color:var(--body)}

/* foundation + built-for-you balance */
.balance{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:0;align-items:stretch}
.balance .side{background:var(--surface);border:1px solid var(--hairline);border-top:4px solid var(--deep);padding:clamp(20px,2.6vw,30px);display:grid;gap:12px;align-content:start;min-width:0}
.balance .side.mine{border-top-color:var(--accent)}
.balance .join{display:grid;place-items:center;font:600 34px/1 var(--f-display);color:var(--ocean)}
.balance .why{font-size:15.5px;line-height:1.6;color:var(--muted);padding-top:12px;border-top:1px solid var(--hairline)}
.balance .why b{color:var(--deep)}
.band-ice .balance .side{box-shadow:var(--shadow);border-color:transparent;border-top-color:var(--deep)}
.band-ice .balance .side.mine{border-top-color:var(--accent)}
@media (max-width:820px){.balance{grid-template-columns:minmax(0,1fr)}.balance .join{padding:8px 0}}
.compare-table th.hl,.compare-table td.hl{background:var(--tint);color:var(--deep);font-weight:500}
.compare-table thead th.hl{color:var(--ocean)}

/* screenshots and architecture thumbnail */
.shot{margin:0}
.shot img{width:100%;height:auto;border:1px solid var(--hairline);box-shadow:var(--shadow)}
.shot figcaption{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.arch-thumb{display:block;background:#fff;border:1px solid var(--hairline);padding:8px;transition:box-shadow var(--ease)}
.arch-thumb:hover{box-shadow:var(--shadow)}
.arch-thumb img{width:100%;height:auto}

/* ===== Demand-gen revision ===== */
.link-light{background:none;border:0;padding:0;color:#fff;font:500 15px var(--f-ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-light:hover{color:#cdf3ff}
.cta-btns-col{display:grid;gap:12px;justify-items:start}

/* sticky header after the hero */
.sticky-cta{position:fixed;left:0;right:0;top:0;z-index:40;background:var(--deep);color:#fff;padding-top:env(safe-area-inset-top,0px);box-shadow:0 4px 14px rgba(0,0,0,.18);transform:translateY(-110%);visibility:hidden;transition:transform var(--ease),visibility 0s linear .3s}
.sticky-cta.show{transform:none;visibility:visible;transition:transform var(--ease),visibility 0s}
.sticky-inner{display:flex;align-items:center;gap:16px;min-height:58px}
.brand-mini{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:400 19px var(--f-display)}
.brand-mini img{height:20px;width:auto}
.sticky-actions{margin-left:auto;display:flex;align-items:center;gap:18px}
.sticky-actions .btn{min-height:40px;padding:0 20px;font-size:15px}
@media (max-width:760px){.sticky-cta{display:none}}

/* phone bar */
.mobile-cta{display:none}
@media (max-width:760px){
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;align-items:center;background:var(--deep);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 14px rgba(0,0,0,.18);transform:translateY(110%);visibility:hidden;transition:transform var(--ease),visibility 0s linear .3s}
  .mobile-cta.show{transform:none;visibility:visible;transition:transform var(--ease),visibility 0s}
  .mobile-cta .btn{flex:1;min-height:46px}
  .mobile-tour{color:#fff;font:500 15px var(--f-ui);padding:12px 10px}
  body.has-mobile-bar .site-footer{padding-bottom:96px}
}

/* tour end screen */
.player{position:relative}
.endcard{position:absolute;inset:0;background:rgba(20,57,73,.94);color:#fff;display:grid;align-content:center;justify-items:start;gap:14px;padding:clamp(18px,4vw,40px)}
.endcard[hidden]{display:none!important}
.endcard .h3{color:#fff;max-width:28ch}
.endcard .eyebrow{color:#9fe3ff}
@media (max-width:520px){.endcard .btn{min-height:42px;padding:0 16px;font-size:15px}.endcard .h3{font-size:18px}}

/* forms */
.consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14.5px;line-height:1.5;color:var(--muted);margin:0;cursor:pointer}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ocean);flex:none}
.step2{display:grid;gap:14px}
.link-btn{background:none;border:0;padding:0;color:var(--ocean);font:inherit;text-decoration:underline;cursor:pointer}

/* readiness check */
.rq{background:var(--surface);padding:clamp(16px,2.4vw,24px);margin-top:14px;box-shadow:var(--shadow);border-left:4px solid transparent}
.rq.missing{border-left-color:var(--bad)}
.rq legend{display:flex;gap:12px;align-items:flex-start;font:500 17px/1.4 var(--f-body);color:var(--deep);float:left;width:100%;margin-bottom:12px}
.rq .opts{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.qn{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--ocean);font:600 13px var(--f-ui)}
.opt{display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 14px;border:1.5px solid #cfd6da;border-radius:var(--r-btn);font:400 15px/1.3 var(--f-ui);cursor:pointer;background:#fff;transition:border-color var(--ease),background var(--ease)}
.opt:hover{border-color:var(--ocean)}
.opt input{accent-color:var(--ocean);margin:0}
.opt:has(input:checked){border-color:var(--ocean);background:var(--tint);color:var(--deep);font-weight:500}
.opt:has(input:focus-visible){outline:3px solid var(--deep);outline-offset:2px}
.result-card{background:var(--surface);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow);border-top:4px solid var(--sky)}
.result-card .ticks li svg{color:var(--ocean)}

/* evaluation kit */
.kit-list{list-style:none;display:grid;gap:16px;margin-top:6px}
.kit-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.kit-list .icon{width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--ocean);display:grid;place-items:center}
.kit-list .icon svg{width:22px;height:22px}
.kit-list b{color:var(--deep);font:600 16.5px var(--f-body)}
.kit-list .d{font-size:15.5px;line-height:1.55;color:var(--body)}
.downloads{list-style:none;display:grid;gap:8px;margin-top:12px}
.downloads a{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--hairline);text-decoration:none;color:var(--deep);font:500 16px var(--f-ui);transition:border-color var(--ease),background var(--ease)}
.downloads a:hover{border-color:var(--ocean);background:var(--tint)}
.downloads svg{width:22px;height:22px;color:var(--ocean);flex:none}
.hero-more{font-size:15.5px;margin-top:6px}.on-dark .hero-more a{color:#fff;font-weight:500}
@media (max-width:760px){.kit-split>div:last-child{order:-1}}
/* Same hero top on every page: breadcrumb row, padding and rhythm match page_hero */
.hero .grid-hero.hero-home{padding-top:8px}
.hero-home .hero-top{gap:18px}
/* A wave already separates sections, so the section after one doesn't need full top padding */
section:has(> .wave) + .band{padding-top:clamp(16px,2.5vw,32px)}
/* Suite grid sizes to however many accelerators are listed */
.family{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
/* Playfair Display joins "ff" into a ligature that reads as a glitch at headline size; keep letters separate in display type */
h1,h2,h3,.h1,.h2,.h3,.subtitle,.brand .product,.types b,.quote,.site-footer .tag,.family b,.brand-mini{font-variant-ligatures:no-common-ligatures}

/* Home hero picture: a real demo screen in a browser frame, with numbered pins (build.hero_shot) */
.hero .grid-hero.hero-home{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.shot-hero{margin:0}
.browser{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.1)}
.browser .chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#e8edf0;border-bottom:1px solid #d5dde2}
.browser .chrome i{width:9px;height:9px;border-radius:50%;background:#c3cdd3;flex:none}
.browser .chrome span{margin-left:10px;flex:0 1 62%;min-width:0;height:18px;border-radius:9px;background:#fff;font:400 11px/18px var(--f-ui);color:var(--muted);padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser .viewport{position:relative;line-height:0}
.browser .viewport img{display:block;width:100%;height:auto}
.pin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--deep);font:700 13px/26px var(--f-ui);text-align:center;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.32)}
@media (max-width:900px){.hero .grid-hero.hero-home{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.pin{width:20px;height:20px;font-size:11px;line-height:20px;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.3)}.browser .chrome{height:22px}.browser .chrome span{display:none}}

/* Footer trimmed (19 Oct 2026): smaller logo and tagline, wider iomer column */
.site-footer .logo img{height:40px;margin-bottom:12px}
.site-footer .tag{font-size:17px}
@media (min-width:861px){.site-footer .cols{grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.3fr) minmax(0,1.15fr)}}

/* Header: the logo and the solution name are separate links */
.brand a{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none}