/* ==========================================================================
   Kelvos marketing — shared design system
   One family (Brockmann), ink-on-cream, Signal Orange as the rare gesture.
   Register: brand. Aesthetic: refined product minimalism (Linear/Stripe-grade
   quiet luxury) with real product surfaces as the imagery. No italics.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
@font-face{font-family:'Brockmann';src:url('../fonts/brockmann-regular-webfont.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Brockmann';src:url('../fonts/brockmann-medium-webfont.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Brockmann';src:url('../fonts/brockmann-semibold-webfont.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---- Tokens --------------------------------------------------------------- */
:root{
  /* Ink & paper ramp */
  --ink-950:#111111;--ink-900:#1F1F1D;--ink-800:#333333;--ink-700:#525252;--ink-600:#6B6B6B;--ink-500:#8A8577;
  --stone-300:#C9C4B7;--stone-200:#DED8C9;--stone-100:#EFE9DB;--stone-50:#F6F1E6;
  --cream:#FDFBF7;--paper:#FFFFFF;
  /* Signal Orange — the rare gesture (Rarity Rule: <=10% of any view) */
  --orange-700:#9A5200;--orange-600:#C46B00;--orange-500:#E88D1B;--orange-400:#FFA935;--orange-100:#FFEFD6;
  /* Functional hues for product surfaces (mockups only) */
  --teal:#285C55;--blue:#465A78;--plum:#665172;--green:#2F6B4F;--red:#9E4635;

  --sans:'Brockmann',system-ui,-apple-system,sans-serif;

  /* Hairlines */
  --line:rgba(31,31,29,0.14);
  --line-soft:rgba(31,31,29,0.08);
  --line-strong:rgba(31,31,29,0.22);

  /* Fluid type — 1.25 modular scale, display ceiling <= 5.5rem */
  --t-xs:clamp(0.72rem,0.3vw + 0.62rem,0.76rem);
  --t-sm:clamp(0.86rem,0.35vw + 0.75rem,0.94rem);
  --t-base:clamp(1.0313rem,0.5vw + 0.9rem,1.15rem);
  --t-lg:clamp(1.2rem,0.8vw + 1rem,1.4375rem);
  --t-xl:clamp(1.4rem,1.1vw + 1.1rem,1.7969rem);
  --t-2xl:clamp(1.65rem,1.5vw + 1.28rem,2.2461rem);
  --t-3xl:clamp(1.95rem,2.1vw + 1.5rem,2.8076rem);
  --t-4xl:clamp(2.4rem,3.4vw + 1.5rem,3.5rem);
  --t-display:clamp(2.7rem,4.4vw + 1.5rem,4.75rem);
  --t-display-lg:clamp(3rem,5.4vw + 1.7rem,5.375rem);

  /* Spacing rhythm */
  --gutter:clamp(0.75rem,1.4vw,1.4rem);
  --pad-x:clamp(1.25rem,4vw,3rem);
  --s-lg:clamp(3rem,4.5vw,4.5rem);
  --s-xl:clamp(4.5rem,7vw,7rem);
  --s-2xl:clamp(5.5rem,9vw,8.5rem);
  --s-3xl:clamp(7rem,11vw,10.5rem);

  --r-sm:1px;--r-md:2px;--r-lg:2px;--r-xl:2px;

  /* Layered, soft, warm-tinted elevation */
  --sh-1:0 1px 2px rgba(31,31,29,0.05);
  --sh-2:0 1px 2px rgba(31,31,29,0.05),0 8px 20px -12px rgba(31,31,29,0.20);
  --sh-3:0 1px 2px rgba(31,31,29,0.05),0 18px 40px -20px rgba(31,31,29,0.24);
  --sh-4:0 2px 4px rgba(31,31,29,0.05),0 30px 60px -24px rgba(31,31,29,0.30),0 60px 100px -60px rgba(31,31,29,0.22);

  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-quint:cubic-bezier(.23,1,.32,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* Semantic z-scale */
  --z-grain:1;--z-nav:100;--z-skip:200;
}

/* ---- Reset & base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:112px}
body{
  background:var(--cream);color:var(--ink-900);font-family:var(--sans);
  font-size:var(--t-base);line-height:1.55;overflow-x:clip;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-weight:600;color:var(--ink-950);letter-spacing:-0.025em;text-wrap:balance;line-height:1.08}
p{text-wrap:pretty}
::selection{background:var(--ink-950);color:var(--cream)}
:focus-visible{outline:2px solid var(--orange-600);outline-offset:3px;border-radius:2px}
.tnum{font-variant-numeric:tabular-nums}
.u-orange{color:var(--orange-600)}

/* Tactile paper grain — very subtle, ink & paper feel */
.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink-950);color:var(--cream);padding:.75rem 1.25rem;z-index:var(--z-skip)}
.skip:focus{left:0}

/* ---- Layout --------------------------------------------------------------- */
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:900px}
.section{padding-block:var(--s-2xl)}
.section--tight{padding-block:var(--s-xl)}

/* Section header — a single quiet kicker, used deliberately (never on every section) */
.shead{max-width:60ch}
.shead--center{margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--t-sm);font-weight:600;color:var(--orange-700)}
.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange-500)}
.shead h2{font-size:var(--t-3xl);margin-top:1rem}
.shead > p{font-size:var(--t-lg);color:var(--ink-700);margin-top:1.1rem;max-width:52ch;line-height:1.5}
.shead--center > p{margin-inline:auto}
.eyebrow-line{font-size:var(--t-sm);font-weight:600;color:var(--ink-600)}

/* ---- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;font-size:var(--t-base);line-height:1;border-radius:var(--r-sm);
  padding:.92rem 1.5rem;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:background .25s var(--ease-soft),color .25s var(--ease-soft),
    border-color .25s var(--ease-soft),transform .25s var(--ease-expo),box-shadow .25s var(--ease-soft)}
.btn svg{transition:transform .3s var(--ease-expo)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink-950);color:var(--cream);box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--ink-800);box-shadow:var(--sh-2)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink-950);background:transparent}
.btn-ghost:hover{border-color:var(--ink-950);background:rgba(31,31,29,0.03)}
.btn-sm{padding:.55rem 1.05rem;font-size:var(--t-sm);border-radius:var(--r-sm)}
.arrow{width:15px;height:15px;flex-shrink:0}

/* ---- Nav ------------------------------------------------------------------ */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-nav);
  background:rgba(253,251,247,0.7);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease-soft),background .4s var(--ease-soft)}
.nav[data-scrolled="true"]{border-bottom-color:var(--line);background:rgba(253,251,247,0.88)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:1.5rem}
.lockup{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.lockup .mark{width:auto;height:26px;fill:var(--orange-500)}
.lockup .word{width:auto;height:16px;fill:var(--ink-950)}
.nav__links{display:flex;align-items:center;gap:.35rem}
.nav__links a{position:relative;font-size:var(--t-sm);font-weight:500;color:var(--ink-700);
  padding:.5rem .8rem;border-radius:var(--r-sm);transition:color .2s var(--ease-soft)}
.nav__links a:hover{color:var(--ink-950)}
.nav__links a[aria-current="page"]{color:var(--ink-950)}
.nav__links a[aria-current="page"]::after{content:'';position:absolute;left:.8rem;right:.8rem;bottom:.15rem;height:2px;background:var(--orange-500);border-radius:2px}
.nav__end{display:flex;align-items:center;gap:1.1rem;flex-shrink:0}
.nav__signin{font-size:var(--t-sm);font-weight:500;color:var(--ink-700)}
.nav__signin:hover{color:var(--ink-950)}
.nav__toggle{display:none}
/* Mobile nav panel — shared; shown via toggle below 721px */
.nav__mobile{display:flex;flex-wrap:wrap;gap:1.25rem;padding-block:.85rem;border-top:1px solid var(--line-soft)}
.nav__mobile[hidden]{display:none}
.nav__mobile a{font-size:var(--t-sm);font-weight:500;color:var(--ink-700)}
@media(min-width:721px){.nav__mobile{display:none!important}}

/* ---- Product mockup surfaces (shared: home + module pages) --------------- */
.frame{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-4);overflow:hidden;position:relative}
.frame::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.4);border-radius:inherit}
.frame__bar{display:flex;align-items:center;gap:.7rem;height:46px;padding-inline:1.1rem;
  border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fff,#fbfaf5)}
.frame__mark{width:auto;height:16px;fill:var(--orange-500)}
.frame__ws{font-size:var(--t-sm);font-weight:600;color:var(--ink-900)}
.frame__ws span{color:var(--ink-600);font-weight:500}
.frame__tabs{display:flex;gap:.15rem;margin-left:auto}
.frame__tab{font-size:var(--t-xs);font-weight:600;color:var(--ink-600);padding:.35rem .7rem;border-radius:var(--r-sm)}
.frame__tab[data-active]{color:var(--ink-950);background:var(--stone-100)}

.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;
  padding:.24rem .6rem;border-radius:100px;white-space:nowrap;line-height:1.2}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.chip--green{color:var(--green);background:rgba(47,107,79,0.12)}
.chip--orange{color:var(--orange-700);background:var(--orange-100)}
.chip--red{color:var(--red);background:rgba(158,70,53,0.12)}
.chip--blue{color:var(--blue);background:rgba(70,90,120,0.12)}
.chip--stone{color:var(--ink-700);background:var(--stone-100)}
.chip--stone::before{background:var(--ink-500)}

.pcard{border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.1rem 1.15rem;background:#fff;text-align:left}
.pcard__label{font-size:var(--t-xs);font-weight:600;color:var(--ink-600);display:flex;align-items:center;justify-content:space-between;gap:.5rem}

/* ---- Footer --------------------------------------------------------------- */
.footer{border-top:1px solid var(--line-soft);padding-block:var(--s-lg) var(--s-lg)}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2.5rem}
.footer__id .lockup{margin-bottom:1.1rem}
.footer__id .lockup .mark{height:20px}.footer__id .lockup .word{height:13px}
.footer__id p{font-size:var(--t-sm);color:var(--ink-700);max-width:32ch;line-height:1.6}
.footer__col h5{font-size:var(--t-xs);font-weight:600;color:var(--ink-600);margin-bottom:.9rem;letter-spacing:0}
.footer__col a{display:block;font-size:var(--t-sm);font-weight:500;color:var(--ink-700);padding-block:.34rem;width:fit-content;transition:color .2s}
.footer__col a:hover{color:var(--ink-950)}
.footer__legal{margin-top:var(--s-lg);padding-top:1.4rem;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:var(--t-sm);color:var(--ink-600)}

/* ---- Motion: reveals via scroll-driven CSS only --------------------------
   Content is fully visible by default. Entrance is layered on ONLY where the
   view() timeline is supported AND motion is welcome, so headless/no-JS/reduced
   renders never ship blank. (No opacity gating outside this guard.) ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes kv-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    @keyframes kv-rise-sm{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
    [data-reveal]{animation:kv-rise .9s var(--ease-expo) both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-reveal="sm"]{animation-name:kv-rise-sm}
    [data-reveal-stagger] > *{animation:kv-rise-sm .8s var(--ease-expo) both;animation-timeline:view();animation-range:entry 2% entry 40%}
  }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:860px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer__id{grid-column:1 / -1}
}
@media (max-width:720px){
  .nav__links,.nav__signin{display:none}
  .nav__toggle{display:inline-flex}
}
@media (max-width:560px){
  .btn{width:100%}
  .nav .btn,.nav__toggle{width:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
}

/* ---- Module detail pages -------------------------------------------------- */
.mod-hero{position:relative;padding-top:clamp(8.5rem,13vh,10rem);padding-bottom:var(--s-lg);overflow:clip}
.mod-hero__wash{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(42% 38% at 18% -8%,rgba(255,169,53,0.12),transparent 66%),linear-gradient(180deg,var(--stone-50),var(--cream) 52%)}
.mod-hero .wrap{position:relative;z-index:1}
.mod-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.mod-hero .k{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-sm);font-weight:600;color:var(--orange-700)}
.mod-hero .k::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--orange-500)}
.mod-hero h1{font-size:var(--t-4xl);letter-spacing:-.03em;margin-top:1rem;max-width:15ch}
.mod-hero p.sub{font-size:var(--t-lg);color:var(--ink-700);margin-top:1.1rem;line-height:1.5;max-width:46ch}
.mod-hero .cta-row{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.8rem}

.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2.5rem);margin-top:var(--s-lg)}
.cap{border-top:2px solid var(--ink-950);padding-top:1.1rem}
.cap h3{font-size:var(--t-lg)}
.cap p{font-size:var(--t-sm);color:var(--ink-700);line-height:1.6;margin-top:.6rem;max-width:34ch}

.othermods{border-top:1px solid var(--line);padding-top:var(--s-lg)}
.othermods h2{font-size:var(--t-xl);margin-bottom:1.5rem}
.othermods__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
.omod{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.3rem;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);transition:border-color .25s var(--ease-soft),transform .25s var(--ease-expo),box-shadow .25s var(--ease-soft)}
.omod:hover{border-color:var(--ink-950);transform:translateY(-2px);box-shadow:var(--sh-2)}
.omod .nm{font-size:var(--t-lg);font-weight:600;color:var(--ink-950)}
.omod .ro{font-size:var(--t-sm);color:var(--ink-600);margin-top:.15rem}
.omod .arrow2{width:16px;height:16px;flex-shrink:0;color:var(--ink-700)}

.mod-cta{background:linear-gradient(150deg,var(--orange-500),var(--orange-400));color:var(--ink-950);
  margin-inline:var(--gutter);margin-top:var(--gutter);border-radius:var(--r-xl);padding-block:var(--s-2xl);text-align:center}
.mod-cta h2{font-size:var(--t-display);max-width:17ch;margin-inline:auto;color:var(--ink-950)}
.mod-cta p{font-size:var(--t-lg);color:rgba(31,31,29,.74);max-width:40ch;margin:1.2rem auto 2rem;line-height:1.5}
.mod-cta .btn-primary:hover{background:var(--cream);color:var(--ink-950)}

/* Shared mockup interiors reused across module pages */
.panel{padding:1.15rem 1.2rem;display:grid;gap:.9rem}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.panel__head h4{font-size:var(--t-base)}
.srow2{display:grid;gap:.5rem}
.srow2 .lab{display:flex;justify-content:space-between;font-size:var(--t-xs);font-weight:600;color:var(--ink-700)}
.srow2 .lab .off{color:var(--ink-500);font-weight:500}
.track{height:6px;background:var(--stone-100);border-radius:100px;position:relative}
.fill{position:absolute;inset-block:0;left:0;background:linear-gradient(90deg,var(--orange-400),var(--orange-500));border-radius:100px}
.knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--orange-500);box-shadow:var(--sh-1)}
.scr{display:grid;grid-template-columns:19px 1fr auto;align-items:center;gap:.7rem;padding:.72rem 0;border-top:1px solid var(--line-soft)}
.scr:first-of-type{border-top:0}
.scr .ico{width:16px;height:16px;color:var(--ink-500)}
.scr .t{font-size:var(--t-sm);font-weight:600;color:var(--ink-900)}
.scr .t span{display:block;font-size:.72rem;font-weight:400;color:var(--ink-600);margin-top:.05rem}
.namebar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .85rem;background:var(--stone-50);border-radius:var(--r-md);font-weight:600;color:var(--ink-950)}
.namebar small{font-size:.7rem;font-weight:600;color:var(--ink-600)}
.kitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}
.sw{aspect-ratio:1;border-radius:var(--r-md);border:1px solid var(--line-soft);display:grid;place-items:center;font-size:var(--t-xs);font-weight:600}
.sw--ink{background:var(--ink-950);color:#fff}.sw--orange{background:var(--orange-500);color:#fff}
.sw--stone{background:var(--stone-200);color:var(--ink-800)}.sw--cream{background:var(--cream);color:var(--ink-700)}
.sw--type{font-size:1.8rem;color:var(--ink-950)}
.vlist{border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.vrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.75rem;padding:.72rem .95rem;border-bottom:1px solid var(--line-soft)}
.vrow:last-child{border-bottom:0}
.vrow .t{font-size:var(--t-sm);font-weight:600;color:var(--ink-900)}
.vrow .d{font-size:.75rem;color:var(--ink-600);margin-top:.08rem}

@media (max-width:860px){
  .mod-hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .caps{grid-template-columns:1fr}
  .othermods__grid{grid-template-columns:1fr}
}

/* ---- Critique fixes (2026-07-03) ------------------------------------------ */
/* Product mockups always set their own alignment; never inherit a centered hero */
.frame{text-align:left}
/* Visible, selectable email fallback under CTA buttons (mailto can fail silently) */
.cta-mail{margin-top:1.2rem;font-size:var(--t-sm);font-weight:500}
.cta-mail .addr{-webkit-user-select:all;user-select:all;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* AA contrast on the orange drench (was .74/.7) */
.mod-cta p{color:rgba(31,31,29,.85)}

/* Critique #2 batch: mobile frame bar must never wrap/clip (P1) */
.frame__ws{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.frame__bar{min-width:0}
@media (max-width:560px){.frame__tabs{display:none}}

/* Interfere-borrow: hairline section rules — one consistent index grammar (sharp radii era) */
.srule{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px solid var(--line);padding-top:.8rem;margin-bottom:clamp(2rem,4vw,3.25rem);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-700)}
.srule .idx{color:var(--ink-500);font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* Deliberate radius exceptions in a 1-2px system: pills stay pills, chat bubbles stay chat */
.plan__note{min-height:1.3em}

/* ---- Ink-mode product frames (interfere-deep) ------------------------------
   Feature/module mockups run dark: the product as an instrument, not a page.
   Hero's day-one frame stays light on purpose: the founder's first touch is warm. */
.frame--ink{background:var(--ink-950);border-color:rgba(255,255,255,.09)}
.frame--ink::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.03)}
.frame--ink .frame__bar{background:linear-gradient(180deg,#1B1B1A,#151514);border-bottom-color:rgba(255,255,255,.07)}
.frame--ink .frame__ws{color:var(--cream)}
.frame--ink .frame__ws span{color:rgba(253,251,247,.5)}
.frame--ink .panel__head h4{color:var(--cream)}
.frame--ink .srow2 .lab{color:rgba(253,251,247,.85)}
.frame--ink .srow2 .lab .off{color:rgba(253,251,247,.45)}
.frame--ink .track{background:rgba(255,255,255,.13)}
.frame--ink .knob{background:var(--ink-950)}
.frame--ink .namebar{background:rgba(255,255,255,.07);color:var(--cream)}
.frame--ink .namebar small{color:rgba(253,251,247,.5)}
.frame--ink .scr{border-top-color:rgba(255,255,255,.08)}
.frame--ink .scr .ico{color:rgba(253,251,247,.45)}
.frame--ink .scr .t{color:var(--cream)}
.frame--ink .scr .t span{color:rgba(253,251,247,.5)}
.frame--ink .cscore{background:transparent;border-color:rgba(255,255,255,.09)}
.frame--ink .cscore .ring b{color:var(--cream)}
.frame--ink .cscore svg circle:first-child{stroke:rgba(255,255,255,.14)}
.frame--ink .cscore .m{color:rgba(253,251,247,.6)}
.frame--ink .cscore .m strong{color:var(--cream)}
.frame--ink .chart line{stroke:rgba(255,255,255,.09)}
.frame--ink .chart__x{color:rgba(253,251,247,.45)}
.frame--ink .vlist{background:transparent;border-color:rgba(255,255,255,.09)}
.frame--ink .vrow{border-bottom-color:rgba(255,255,255,.07)}
.frame--ink .vrow .t{color:var(--cream)}
.frame--ink .vrow .d{color:rgba(253,251,247,.5)}
.frame--ink .sw{border-color:rgba(255,255,255,.12)}
.frame--ink .sw--cream{background:#232322;color:rgba(253,251,247,.8)}
/* chips brighten on ink so severity still reads */
.frame--ink .chip--green{color:#8FD0AC;background:rgba(47,107,79,.3)}
.frame--ink .chip--orange{color:var(--orange-400);background:rgba(232,141,27,.18)}
.frame--ink .chip--red{color:#F0A08F;background:rgba(158,70,53,.3)}
.frame--ink .chip--blue{color:#A7BEE3;background:rgba(70,90,120,.32)}
.frame--ink .chip--stone{color:rgba(253,251,247,.7);background:rgba(255,255,255,.1)}

/* Live event feed: the quiet proof the system is running */
.feed{display:flex;align-items:center;gap:.55rem;padding:.5rem .95rem;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);font-size:.72rem;color:rgba(253,251,247,.6);font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}
.feed__dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.feed__tx{transition:opacity .4s var(--ease-soft)}
.feed__tx[data-fading]{opacity:0}

/* Interactive spectrums (hero): a real control, not an exhibit */
.track[data-live]{cursor:pointer;touch-action:none}
.track[data-live]:focus-visible{outline:2px solid var(--orange-600);outline-offset:4px}

/* The closing brand moment: the wordmark at landscape scale */
.footer__mega{margin-top:var(--s-lg);display:block}
.footer__mega svg{width:100%;height:auto;fill:var(--ink-950)}

/* ---- Motion pass: micro-interactions (shared) ------------------------------ */
/* Primary buttons lift toward the cursor; press still plants */
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px)}
/* Nav links: underline slides in (ink), current-page keeps its orange */
.nav__links a{background-image:linear-gradient(var(--ink-950),var(--ink-950));background-repeat:no-repeat;
  background-position:left calc(100% - .3rem);background-size:0% 1.5px;transition:background-size .35s var(--ease-expo),color .2s var(--ease-soft)}
.nav__links a:hover{background-size:100% 1.5px}
.nav__links a[aria-current="page"]{background-size:0% 1.5px}
/* Live feed dot breathes (guarded) */
@media (prefers-reduced-motion:no-preference){
  @keyframes feedpulse{0%,100%{box-shadow:0 0 0 0 rgba(47,107,79,.5)}50%{box-shadow:0 0 0 4px rgba(47,107,79,0)}}
  .feed__dot{animation:feedpulse 2.6s var(--ease-soft) infinite}
}
/* Sliders: keyboard glides, drag stays direct */
.track[data-live] .fill,.track[data-live] .knob{transition:width .16s var(--ease-soft),left .16s var(--ease-soft)}
.track[data-live][data-dragging] .fill,.track[data-live][data-dragging] .knob{transition:none}
/* Section rules: an orange tick slides to the rule's origin as it enters */
.srule{position:relative}
.srule::before{content:'';position:absolute;top:-1px;left:0;width:28px;height:1px;background:var(--orange-500)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes sruletick{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:none}}
    .srule::before{animation:sruletick 1s var(--ease-expo) both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}
/* Chart peak: one confirming pulse after the line finishes drawing */
@media (prefers-reduced-motion:no-preference){
  @keyframes peakpulse{0%{transform:scale(1)}35%{transform:scale(1.7)}100%{transform:scale(1)}}
  circle.peak.pk{transform-box:fill-box;transform-origin:center;animation:peakpulse .9s var(--ease-expo) 1}
}

/* Slider affordance: the hero's live moment announces itself quietly */
.track[data-live]{cursor:grab}
.track[data-live]:active{cursor:grabbing}
.track[data-live]::before{content:'';position:absolute;inset:-11px 0}
@media (prefers-reduced-motion:no-preference){
  @keyframes knobNudge{0%,100%{transform:translate(-50%,-50%)}35%{transform:translate(calc(-50% + 11px),-50%)}70%{transform:translate(calc(-50% - 6px),-50%)}}
  .srow2:first-child .track[data-live] .knob{animation:knobNudge 1.5s var(--ease-expo) 1.6s 1 both}
}