/* =====================================================================================================
   assets/kit.css · the RIVET component kit (reset Round 1, 3 Nov 2026). One kit, every page.
   Spec: .research/reset/rebuild_brief.md sections 2-3. API and markup: .research/reset/r1/kit.md.
   Live review: tools/review/pages/system.html (the system sheet).

   SCOPE  A page opts in with <main id="main" data-mode="light|dark" data-m="kit">. data-m="kit" also tells
          assets/motion.js to leave the page alone (its OWNED list skips anything inside [data-m]); kit.js owns
          reveal, count-up and every moving component here. Components work outside that main too, but the
          reveal, the focus ring and the question timing are scoped to it.
   TOKENS Only assets/brand-tokens.css (Brand OS v1.2 + the site semantic layer). No hex below except inside the
          registered duo stops and the device frame, which are fixed objects.
   LAWS   Magenta = the one action (.k-btn--decision) and the one insight (.k-insight, the mark's hinge); never a
          field. One registered duo per surface, aimed at the text, no strips, no multi-stop, no glow. Cards have
          no border: shadow on light, elev-1 on dark. Focus is purple per mode. Motion is transform and opacity
          only, on the UI tier tokens, with Pause controls and reduced-motion end states.
   ===================================================================================================== */

/* ---------- 0. scope ---------- */
main[data-m="kit"]{
  background:var(--ground); color:var(--ink);
  --k-font:var(--font-sans);
  --eyebrow-ink:var(--ink-muted);        /* type.css .t-eyebrow reads this: Mono caps in the quiet ink of the mode */
  --fg-soft:var(--ink-muted);            /* type.css .t-lead reads this */
  --font-ar:var(--font-arabic);
}
/* a bounded island of the other mode re-resolves the quiet inks, so its eyebrows and leads read in that mode (R-K1) */
main[data-m="kit"] :where([data-mode]){ --eyebrow-ink:var(--ink-muted); --fg-soft:var(--ink-muted); }
main[data-m="kit"]:lang(ar), :lang(ar) main[data-m="kit"]{ --k-font:var(--font-arabic); }
main[data-m="kit"] :focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
main[data-m="kit"] :focus:not(:focus-visible){ outline:none; }
:where(main[data-m="kit"]) img{ max-width:100%; height:auto; }
.sr-only,.k-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---------- 1. layout: section, wrap, band, island, head ---------- */
.k-wrap{ box-sizing:border-box; width:100%; max-width:calc(var(--wrap-max) + 2 * var(--wrap-gutter)); margin-inline:auto; padding-inline:var(--wrap-gutter); }
.k-sec{ position:relative; padding-block:var(--sec-pad); background:var(--ground); color:var(--ink); }
.k-sec--tight{ padding-block:var(--sec-pad-tight); }
.k-sec--alt{ background:var(--ground-alt); }
.k-sec--flush-top{ padding-block-start:0; }
:not(:root)[data-mode="dark"] .k-sec--alt, .k-sec--alt[data-mode="dark"]{ --card-surface:var(--elev-2); }
/* a bounded island of the other mode inside a page (DS:35 "may quote one other as a bounded island"); put
   data-mode on the island itself so every token resolves there */
.k-island{ position:relative; box-sizing:border-box; border-radius:var(--radius-base); background:var(--ground); color:var(--ink); padding:clamp(24px, 4vw, 56px); }
.k-island[data-mode="dark"]{ box-shadow:none; }
/* the section-opening grammar (brief 2.5): Mono eyebrow (the struggle) -> Plex Sans heading (the outcome) -> 18 lead */
.k-head{ display:grid; gap:14px; max-width:46rem; margin:0 0 clamp(36px, 4.4vw, 64px); }
.k-head > *{ margin:0; }
.k-head--center{ margin-inline:auto; text-align:center; justify-items:center; }
.k-head--wide{ max-width:60rem; }
.k-head .t-lead{ max-width:40rem; }
.k-head--center .t-lead{ margin-inline:auto; }
/* grids */
.k-grid{ display:grid; gap:clamp(16px, 2vw, 24px); }
@media (min-width:768px){
  .k-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .k-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .k-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1024px){ .k-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.k-split{ display:grid; gap:clamp(32px, 5vw, 80px); align-items:center; }
@media (min-width:1024px){
  .k-split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .k-split--even{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .k-split--flip > :first-child{ order:2; }
}

/* ---------- 2. buttons and links ---------- */
.k-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box;
  min-height:48px; padding:0 22px; border:0; border-radius:var(--radius-button); cursor:pointer;
  font:600 15px/1.1 var(--k-font, var(--font-sans)); letter-spacing:0; text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur-instant) var(--ease-standard), box-shadow var(--dur-instant) var(--ease-standard), translate var(--dur-instant) var(--ease-standard);
}
.k-btn:active{ translate:0 1px; }
/* the human decision: the page's one primary action. White ink at every size (founder ruling 22 Oct); 15px 600 */
.k-btn--decision{ background:var(--decision); color:var(--on-decision); }
.k-btn--decision:hover{ background:var(--magenta-600); }
/* solid ink: every other strong action */
.k-btn--ink{ background:var(--ink); color:var(--ground); }
.k-btn--ink:hover{ background:color-mix(in srgb, var(--ink) 86%, var(--ground)); }
/* the product primary inside product UI (purple on light, cyan on dark; IP:159) */
.k-btn--primary{ background:var(--ui-primary); color:var(--on-ui-primary); }
.k-btn--quiet{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline); }
.k-btn--quiet:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.k-btn--sm{ min-height:40px; padding:0 16px; font-size:14px; }
.k-btn--lg{ min-height:56px; padding:0 28px; font-size:16px; }
.k-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.k-link{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); font:600 15px/1.3 var(--k-font, var(--font-sans)); text-decoration:none; }
.k-link::after{ content:"\2192"; transition:translate var(--dur-instant) var(--ease-standard); }
.k-link:hover::after{ translate:3px 0; }
[dir="rtl"] .k-link::after{ content:"\2190"; }
[dir="rtl"] .k-link:hover::after{ translate:-3px 0; }
.k-iconbtn{ display:inline-grid; place-items:center; width:44px; height:44px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline);
  transition:box-shadow var(--dur-instant) var(--ease-standard), opacity var(--dur-instant) var(--ease-standard); }
.k-iconbtn:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.k-iconbtn[disabled]{ opacity:.35; cursor:default; box-shadow:inset 0 0 0 1px var(--hairline); }
.k-iconbtn svg{ width:20px; height:20px; }
[dir="rtl"] .k-iconbtn svg{ scale:-1 1; }  /* directional icons mirror (BRAND) */

/* ---------- 3. cards (no border; shadow on light, elev-1 on dark) ---------- */
.k-card{ position:relative; box-sizing:border-box; border:0; border-radius:var(--radius-card); background:var(--card-surface); box-shadow:var(--card-lift); color:var(--ink); padding:clamp(20px, 2.4vw, 32px); }
a.k-card, .k-card--link{ display:block; text-decoration:none; transition:box-shadow var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard); }
a.k-card:hover, .k-card--link:hover{ box-shadow:var(--card-lift-hover); translate:0 -2px; }
.k-card--flat{ box-shadow:none; background:var(--ground-alt); }
.k-card > :first-child{ margin-top:0; } .k-card > :last-child{ margin-bottom:0; }

/* ---------- 4. small parts: tags, status, numbers, insight ---------- */
/* a role tag: colour meaning carried by a dot plus a word, never by colour alone (BRAND) */
.k-tag{ display:inline-flex; align-items:center; gap:8px; font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.k-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--hairline); flex:none; }
.k-tag--ai::before{ background:var(--role-ai); box-shadow:0 0 0 1px var(--role-ai-text); }
.k-tag--human::before{ background:var(--role-human); box-shadow:0 0 0 1px var(--role-human-text); }
.k-tag--outcome::before{ background:var(--role-outcome); }
.k-tag--decision::before{ background:var(--decision); }   /* counts toward the magenta budget */
/* rooms on the INFINITE mark carry the phase colours (A8): Acquisition purple, Expansion green, the bridge in ink */
.k-tag--acq::before{ background:var(--zone-acquisition); }
.k-tag--exp::before{ background:var(--zone-expansion); }
.k-tag--bridge::before{ background:var(--ink); }
/* honest status label on product UI (D16): "Sample workspace", "In the RIVET app · early access", "Coming soon" */
.k-status{ display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 10px; border-radius:999px; box-sizing:border-box;
  font:500 11px/1 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; white-space:nowrap;
  background:var(--ground-alt); color:var(--ink-muted); }
.k-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.k-stat{ display:grid; gap:6px; }
.k-stat__v{ font:500 var(--role-stat, 40px)/1 var(--font-mono); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.k-stat__l{ font:400 14px/1.5 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
/* the one insight per screen: a number or mark at >=24px in canon magenta; small insight text uses the 600 step */
.k-insight, .k-stat__v.k-insight{ color:var(--insight); }
.k-insight--text{ color:var(--insight-text); }
/* the engineering grid, the "science" substrate: behind IP figures and dashboards only, never photos or people */
.k-blueprint{ background-image:linear-gradient(var(--blueprint-line) 1px, transparent 1px), linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size:var(--blueprint-size) var(--blueprint-size); background-position:-1px -1px; }

/* ---------- 5. duos (brief 2.2). One duo per surface, bounded, aimed at the text (--duo-aim), RTL mirrored.
   Meaning first: --ai, --human, --together, --outcome, --structure, --room, --quiet. Named duos also exist. ---------- */
.k-duo{
  --_aim:var(--duo-aim, 135deg);
  position:relative; box-sizing:border-box; border-radius:var(--radius-base);
  background:linear-gradient(var(--_aim), var(--duo-a) 0, var(--duo-a) var(--duo-hold, 0%), var(--duo-b) 100%);
  color:var(--duo-ink);
  /* everything inside reads the duo's ink: text, hairlines, quiet buttons, question rows */
  --ink:var(--duo-ink); --ink-muted:var(--duo-muted); --focus-ring:var(--duo-focus);
  --hairline:color-mix(in srgb, var(--duo-ink) 22%, transparent); --ui-primary:var(--duo-ink); --on-ui-primary:var(--duo-ground);
  --link-ink:var(--duo-ink); --eyebrow-ink:var(--duo-muted); --fg-soft:var(--duo-muted);
}
[dir="rtl"] .k-duo{ --_aim:calc(360deg - var(--duo-aim, 135deg)); }
/* light-ink family (black text) */
.k-duo--dew{      --duo-a:var(--ghost-white); --duo-b:var(--cyan);   --duo-ink:#000; --duo-muted:var(--on-duo-muted-light); --duo-focus:#000; --duo-ground:#fff; }
.k-duo--dawn{     --duo-a:var(--ghost-white); --duo-b:var(--gold);   --duo-ink:#000; --duo-muted:var(--on-duo-muted-light); --duo-focus:#000; --duo-ground:#fff; }
.k-duo--bright{   --duo-a:var(--cyan);        --duo-b:var(--gold);   --duo-ink:#000; --duo-muted:var(--on-duo-muted-light); --duo-focus:#000; --duo-ground:#fff; }
.k-duo--signal{   --duo-a:var(--cyan);        --duo-b:var(--green);  --duo-ink:#000; --duo-muted:var(--on-duo-muted-light); --duo-focus:#000; --duo-ground:#fff; }
.k-duo--voice{    --duo-a:var(--gold);        --duo-b:var(--orange); --duo-ink:#000; --duo-muted:#000; --duo-focus:#000; --duo-ground:#fff; }
.k-duo--haze{     --duo-a:var(--ghost-white); --duo-b:var(--purple); --duo-ink:#000; --duo-muted:#000; --duo-focus:#000; --duo-ground:#fff; --duo-hold:40%; }
/* dark-ink family (white text) */
.k-duo--command{  --duo-a:var(--black); --duo-b:var(--cyan);   --duo-ink:#fff; --duo-muted:#fff; --duo-focus:#fff; --duo-ground:#000; --duo-hold:40%; }
.k-duo--prestige{ --duo-a:var(--black); --duo-b:var(--gold);   --duo-ink:#fff; --duo-muted:#fff; --duo-focus:#fff; --duo-ground:#000; --duo-hold:40%; }
.k-duo--depth{    --duo-a:var(--black); --duo-b:var(--purple); --duo-ink:#fff; --duo-muted:var(--on-duo-muted); --duo-focus:#fff; --duo-ground:#000; }
.k-duo--graphite{ --duo-a:var(--black); --duo-b:var(--slate);  --duo-ink:#fff; --duo-muted:var(--on-duo-muted); --duo-focus:#fff; --duo-ground:#000; }
/* meaning aliases, resolved by the nearest data-mode through inherited tokens (see the mode blocks below) */
.k-duo--ai{        --duo-a:var(--duo-ai-a);  --duo-b:var(--cyan);  --duo-ink:var(--duo-ai-ink);  --duo-muted:var(--duo-ai-muted);  --duo-focus:var(--duo-ai-ink);  --duo-ground:var(--duo-ai-g);  --duo-hold:var(--duo-ai-hold); }
.k-duo--human{     --duo-a:var(--duo-ai-a);  --duo-b:var(--gold);  --duo-ink:var(--duo-ai-ink);  --duo-muted:var(--duo-ai-muted);  --duo-focus:var(--duo-ai-ink);  --duo-ground:var(--duo-ai-g);  --duo-hold:var(--duo-ai-hold); }
.k-duo--structure{ --duo-a:var(--duo-ai-a);  --duo-b:var(--purple);--duo-ink:var(--duo-ai-ink);  --duo-muted:var(--duo-st-muted);  --duo-focus:var(--duo-ai-ink);  --duo-ground:var(--duo-ai-g);  --duo-hold:var(--duo-st-hold); }
.k-duo--together{  --duo-a:var(--cyan); --duo-b:var(--gold);   --duo-ink:#000; --duo-muted:var(--on-duo-muted-light); --duo-focus:#000; --duo-ground:#fff; }
.k-duo--outcome{   --duo-a:var(--cyan); --duo-b:var(--green);  --duo-ink:#000; --duo-muted:var(--on-duo-muted-light); --duo-focus:#000; --duo-ground:#fff; }
.k-duo--room{      --duo-a:var(--gold); --duo-b:var(--orange); --duo-ink:#000; --duo-muted:#000; --duo-focus:#000; --duo-ground:#fff; }
.k-duo--quiet{     --duo-a:var(--black); --duo-b:var(--slate); --duo-ink:#fff; --duo-muted:var(--on-duo-muted); --duo-focus:#fff; --duo-ground:#000; }
/* light mode: AI = Dew, human = Dawn, structure = Haze (ghost anchor, black ink).
   dark mode:  AI = Command, human = Prestige, structure = Depth (black anchor, white ink, 40% hold where BRAND needs it) */
:root, :not(:root)[data-mode="light"]{ --duo-ai-a:var(--ghost-white); --duo-ai-ink:#000; --duo-ai-muted:var(--on-duo-muted-light); --duo-ai-g:#fff; --duo-ai-hold:0%; --duo-st-muted:#000; --duo-st-hold:40%; }
:not(:root)[data-mode="dark"]{ --duo-ai-a:var(--black); --duo-ai-ink:#fff; --duo-ai-muted:#fff; --duo-ai-g:#000; --duo-ai-hold:40%; --duo-st-muted:var(--on-duo-muted); --duo-st-hold:0%; }
/* when the anchor matches the ground, keep the card off it (BRAND): a lift on light, a rim on dark */
:not(:root)[data-mode="light"] :is(.k-duo--dew,.k-duo--dawn,.k-duo--haze,.k-duo--ai,.k-duo--human,.k-duo--structure){ box-shadow:var(--card-lift); }
:not(:root)[data-mode="dark"] :is(.k-duo--command,.k-duo--prestige,.k-duo--depth,.k-duo--graphite,.k-duo--quiet,.k-duo--ai,.k-duo--human,.k-duo--structure){ box-shadow:inset 0 0 0 1px var(--elev-4); }
/* magenta on a duo needs 3:1 against the colour behind it (BRAND). No light-ink duo gives that, so there the action
   carries a 2px ink ring and the mark's hinge takes the duo ink; on the dark duos magenta clears 3:1 against the anchor. */
:is(.k-duo--dew,.k-duo--dawn,.k-duo--bright,.k-duo--signal,.k-duo--voice,.k-duo--haze,.k-duo--together,.k-duo--outcome,.k-duo--room){ --duo-ring:0 0 0 2px #000; --k-hinge:#000; }
:not(:root)[data-mode="light"] :is(.k-duo--ai,.k-duo--human,.k-duo--structure){ --duo-ring:0 0 0 2px #000; --k-hinge:#000; }
.k-duo .k-btn--decision{ box-shadow:var(--duo-ring, none); }
/* chips and captions over a duo or photo use the scrims (BRAND) */
.k-scrim{ background:var(--scrim); color:#fff; }
.k-scrim--strong{ background:var(--scrim-strong); color:#fff; }

/* ---------- 6. K14 Liquid Glass (brief 2.4). blur 20 saturate 1.4, tint floor .82, solid fallback.
   ON: header bar, sticky subnav, sticky apply rail, filter rail, notification cards and chips over phones and photos,
   the plan-chooser result card. OFF: mega-menu panels (N5), long text, tables, forms. ---------- */
.k-glass{ background:var(--glass-solid); color:var(--ink); border-radius:var(--radius-card); }
.k-glass--chip{ --ink:#fff; --ink-muted:rgba(255,255,255,.82); background:rgba(10,10,12,.92); color:#fff; border-radius:14px; }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .k-glass{ background:var(--glass-tint); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); box-shadow:var(--glass-rim), var(--glass-shadow); }
  .k-glass--chip{ background:rgba(10,10,12,.82); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px -10px rgba(0,0,0,.45); }
}
@media (prefers-reduced-transparency:reduce){
  .k-glass{ background:var(--glass-solid); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .k-glass--chip{ background:rgb(10,10,12); }
}
@media (prefers-contrast:more){ .k-glass{ background:var(--glass-solid); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:inset 0 0 0 1px var(--ink); } }
@media (forced-colors:active){ .k-glass,.k-glass--chip{ background:Canvas; color:CanvasText; border:1px solid CanvasText; } }
/* the sticky bar form (section subnav, apply rail): sits under the header, never at the bottom corners (N14) */
.k-glass--bar{ position:sticky; top:var(--header-h); z-index:20; border-radius:0; }
/* a notification card over a phone screen or photo */
.k-note{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; padding:12px 14px; max-width:300px; box-sizing:border-box; }
.k-note__i{ grid-row:span 2; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; overflow:hidden; background:var(--ground-alt); }
.k-note__i img{ width:100%; height:100%; object-fit:cover; }
.k-note__t{ font:600 14px/1.3 var(--k-font, var(--font-sans)); }
.k-note__s{ font:400 13px/1.35 var(--k-font, var(--font-sans)); color:var(--ink-muted); }

/* ---------- 7. Pause control (shared by K1, K5 loops, K8). WCAG 2.2.2: anything that starts by itself and runs
   longer than 5s shows it. Hidden without JS and under reduced motion (nothing moves then). ---------- */
.k-pause{ display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 12px 0 10px; border:0; border-radius:999px; cursor:pointer; box-sizing:border-box;
  background:transparent; color:var(--ink-muted); box-shadow:inset 0 0 0 1px var(--hairline);
  font:500 11px/1 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase;
  transition:color var(--dur-instant) var(--ease-standard), box-shadow var(--dur-instant) var(--ease-standard); }
.k-pause:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.k-pause svg{ width:12px; height:12px; fill:currentColor; flex:none; }
.k-pause[hidden]{ display:none; }
@media (pointer:coarse){ .k-pause{ min-height:44px; padding:0 16px 0 14px; } }
:lang(ar) .k-pause{ font-family:var(--font-arabic); letter-spacing:0; }

/* ---------- 8. K1 member-logo marquee (brief K1; MEM section 4). One line, ~60s a loop at 1440, 8% edge mask,
   one dimmed ink at all times with an opacity lift on hover, Pause, paused on hover/focus/out of view/hidden tab.
   Reduced motion: one centred static grid, each logo once. ---------- */
.k-marquee{ --k-mq-gap:clamp(40px, 4.6vw, 64px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k pause" "view view"; gap:18px 24px; align-items:center; }
.k-marquee__k{ grid-area:k; display:grid; gap:6px; margin:0; }
.k-marquee__k > *{ margin:0; }
.k-marquee__n{ font:400 14px/1.45 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.k-marquee__n b{ font:500 14px/1 var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.k-marquee > .k-pause{ grid-area:pause; justify-self:end; }
.k-marquee__view{ grid-area:view; position:relative; overflow:hidden; display:flex; align-items:center; min-height:64px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.k-marquee__track{ display:flex; flex:none; width:max-content; will-change:transform;
  animation:k-mq var(--k-mq-dur, 60s) linear infinite; animation-play-state:paused; }
.k-marquee.is-ready .k-marquee__track{ animation-play-state:running; }
.k-marquee.is-ready:is(:hover, :focus-within, .is-paused, .is-off) .k-marquee__track{ animation-play-state:paused; }
.k-marquee__list{ display:flex; flex:none; align-items:center; gap:var(--k-mq-gap); margin:0; padding:0 var(--k-mq-gap) 0 0; list-style:none; }
[dir="rtl"] .k-marquee__list{ padding:0 0 0 var(--k-mq-gap); }
.k-marquee__list li{ flex:none; display:flex; align-items:center; height:64px; }
.k-marquee__list img{ display:block; width:auto; height:var(--h, 30px); max-width:none;
  filter:var(--logo-filter); opacity:var(--logo-rest); transition:opacity var(--dur-instant) var(--ease-standard); }
.k-marquee__list li:hover img{ opacity:var(--logo-lift); }
@keyframes k-mq{ to{ transform:translateX(-50%); } }
@keyframes k-mq-rtl{ to{ transform:translateX(50%); } }
[dir="rtl"] .k-marquee__track{ animation-name:k-mq-rtl; }
@media (min-width:1024px){
  .k-marquee{ grid-template-columns:200px minmax(0,1fr) auto; grid-template-areas:"k view pause"; gap:32px; }
}
@media (max-width:560px){
  .k-marquee{ --k-mq-gap:36px; }
  .k-marquee__view{ min-height:52px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .k-marquee__list li{ height:52px; }
  .k-marquee__list img{ height:calc(var(--h, 30px) * .82); }
}
@media (prefers-reduced-motion:reduce){
  .k-marquee{ grid-template-columns:minmax(0,1fr); grid-template-areas:"k" "view"; justify-items:center; text-align:center; }
  .k-marquee > .k-pause{ display:none; }
  .k-marquee__view{ -webkit-mask-image:none; mask-image:none; width:100%; }
  .k-marquee__track{ animation:none !important; width:100%; transform:none; }
  .k-marquee__list{ flex:1; flex-wrap:wrap; justify-content:center; gap:8px var(--k-mq-gap); padding:0; }
  .k-marquee__list[data-dup]{ display:none; }
}

/* ---------- 9. K3 question in the section (brief K3, S1, S9). The markup is qa.css's (details.qa), the one
   animated question component; on kit pages kit.js animates it at dur-quick on ease-standard and the colours
   follow the mode (or the duo) it sits in. 1-3 per section, at the foot of the section that raises them. ---------- */
main[data-m="kit"] .qa-list{
  --qa-line:var(--hairline); --qa-ink:var(--ink); --qa-soft:var(--ink-muted); --qa-mark:var(--qa-accent, var(--ui-primary));
  --qa-hover:var(--link-ink); --qa-link:var(--link-ink); --qa-focus:var(--focus-ring);
}
main[data-m="kit"] details.qa > summary.qa__q{ font-family:var(--k-font, var(--font-sans)); transition:color var(--dur-quick) var(--ease-standard); }
main[data-m="kit"] details.qa > summary.qa__q::after{ transition:transform var(--dur-quick) var(--ease-standard); }
.k-qa{ margin-block-start:clamp(32px, 4vw, 56px); max-inline-size:760px; }
.k-qa.qa-list{ margin-block-start:clamp(32px, 4vw, 56px); }
.k-head--center ~ .k-qa, .k-qa--center{ margin-inline:auto; }
@media (prefers-reduced-motion:reduce){ main[data-m="kit"] details.qa > summary.qa__q::after{ transition:none; } }

/* ---------- 10. K4 phone frame: the black iPhone 18 Pro (ported from assets/device.css, same geometry: 3.2% bezel,
   15% radius, Dynamic Island 21% x 7.6%, side buttons). Always the full body (P2, P4). Desktop 240-300px, phones 200-240px.
   Screens are kit renders at 2x with their own 3:13 bar. No magenta on the frame. ---------- */
.k-phone{
  --k-phone-w:270px;
  --_w:var(--k-phone-w); --_bz:calc(var(--_w) * .032); --_r:calc(var(--_w) * .15); --_btn:max(2px, calc(var(--_w) * .011));
  position:relative; flex:none; box-sizing:border-box; width:var(--_w); margin:0; padding:var(--_bz);
  border-radius:var(--_r); background:#0B0B0D;
  box-shadow:inset 0 0 0 1px #34343B, inset 0 0 0 2px #0B0B0D, inset 0 0 0 3px #1C1C21,
    0 1px 2px rgba(0,0,0,.22), 0 14px 28px -10px rgba(0,0,0,.30), 0 42px 70px -30px rgba(0,0,0,.45);
}
.k-phone--s{ --k-phone-w:240px; }
.k-phone--l{ --k-phone-w:300px; }
@media (max-width:767px){
  .k-phone{ --k-phone-w:220px; }
  .k-phone--s{ --k-phone-w:200px; }
  .k-phone--l{ --k-phone-w:240px; }
}
.k-phone::before, .k-phone::after{ content:""; position:absolute; z-index:0; width:var(--_btn); }
.k-phone::before{ left:calc(var(--_btn) * -1); top:17%; height:24%; border-radius:2px 0 0 2px;
  background:linear-gradient(to bottom, #26262C 0 13%, transparent 13% 25%, #26262C 25% 58%, transparent 58% 67%, #26262C 67% 100%); }
.k-phone::after{ right:calc(var(--_btn) * -1); top:25%; height:37%; border-radius:0 2px 2px 0;
  background:linear-gradient(to bottom, #26262C 0 30%, transparent 30% 76%, #1E1E23 76% 100%); }
.k-phone__screen{ position:relative; z-index:1; display:block; box-sizing:border-box; width:100%; aspect-ratio:402 / 874;
  overflow:hidden; isolation:isolate; border-radius:calc(var(--_r) - var(--_bz)); background:#fff; }
.k-phone__screen::after{ content:""; position:absolute; z-index:5; left:50%; top:calc(var(--_w) * .026);
  width:calc(var(--_w) * .21); height:calc(var(--_w) * .076); transform:translateX(-50%); border-radius:999px; background:#000; pointer-events:none; }
.k-phone__screen > img, .k-phone__screen > picture > img, .k-phone__screen > video{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
/* an HTML screen drawn 390px wide; kit.js sets --k-fit = (frame width x .936) / 390 */
.k-phone__fit{ position:absolute; top:0; left:0; width:390px; transform:scale(var(--k-fit, .648)); transform-origin:top left; }
/* overlays on the screen: a glass notification lands here (K7, M5) */
.k-phone__over{ position:absolute; z-index:6; inset-inline:6%; top:calc(var(--_w) * .14); }

/* ---------- 11. K5 desktop frame, pair, flow strip ---------- */
/* F1: a 1440x900 canvas shown at 560-1120px, radius 12, 1px silver edge on light; a -m crop under 768px (<picture>) */
.k-desk{ position:relative; box-sizing:border-box; width:100%; max-width:1120px; margin:0; border-radius:12px; overflow:hidden;
  background:var(--card-surface); aspect-ratio:1440 / 900;
  box-shadow:0 0 0 1px var(--silver), 0 1px 2px rgba(0,0,0,.05), 0 30px 60px -30px rgba(17,12,46,.28); }
:not(:root)[data-mode="dark"] .k-desk{ box-shadow:0 0 0 1px var(--elev-4), 0 30px 60px -30px rgba(0,0,0,.7); }
.k-desk > img, .k-desk > picture > img, .k-desk > video{ display:block; width:100%; height:100%; object-fit:cover; object-position:top left; }
.k-desk > .k-status{ position:absolute; z-index:2; inset-inline-start:12px; inset-block-end:12px; }
@media (max-width:767px){ .k-desk{ aspect-ratio:auto; } .k-desk > img, .k-desk > picture > img{ height:auto; } }
/* a loop's Pause sits on the frame's bottom inline-end corner, on glass */
[data-k-loop]{ position:relative; }
[data-k-loop] > .k-pause{ position:absolute; z-index:3; inset-inline-end:12px; inset-block-end:12px; background:rgba(10,10,12,.82); color:#fff; box-shadow:none; }
/* F3 pair: the phone overlaps the desktop's bottom inline-end corner by 80px */
.k-pair{ --k-overlap:80px; display:grid; grid-template-columns:minmax(0,1fr) var(--k-overlap) calc(var(--k-phone-w, 270px) - var(--k-overlap)); align-items:end; }
.k-pair > .k-desk{ grid-column:1 / 3; grid-row:1; align-self:start; margin-block-end:var(--k-overlap); }
.k-pair > .k-phone{ grid-column:2 / 4; grid-row:1; z-index:2; --k-phone-w:inherit; }
.k-pair{ --k-phone-w:260px; }
@media (max-width:767px){
  .k-pair{ --k-phone-w:200px; grid-template-columns:minmax(0,1fr); justify-items:center; }
  .k-pair > .k-desk{ grid-column:1; margin-block-end:0; }
  .k-pair > .k-phone{ grid-column:1; grid-row:2; margin-block-start:calc(var(--k-overlap) * -1); }
}
/* F4 flow strip: three phones, list -> detail -> done. Phones: a swipeable row with dots */
.k-flow{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 3vw, 48px); justify-items:center; max-width:1040px; margin:0 auto; padding:0; list-style:none; }
.k-flow__step{ display:grid; justify-items:center; gap:18px; margin:0; text-align:center; }
.k-flow__step > figcaption, .k-flow__cap{ display:grid; gap:4px; max-width:240px; }
.k-flow__n{ font:500 12px/1 var(--font-mono); letter-spacing:var(--track-label); color:var(--ink-muted); }
.k-flow__t{ font:600 16px/1.35 var(--k-font, var(--font-sans)); color:var(--ink); }
.k-flow .k-phone{ --k-phone-w:250px; }
@media (max-width:899px){
  .k-flow{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:76%; justify-items:center; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--wrap-gutter) * -1); padding-inline:var(--wrap-gutter); scroll-padding-inline:var(--wrap-gutter); scrollbar-width:none; overscroll-behavior-x:contain; }
  .k-flow::-webkit-scrollbar{ display:none; }
  .k-flow__step{ scroll-snap-align:center; }
  .k-flow .k-phone{ --k-phone-w:220px; }
}
/* dots under a swipe row (built by kit.js) */
.k-dots{ display:flex; justify-content:center; gap:0; margin-block-start:12px; }
.k-dots[hidden]{ display:none; }
.k-dots button{ width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.k-dots button::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--hairline); transition:background-color var(--dur-quick) var(--ease-standard), width var(--dur-quick) var(--ease-standard); }
.k-dots button[aria-current="true"]::before{ background:var(--ink); width:20px; border-radius:4px; }
@media (min-width:900px){ .k-flow + .k-dots{ display:none; } }

/* ---------- 12. K8 guided tour tabs: 4-6 tabs, each one outcome; auto-advance every 8s with a progress
   underline; pause on interaction; Pause button; manual under reduced motion. ---------- */
.k-tour{ --k-tour-dur:8s; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px, 3vw, 40px); }
.k-tour > *{ min-width:0; }
.k-tour__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.k-tour__tabs{ position:relative; display:flex; gap:0; min-width:0; flex:1; overflow-x:auto; scrollbar-width:none; box-shadow:inset 0 -1px 0 var(--hairline); }
.k-tour__tabs::-webkit-scrollbar{ display:none; }
.k-tour__tab{ position:relative; flex:1 0 auto; min-height:52px; padding:12px 18px 16px; margin:0; border:0; background:none; cursor:pointer;
  text-align:start; color:var(--ink-muted); font:500 15px/1.3 var(--k-font, var(--font-sans)); white-space:nowrap;
  transition:color var(--dur-instant) var(--ease-standard); }
.k-tour__tab:hover{ color:var(--ink); }
.k-tour__tab[aria-selected="true"]{ color:var(--ink); }
.k-tour__tab:focus-visible{ outline-offset:-3px; border-radius:6px; }
.k-tour__bar{ position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--ui-primary); transform:scaleX(0); transform-origin:left center; }
[dir="rtl"] .k-tour__bar{ transform-origin:right center; }
.k-tour__tab[aria-selected="true"] .k-tour__bar{ transform:scaleX(1); }
.k-tour.is-auto .k-tour__tab[aria-selected="true"] .k-tour__bar{ animation:k-tour-prog var(--k-tour-dur) linear both; }
.k-tour.is-auto:is(.is-held, .is-off) .k-tour__tab[aria-selected="true"] .k-tour__bar{ animation-play-state:paused; }
@keyframes k-tour-prog{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.k-tour__stage{ display:grid; }
.k-tour__panel{ grid-area:1 / 1; min-width:0; opacity:0; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-exit), visibility 0s linear var(--dur-base); }
.k-tour__panel.is-on{ opacity:1; visibility:visible; transition:opacity var(--dur-base) var(--ease-standard), visibility 0s; }
/* without JS every panel shows, stacked */
html:not(.k-js) .k-tour__stage{ gap:48px; }
html:not(.k-js) .k-tour__panel{ grid-area:auto; opacity:1; visibility:visible; }
/* side variant: tabs stacked at the inline start with a one-line outcome under the active one (desktop) */
.k-tour__d{ display:none; }
@media (min-width:1024px){
  .k-tour--side{ grid-template-columns:minmax(260px, 4fr) minmax(0, 8fr); align-items:start; gap:clamp(32px, 4vw, 64px); }
  .k-tour--side .k-tour__top{ flex-direction:column; align-items:stretch; }
  .k-tour--side .k-tour__tabs{ flex-direction:column; overflow:visible; box-shadow:inset 1px 0 0 var(--hairline); }
  [dir="rtl"] .k-tour--side .k-tour__tabs{ box-shadow:inset -1px 0 0 var(--hairline); }
  .k-tour--side .k-tour__tab{ white-space:normal; padding:14px 20px 16px 22px; min-height:0; }
  .k-tour--side .k-tour__bar{ inset-inline:0 auto; top:0; bottom:0; width:2px; height:auto; transform:scaleY(0); transform-origin:center top; }
  .k-tour--side .k-tour__tab[aria-selected="true"] .k-tour__bar{ transform:scaleY(1); }
  @keyframes k-tour-prog-y{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  .k-tour--side.is-auto .k-tour__tab[aria-selected="true"] .k-tour__bar{ animation-name:k-tour-prog-y; }
  .k-tour--side .k-tour__d{ display:block; margin-top:6px; font:400 14px/1.5 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
  .k-tour--side .k-tour__tab:not([aria-selected="true"]) .k-tour__d{ display:none; }
  .k-tour--side .k-tour__top > .k-pause{ align-self:flex-start; margin-inline-start:22px; }
}
@media (prefers-reduced-motion:reduce){
  .k-tour__bar{ animation:none !important; }
  .k-tour__panel{ transition:none; }
}

/* ---------- 13. K9 sticky stage rail: the steps listed in a sticky rail, panels scrolling beside it,
   aria-current on the step in view; phones: a sticky chip row. ---------- */
.k-rail{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.k-rail__nav{ position:sticky; top:calc(var(--header-h) + 24px); z-index:4; }
.k-rail__mark{ margin:0 0 20px; color:var(--ink); }
.k-rail__mark .k-mark, .k-rail__mark img{ display:block; width:min(100%, 280px); min-width:240px; max-width:280px; height:auto; }
.k-rail__list{ display:grid; gap:2px; margin:0; padding:0; list-style:none; box-shadow:inset 1px 0 0 var(--hairline); }
[dir="rtl"] .k-rail__list{ box-shadow:inset -1px 0 0 var(--hairline); }
.k-rail__link{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:4px 8px; align-items:baseline; padding:10px 14px 10px 18px;
  color:var(--ink-muted); text-decoration:none; font:500 15px/1.35 var(--k-font, var(--font-sans)); border-radius:0 8px 8px 0;
  transition:color var(--dur-quick) var(--ease-standard), background-color var(--dur-quick) var(--ease-standard); }
[dir="rtl"] .k-rail__link{ padding:10px 18px 10px 14px; border-radius:8px 0 0 8px; }
.k-rail__link::before{ content:""; position:absolute; inset-block:6px; inset-inline-start:0; width:2px; background:var(--ui-primary); transform:scaleY(0); transition:transform var(--dur-base) var(--ease-emphasized); }
.k-rail__link:hover{ color:var(--ink); }
.k-rail__link[aria-current]{ color:var(--ink); background:var(--ground-alt); }
.k-rail__link[aria-current]::before{ transform:scaleY(1); }
.k-rail__n{ font:500 12px/1 var(--font-mono); letter-spacing:var(--track-label); font-variant-numeric:tabular-nums; }
.k-rail__sub{ grid-column:2; font:400 13px/1.4 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.k-rail__panels{ display:grid; gap:clamp(56px, 9vw, 128px); min-width:0; }
.k-rail__panel{ scroll-margin-top:calc(var(--header-h) + 24px); min-width:0; }
@media (min-width:1024px){ .k-rail{ grid-template-columns:minmax(240px, 300px) minmax(0,1fr); } }
@media (max-width:1023px){
  /* the chip row is a sticky subnav, so it is glass (2.4 ON list) */
  .k-rail__nav{ top:var(--header-h); margin-inline:calc(var(--wrap-gutter) * -1); padding:10px var(--wrap-gutter); border-radius:0; background:var(--glass-solid); }
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .k-rail__nav{ background:var(--glass-tint); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); box-shadow:inset 0 -1px 0 var(--hairline-soft); }
  }
  .k-rail__mark{ display:none; }
  .k-rail__list{ display:flex; gap:8px; overflow-x:auto; box-shadow:none; scrollbar-width:none; scroll-padding-inline:var(--wrap-gutter); }
  .k-rail__list::-webkit-scrollbar{ display:none; }
  .k-rail__link, [dir="rtl"] .k-rail__link{ display:inline-flex; gap:8px; align-items:center; white-space:nowrap; min-height:40px; padding:0 14px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--hairline); font-size:14px; }
  .k-rail__link::before{ display:none; }
  .k-rail__link[aria-current]{ background:var(--ink); color:var(--ground); box-shadow:none; }
  .k-rail__sub{ display:none; }
  .k-rail__panel{ scroll-margin-top:calc(var(--header-h) + 72px); }
}

/* ---------- 14. K15 cross-sell carousel: 3-4 scroll-snap cards, each a phone crop, the plan's wordmark card and an
   arrow; no autoplay; prev/next on pointer screens. ---------- */
.k-xsell__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-block-end:clamp(24px, 3vw, 40px); }
.k-xsell__top .k-head{ margin:0; }
.k-xsell__ctrl{ display:flex; gap:8px; flex:none; }
.k-xsell__track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, calc((100% - 40px) / 3)); gap:20px;
  margin:0 calc(var(--wrap-gutter) * -1); padding:6px var(--wrap-gutter) 28px; list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--wrap-gutter); scrollbar-width:none; overscroll-behavior-x:contain; }
.k-xsell__track::-webkit-scrollbar{ display:none; }
.k-xsell__track > li{ display:flex; scroll-snap-align:start; min-width:0; }
.k-xsell__card{ display:grid; grid-template-rows:auto 1fr; width:100%; padding:0; overflow:hidden; color:var(--ink); text-decoration:none; }
.k-xsell__media{ position:relative; height:248px; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; padding-block-start:28px; background:var(--ground-alt); }
.k-xsell__media .k-phone{ --k-phone-w:300px; }   /* the top of the screen at 1.4x: the line that matters reads (review P1-7) */
.k-xsell__media > .k-xsell__plan{ position:absolute; z-index:3; inset-inline-start:14px; inset-block-start:14px; }
.k-xsell__body{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:end; padding:20px 22px 22px; }
.k-xsell__name{ margin:0; font:600 var(--role-card, 22px)/1.25 var(--k-font, var(--font-sans)); letter-spacing:-0.01em; }
.k-xsell__line{ grid-column:1; margin:0; font:400 15px/1.5 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.k-xsell__go{ grid-column:2; grid-row:1 / 3; align-self:center; display:grid; place-items:center; width:40px; height:40px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--hairline);
  transition:translate var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.k-xsell__go svg{ width:18px; height:18px; }
[dir="rtl"] .k-xsell__go svg{ scale:-1 1; }
.k-xsell__card:hover .k-xsell__go{ background:var(--ink); color:var(--ground); translate:2px 0; }
[dir="rtl"] .k-xsell__card:hover .k-xsell__go{ translate:-2px 0; }
@media (max-width:767px){
  .k-xsell__ctrl{ display:none; }
  .k-xsell__track{ grid-auto-columns:82%; }
  .k-xsell__media{ height:220px; }
  .k-xsell__media .k-phone{ --k-phone-w:270px; }
}
@media (hover:none){ .k-xsell__ctrl{ display:none; } }

/* ---------- 15. K18 closing outcome band: one Bright band per membership and course page (cyan on the AI and
   product side, gold on the person's side), the outcome line, the magenta action and a small authored mark.
   Community and events close on Dawn or Voice (.k-close--human). Magenta count: the action + the mark's hinge = 2. ---------- */
.k-close{ padding-block:var(--sec-pad); }
.k-close__band{ --duo-aim:110deg; display:grid; gap:clamp(28px, 4vw, 56px); align-items:center; overflow:hidden;
  padding:clamp(36px, 6vw, 88px) clamp(24px, 6vw, 88px); border-radius:var(--radius-xl); }
.k-close__mark{ margin:0; color:var(--ink); width:min(100%, 320px); }
.k-close__copy{ display:grid; gap:16px; justify-items:start; }
.k-close__copy > *{ margin:0; }
.k-close__title{ font:600 var(--role-section, 40px)/1.12 var(--k-font, var(--font-sans)); letter-spacing:var(--tr-title, -0.02em); text-wrap:balance; max-width:20ch; }
.k-close__sub{ font:400 var(--role-lead, 18px)/1.55 var(--k-font, var(--font-sans)); max-width:36rem; }
.k-close__copy .k-acts{ margin-top:12px; }
/* P0 (review R2): magenta on a light-ink duo (Bright, Dawn, Voice, Dew...) is 2.1-2.3:1 against the blend behind it, under
   the 3:1 law. The close repeats the hero's action, so here it is the ink button; the page's one magenta stays in the hero/applybar. */
.k-close__band:is(.k-duo--together,.k-duo--bright,.k-duo--dew,.k-duo--dawn,.k-duo--signal,.k-duo--voice,.k-duo--haze,.k-duo--outcome,.k-duo--room) .k-btn--decision,
:not(:root)[data-mode="light"] .k-close__band:is(.k-duo--ai,.k-duo--human,.k-duo--structure) .k-btn--decision{ background:var(--duo-ink); color:var(--duo-ground); box-shadow:none; }
.k-close__band:is(.k-duo--together,.k-duo--bright,.k-duo--dew,.k-duo--dawn,.k-duo--signal,.k-duo--voice,.k-duo--haze,.k-duo--outcome,.k-duo--room) .k-btn--decision:hover,
:not(:root)[data-mode="light"] .k-close__band:is(.k-duo--ai,.k-duo--human,.k-duo--structure) .k-btn--decision:hover{ background:color-mix(in srgb, var(--duo-ink) 84%, var(--duo-ground)); }
@media (min-width:900px){ .k-close__band{ grid-template-columns:minmax(200px, 4fr) minmax(0, 7fr); } }
@media (max-width:899px){ .k-close__band{ --duo-aim:160deg; border-radius:var(--radius-base); } .k-close__mark{ width:200px; } }

/* ---------- 16. the authored INFINITE mark (rendered by kit.js from assets/icons-art/infinite-mark-path.txt,
   never redrawn). Ink follows currentColor; the hinge dot (the Revenue ModelMark form, _ds_bundle.js:7147) is
   magenta and counts as the screen's one insight; data-k-mark="outline" draws no hinge. ---------- */
.k-mark{ display:block; width:100%; aspect-ratio:882 / 442.5; color:inherit; }
.k-mark svg{ display:block; width:100%; height:100%; overflow:visible; }
.k-mark__band{ fill:currentColor; }
.k-mark__hinge{ fill:var(--k-hinge, var(--insight)); }

/* ---------- 17. section reveal (opacity + 16px rise, dur-base, once; brief 2.3). kit.js marks the units;
   nothing is hidden without kit.js, under reduced motion, or in print. ---------- */
html.k-js main[data-m="kit"] [data-k-r]{ transition:opacity var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard);
  transition-delay:calc(var(--k-i, 0) * var(--stagger)); }
html.k-js main[data-m="kit"] [data-k-r]:not(.is-in){ opacity:0; translate:0 var(--reveal-rise); }
@media (prefers-reduced-motion:reduce){ html.k-js main[data-m="kit"] [data-k-r]{ opacity:1 !important; translate:none !important; transition:none !important; } }
@media print{ html.k-js main[data-m="kit"] [data-k-r]{ opacity:1 !important; translate:none !important; } .k-pause{ display:none !important; } }

/* count-up: the number keeps its width while it counts (kit.js reserves it) */
[data-k-count]{ font-variant-numeric:tabular-nums; display:inline-block; }

/* ==================================================================================================================
   Round 1 fix pass (lane fix, 3 Nov 2026): the components the design review found in two or more versions
   (review_design.md P1-2, P1-3, P1-6, P1-9, P2-2, P2-4) now live here once; the page sheets dropped their copies.
   ================================================================================================================== */

/* P2-2 · one Pause on every page: 12px Mono caps (the font stack carries its own fallback, so a page without the
   --font-mono token no longer falls back to 16px body type). P1-9 · 44px tall everywhere (WCAG 2.5.8 / brief K12). */
.k-pause{ min-height:44px; padding:0 14px 0 12px; font:500 12px/1 var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); }
@media (pointer:coarse){ .k-pause{ min-height:44px; padding:0 14px 0 12px; } }
@media (prefers-reduced-motion:reduce){ .k-pause{ display:none !important; } }

/* P1-9 · tap targets: dots keep a small visual inside a 44px hit area; buttons are 48px (44px small) on touch */
.k-dots button{ width:44px; height:44px; }
@media (pointer:coarse){ .k-btn{ min-height:48px; } .k-btn--sm{ min-height:44px; } }

/* P1-2 · K3 questions fill the width: two or more questions at the foot of a section sit in two columns from 1024px,
   the way Attio answers in place; one question stays in the reading column. */
@media (min-width:1024px){
  .k-wrap > .k-qa.qa-list:has(> details.qa + details.qa){ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px; max-inline-size:none; align-items:start; }
}

/* P1-6 · K-case: one use-case card on every page. A Mono from → to tag (the move), the move as a 22px title, one
   sentence on what closes it, then the course chips (or the plan chip on /plans/teams). No figure. Four across at
   1440, a swipe row with dots under 768px. */
.k-cases{ display:grid; gap:clamp(16px, 2vw, 24px); grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); margin:0; padding:0; list-style:none; }
.k-cases > li{ display:flex; min-width:0; }
.k-case{ display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; width:100%; color:var(--ink); text-decoration:none; }
.k-case > *{ margin:0; }
.k-case__mv{ justify-self:start; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; background:var(--role-human-subtle, #FEF7E6);
  color:var(--role-human-text, #7A5A00); font:500 12px/1.3 var(--font-mono, "IBM Plex Mono", monospace); letter-spacing:var(--track-label, .08em); text-transform:uppercase; }
.k-case__t{ font:600 var(--role-card, 22px)/1.25 var(--k-font, var(--font-sans)); letter-spacing:-0.01em; text-wrap:balance; }
.k-case__p{ font:400 15px/1.6 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.k-case__chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:14px 0 0; list-style:none; box-shadow:inset 0 1px 0 var(--hairline-soft, var(--hairline)); }
.k-case__chips li{ display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 10px; border-radius:999px; background:var(--ground-alt); font:500 12px/1.2 var(--k-font, var(--font-sans)); color:var(--ink); }
.k-case__chips li.k-case__plan{ padding:0; background:none; font:500 12px/1.3 var(--font-mono, monospace); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink-muted); }
.k-case__chips .mcardobj{ width:56px; max-width:none; padding:4px 6px; border-radius:6px; flex:none; }
.k-case__go{ font-size:14px; }
a.k-case:hover .k-case__t{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
@media (max-width:767px){
  .k-cases{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--wrap-gutter, 16px) * -1); padding:4px var(--wrap-gutter, 16px) 12px; scroll-padding-inline:var(--wrap-gutter, 16px); scrollbar-width:none; }
  .k-cases::-webkit-scrollbar{ display:none; }
  .k-cases > li{ scroll-snap-align:start; }
}
@media (min-width:768px){ .k-cases + .k-dots{ display:none; } }

/* P1-3 · the sticky apply bar (K14 glass + K17): one component on every plan page. Inline start: the plan chip, the
   plan and the price a year (Mono). Centre: the section links (desktop). Inline end: the magenta Apply, 44px+.
   kit.js shows it once the hero action has scrolled away and hides it while K7/K10 are pinned, while the apply form
   or the close band is on screen, and while any other magenta action is in the viewport (brief 2.2). */
.k-applybar{ position:fixed; z-index:60; inset-inline:0; top:var(--header-h); translate:0 -110%; opacity:0; visibility:hidden; border-radius:0;
  box-shadow:inset 0 -1px 0 var(--hairline-soft, var(--hairline)); }
html.has-notif .k-applybar{ top:calc(var(--header-h) + 42px); }
.k-applybar[data-state="on"]{ translate:0 0; opacity:1; visibility:visible;
  transition:translate var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), visibility 0s; }
.k-applybar__in{ display:flex; align-items:center; gap:16px 24px; min-height:60px; }
.k-applybar__id{ display:flex; align-items:center; gap:12px; margin:0; white-space:nowrap; font:600 15px/1.2 var(--k-font, var(--font-sans)); }
.k-applybar__id .mcardobj--chip{ flex:none; }
.k-applybar__price{ font:500 13px/1.2 var(--font-mono, "IBM Plex Mono", monospace); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.k-applybar__nav{ flex:1; min-width:0; display:flex; justify-content:center; }
.k-applybar__links{ display:flex; gap:4px; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; }
.k-applybar__links::-webkit-scrollbar{ display:none; }
.k-applybar__links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:999px; color:var(--ink-muted); text-decoration:none; white-space:nowrap;
  font:500 14px/1 var(--k-font, var(--font-sans)); transition:color var(--dur-instant) var(--ease-standard), background-color var(--dur-instant) var(--ease-standard); }
.k-applybar__links a:hover, .k-applybar__links a[aria-current]{ color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.k-applybar .k-btn{ flex:none; min-height:44px; }
@media (max-width:1023px){ .k-applybar__nav{ display:none; } .k-applybar__in{ justify-content:space-between; min-height:56px; gap:12px; } }
@media (max-width:420px){ .k-applybar__id .mcardobj--chip{ display:none; } .k-applybar__id{ flex-wrap:wrap; gap:2px 8px; } .k-applybar__price{ font-size:12px; } }
@media (prefers-reduced-motion:reduce){ .k-applybar, .k-applybar[data-state="on"]{ transition:none; } }
@media print{ .k-applybar{ display:none !important; } }

/* P2-4 · K18: a small authored mark with its one-line "now you know" caption beside the copy (brief K18, DS:17-24) */
.k-close__art{ display:grid; gap:12px; justify-items:start; margin:0; }
.k-close__art .k-close__mark{ width:min(100%, 200px); }
.k-close__cap{ margin:0; max-width:24ch; font:500 12px/1.45 var(--font-mono, "IBM Plex Mono", monospace); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink); }
@media (min-width:900px){ .k-close__band{ grid-template-columns:auto minmax(0, 1fr); } .k-close__band > .k-close__mark{ width:200px; } }
@media (max-width:899px){ .k-close__art .k-close__mark{ width:160px; } }

/* P1-11 · tables that scroll sideways on phones say so: an edge fade on the scroll side and a Mono hint */
.k-swipe-hint{ display:none; margin:10px 0 0; font:500 12px/1.4 var(--font-mono, monospace); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink-muted); }
@media (max-width:899px){ .k-swipe-hint{ display:block; } }

/* P1-1 · the product-page hero: copy at 5/12, product proof at 7/12, both in the first frame (DS:90 "one hero per frame
   on a third"; Linear, Attio, Vercel). The K11 card overlaps the proof's bottom inline-start corner. The dashboard is
   shown whole at a fixed zoom (the way a desk frame shows a screen), so its KPI cards keep their layout. */
.k-herogrid{ display:grid; gap:clamp(40px, 5vw, 72px); align-items:center; }
.k-herogrid__proof{ position:relative; min-width:0; }
.k-herogrid__proof .pg-hero__dash, .k-herogrid__proof .pgb-dash{ margin:0; }
.k-herogrid__card{ position:absolute !important; z-index:6; inset:auto auto -36px -28px !important; width:min(230px, 40%) !important; rotate:-5deg !important; }
[dir="rtl"] .k-herogrid__card{ inset:auto -28px -36px auto !important; rotate:5deg !important; }
@media (min-width:1024px){
  .k-herogrid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
}
@media (max-width:1023px){
  .k-herogrid__card{ position:relative !important; inset:auto !important; width:min(260px, 70%) !important; margin:-48px 0 0 8px; }
}

/* P1-5 · K2c, the senior-member card: one design on every page (Max leaders, Infinite founders, Community "also in the
   room"). Employer logo at the top inline-end in its own colours, a 56px portrait where RIVET holds one (never a
   monogram: monograms stay in the /members library rows), name, current role · company, the move (from → to) where
   LinkedIn shows both roles, and the "RIVET member" meta (never implying a plan). */
.k-leaders{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin:0; padding:0; list-style:none; }
@media (min-width:1024px){ .k-leaders{ grid-template-columns:repeat(4, minmax(0,1fr)); } .k-leaders--3{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.k-leader{ display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; padding:22px; }
.k-leader > *{ margin:0; }
.k-leader__top{ display:flex; align-items:center; gap:12px; min-height:56px; }
.k-leader__face{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; }
.k-leader__logo{ display:block; height:26px; width:auto; max-width:128px; object-fit:contain; margin-inline-start:auto; }
.k-leader__logo--plate{ box-sizing:content-box; height:20px; padding:6px 10px; border-radius:6px; background:#000; }
.k-leader__who{ display:grid; gap:2px; }
.k-leader__name{ margin:0; font:600 17px/1.3 var(--k-font, var(--font-sans)); color:var(--ink); }
.k-leader__role{ margin:0; font:400 14px/1.45 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.k-leader__move{ font:400 13px/1.5 var(--k-font, var(--font-sans)); color:var(--ink-muted); padding-inline-start:12px; box-shadow:inset 2px 0 0 var(--role-human, #F5C24B); }
[dir="rtl"] .k-leader__move{ box-shadow:inset -2px 0 0 var(--role-human, #F5C24B); }
.k-leader__move b{ font-weight:600; color:var(--ink); }
.k-leader__meta{ font:500 11px/1.3 var(--font-mono, "IBM Plex Mono", monospace); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink-muted); }
.cm-more .k-leaders{ margin-top:4px; }