/* ==========================================================================
   Creobot design system.
   Tokens carried from the approved Creoglyph system. Accent swapped to
   Creobot blue and re-measured rather than assumed.
   ========================================================================== */

@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/fonts/plus-jakarta-sans-var.woff2") format("woff2");font-weight:200 800;font-display:swap;font-style:normal}
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-var.woff2") format("woff2");font-weight:200 800;font-display:swap;font-style:normal}

:root{
  /* surfaces */
  --bg:#08080a; --bg-1:#0e0e11; --bg-2:#141418; --bg-3:#1a1a20;

  /* ink. Values carried from the Creoglyph accessibility pass, where --ink-3
     and --ink-4 were lifted to clear 4.5 against rgb(20,20,24). */
  --ink:#f7f7f8; --ink-2:#a0a0a9; --ink-3:#8a8a94; --ink-4:#7d7d87;

  /* lines */
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.2);

  /* the single accent, Creobot blue.
     Measured: white on #0EA5E9 is 2.77, which fails the 4.5 minimum. The brand
     colour is unchanged everywhere it is decoration, icon or dark-surface text
     (6.63 to 7.22 on our surfaces). Only the surface carrying white text is
     darkened. See docs/CONTRAST_AUDIT.md. */
  --accent:#0EA5E9; --accent-hi:#38bdf8;
  --accent-btn:#0b7db1;      /* white text 4.58 */
  --accent-btn-hi:#0a709e;   /* white text 5.49 */
  /* Accent budget, matched to Creoglyph's measured usage: filled button, eyebrow,
     link text, one low alpha wash, one glow. The accent is NOT a resting border.
     See CREOGLYPH_VISUAL_REFERENCE_EXTRACTION.md section 2. */
  --accent-dim:rgba(14,165,233,.06);
  --accent-bd:rgba(255,255,255,.12);      /* was accent at .45. Now a normal line. */
  --accent-glow:rgba(14,165,233,.14);
  --accent-wash:rgba(14,165,233,.07);     /* Creoglyph CTA band alpha */

  --font-d:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-b:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --font-m:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* spacing scale. Nothing outside this list. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;
  --s-13:120px; --s-14:160px;

  /* semantic padding roles. Four, not seven. */
  --pad-lg:40px; --pad:32px; --pad-sm:24px; --pad-xs:20px;

  --r-pill:999px; --r-lg:16px; --r-md:12px; --r-sm:8px;

  --nav-h:72px; --wrap:1200px; --gutter:var(--s-6); --sec:var(--s-12);

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:150ms; --t:300ms; --t-slow:600ms;
  color-scheme:dark;
}
@media (min-width:1024px){:root{--gutter:var(--s-8)}}
@media (max-width:900px){:root{--sec:var(--s-10);--nav-h:64px}}
@media (max-width:600px){:root{--sec:var(--s-9);--gutter:var(--s-5)}}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--s-7))}
/* clip, not hidden. hidden makes the element a scroll container. */
body{background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;line-height:1.12;letter-spacing:-.022em}
h1{font-size:clamp(33px,4.6vw,55px)}
h2{font-size:clamp(27px,3.6vw,40px);letter-spacing:-.02em}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.012em;line-height:1.25}
h4{font-size:17px;letter-spacing:-.008em}
p{text-wrap:pretty}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--ink-2);line-height:1.62;max-width:62ch}
.eyebrow{font-family:var(--font-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:500}
.muted{color:var(--ink-2)} .muted-2{color:var(--ink-3)} .small{font-size:14px}
.mono{font-family:var(--font-m)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-n{max-width:760px}
.sec{padding-block:var(--sec)}
.sec-t{padding-top:var(--sec)}
.stack>*+*{margin-top:var(--s-4)}
.grid{display:grid;gap:var(--s-6)}
@media(min-width:760px){.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.g-3{grid-template-columns:repeat(3,1fr)}}
.sec-head{max-width:66ch;margin-bottom:var(--s-9)}
.sec-head h2{margin-top:var(--s-3)}
.sec-head p{margin-top:var(--s-4)}

/* ---------- buttons. Same behaviour language as Creoglyph. ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);white-space:nowrap;min-height:48px;padding:var(--s-3) var(--s-6);border:1px solid var(--line-2);border-radius:var(--r-pill);font-weight:600;font-size:15px;line-height:1;cursor:pointer;background:transparent;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:hover{border-color:var(--line-3);background:rgba(255,255,255,.05)}
.btn:active{transform:scale(.97)}
.btn .fx{overflow:hidden}
.btn-primary{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{background:var(--accent-btn-hi);border-color:var(--accent-btn-hi)}
.btn-sm{min-height:40px;padding:var(--s-2) var(--s-4);font-size:14px}
.btn-block{width:100%}
.btn .ic{width:14px;height:14px;flex:none;fill:currentColor}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.tlink{display:inline-flex;align-items:center;gap:var(--s-2);font-size:15px;font-weight:600;color:var(--accent);padding-block:var(--s-1);transition:gap var(--t-fast) var(--ease)}
.tlink:hover{gap:var(--s-3)}
.tlink .ic{width:12px;height:12px;fill:currentColor}

/* ---------- surfaces ---------- */
.card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.glow.card:hover,.glow.tier:hover,.glow.bento-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card-sm{padding:var(--pad-sm)}
.card-hover{transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.card-hover:hover{border-color:var(--line-2);background:var(--bg-2)}
.pill{display:inline-flex;align-items:center;gap:var(--s-2);height:26px;padding-inline:var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(255,255,255,.03);font-size:12px;font-weight:600;color:var(--ink-2);font-family:var(--font-m);letter-spacing:.02em}

.rule{height:1px;background:var(--line);border:0}

/* ---------- nav ---------- */
/* Starts transparent. Gains a surface only once scrolled, driven by a sentinel
   observer rather than a scroll handler. saturate(150%) keeps the blurred bar
   from going grey over the hero. */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.nav.is-stuck{background:rgba(8,8,10,.72);backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);border-bottom-color:var(--line)}
body{padding-top:var(--nav-h)}
.nav-in{display:flex;align-items:center;gap:var(--s-6);width:100%}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:48px;flex:none;color:var(--ink);
  transition:opacity var(--t-fast) var(--ease)}
.brand:hover{opacity:.78}
.brand .mark{width:22px;height:22px;color:var(--ink);flex:none}
.wordmark{font-family:var(--font-d);font-weight:700;font-size:18px;letter-spacing:-.025em}
@media(max-width:600px){.brand .mark{width:20px;height:20px}.wordmark{font-size:17px}}
.nav-links{display:none;align-items:center;gap:var(--s-6);margin-left:var(--s-4)}
.nav-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-3);
  border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--ink-2);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-links a[aria-current]{color:var(--ink)}
/* Vertical label swap. 105% so no sliver of the outgoing glyph remains.
   Applied to focus-visible as well, so keyboard users get the same feedback. */
.fx{position:relative;display:inline-block;overflow:hidden;line-height:1.35}
.fx-a,.fx-b{display:block;transition:transform 420ms var(--ease)}
.fx-b{position:absolute;left:0;top:0;transform:translateY(105%)}
.nav-links a:hover .fx-a,.nav-links a:focus-visible .fx-a,
.btn:hover .fx-a,.btn:focus-visible .fx-a{transform:translateY(-105%)}
.nav-links a:hover .fx-b,.nav-links a:focus-visible .fx-b,
.btn:hover .fx-b,.btn:focus-visible .fx-b{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.fx-a,.fx-b{transition:none}.fx-b{display:none}}
.nav-cta{display:none}
.nav-tog{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent}
.nav-tog .bars{position:relative;display:block;width:16px;height:10px}
.nav-tog .bars i{position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.nav-tog .bars i:first-child{top:0}
.nav-tog .bars i:last-child{bottom:0}
.nav-tog[aria-expanded="true"] .bars i:first-child{transform:translateY(4.25px) rotate(45deg)}
.nav-tog[aria-expanded="true"] .bars i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
@media(min-width:1000px){.nav-links{display:flex}.nav-tog{display:none}
  .nav-cta{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}}
.mnav{display:none;position:fixed;inset:var(--nav-h) 0 0;z-index:55;background:var(--bg);padding:var(--s-7) var(--gutter);overflow-y:auto}
.mnav.is-open{display:block}
.mnav a{display:block;padding:var(--s-4) 0;font-size:19px;font-family:var(--font-d);font-weight:600;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:var(--s-7)}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:var(--s-10);padding-bottom:var(--s-11);overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg canvas{position:absolute;inset:0}

.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:19ch}
.hero .lede{margin-top:var(--s-5)}
.hero .cta-row{margin-top:var(--s-7)}
.hero-note{margin-top:var(--s-5);font-size:14px;color:var(--ink-3)}

/* ---------- product UI mockup ---------- */
/* A defined edge, not an edge plus a diffuse shadow. Impeccable: commit to one. */
.ui{background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.ui-bar{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);background:var(--bg-2)}
.ui-dot{width:9px;height:9px;border-radius:50%;background:var(--line-3);flex:none}
.ui-title{font-family:var(--font-m);font-size:12px;color:var(--ink-3);margin-left:var(--s-2)}
.ui-body{padding:var(--pad-sm)}
.msg{display:flex;gap:var(--s-3);margin-bottom:var(--s-4);align-items:flex-start}
.msg:last-child{margin-bottom:0}
.msg-av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--font-m)}
.msg-av.u{background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line-2)}
.msg-av.b{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(14,165,233,.3)}
.msg-tx{font-size:14px;line-height:1.55;color:var(--ink-2);padding-top:2px}
.msg-tx strong{color:var(--ink);font-weight:600}
.src{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-2);padding:3px 9px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-family:var(--font-m);font-size:11px;color:var(--ink-3)}

/* ---------- bento ---------- */
.bento{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:760px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(210px,auto)}
  .b-1{grid-column:span 4} .b-2{grid-column:span 2}
  .b-3{grid-column:span 2} .b-4{grid-column:span 2} .b-5{grid-column:span 2}
  .b-6{grid-column:span 6}
}
.bento-card{position:relative;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad-sm);overflow:hidden;display:flex;flex-direction:column;gap:var(--s-3);transition:border-color var(--t) var(--ease)}
.bento-card:hover{border-color:var(--accent-bd)}
.bento-card h3{font-size:19px}
.bento-card p{font-size:15px;color:var(--ink-2);line-height:1.55}
/* No rounded-square icon tile above the heading. The icon sits inline with the
   title instead, which is the pattern generators do not reach for. */
.bento-ic{display:none}
.bento-ic svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.7}
.bento-vis{margin-top:auto;padding-top:var(--s-4)}
@media(min-width:1040px){.b-6{flex-direction:row;align-items:center;gap:var(--s-9);padding:var(--pad)}.b-6 .bento-vis{margin:0;padding:0;flex:1;min-width:0}.b-6 .bento-tx{flex:1;min-width:0}}

/* small in-card visuals. Legible at rendered size, never decorative filler. */
.vrow{display:flex;align-items:center;gap:var(--s-2);padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);font-family:var(--font-m);font-size:12px;color:var(--ink-2);margin-bottom:6px}
.vrow:last-child{margin-bottom:0}
.vrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.vrow .rt{margin-left:auto;color:var(--ink-3);font-size:11px}
.bar{height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}

/* ---------- pricing. Receipt-style card, dark and light variants. ---------- */
.ptoggle{display:inline-flex;align-items:center;gap:var(--s-3);padding:5px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--bg-1)}
.ptoggle button{min-height:38px;padding-inline:var(--s-5);border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font-size:14px;font-weight:600;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.ptoggle button[aria-pressed="true"]{background:var(--accent-btn);color:#fff}
.psave{font-family:var(--font-m);font-size:12px;color:var(--accent);font-weight:600}

.ptiers{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-top:var(--s-9);align-items:start}
@media(min-width:680px){.ptiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.ptiers{grid-template-columns:repeat(4,1fr)}}

.tier{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);padding:var(--pad-sm);display:flex;flex-direction:column}
.tier.pop{border-color:var(--accent-bd);background:var(--bg-2)}
.tier-tag{position:absolute;top:-11px;left:var(--pad-sm);height:22px;padding-inline:10px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--accent-btn);color:#fff;font-size:11px;font-weight:700;font-family:var(--font-m);letter-spacing:.04em}
.tier h3{font-size:17px}
.tier-price{display:flex;align-items:baseline;gap:4px;margin-top:var(--s-4);font-family:var(--font-d)}
.tier-price b{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tier-price span{font-size:14px;color:var(--ink-3)}
.tier-cred{margin-top:var(--s-2);font-family:var(--font-m);font-size:13px;color:var(--accent)}
.tier .btn{margin-top:var(--s-5)}
/* dashed rules echo the receipt reference without copying it */
.tier-list{margin-top:var(--s-5);border-top:1px dashed var(--line-2);padding-top:var(--s-4)}
.tier-list li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:14px;color:var(--ink-2);padding-block:7px;border-bottom:1px dashed var(--line);line-height:1.45}
.tier-list li:last-child{border-bottom:0}
.tier-list svg{width:13px;height:13px;flex:none;margin-top:4px;stroke:var(--ink-4);fill:none;stroke-width:2.2}
.tier.pop .tier-list svg{stroke:var(--accent)}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
th,td{text-align:left;padding:var(--s-4);border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--font-d);font-weight:600;font-size:13px;color:var(--ink-3);letter-spacing:.02em;background:var(--bg-1)}
td{color:var(--ink-2)} td strong{color:var(--ink);font-weight:600}
tr:last-child td{border-bottom:0}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose>*+*{margin-top:var(--s-5)}
.prose h2{margin-top:var(--s-11);font-size:clamp(23px,2.6vw,29px)}
.prose h3{margin-top:var(--s-9);font-size:20px}
.prose p{color:var(--ink-2);line-height:1.72}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-bd)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose ul,.prose ol{padding-left:var(--s-6);color:var(--ink-2)}
.prose ul li{list-style:disc;padding-block:5px} .prose ol li{list-style:decimal;padding-block:5px}
.prose li::marker{color:var(--accent)}
.prose blockquote{border-left:2px solid var(--accent-bd);padding-left:var(--s-5);color:var(--ink-2);font-style:normal}
.prose code{font-family:var(--font-m);font-size:.88em;background:var(--bg-2);border:1px solid var(--line);padding:2px 6px;border-radius:5px;color:var(--accent-hi)}
.prose pre{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--pad-sm);overflow-x:auto}
.prose pre code{background:0;border:0;padding:0;color:var(--ink-2);font-size:13px;line-height:1.6}
.callout{background:var(--bg-1);border:1px solid var(--line-2);border-left:2px solid var(--accent);border-radius:var(--r-md);padding:var(--pad-sm);font-size:15px;color:var(--ink-2)}
.callout strong{color:var(--ink)}

/* ---------- article and blog list ---------- */
.amet{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);font-size:14px;color:var(--ink-3);margin-top:var(--s-6)}
.avat{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink-2);font-family:var(--font-m)}
.plist{display:grid;gap:var(--s-4)}
@media(min-width:760px){.plist{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.plist{grid-template-columns:repeat(3,1fr)}}
.pcard{display:flex;flex-direction:column;gap:var(--s-3);height:100%}
.pcard h3{font-size:18px;line-height:1.32}
.pcard p{font-size:14px;color:var(--ink-2);line-height:1.55}
.pcard .amet{margin-top:auto;padding-top:var(--s-4);font-size:13px}
.ptag{font-family:var(--font-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:var(--s-11) var(--s-8);margin-top:var(--s-12);background:var(--bg-1)}
.foot-grid{display:grid;gap:var(--s-9);grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.foot h4{font-size:12px;font-family:var(--font-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);font-weight:500;margin-bottom:var(--s-4)}
.foot li{padding-block:6px}
.foot a{font-size:15px;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.foot a:hover{color:var(--ink)}
.foot-bot{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;margin-top:var(--s-11);padding-top:var(--s-6);border-top:1px solid var(--line);font-size:14px;color:var(--ink-4)}



/* ---------- reveal hooks. Scoped by hand, never auto-applied. ---------- */
/* Reveal. The hidden state applies only when html.anim is present, which the
   inline head script adds when JS runs and motion is wanted. Without it every
   element below is fully visible, which is the point. */
html.anim [data-rise],
html.anim [data-enter]{opacity:0;transform:translateY(16px);filter:blur(10px);
  transition:opacity 650ms var(--ease),transform 650ms var(--ease),filter 650ms var(--ease)}
html.anim [data-enter]{transform:translateY(18px);transition-duration:800ms}
html.anim [data-rise].is-in,
html.anim [data-enter].is-in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  html.anim [data-rise],html.anim [data-enter]{opacity:1;transform:none;filter:none;transition:none}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:var(--s-3);z-index:100;padding:var(--s-3) var(--s-5);background:var(--accent-btn);color:#fff;border-radius:var(--r-sm)}

/* ==========================================================================
   Pointer aware border glow.
   The Creoglyph GlowingEffect treatment. JS writes --gx --gy --ga --on and
   nothing else, so this cannot move layout or intercept a click.
   Consumed as calc(var(--on) * .55), matching the source.
   ========================================================================== */
.glow{position:relative;isolation:isolate}
.glow>*{position:relative;z-index:1}
.glow::before,.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;opacity:0;transition:opacity 260ms var(--ease)}
/* a: a soft pool of light following the cursor across the surface */
.glow::before{background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),
  rgba(14,165,233,.10),transparent 62%);opacity:calc(var(--on,0) * .55)}
/* b: the border itself lights on the side nearest the cursor, masked to 1px */
.glow::after{padding:1px;
  background:conic-gradient(from var(--ga,0deg) at var(--gx,50%) var(--gy,50%),
    rgba(14,165,233,.55) 0deg,rgba(14,165,233,.12) 55deg,transparent 130deg,
    transparent 230deg,rgba(14,165,233,.12) 305deg,rgba(14,165,233,.55) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:calc(var(--on,0) * .55)}
@media (prefers-reduced-motion:reduce){.glow::before,.glow::after{display:none}}
@media (hover:none),(pointer:coarse){.glow::before,.glow::after{display:none}}

/* ==========================================================================
   Bento. Cards carry live product motion, not icons on a grid.
   ========================================================================== */
.bento-card{transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.bento-card:hover{border-color:var(--line-2);transform:translateY(-2px)}




/* rows: the resting state is a normal line. Only the active row takes accent. */
.vrow{border-color:var(--line);background:rgba(255,255,255,.02);color:var(--ink-2);
  transition:border-color 400ms var(--ease),background 400ms var(--ease),color 400ms var(--ease)}
.vrow .dot{background:var(--ink-4);transition:background 400ms var(--ease),box-shadow 400ms var(--ease)}
.vrow.is-live{border-color:rgba(14,165,233,.34);background:var(--accent-dim);color:var(--ink)}
.vrow.is-live .dot{background:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.16)}
.vrow .rt{transition:color 400ms var(--ease)}
.vrow.is-live .rt{color:var(--accent)}

/* file chips feeding the index */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:rgba(255,255,255,.02);font-family:var(--font-m);font-size:11.5px;
  color:var(--ink-3);opacity:.45;transform:translateY(3px);
  transition:opacity 460ms var(--ease),transform 460ms var(--ease),border-color 460ms var(--ease),color 460ms var(--ease)}
.chip.is-in{opacity:1;transform:none;color:var(--ink-2);border-color:var(--line-2)}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--ink-4);flex:none;transition:background 460ms var(--ease)}
.chip.is-in i{background:var(--accent)}

/* routing paths */
.route{display:grid;gap:6px}
.rpath{display:flex;align-items:center;gap:var(--s-2);padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:rgba(255,255,255,.02);font-family:var(--font-m);font-size:11.5px;
  color:var(--ink-3);position:relative;overflow:hidden;
  transition:border-color 420ms var(--ease),color 420ms var(--ease)}
.rpath .tag{margin-left:auto;font-size:10.5px;color:var(--ink-4);transition:color 420ms var(--ease)}
.rpath.is-live{border-color:rgba(14,165,233,.34);color:var(--ink)}
.rpath.is-live .tag{color:var(--accent)}
/* a single sweep along the chosen path, once, when it becomes active */
.rpath::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,
  transparent,rgba(14,165,233,.14),transparent);transform:translateX(-100%)}
.rpath.is-live::after{animation:sweep 900ms var(--ease)}
@keyframes sweep{to{transform:translateX(100%)}}

/* handoff status pill: AI to human */
.status{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);font-family:var(--font-m);font-size:11.5px;
  color:var(--ink-2);transition:border-color 500ms var(--ease),color 500ms var(--ease),background 500ms var(--ease)}
.status .who{transition:opacity 300ms var(--ease)}
.status.is-human{border-color:rgba(14,165,233,.34);background:var(--accent-dim);color:var(--ink)}
.status .av{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;
  background:rgba(255,255,255,.07);color:var(--ink-2);transition:background 500ms var(--ease),color 500ms var(--ease)}
.status.is-human .av{background:var(--accent);color:#04222f}

/* deploy: draft to live */
.deploy{display:flex;align-items:center;gap:var(--s-3)}
.dcode{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);font-family:var(--font-m);font-size:11px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dstate{font-family:var(--font-m);font-size:11px;color:var(--ink-4);flex:none;
  transition:color 500ms var(--ease)}
.dstate.is-live{color:var(--accent)}

/* analytics bars that grow when the card is reached */
.gap-row{display:grid;grid-template-columns:1fr auto;gap:4px var(--s-3);align-items:center;margin-bottom:9px}
.gap-row:last-child{margin-bottom:0}
.gap-q{font-size:12px;color:var(--ink-2);line-height:1.3}
.gap-n{font-family:var(--font-m);font-size:11px;color:var(--ink-4)}
.gap-bar{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.gap-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);
  transition:width 900ms var(--ease)}

/* ownership toggles */
.own{display:grid;gap:6px}
.orow{display:flex;align-items:center;gap:var(--s-3);padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:rgba(255,255,255,.02);font-size:12px;color:var(--ink-2)}
.sw{margin-left:auto;width:26px;height:15px;border-radius:var(--r-pill);background:rgba(255,255,255,.09);
  position:relative;flex:none;transition:background 450ms var(--ease)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--ink-3);transition:transform 450ms var(--ease),background 450ms var(--ease)}
.orow.is-on .sw{background:rgba(14,165,233,.32)}
.orow.is-on .sw::after{transform:translateX(11px);background:var(--accent)}

/* ==========================================================================
   Hero scene. Three panels showing the loop the headline claims.
   Stacks on mobile in reading order: sources, conversation, signal.
   ========================================================================== */
.scene{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:900px){
  .scene{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,.85fr);align-items:start}
  .scene-chat{margin-top:-14px}
}
.scene .ui-body{padding:var(--s-4)}
.scene-note{margin-top:var(--s-4);font-size:12px;line-height:1.45;color:var(--ink-4)}
.lead-row{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);padding:8px 10px;
  border:1px dashed var(--line-2);border-radius:var(--r-sm);font-size:12px;color:var(--ink-3);
  font-family:var(--font-m)}
.lead-row .lead-ic{color:var(--accent)}
.lead-row .rt{margin-left:auto;color:var(--ink-4)}
.scene .msg-tx{font-size:13.5px}
.scene .gap-q{font-size:11.5px}

/* index progress on the training card, so the wide card carries real detail
   rather than empty space when a taller neighbour sets the row height */
.idx{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4)}
.idx-l,.idx-n{font-family:var(--font-m);font-size:11px;color:var(--ink-4);flex:none}
.idx-bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.idx-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);
  transition:width 1600ms var(--ease)}
.bento-card .chips{min-height:0}
/* tighten the gap the wide card can open up */
@media(min-width:1040px){.b-1 .bento-vis{padding-top:var(--s-5)}}


/* ==========================================================================
   Composition primitives taken from Creoglyph's own creobot.html.
   Sections are separated by a hairline rule, never by an uppercase eyebrow.
   Headings are declarative sentences, so they carry the section on their own.
   ========================================================================== */
.rule-top{border-top:1px solid var(--line)}
.sec-head{max-width:60ch;margin-bottom:var(--s-9)}
.sec-head h2{margin:0}
.sec-head p{margin-top:var(--s-5)}
.lead-in{font-size:13px;font-family:var(--font-m);color:var(--ink-4);margin-bottom:var(--s-5);
  display:flex;align-items:center;gap:var(--s-3)}
.lead-in::after{content:"";height:1px;flex:1;background:var(--line)}

/* Two sided contrast, replacing the three identical cards. */
.vs{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:820px){.vs{grid-template-columns:1fr 1fr}}
.vs-side{padding:var(--pad)}
.vs-side+.vs-side{border-top:1px solid var(--line)}
@media(min-width:820px){.vs-side+.vs-side{border-top:0;border-left:1px solid var(--line)}}
.vs-side h3{font-size:19px;margin-bottom:var(--s-5)}
.vs-dim{background:var(--bg);color:var(--ink-3)}
.vs-dim h3{color:var(--ink-2)}
.vs-live{background:var(--bg-1)}
.vs-row{display:flex;gap:var(--s-3);align-items:flex-start;padding-block:10px;font-size:14.5px;
  line-height:1.5;border-bottom:1px solid var(--line)}
.vs-row:last-child{border-bottom:0}
.vs-row .k{flex:none;width:16px;height:16px;margin-top:2px;display:grid;place-items:center;
  font-family:var(--font-m);font-size:12px;color:var(--ink-4)}
.vs-live .vs-row .k{color:var(--accent)}

/* Loop: six states, cause and effect, no numerals and no icon row. */
.loop{display:grid;gap:var(--s-3)}
@media(min-width:900px){.loop{grid-template-columns:repeat(6,1fr)}}
.loop-step{position:relative;padding:var(--s-5) var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--bg-1);
  transition:border-color 500ms var(--ease),background 500ms var(--ease)}
.loop-step h3{font-size:15px;letter-spacing:-.01em}
.loop-step p{font-size:13px;color:var(--ink-3);margin-top:var(--s-2);line-height:1.45}
.loop-step .tick{position:absolute;top:var(--s-4);right:var(--s-4);width:6px;height:6px;
  border-radius:50%;background:var(--line-3);transition:background 500ms var(--ease),
  box-shadow 500ms var(--ease)}
.loop-step.is-on{border-color:rgba(14,165,233,.32);background:var(--bg-2)}
.loop-step.is-on .tick{background:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.14)}
.loop-step.is-on p{color:var(--ink-2)}
@media(min-width:900px){
  .loop-step::after{content:"";position:absolute;top:50%;right:calc(var(--s-3) * -1);width:var(--s-3);
    height:1px;background:var(--line)}
  .loop-step:last-child::after{display:none}
}

/* Bento heading row: icon inline with the title, no tile above it. */
.bento-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-3)}
.bento-head svg{width:15px;height:15px;flex:none;stroke:var(--ink-4);fill:none;stroke-width:1.7;
  transition:stroke var(--t) var(--ease)}
.bento-card:hover .bento-head svg{stroke:var(--accent)}
.bento-head h3{font-size:18px;margin:0}

/* FAQ. Native details, the Creoglyph marker of two 1px pseudo elements. */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq details{width:100%}
.faq summary{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-6) 0;cursor:pointer;
  list-style:none;font-family:var(--font-d);font-weight:600;font-size:17px;color:var(--ink-2);
  letter-spacing:-.012em;transition:color var(--t-fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ink)}
.faq details[open] summary{color:var(--ink)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}
.faq summary .q{flex:1;min-width:0}
.faq summary .mk{flex:none;position:relative;width:14px;height:14px;margin-top:5px}
.faq summary .mk::before,.faq summary .mk::after{content:"";position:absolute;background:var(--ink-4);
  transition:transform 300ms var(--ease),background 300ms var(--ease)}
.faq summary .mk::before{left:0;top:6.5px;width:14px;height:1px}
.faq summary .mk::after{left:6.5px;top:0;width:1px;height:14px}
.faq details[open] summary .mk::before{background:var(--accent)}
.faq details[open] summary .mk::after{transform:scaleY(0);background:var(--accent)}
.faq-a{padding:0 0 var(--s-6) calc(14px + var(--s-4));font-size:15px;line-height:1.65;color:var(--ink-3);
  max-width:72ch}

/* Ticket pricing. A stub, a perforation, and a body. */
.tickets{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-top:var(--s-9);align-items:start}
@media(min-width:680px){.tickets{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.tickets{grid-template-columns:repeat(4,1fr)}}
.ticket{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color var(--t) var(--ease)}
.ticket.is-pop{border-color:rgba(14,165,233,.34)}
.tk-stub{padding:var(--s-5) var(--pad-sm) var(--s-6)}
.tk-name{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.tk-name h3{font-size:15px;font-family:var(--font-m);font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
.tk-tag{font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;color:var(--accent)}
.tk-price{display:flex;align-items:baseline;gap:3px;margin-top:var(--s-4);font-family:var(--font-d)}
.tk-price .cur{font-size:15px;color:var(--ink-3)}
.tk-price b{font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1}
.tk-price .per{font-size:13px;color:var(--ink-4)}
.tk-cred{margin-top:var(--s-3);font-family:var(--font-m);font-size:12.5px;color:var(--ink-2)}
/* the perforation. two notches and a dashed line between them. */
.tk-perf{position:relative;height:1px;background:transparent;margin-block:2px}
.tk-perf::before,.tk-perf::after{content:"";position:absolute;top:-8px;width:16px;height:16px;
  border-radius:50%;background:var(--bg)}
.tk-perf::before{left:-8px}
.tk-perf::after{right:-8px}
.tk-perf span{position:absolute;left:10px;right:10px;top:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 9px)}
.tk-body{padding:var(--s-6) var(--pad-sm) var(--pad-sm);display:flex;flex-direction:column;flex:1}
.tk-list{margin-bottom:var(--s-6)}
.tk-list li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:13.5px;color:var(--ink-3);
  padding-block:6px;line-height:1.45}
.tk-list .k{flex:none;font-family:var(--font-m);font-size:11px;color:var(--ink-4);margin-top:2px}
.ticket.is-pop .tk-list .k{color:var(--accent)}
.tk-body .btn{margin-top:auto}

/* ==========================================================================
   Mega navigation.
   A panel that belongs to the header rather than floating over the page, so the
   glass surface reads as one continuous piece of chrome when it opens.
   ========================================================================== */
.nav{transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.nav.has-mega{background:rgba(8,8,10,.86);backdrop-filter:saturate(150%) blur(18px);
  -webkit-backdrop-filter:saturate(150%) blur(18px);border-bottom-color:var(--line)}

.nav-link{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 var(--s-3);
  border:0;background:0;border-radius:var(--r-pill);font-family:var(--font-b);font-size:14.5px;
  font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav-link:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-link[aria-current]{color:var(--ink)}
.nav-trig .chev{width:12px;height:12px;opacity:.6;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.nav-trig[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-trig[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:1}

.mega{position:absolute;left:0;right:0;top:100%;z-index:59;
  background:#0b0b0e;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
.mega[hidden]{display:none}
.mega.is-open{opacity:1;transform:none;pointer-events:auto}
.mega-in{display:grid;gap:var(--s-8);padding-block:var(--s-8);grid-template-columns:1fr}
@media(min-width:1000px){
  .mega-in{grid-template-columns:minmax(0,.72fr) minmax(0,2fr)}
  .mg-grid{padding-left:var(--s-8);border-left:1px solid var(--line)}
}

.mg-side{max-width:34ch}
.mg-side-t{font-family:var(--font-d);font-weight:700;font-size:18px;letter-spacing:-.02em}
.mg-side-d{margin-top:var(--s-3);font-size:14px;line-height:1.55;color:var(--ink-3)}
.mg-side .tlink{margin-top:var(--s-5)}

.mg-grid{display:grid;gap:2px}
@media(min-width:680px){.mg-2{grid-template-columns:repeat(2,1fr)}}
.mg-item{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-4);border-radius:var(--r-md);
  border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.mg-item:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.mg-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mg-mark{flex:none;width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.02)}
.mg-mark svg{width:15px;height:15px;stroke:var(--ink-4);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t-fast) var(--ease)}
.mg-item:hover .mg-mark svg{stroke:var(--accent)}
.mg-tx{min-width:0}
.mg-t{display:block;font-family:var(--font-d);font-weight:600;font-size:14.5px;color:var(--ink);
  letter-spacing:-.008em}
.mg-d{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink-4)}

.nav-scrim{position:fixed;inset:var(--nav-h) 0 0;z-index:58;background:rgba(4,4,6,.5);
  opacity:0;transition:opacity 220ms var(--ease)}
.nav-scrim[hidden]{display:none}
.nav-scrim.is-on{opacity:1}

@media(max-width:999px){.mega,.nav-scrim{display:none !important}}
@media (prefers-reduced-motion:reduce){
  .mega{transition:none;transform:none}
  .nav-trig .chev{transition:none}
}

.mnav-h{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);padding-top:var(--s-6);padding-bottom:var(--s-2)}
.mnav-h:first-child{padding-top:0}
.mnav a{font-size:17px;padding:var(--s-3) 0}

/* ==========================================================================
   Hero product demo.
   Everything is present and readable at rest. The timeline only reveals it in
   order, so a script failure costs the choreography and not the content.
   ========================================================================== */
.hero-demo{margin-top:var(--s-9)}
.demo{position:relative}

.demo-rail{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-5)}
.demo-step{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.02em;color:var(--ink-4);
  transition:color 400ms var(--ease),border-color 400ms var(--ease),background 400ms var(--ease)}
.demo-step::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-3);
  transition:background 400ms var(--ease),box-shadow 400ms var(--ease)}
.demo-step.is-on{color:var(--ink-2);border-color:var(--line-2)}
.demo-step.is-on::before{background:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.14)}
.demo-step.is-done{color:var(--ink-3)}
.demo-step.is-done::before{background:var(--ink-4);box-shadow:none}

.demo-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){
  .demo-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.36fr) minmax(0,.82fr)}
  .demo-chat{margin-top:-12px}
}
.demo .ui-body{padding:var(--s-4)}
.demo .msg-tx{font-size:13.5px}
.demo .gap-q{font-size:11.5px}
.scene-note{margin-top:var(--s-4);font-size:12px;line-height:1.45;color:var(--ink-4)}

.msg-av.h{background:rgba(255,255,255,.09);color:var(--ink);border:1px solid var(--line-2)}
.src-miss{border-style:dashed;color:var(--ink-4)}

.lead-row{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);padding:8px 10px;
  border:1px dashed var(--line-2);border-radius:var(--r-sm);font-size:12px;color:var(--ink-3);
  font-family:var(--font-m)}
.lead-row .lead-ic{color:var(--accent)}
.lead-row .rt{margin-left:auto;color:var(--ink-4)}

.ui-flag{margin-left:auto;font-family:var(--font-m);font-size:10.5px;color:var(--ink-4)}

/* Staged beats. Hidden only when the timeline is driving, never at rest. */
html.anim .demo.is-live [data-s]{opacity:0;transform:translateY(8px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
html.anim .demo.is-live [data-s].is-shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.anim .demo.is-live [data-s]{opacity:1;transform:none;transition:none}
}
.gap-sum{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
  font-family:var(--font-m);font-size:11.5px;color:var(--ink-4)}
.gap-sum b{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
/* At narrow widths the captured-lead row has more content than one line can
   hold, so let it wrap and give the qualifier its own line instead of letting
   two mono strings collide. */
.lead-row{flex-wrap:wrap;row-gap:4px}
.lead-row .rt{margin-left:auto}
@media(max-width:520px){
  .lead-row{font-size:11px}
  .lead-row .rt{margin-left:calc(12px + var(--s-2));flex-basis:100%}
}

/* ==========================================================================
   Problem scrollytelling.
   Steps scroll, the stage stays. Each step swaps the panel beside it, so the
   claim and the evidence are on screen at the same moment.
   ========================================================================== */
.story-grid{display:grid;gap:var(--s-8);grid-template-columns:1fr}
@media(min-width:1000px){
  .story-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-11);align-items:start}
}

.story-step{padding-block:var(--s-9)}
.story-step h3{font-size:clamp(20px,2.1vw,24px);line-height:1.28;letter-spacing:-.018em;
  color:var(--ink-4);transition:color 500ms var(--ease)}
.story-step p{margin-top:var(--s-4);font-size:15.5px;line-height:1.65;color:var(--ink-4);
  max-width:46ch;transition:color 500ms var(--ease)}
@media(min-width:1000px){
  .story-step{padding-block:19vh;position:relative;padding-left:var(--s-7)}
  /* a rail that fills as the step becomes current */
  .story-step::before{content:"";position:absolute;left:0;top:19vh;bottom:19vh;width:1px;
    background:var(--line)}
  .story-step::after{content:"";position:absolute;left:-1px;top:19vh;width:2px;height:0;
    background:var(--accent);border-radius:2px;transition:height 600ms var(--ease)}
  .story-step.is-on::after{height:calc(100% - 38vh)}
}
.story-step.is-on h3{color:var(--ink)}
.story-step.is-on p{color:var(--ink-2)}

.story-stage{position:relative}
/* The sticky stage stacks five panels on top of each other, so it only makes
   sense while something is driving which one is current. Gate the whole layout
   behind html.anim: without JS the panels are ordinary blocks in document
   order beside their steps, and nothing is hidden. */
@media(min-width:1000px){
  html.anim .story-stage{position:sticky;top:calc(var(--nav-h) + 14vh);height:min(56vh,430px)}
  html.anim .stage-inner{position:relative;height:100%}
  html.anim .stage-panel{position:absolute;inset:0;opacity:0;transform:translateY(10px);
    pointer-events:none;transition:opacity 480ms var(--ease),transform 480ms var(--ease)}
  html.anim .stage-panel.is-on{opacity:1;transform:none;pointer-events:auto}
  html.anim .stage-panel .ui{height:100%;display:flex;flex-direction:column}
  html.anim .stage-panel .ui-body{flex:1;overflow:hidden}
  html:not(.anim) .stage-panel{margin-bottom:var(--s-5)}
  html:not(.anim) .stage-panel:last-child{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html.anim .stage-panel{transition:none}
}
/* Below 1000px there is no sticky stage, so every panel is simply shown in
   sequence with its step. Nothing is hidden and nothing depends on scroll. */
@media(max-width:999px){
  .story-step{padding-block:var(--s-6) var(--s-4)}
  .stage-panel{margin-bottom:var(--s-6)}
  .stage-panel:last-child{margin-bottom:0}
}

.an-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding-block:11px;border-bottom:1px solid var(--line);font-size:13.5px}
.an-row:last-of-type{border-bottom:0}
.an-k{font-family:var(--font-m);font-size:12px;color:var(--ink-4)}
.an-v{font-family:var(--font-d);font-weight:600;color:var(--ink-2)}

.think{padding:var(--s-5);border:1px dashed var(--line-2);border-radius:var(--r-md);
  font-size:16px;line-height:1.45;color:var(--ink);background:rgba(255,255,255,.02);
  transition:opacity 700ms var(--ease),filter 700ms var(--ease)}
.think.is-gone{opacity:.18;filter:blur(2px)}

.ghost{display:flex;align-items:center;gap:var(--s-3);padding:9px 12px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;color:var(--ink-4);
  background:rgba(255,255,255,.015)}
.ghost::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-3);flex:none}
.ghost:nth-child(2){opacity:.78}.ghost:nth-child(3){opacity:.58}.ghost:nth-child(4){opacity:.4}

.outcomes{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-5)}
.oc{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  font-family:var(--font-m);font-size:11.5px;color:var(--ink-3);
  opacity:0;transform:translateY(6px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease),
             border-color 420ms var(--ease),color 420ms var(--ease)}
.oc::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.stage-panel.is-on .oc{opacity:1;transform:none;border-color:var(--line-2);color:var(--ink-2)}
.stage-panel.is-on .oc[data-oc="1"]{transition-delay:140ms}
.stage-panel.is-on .oc[data-oc="2"]{transition-delay:280ms}
html:not(.anim) .oc{opacity:1;transform:none}

/* ==========================================================================
   Product loop. Six connected nodes, each with a different mini UI, lighting
   in sequence. Not six identical cards: the interior of every node differs
   because the step it describes differs.
   ========================================================================== */
.chain{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:700px){.chain{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.chain{grid-template-columns:repeat(3,1fr)}}
.node{position:relative;padding:var(--pad-sm);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-1);display:flex;flex-direction:column;
  transition:border-color 550ms var(--ease),background 550ms var(--ease)}
.node.is-on{border-color:var(--line-2);background:var(--bg-2)}
.node h3{font-size:17px;letter-spacing:-.012em;color:var(--ink-2);transition:color 550ms var(--ease)}
.node.is-on h3{color:var(--ink)}
.node>p{margin-top:var(--s-5);padding-bottom:var(--s-5);font-size:13.5px;line-height:1.5;
  color:var(--ink-4);transition:color 550ms var(--ease);flex:none}
.node.is-on>p{color:var(--ink-3)}
.node-ui{margin-top:var(--s-4);display:flex;flex-direction:column;gap:6px;
  align-items:flex-start;flex:1;justify-content:flex-start}
.node-out{margin-top:0;padding-top:var(--s-3);border-top:1px dashed var(--line);
  font-family:var(--font-m);font-size:11px;color:var(--ink-4);
  display:flex;align-items:center;gap:7px;transition:color 550ms var(--ease)}
.node-out::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-3);
  flex:none;transition:background 550ms var(--ease),box-shadow 550ms var(--ease)}
.node.is-on .node-out{color:var(--ink-3)}
.node.is-on .node-out::before{background:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.14)}
/* the loop closing is the one output worth calling out */
.node[data-node="5"].is-on .node-out{color:var(--accent)}

.chip2{display:inline-block;padding:4px 9px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-family:var(--font-m);font-size:11px;color:var(--ink-3);background:rgba(255,255,255,.02)}
.node.is-on .chip2{border-color:var(--line-2)}
.node-ui .chip2{display:inline-block;margin-right:5px}
.quote{font-size:13px;line-height:1.45;color:var(--ink-2);padding:8px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--line)}
.cite,.after{font-family:var(--font-m);font-size:10.5px;color:var(--ink-4)}
.node.is-on .cite{color:var(--accent)}
.field{font-family:var(--font-m);font-size:12px;color:var(--ink-2);padding:7px 10px;
  border:1px dashed var(--line-2);border-radius:var(--r-sm);width:100%}
.swap{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:11.5px}
.swap .from{color:var(--ink-4);font-style:normal;padding:4px 9px;border:1px solid var(--line);
  border-radius:var(--r-pill)}
.swap .arr{color:var(--ink-4);font-style:normal;transition:color 550ms var(--ease)}
.swap .to{color:var(--ink-3);font-style:normal;padding:4px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line);transition:color 550ms var(--ease),border-color 550ms var(--ease)}
.node.is-on .swap .arr{color:var(--accent)}
.node.is-on .swap .to{color:var(--ink);border-color:var(--line-2)}
.mini{display:flex;align-items:center;gap:8px;width:100%}
.mini b{font-family:var(--font-m);font-size:11px;color:var(--ink-4);width:20px;flex:none}
.mini i{display:block;height:4px;border-radius:2px;background:var(--line-3);
  transition:background 550ms var(--ease)}
.node.is-on .mini i{background:var(--ink-4)}
.node.is-on .mini:first-child i{background:var(--accent)}
.diff{font-family:var(--font-m);font-size:11.5px;line-height:1.5;color:var(--ink-3);
  padding:8px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.02);
  border-left:2px solid var(--line-2);transition:border-color 550ms var(--ease)}
.diff .add{font-style:normal;color:var(--ink-4);margin-right:6px;transition:color 550ms var(--ease)}
.node.is-on .diff{border-left-color:var(--accent)}
.node.is-on .diff .add{color:var(--accent)}

.chain-back{margin-top:var(--s-7);max-width:74ch;font-size:14.5px;line-height:1.6;color:var(--ink-4)}
@media (prefers-reduced-motion:reduce){
  .node,.story-step,.stage-panel,.oc{transition:none}
}

/* What travels with a handoff, shown rather than described. Fills the node on
   its own terms instead of padding it out. */
.carry{display:flex;flex-wrap:wrap;gap:5px}
.carry i{font-style:normal;font-family:var(--font-m);font-size:10.5px;color:var(--ink-4);
  padding:4px 8px;border:1px dashed var(--line);border-radius:var(--r-sm);
  transition:color 550ms var(--ease),border-color 550ms var(--ease)}
.node.is-on .carry i{color:var(--ink-3);border-color:var(--line-2)}

/* FIX 2. Step spacing widened and thresholds softened so a fast scroll lands on
   a step rather than between two. A progress rail beside the stage shows which
   beat is current and which have been passed, so a skipped beat still reads as
   part of a sequence instead of a jump. */
.story-prog{display:none}
@media(min-width:1000px){
  .story-prog{display:flex;flex-direction:column;gap:7px;position:absolute;left:calc(var(--s-7) * -1);
    top:0;bottom:0;justify-content:center;pointer-events:none}
  .story-prog b{display:block;width:2px;height:26px;border-radius:2px;background:var(--line);
    transition:background 450ms var(--ease),height 450ms var(--ease)}
  .story-prog b.is-past{background:var(--line-3)}
  .story-prog b.is-now{background:var(--accent);height:38px}
}

/* FIX 3. Mobile keeps the pairing: each panel sits directly under the step it
   belongs to, inside one bordered group, so the before and after still read as
   a sequence rather than a dump of blocks. */
@media(max-width:999px){
  .story-grid{gap:0}
  .story-steps{display:contents}
  .story-stage{display:contents}
  .stage-inner{display:contents}
  .story-prog{display:none}
  .story-step{padding:var(--pad-sm) var(--pad-sm) var(--s-5);border:1px solid var(--line);
    border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--bg-1);
    margin-top:var(--s-5)}
  .story-step h3{color:var(--ink);font-size:19px}
  .story-step p{color:var(--ink-3);font-size:14.5px}
  .stage-panel{margin:0 0 0 0;border:1px solid var(--line);border-top:0;
    border-radius:0 0 var(--r-lg) var(--r-lg);padding:0 var(--pad-sm) var(--pad-sm);
    background:var(--bg-1)}
  .stage-panel .ui{border-color:var(--line)}
  /* interleave so panel n follows step n */
  .story-step[data-step="0"]{order:1} .stage-panel[data-panel="0"]{order:2}
  .story-step[data-step="1"]{order:3} .stage-panel[data-panel="1"]{order:4}
  .story-step[data-step="2"]{order:5} .stage-panel[data-panel="2"]{order:6}
  .story-step[data-step="3"]{order:7} .stage-panel[data-panel="3"]{order:8}
  .story-step[data-step="4"]{order:9} .stage-panel[data-panel="4"]{order:10}
  .story-grid{display:flex;flex-direction:column}
  .story-step::before,.story-step::after{display:none}
}

/* ==========================================================================
   Bento. Six cells, three widths, three heights, one anchor.
   No two cells share a composition and none of them is an icon above a label.
   ========================================================================== */
.bento{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:760px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(0,auto)}
  .bx-train{grid-column:span 4}   /* anchor */
  .bx-route{grid-column:span 2}
  .bx-hand{grid-column:span 2}
  .bx-deploy{grid-column:span 2}
  .bx-gaps{grid-column:span 2}
  .bx-own{grid-column:span 6}
  .bx-own{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    column-gap:var(--s-9);align-items:center}
  .bx-own .bx-head,.bx-own>p{grid-column:1}
  .bx-own .bx-body{grid-column:2;grid-row:1/3;margin-top:0}
}
.bento-card{position:relative;padding:var(--pad-sm);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--bg-1);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.bento-card:hover{border-color:var(--line-2);background:var(--bg-2)}
.bx-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);
  justify-content:space-between}
.bx-head h3{font-size:18px;letter-spacing:-.015em;margin:0}
.bx-tag{font-family:var(--font-m);font-size:10.5px;color:var(--ink-4);letter-spacing:.02em}
.bento-card>p{margin-top:var(--s-3);font-size:14px;line-height:1.5;color:var(--ink-3);max-width:52ch}
.bx-body{margin-top:var(--s-5)}
.bx-note{margin-top:var(--s-3);font-family:var(--font-m);font-size:10.5px;color:var(--ink-4)}
.bx-train .chips{max-width:none}
@media(min-width:1080px){
  .bx-train{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--s-8);align-items:start}
  .bx-train .bx-head,.bx-train>p{grid-column:1}
  .bx-train .bx-body{grid-column:2;grid-row:1/3;margin-top:0}
}

/* ==========================================================================
   Human handoff
   ========================================================================== */
.hand{display:grid;gap:var(--s-8);grid-template-columns:1fr}
@media(min-width:1000px){.hand{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s-11);align-items:start}}
.hand-flow{counter-reset:none;border-left:1px solid var(--line);padding-left:var(--s-6)}
.hf{position:relative;padding-block:var(--s-4);display:flex;flex-direction:column;gap:5px}
.hf::before{content:"";position:absolute;left:calc(var(--s-6) * -1 - 1px);top:calc(var(--s-4) + 7px);
  width:1px;height:16px;background:var(--line-3)}
.hf:last-child::before{background:var(--accent)}
.hf-k{font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;color:var(--ink-4)}
.hf-b{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.hand-ui .ui-body{padding:var(--s-4)}

/* ==========================================================================
   Integrations. A core that fans out into three destinations. No logo wall.
   ========================================================================== */
.intg{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.intg{grid-template-columns:auto minmax(0,1fr);gap:var(--s-10)}}
.intg-core{display:inline-flex;align-items:center;gap:10px;padding:var(--s-4) var(--s-6);
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-1);
  font-family:var(--font-d);font-weight:700;font-size:17px;justify-self:start}
.intg-mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid rgba(14,165,233,.3);color:var(--accent);
  font-family:var(--font-m);font-size:12px}
.intg-out{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:700px){.intg-out{grid-template-columns:repeat(3,1fr)}}
.intg-group{position:relative;padding-left:var(--s-5);border-left:1px solid var(--line)}
.intg-h{font-family:var(--font-m);font-size:10.5px;letter-spacing:.05em;color:var(--ink-4);
  margin-bottom:var(--s-3)}
.itag{display:inline-block;margin:0 5px 5px 0;padding:6px 11px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:rgba(255,255,255,.02);
  font-family:var(--font-m);font-size:11.5px;color:var(--ink-4);
  transition:color 450ms var(--ease),border-color 450ms var(--ease),background 450ms var(--ease)}
.itag.is-lit{color:var(--ink-2);border-color:var(--line-2);background:rgba(255,255,255,.04)}
.itag.is-now{color:var(--ink);border-color:rgba(14,165,233,.4)}

/* ==========================================================================
   Analytics
   ========================================================================== */
.an-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:760px){.an-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.an-grid{grid-template-columns:repeat(4,1fr)}.an-wide{grid-column:span 2}}
.an-card{padding:var(--pad-sm);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-1);display:flex;flex-direction:column}
.an-t{font-family:var(--font-m);font-size:10.5px;letter-spacing:.05em;color:var(--ink-4)}
.an-big{display:flex;align-items:baseline;gap:10px;margin-top:var(--s-4)}
.an-big b{font-family:var(--font-d);font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1}
.an-big span{font-size:12.5px;color:var(--ink-4)}
.an-spark{display:flex;align-items:flex-end;gap:5px;height:52px;margin-top:var(--s-5)}
.an-spark i{flex:1;background:rgba(255,255,255,.08);border-radius:2px}
.an-spark i:last-child{background:var(--accent)}
.an-cov{display:grid;grid-template-columns:1fr;gap:4px;margin-top:var(--s-4)}
.an-cov span{font-family:var(--font-m);font-size:11.5px;color:var(--ink-3)}
.an-cov i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.an-cov:first-of-type i{background:var(--accent)}
.an-page{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding-block:10px;border-bottom:1px solid var(--line);margin-top:0}
.an-page:last-of-type{border-bottom:0}
.an-url{font-family:var(--font-m);font-size:12.5px;color:var(--ink-2)}
.an-fix{font-size:12px;color:var(--ink-4)}
.an-note{margin-top:auto;padding-top:var(--s-5);font-size:12px;line-height:1.5;color:var(--ink-4)}
.an-card .an-row{padding-block:9px}

/* ==========================================================================
   Proof
   ========================================================================== */
.quotes{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}}
.qt{padding:var(--pad-sm);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-1);display:flex;flex-direction:column;
  transition:border-color var(--t) var(--ease)}
.qt:hover{border-color:var(--line-2)}
.qt blockquote{font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.qt blockquote::before{content:"";display:block;width:18px;height:1px;background:var(--line-3);
  margin-bottom:var(--s-4)}
.qt figcaption{margin-top:auto;padding-top:var(--s-5);display:flex;flex-direction:column;gap:2px}
.qt figcaption b{font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--ink)}
.qt figcaption span{font-size:12px;color:var(--ink-4)}

/* The .bento-card flex rule is declared after the layout rules above, so it was
   winning on equal specificity and .bx-own never became a grid. Re-assert the
   two wide cells here, after it. */
@media(min-width:1080px){
  .bento .bx-own,.bento .bx-train{display:grid;align-items:start}
  .bento .bx-own{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:var(--s-10)}
  .bento .bx-train{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-8)}
  .bento .bx-own>.bx-head,.bento .bx-own>p{grid-column:1}
  .bento .bx-own>.bx-body{grid-column:2;grid-row:1/4;margin-top:0;align-self:center}
  .bento .bx-train>.bx-head,.bento .bx-train>p{grid-column:1}
  .bento .bx-train>.bx-body{grid-column:2;grid-row:1/4;margin-top:0}
}
/* Cells sit in equal-height rows, so short ones opened voids under their body.
   Let the body take the slack rather than leaving it under the sentence. */
.bento-card>p{margin-bottom:var(--s-5)}
.bx-body{margin-top:0;flex:1}
@media(min-width:1080px){
  .bento .bx-train>p,.bento .bx-own>p{margin-bottom:0}
  .bento .bx-hand .bx-body,.bento .bx-deploy .bx-body,
  .bento .bx-route .bx-body,.bento .bx-gaps .bx-body{display:flex;flex-direction:column;
    justify-content:flex-start}
}
.bx-foot{margin-top:auto;padding-top:var(--s-4);font-family:var(--font-m);font-size:10.5px;
  color:var(--ink-4);border-top:1px dashed var(--line)}
/* Blue discipline inside the bento. The accent marks the one thing that is
   current or ranked first, not every element that could carry it. */
.bento .chip i{background:var(--ink-4)}
.bento .chip.is-in i{background:var(--ink-3)}
.bento .gap-bar i{background:rgba(255,255,255,.14)}
.bento .gap-row:first-of-type .gap-bar i{background:var(--accent)}
.bento .orow .sw{background:rgba(255,255,255,.09)}
.bento .orow.is-on .sw{background:rgba(255,255,255,.14)}
.bento .orow.is-on .sw::after{background:var(--ink-2)}
.bento .orow:first-child.is-on .sw{background:rgba(14,165,233,.32)}
.bento .orow:first-child.is-on .sw::after{background:var(--accent)}
/* A grey knob on a grey track reads as off. Ownership controls are all on, so
   make that unambiguous with ink rather than reaching for the accent. */
.bento .orow.is-on .sw{background:rgba(255,255,255,.2)}
.bento .orow.is-on .sw::after{background:var(--ink)}
.bento .orow:first-child.is-on .sw{background:rgba(14,165,233,.3)}
.bento .orow:first-child.is-on .sw::after{background:var(--accent)}