/* inomi — the site stylesheet. Ported from inomi.health/src/site.rs.
   Palette from the identity spec, curitor #2470. Type scale in :root.
   folio names the classes; this file defines them.
   Cache-bust: 2026-09-09 sign-in lockup. */
:root{--r0:#007B73;--r1:#008981;--r2:#00988E;--r3:#00A69C;--r4:#00B5AA;--r5:#00C4B8;--r6:#00D4C7;--r7:#00E3D5;--r8:#00F3E4;--brand:#0FC3B7;--bg:#F0F4F4;--bg-card:#FFFFFF;--bg-secondary:#E8EFEE;--tint-2:#E0EAE9;--border:#D7E2E0;--text:#1E2020;--text-muted:#666C6B;--text-subtle:#9AA2A1;--ink:#1E2020;--accent:#007B73;--accent-hover:#00988E;--accent-light:#E8EFEE;--danger:#DC002C;--success:#007F3A;--rad:12px}
:root{--body:"Outfit",system-ui,sans-serif;--width:1120px;--gutter:clamp(18px,5vw,40px);
  /* Type scale — nine steps. Nothing outside this list; if a size is missing, add it here. */
  --fs-display:clamp(38px,5.6vw,60px); --fs-title:clamp(26px,3.4vw,38px); --fs-heading:25px;
  --fs-subhead:20px; --fs-lead:clamp(18px,2.2vw,22px); --fs-body:17px; --fs-small:15.5px;
  --fs-fine:13.5px; --fs-micro:12.5px;
  /* Leading — four steps, chosen by role not by size. */
  --lh-display:1.06; --lh-title:1.15; --lh-snug:1.24; --lh-body:1.55;
  /* Weight — three steps. */
  --fw-body:400; --fw-medium:500; --fw-bold:600}
*{box-sizing:border-box}
body.site{margin:0;font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
p{max-width:65ch}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

/* NB: folio nests .aside-layout inside a .container, so it must NOT take the gutter
   again — that indents every aside one gutter past the rest of the page. */
.container,.fo-player,.faq,.compare,.tabs,.docs-body,.site-head,.site-foot-in{
  max-width:var(--width);margin-inline:auto;padding-inline:var(--gutter)}

.hero-header,.section-header,.cta-header,.card-feature h2,.card-label h2,.card-showcase h2,
.card-callout-header,.aside-header,.tabs-trigger-title{
  font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--text)}
.site-brand,.site-foot-brand,.site-nav a,.site-signin,.site-foot-nav a,.faq-header,.focused-brand{
  font-family:var(--body)}
.site-brand{display:flex;align-items:center;text-decoration:none}
.site-logo{display:block;height:44px;width:auto}
.site-foot-brand{margin:0}
.site-foot-brand .site-logo{height:26px}

.section-eyebrow,.aside-eyebrow,.card-label>p:first-child,.card-label-footer,.illustration-caption,
.docs-toc-title,.compare-group td,.section th{
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.6px;text-transform:uppercase;color:var(--text-subtle)}
.section-eyebrow,.aside-eyebrow{color:var(--accent);margin-bottom:.4em}

.hero-lead,.hero-body,.section-subheader,.aside-subtitle,.card-feature p,.card-label p,.card-callout-body,
.tabs-trigger-blurb,.compare-hint,.site-nav a,.site-foot-nav a{color:var(--text-muted)}

.hero{padding-block:clamp(28px,4vw,56px) clamp(16px,2vw,28px)}
.hero.center{text-align:center}
.hero-header{font-size:var(--fs-display);line-height:var(--lh-display);margin:.12em 0 .26em}
.hero-lead{font-size:var(--fs-lead);font-weight:var(--fw-body);margin-bottom:1.25em;max-width:64ch}
.hero-body{max-width:64ch}

.section,.section-alt,.section-dark{padding-block:clamp(16px,2.2vw,28px)}
.section-alt{background:var(--bg-secondary)}
.section-dark{background:var(--text);color:var(--bg)}
.section-header{font-size:var(--fs-title);line-height:var(--lh-title);margin:0 0 .38em;max-width:65ch}
.section-subheader{font-size:var(--fs-lead);margin-bottom:.8em;max-width:68ch}
.section li{margin-block:.4em}
.section li::marker{color:var(--accent)}
.section code{font-family:ui-monospace,monospace;background:var(--bg-secondary);padding:2px 7px;border-radius:6px}

table{border-collapse:collapse;width:100%;margin-block:1.3em;font-size:var(--fs-body)}
th{text-align:left}
th,td{border-bottom:1px solid var(--border);padding:11px 14px 11px 0;vertical-align:top}

.grid-2,.grid-3,.grid-4{display:grid;gap:clamp(12px,1.5vw,18px);margin-top:.9em}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card-feature,.card-label,.card-showcase,.card-callout,.illustration{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rad);
  padding:clamp(18px,2.2vw,24px)}
.card-showcase{text-align:center}
/* A prose card sits directly in the band, not in a grid: give it room to read. */
.container>.card-feature{padding:clamp(26px,3vw,40px)}
.container>.card-feature h2{font-size:var(--fs-heading);margin-bottom:.7em}
.container>.card-feature p{font-size:var(--fs-body);line-height:var(--lh-body);margin:0 0 1em;max-width:68ch}
.container>.card-feature p:last-child{margin-bottom:0}
.card-feature h2,.card-label h2,.card-showcase h2,.card-callout-header{
  font-size:var(--fs-subhead);line-height:var(--lh-snug);margin:0 0 .42em}
.card-feature p,.card-label p,.card-callout-body{margin:0;font-size:var(--fs-body)}
.card-feature p+p,.card-label p+p{margin-top:.65em}
.card-label>p:first-child{margin-bottom:.5em}
.card-label-footer{margin-top:.9em;padding-top:.8em;border-top:1px solid var(--border);
  font-family:ui-monospace,monospace;text-transform:none;letter-spacing:0}
/* A callout is an aside, not an alarm: it changes ground rather than wearing a stripe.
   The left accent rail is the single most over-used card decoration going. */
.card-callout{background:var(--tint-2);border-color:transparent}
.card-callout .card-callout-header,.card-callout h2{color:var(--text)}

.cta{text-align:center;padding-block:clamp(24px,3vw,40px)}
.cta-header{font-size:var(--fs-title);line-height:var(--lh-title);margin:0 0 .38em}
.cta-body{margin:0 auto 1.5em;max-width:56ch}
.hero-buttons,.cta-buttons,.section-buttons{display:flex;gap:13px;flex-wrap:wrap}
.cta-buttons{justify-content:center}

.btn-primary,.btn-ghost,.btn-signin,.site-signin{display:inline-block;padding:13px 26px;
  border-radius:8px;border:1.5px solid;text-decoration:none;font-weight:var(--fw-medium);font-size:var(--fs-small)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg-card)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost,.btn-signin,.site-signin{background:var(--bg-card);border-color:var(--border);color:var(--text)}
.btn-ghost:hover,.btn-signin:hover,.site-signin:hover{border-color:var(--accent);color:var(--accent)}

.fo-player{margin-top:clamp(16px,2vw,26px)}
.illustration{margin-top:1.3em;overflow-x:auto}
.illustration-caption{margin-top:.9em;text-align:center}
.illustration-error{background:var(--bg-secondary);border:1px solid var(--danger);color:var(--danger);
  padding:14px 18px;border-radius:10px;font-family:ui-monospace,monospace}

.aside{padding-block:clamp(14px,2vw,26px)}
.aside-layout{display:grid;grid-template-columns:280px 1fr;gap:clamp(20px,4vw,52px)}
.aside-left,.docs-nav-left{position:sticky;top:84px;align-self:start}
.aside-header{font-size:var(--fs-heading);line-height:var(--lh-title);margin-block:.2em}
.aside-body>*:first-child,.docs-nav-right>*:first-child,.tab-text>*:first-child{margin-top:0}
.aside-body p,.aside-body li{max-width:65ch}

.faq{padding-block:clamp(16px,2vw,28px)}
.faq-header{font-size:var(--fs-heading);cursor:pointer;padding-block:8px 16px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;padding-block:14px;font-weight:var(--fw-medium)}
.faq details[open] summary{color:var(--accent)}

.compare{overflow-x:auto;padding-block:clamp(16px,2vw,28px)}
.compare-table{min-width:560px}
.compare-feature{font-weight:var(--fw-bold)}
.compare-hint{display:block;font-size:var(--fs-fine)}
/* folio emits compare-col / compare-cell / compare-featured but does not list them in
   STYLE_CONTRACT, so nothing told a host to style them — the featured column had no
   treatment at all. Declared here; see the Go contract list in folio_contract_test.go. */
.compare-col{text-align:left;font-weight:var(--fw-bold);color:var(--text)}
.compare-cell{color:var(--text-muted)}
.compare-featured{background:var(--bg-secondary)}
th.compare-featured{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.compare-group td{background:var(--bg-secondary)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
.dot-on{background:var(--success)}
.dot-off{background:var(--border)}
.dot-half{background:linear-gradient(90deg,var(--success) 50%,var(--border) 50%)}
.chk,.x{display:inline-block;line-height:1;font-size:var(--fs-subhead)}
.chk::before{content:"\2713";color:var(--accent);font-weight:var(--fw-bold)}
.x::before{content:"\2013";color:var(--text-subtle)}

.tabs{padding-block:clamp(20px,2.6vw,34px)}
.tabs-triggers{display:flex;gap:clamp(6px,1.4vw,18px);flex-wrap:wrap;border-bottom:1px solid var(--border)}
.tabs-trigger{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:14px 14px 12px;cursor:pointer;border:0;border-bottom:2px solid transparent;background:none;
  font:inherit;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-muted);
  transition:color .15s,border-color .15s}
.tabs-trigger:hover{color:var(--text)}
.tabs-trigger.active{color:var(--accent);border-bottom-color:var(--accent)}
/* folio picks the first prose line of a tab as the trigger blurb AND renders it again
   in the panel, so showing it here duplicates it. Titles only until folio-rs is fixed. */
.tabs-trigger-blurb{display:none}
.tabs-panel{display:none;padding-top:clamp(22px,2.6vw,34px)}
.tabs-panel.active{display:block}
/* A list inside a tab is a sequence of steps. Folio emits a plain <ul>; a CSS counter
   turns it into numbered cards, so the numbering needs neither <ol> nor hand-written markup. */
/* Steps are :::card children of a :::tab. folio routes children to .tab-visual, so that
   is the step stack: a counter numbers the cards, and each card keeps a card's own body
   (heading, prose, bullets, table, code) instead of being squeezed onto one line. */
.tab-visual{counter-reset:step;display:grid;gap:14px;align-self:stretch}
.tab-visual .card-feature{counter-increment:step;position:relative;
  padding:22px 28px 22px 78px}
.tab-visual .card-feature::before{content:counter(step);position:absolute;left:26px;top:24px;
  width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--r0);
  display:grid;place-items:center;font-size:var(--fs-small);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums}
.tab-visual .card-feature h2{font-size:var(--fs-subhead);line-height:var(--lh-snug);margin:0 0 .5em}
.tab-visual .card-feature p{margin:0 0 .7em;color:var(--text-muted)}
.tab-visual .card-feature p:last-child{margin-bottom:0}
/* folio emits a lone link in a card as a bare <a class="btn-primary">, with no
   .section-buttons wrapper to space it. */
.tab-visual .card-feature>.btn-primary,.tab-visual .card-feature>.btn-ghost{margin-top:.5em}
.tab-visual .card-feature ul{list-style:disc;padding-left:20px;margin:.2em 0 .9em}
.tab-visual .card-feature li{margin-bottom:.25em;color:var(--text-muted);max-width:62ch}
.tab-visual .card-feature table{width:auto;min-width:min(440px,100%);margin-block:.6em 1em}
/* A group label restarts the numbering — Grok's device flow begins at 1 again. */
.tab-visual .card-label{counter-reset:step}
/* folio emits <div class="code-block"><pre> for a ``` fence but does not declare the class
   in STYLE_CONTRACT, so nothing here is caught by the contract test. Terminal treatment,
   on our own ink so it belongs to the palette rather than being a generic dark box. */
.code-block{position:relative;background:var(--ink);border-radius:10px;margin:.7em 0 1.1em;
  overflow:hidden}
.code-block pre{margin:0;padding:16px 60px 16px 18px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-fine);
  line-height:var(--lh-body);color:var(--bg-secondary);white-space:pre-wrap;overflow-wrap:anywhere}
.code-copy{position:absolute;top:10px;right:10px;padding:5px 11px;cursor:pointer;
  border:1px solid var(--text-muted);border-radius:7px;background:transparent;color:var(--r7);
  font:inherit;font-size:var(--fs-micro);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.code-copy:hover{border-color:var(--brand);color:var(--brand)}
.code-copy[data-done="1"]{color:var(--brand);border-color:var(--brand)}
.tab-text ul{list-style:disc;padding-left:20px;margin:.5em 0 1em}
.tab-text li{margin-bottom:.3em;max-width:64ch}
/* folio only emits .tab-visual when the tab has child blocks, so a text-only tab
   should not reserve a second column. */
.tab-content{display:grid;grid-template-columns:1fr;gap:34px;padding-top:4px}
.tab-content:has(.tab-visual){grid-template-columns:1.05fr .95fr}
.tab-content:has(.tab-visual .card-feature){grid-template-columns:1fr;gap:18px}
.tab-visual{align-self:center}
.tab-text{max-width:78ch}
.tab-text>p{max-width:68ch}

@media (max-width:860px){
  .aside-layout,.docs-body,.tab-content{grid-template-columns:1fr}
  .aside-left,.docs-nav-left{position:static}
}
.docs-body{display:grid;grid-template-columns:260px 1fr;gap:42px}
.docs-toc{list-style:none;padding:0}
.docs-toc-scroll{max-height:70vh;overflow-y:auto}
.focused-shell{max-width:560px;margin-inline:auto;padding:38px var(--gutter)}
.focused-brand{display:flex;align-items:center;gap:9px}
.focused-brand-square{width:22px;height:22px;border-radius:8px;background:var(--accent)}

.site-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:16px;
  position:sticky;top:0;z-index:20;background:rgba(240,244,244,.92);backdrop-filter:blur(8px)}
.site-head::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;
  height:1px;background:var(--border)}
.site-brand{margin-right:auto}
.site-nav{display:flex;align-items:center;gap:clamp(12px,2vw,22px);flex-wrap:wrap}
.site-nav a,.site-foot-nav a{text-decoration:none;font-size:var(--fs-small);font-weight:var(--fw-medium)}
.site-nav a:hover,.site-foot-nav a:hover,.site-nav a.active{color:var(--text)}
.site-menu-t{display:none}
.site-burger{display:none;font-size:var(--fs-heading);cursor:pointer;line-height:1;user-select:none}
.site-foot{margin-top:clamp(20px,2.5vw,34px);border-top:1px solid var(--border);
  background:var(--bg-secondary);padding-block:20px 22px}
.site-foot-in{display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px}
.site-foot-brand{margin-left:auto}
.site-foot-nav{display:flex;gap:20px;flex-wrap:wrap}
.site-foot-note{margin:0;font-size:var(--fs-fine);color:var(--text-subtle);max-width:62ch}
@media (max-width:760px){
  .site-burger{display:block;order:2}
  .site-nav{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:13px;
    padding-bottom:10px}
  .site-menu-t:checked ~ .site-nav{display:flex}
  .hero-header{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- Site chrome ------------------------------------------------------
   base.tmpl uses the shell this stylesheet was written for
   (site-head / site-brand / site-nav / site-main / site-foot). The two
   hover dropdowns are inou's, brought across so a folio page loads one
   stylesheet and nothing else — folio's rule is one sheet per product. */
.lang-menu,.nav-user-menu{position:relative}
.lang-current,.nav-user-name{cursor:pointer;font-size:var(--fs-small);
  font-weight:var(--fw-medium);color:var(--text-muted);white-space:nowrap}
.lang-current:hover,.nav-user-name:hover{color:var(--text)}
.lang-dropdown,.nav-user-dropdown{display:none;position:absolute;right:0;top:100%;
  min-width:170px;max-height:60vh;overflow-y:auto;z-index:40;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rad);
  padding:6px;box-shadow:0 8px 24px rgba(13,33,33,.10)}
.lang-menu:hover .lang-dropdown,.nav-user-menu:hover .nav-user-dropdown{display:block}
.lang-dropdown a,.nav-user-dropdown a{display:block;padding:8px 12px;border-radius:8px;
  text-decoration:none;font-size:var(--fs-small);color:var(--text-muted)}
.lang-dropdown a:hover,.nav-user-dropdown a:hover{background:var(--bg-secondary);color:var(--text)}
.lang-dropdown a.active{color:var(--accent);font-weight:var(--fw-medium)}