/* ============================================================================
   Level Game — Corporate site layout system
   ----------------------------------------------------------------------------
   Colour, shadow, radius and motion tokens are inherited VERBATIM from the
   Level Game Design System (css/colors.css, shape.css, typography.css,
   background.css). Nothing in this file redefines a brand colour.

   What IS new here is the TYPESETTING MODEL. The product surfaces (player app,
   HR dashboard, old landing) are built out of centred cards in a bento grid.
   This site is built as a BROADSHEET instead:

     · a 12-column grid with hairline rules that stay visible
     · a sticky left rail carrying section number + label (marginalia)
     · display type at newspaper scale, mixed-weight, negative tracking
     · horizontal rules as the primary structural device — cards are the
       exception, reserved for data objects
     · measured text columns (58–66ch) with hanging indices
     · numbers treated as display typography, not as chart furniture

   Layout patterns are informed by editorial B2B references collected on
   Mobbin (Frontify, Linear, Intercom, Notion, Cartesia, Deel) — see
   README.md § References.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Reset */

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must beat any display: grid/flex a component sets on itself —
   the glossary filter relies on it. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--teal-soft); color: var(--ink); }

body {
  font-family: var(--font-marketing);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1000px 620px at 4% -12%, rgba(129,178,154,.26) 0%, transparent 56%),
    radial-gradient(900px 640px at 108% 0%,  rgba(242,204,143,.30) 0%, transparent 55%),
    radial-gradient(880px 720px at 96% 118%, rgba(224,122,95,.14) 0%, transparent 58%),
    var(--eggshell);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ------------------------------------------------- 2. Site-level variables */

:root {
  --gutter: clamp(20px, 4vw, 56px);
  --measure: 62ch;
  --rail-w: 210px;
  --rule: 1px solid var(--line);
  --rule-2: 1px solid var(--line-2);
  --band: clamp(64px, 8vw, 128px);   /* vertical rhythm between bands */
}

/* ------------------------------------------------------------- 3. Shell */

.shell { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.shell-narrow { max-width: 940px; margin: 0 auto; padding: 0 var(--gutter); }

.band { padding-top: var(--band); padding-bottom: var(--band); }
.band-tight { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.band-top-rule { border-top: var(--rule); }

/* The signature broadsheet grid. Column rules are drawn as a repeating
   background so they survive any content height. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.2vw, 32px);
  row-gap: clamp(24px, 3vw, 48px);
}
.ruled-grid { position: relative; }
.ruled-grid::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  opacity: .55;
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
@media (max-width: 900px) { .ruled-grid::before { display: none; } }

/* Span helpers — deliberately uneven spans are the point.
   These set grid-column-END only, so a .startN class can pin the start
   without the shorthand resetting the span back to 1. */
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}
.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}
.start2{grid-column-start:2}.start3{grid-column-start:3}.start4{grid-column-start:4}
.start5{grid-column-start:5}.start6{grid-column-start:6}.start7{grid-column-start:7}
.start8{grid-column-start:8}.start9{grid-column-start:9}.start10{grid-column-start:10}

@media (max-width: 980px) {
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11 { grid-column: 1 / -1; }
  .start2,.start3,.start4,.start5,.start6,.start7,.start8,.start9,.start10 { grid-column-start: 1; }
}

/* ------------------------------------------------------- 4. Typography */

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: var(--track-tight); line-height: 1.08; text-wrap: balance; }

.display {
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .93;
  text-wrap: balance;
}
.display-xl {
  font-size: clamp(3rem, 9vw, 8.2rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .9;
}
.h2 { font-size: clamp(1.7rem, 3.6vw, 3.1rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.04; }
.h3 { font-size: clamp(1.24rem, 1.9vw, 1.6rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.18; }
.h4 { font-size: 1.03rem; font-weight: 800; letter-spacing: -.012em; }

/* Mixed-weight headline: the second clause drops to 400 and to ink-2.
   This is the main "revolution" device — one headline, two voices. */
.thin { font-weight: 400; letter-spacing: -.03em; color: var(--ink-2); }
.accent { color: var(--teal-deep); }
.accent-warm { color: var(--peach-deep); }

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.body { max-width: var(--measure); color: var(--ink-2); text-wrap: pretty; }
.body p { margin: 0 0 1.05em; }
.body p:last-child { margin-bottom: 0; }
.small { font-size: .88rem; line-height: 1.5; }
.micro { font-size: .76rem; line-height: 1.45; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }

/* Eyebrow — kept from the design system (uppercase, teal dash, tiny). */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font);
  font-size: .7rem; font-weight: 800; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--teal-ink);
  line-height: 1;
}
.eyebrow::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--teal); flex: 0 0 auto; }
.eyebrow.plain::before { display: none; }
.eyebrow.warm { color: var(--peach-ink); } .eyebrow.warm::before { background: var(--peach); }
.eyebrow.sun  { color: var(--apricot-ink); } .eyebrow.sun::before  { background: var(--apricot); }
.eyebrow.on-ink { color: rgba(255,255,255,.78); } .eyebrow.on-ink::before { background: rgba(255,255,255,.55); }

/* Numbers are set in Inter with tabular figures — data must line up. */
.num, .figure, table td, table th, .tab { font-family: var(--font); font-variant-numeric: tabular-nums; }

.figure {
  font-weight: 900; letter-spacing: -.04em; line-height: .88;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  color: var(--ink);
}
.figure-sm { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.figure .unit { font-size: .38em; font-weight: 800; letter-spacing: -.01em; vertical-align: .55em; margin-left: .16em; color: var(--muted); }
.figure.teal { color: var(--teal-deep); }
.figure.peach { color: var(--peach-deep); }
.figure.apricot { color: var(--apricot-deep); }

/* Hanging index — a marginal number that sits outside the text column. */
.hang { position: relative; padding-left: 3.6rem; }
.hang > .idx {
  position: absolute; left: 0; top: .15em;
  font-family: var(--font); font-variant-numeric: tabular-nums;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  color: var(--muted);
}
@media (max-width: 640px) { .hang { padding-left: 0; } .hang > .idx { position: static; display: block; margin-bottom: .5rem; } }

/* Pull quote with hanging punctuation. */
.pull {
  font-size: clamp(1.35rem, 2.8vw, 2.15rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.16;
  margin: 0; position: relative; padding-left: .62em; text-wrap: balance;
}
.pull::before {
  content: "\201C"; position: absolute; left: -.06em; top: -.06em;
  color: var(--teal); font-size: 1.5em; line-height: 1; font-weight: 900;
}
.pull cite { display: block; margin-top: 1rem; font-size: .82rem; font-weight: 700; font-style: normal; letter-spacing: .02em; color: var(--muted); font-family: var(--font); }

/* ------------------------------------------------------ 5. Rules & rails */

.rule { border: 0; border-top: var(--rule); margin: 0; }
.rule-strong { border: 0; border-top: 2px solid var(--ink); margin: 0; }
.rule-dashed { border: 0; border-top: 1px dashed var(--line-2); margin: 0; }

/* Sticky marginalia rail — the section's number and label track the scroll. */
.railed { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); }
.railed > * { min-width: 0; }
.rail { position: sticky; top: 108px; align-self: start; }
.rail .rail-no {
  font-family: var(--font); font-variant-numeric: tabular-nums;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; color: var(--muted);
  display: block; margin-bottom: 10px;
}
.rail .rail-label { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.rail .rail-note { margin-top: 12px; font-size: .8rem; line-height: 1.45; color: var(--muted); max-width: 22ch; }
@media (max-width: 980px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track keeps min-width:auto, so a wide
     child (the data tables) refuses to shrink and pushes the page sideways. */
  .railed { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rail { position: static; padding-bottom: 4px; border-bottom: var(--rule); }
  .rail .rail-note { max-width: none; }
}

/* Ruled row list — the broadsheet alternative to a grid of cards. */
.rows { border-top: var(--rule); }
.row { border-bottom: var(--rule); padding: clamp(18px, 2.4vw, 30px) 0; display: grid; gap: clamp(10px, 2vw, 32px); align-items: start; }
.row-2 { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.row-3 { grid-template-columns: 3.2rem minmax(0, 4fr) minmax(0, 6fr); }
.row-lead { grid-template-columns: minmax(0,1fr) auto; align-items: baseline; }
@media (max-width: 820px) { .row-2, .row-3, .row-lead { grid-template-columns: 1fr; } }
.row .row-no { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); padding-top: .35em; }

/* Hover-reactive rows, matching the app's row tint behaviour. */
.rows.interactive .row { transition: background var(--t-fast) var(--ease), padding-left var(--t) var(--ease); }
.rows.interactive .row:hover { background: var(--brand-tint); padding-left: 12px; }

/* --------------------------------------------------------- 6. Components */

/* Buttons — 3D keycap, unchanged from the design system. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  padding: 13px 24px; border-radius: var(--r-pill);
  font-family: var(--font-marketing); font-size: .96rem; font-weight: 800;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 3px 0 var(--line-2);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--line-2); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line-2); }
.btn:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.btn.primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, var(--teal-strong) 0%, var(--teal-deep) 78%);
  text-shadow: 0 1px 1px rgba(38,40,57,.28);
  box-shadow: 0 4px 0 var(--teal-deep), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn.primary:hover { filter: brightness(1.05); box-shadow: 0 5px 0 var(--teal-deep), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--teal-deep), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.warm {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, var(--peach-strong) 0%, var(--peach-deep) 78%);
  text-shadow: 0 1px 1px rgba(38,40,57,.28);
  box-shadow: 0 4px 0 var(--peach-deep), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn.warm:hover { filter: brightness(1.05); box-shadow: 0 5px 0 var(--peach-deep), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.warm:active { transform: translateY(4px); box-shadow: 0 0 0 var(--peach-deep), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.ghost { background: transparent; box-shadow: 0 3px 0 rgba(219,213,191,.6); }
.btn.on-ink { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); color: #fff; box-shadow: 0 3px 0 rgba(255,255,255,.18); }
.btn.on-ink:hover { background: rgba(255,255,255,.12); box-shadow: 0 4px 0 rgba(255,255,255,.18); }
.btn.lg { padding: 16px 30px; font-size: 1.02rem; }
.btn.sm { padding: 10px 18px; font-size: .88rem; }

/* Text link with a rule that grows on hover. */
.link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; text-decoration: none; color: var(--teal-deep);
  border-bottom: 2px solid var(--teal-soft); padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.link:hover { border-color: var(--teal); gap: 11px; }
.link.warm { color: var(--peach-deep); border-color: var(--peach-soft); }
.link.warm:hover { border-color: var(--peach); }

/* Pills / chips / tags — pill radius kept from the design system. */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font); font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  padding: 6px 13px; border-radius: var(--r-pill); line-height: 1.35;
  background: var(--indigo-soft); color: var(--ink-2); white-space: nowrap;
}
.pill.good { background: var(--teal-soft); color: var(--teal-ink); }
.pill.warn { background: var(--apricot-soft); color: var(--apricot-ink); }
.pill.bad  { background: var(--peach-soft); color: var(--peach-ink); }
.pill.on-ink { background: rgba(255,255,255,.12); color: #fff; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cards — used sparingly, only for data objects. */
.card {
  background: var(--paper); border: var(--rule); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}
.card.hov:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card.tint { background: var(--paper-2); }
.card.brand { background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%); border-color: transparent; color: #fff; }
.card.brand .muted, .card.brand .lead { color: rgba(255,255,255,.82); }
.card.flat { box-shadow: none; }

/* Icon tile — soft fill + coloured stroke, exactly the dashboard's .ico. */
.ico {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--teal-soft); color: var(--teal-deep);
}
.ico.warn { background: var(--apricot-soft); color: var(--apricot-deep); }
.ico.bad  { background: var(--peach-soft); color: var(--peach-deep); }
.ico.neutral { background: var(--indigo-soft); color: var(--ink-2); }
.ico svg { width: 21px; height: 21px; }

/* Dark band — the one inverted surface, borrowed from the bento's fill-ink. */
.ink-band { background: linear-gradient(158deg, #43465f 0%, #2f3145 100%); color: #fff; }
.ink-band h1, .ink-band h2, .ink-band h3, .ink-band .figure { color: #fff; }
.ink-band .lead, .ink-band .body { color: #c4c6d4; }
.ink-band .muted { color: #9b9eb0; }
.ink-band .rule, .ink-band .rows, .ink-band .row { border-color: rgba(255,255,255,.14); }
.ink-band .link { color: var(--apricot); border-color: rgba(242,204,143,.3); }
/* Data tables on the dark band: the light-ground text tokens vanish here,
   so every cell, header and link gets an explicit light value. */
.ink-band table.data th { color: #9b9eb0; border-bottom-color: rgba(255,255,255,.55); }
.ink-band table.data td { color: #c4c6d4; border-bottom-color: rgba(255,255,255,.14); }
.ink-band table.data td:first-child:not(:only-child) { color: #c4c6d4; font-weight: 600; }
.ink-band table.data td a { color: var(--apricot); text-decoration: none; border-bottom: 1px solid rgba(242,204,143,.35); }
.ink-band table.data td a:hover { border-bottom-color: var(--apricot); }
.ink-band table.data tbody tr:hover { background: rgba(255,255,255,.05); }

/* Warm band — apricot/peach wash for contrast without leaving the palette. */
.warm-band { background: linear-gradient(160deg, var(--apricot-soft) 0%, var(--peach-soft) 100%); }

/* ---------------------------------------------------- 7. Navigation bar
   A floating two-capsule header: brand + grouped nav on the left, secondary
   link + CTA on the right, both detached from the page edge. The pattern is
   everywhere in current B2B work (Frontify, Coda, mymind, Rains on Mobbin) and
   it suits this brand specifically, because the whole system is already built
   on pill radii and keycap buttons.

   Grouped items open a mega panel with a one-line description per destination,
   which is what turns a flat seven-link bar into something that reads as a
   product rather than a table of contents. */

.nav-rail {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  padding: 14px var(--gutter) 0;
  pointer-events: none;                      /* only the capsules take clicks */
}
body { padding-top: 104px; }                 /* clears the floating header */

/* Reading-progress hairline, pinned to the very top of the viewport. */
.nav-progress { position: fixed; inset: 0 0 auto 0; height: 2px; background: transparent; }
.nav-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--apricot) 60%, var(--peach) 100%);
  transition: width .12s linear;
}

.nav {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 10px 8px 16px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease),
              padding var(--t) var(--ease), transform var(--t) var(--ease);
}
.nav-pill-actions { padding: 8px 8px 8px 14px; }

/* Once the page has moved, the capsules tighten and lift. */
.nav-rail[data-scrolled="true"] .nav-pill { background: rgba(255,255,255,.92); box-shadow: var(--shadow); padding-top: 6px; padding-bottom: 6px; }
.nav-rail[data-scrolled="true"] .brand img { height: 30px; }

.brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: 8px; }
.brand img { height: 34px; width: auto; transition: height var(--t) var(--ease), transform .3s var(--spring); }
.brand:hover img { transform: scale(1.04); }

.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }

.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-marketing); font-size: .9rem; font-weight: 700;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  padding: 9px 13px; border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-link:hover { background: var(--teal-soft); color: var(--teal-deep); }
.nav-link:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.nav-link[aria-current="page"], .nav-link[data-current="true"] { background: var(--teal-soft); color: var(--teal-deep); }
.nav-link-plain { font-size: .88rem; }

.nav-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t) var(--spring); }
.nav-link[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.nav-link[aria-expanded="true"] { background: var(--teal-soft); color: var(--teal-deep); }

/* — Mega panel ---------------------------------------------------------- */
.nav-menu {
  position: absolute; top: calc(100% + 12px); left: -8px; z-index: 10;
  min-width: 424px; padding: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: grid; gap: 2px;
  animation: nav-drop .18s var(--ease);
}
@keyframes nav-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-menu { animation: none; } }

.nav-menu-item {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 11px 12px; border-radius: var(--r-md); text-decoration: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-menu-item:hover { background: var(--brand-tint); transform: translateX(2px); }
.nav-menu-item:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: -2px; }
.nav-menu-item[aria-current="page"] { background: var(--teal-soft); }
.nav-menu-ico {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal-deep);
}
.nav-menu-item:nth-child(even) .nav-menu-ico { background: var(--apricot-soft); color: var(--apricot-deep); }
.nav-menu-text { display: grid; gap: 3px; min-width: 0; }
.nav-menu-text .t { font-size: .93rem; font-weight: 800; letter-spacing: -.012em; color: var(--ink); }
.nav-menu-text .d { font-size: .79rem; line-height: 1.4; color: var(--muted); }

/* — Mobile -------------------------------------------------------------- */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--ink); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.nav-toggle:hover { background: var(--brand-tint); }
.nav-toggle:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }

@media (max-width: 1080px) {
  body { padding-top: 88px; }
  .nav-toggle { display: inline-flex; }
  .nav-pill-main { flex: 1 1 auto; }
  .nav-list {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 12px);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 10px;
  }
  .nav[data-open="true"] .nav-list { display: flex; }
  .nav-item.has-menu .nav-link { width: 100%; justify-content: space-between; }
  .nav-menu {
    position: static; min-width: 0; box-shadow: none; border: 0; border-radius: 0;
    padding: 2px 0 8px 8px; animation: none; background: transparent;
    border-left: 2px solid var(--teal-soft); margin-left: 12px;
  }
  .nav-link { padding: 12px 14px; font-size: 1rem; }
  .nav-link-plain { display: none; }
}
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .nav-menu-text .d { display: none; }
  .nav-menu-item { grid-template-columns: 30px minmax(0, 1fr); padding: 9px 10px; }
  .nav-menu-ico { width: 30px; height: 30px; border-radius: 10px; }
  .nav-menu-ico .i { width: 17px; height: 17px; }
}

/* ------------------------------------------------------------ 8. Ticker */

.ticker { border-top: var(--rule); border-bottom: var(--rule); overflow: hidden; padding: 15px 0; background: rgba(255,255,255,.4); }
.ticker-track { display: flex; gap: 0; width: max-content; animation: ticker 46s linear infinite; }
.ticker-track span {
  font-family: var(--font); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2); padding: 0 22px;
  display: inline-flex; align-items: center; gap: 22px;
}
.ticker-track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ------------------------------------------------------------- 9. Tables */

table.data { width: 100%; border-collapse: collapse; font-family: var(--font); font-size: .89rem; }
table.data th {
  text-align: left; font-weight: 800; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 0 14px 12px 0; border-bottom: 2px solid var(--ink); white-space: nowrap;
}
table.data td { padding: 14px 14px 14px 0; border-bottom: var(--rule); vertical-align: top; color: var(--ink-2); }
table.data td:first-child { color: var(--ink); font-weight: 700; }
table.data tbody tr { transition: background var(--t-fast) var(--ease); }
table.data tbody tr:hover { background: var(--brand-tint); }
table.data .n { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Index table with dot leaders — a book-index device. */
.leaders { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.leaders li { border-bottom: var(--rule); }
.leaders a {
  display: flex; align-items: baseline; gap: 10px; padding: 14px 0;
  text-decoration: none; color: var(--ink); font-weight: 700;
  transition: color var(--t-fast) var(--ease), padding-left var(--t) var(--ease);
}
.leaders a:hover { color: var(--teal-deep); padding-left: 10px; }
.leaders .dots { flex: 1 1 auto; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); min-width: 24px; }
.leaders .val { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 800; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------- 10. Meter / bar chart */

.meter { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--teal); transition: width .7s var(--ease); }
.meter.warn > i { background: var(--apricot); }
.meter.bad  > i { background: var(--peach); }
.meter.ink  > i { background: var(--indigo); }

/* Zone key (traffic-light semantics used across the product). */
.zone { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); font-size: .76rem; font-weight: 800; }
.zone::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.zone.good::before { background: var(--teal); }
.zone.warn::before { background: var(--apricot); }
.zone.bad::before  { background: var(--peach); }
.zone.none::before { background: var(--line-2); }

/* --------------------------------------------------------- 11. Accordion */

.acc { border-top: var(--rule); }
.acc details { border-bottom: var(--rule); }
.acc summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem); font-weight: 800; letter-spacing: -.018em;
  transition: color var(--t-fast) var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--teal-deep); }
.acc summary::after {
  content: "+"; margin-left: auto; font-family: var(--font); font-weight: 800;
  font-size: 1.4rem; line-height: 1; color: var(--muted); transition: transform var(--t) var(--spring);
}
.acc details[open] summary::after { transform: rotate(45deg); color: var(--teal-deep); }
.acc .acc-body { padding: 0 0 24px; max-width: var(--measure); color: var(--ink-2); }
.acc .acc-no { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .76rem; font-weight: 800; color: var(--muted); flex: 0 0 auto; }

/* -------------------------------------------------------------- 12. Forms */

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-family: var(--font); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.input, .select, .textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 13px 16px; font-size: 1rem; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--brand-glow); }
.textarea { min-height: 128px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px; }

/* Search input with a leading icon. */
.search { position: relative; }
.search .input { padding-left: 46px; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }

/* ------------------------------------------------------------ 13. Footer */

.footer { border-top: 2px solid var(--ink); margin-top: clamp(48px, 6vw, 96px); }
.footer-top { padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
/* Unfilled placeholders in the legal drafts */
mark.ph { background: var(--apricot-soft); color: var(--peach-ink); padding: 0 4px; border-radius: 4px; font-style: normal; }

/* Game spec block: construct / research / business case / type */
.spec { margin: 0; border-top: var(--rule); padding-top: 14px; display: grid; gap: 11px; }
.spec > div { display: grid; gap: 2px; }
.spec dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.spec dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }

.footer h4 { font-family: var(--font); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul a { text-decoration: none; color: var(--ink-2); font-size: .92rem; font-weight: 600; transition: color var(--t-fast); }
.footer ul a:hover { color: var(--teal-deep); }
.footer-bottom { border-top: var(--rule); padding: 22px 0 40px; display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; font-size: .82rem; color: var(--muted); }
.footer-bottom .sep { margin-left: auto; }

/* ------------------------------------------------- 14. Motion & reveal */

[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.float { animation: float 5.6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Mascot. The design-system note prescribes mix-blend-mode: multiply, which is
   the correct treatment for the white-background mascot *renders*. The PNGs
   shipped in assets/quokka/ are true RGBA cut-outs (verified: alpha 0 on every
   edge), so multiply here only darkens the light fur against the eggshell and
   makes the animal look semi-transparent. Cut-outs composite normally. */
.quokka { mix-blend-mode: normal; }

/* ---------------------------------------------------------- 15. Utilities */

.flex { display: flex; } .wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; } .gap-20 { gap: 20px; } .gap-28 { gap: 28px; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.stack-sm > * + * { margin-top: 9px; }
.mt-8{margin-top:8px}.mt-14{margin-top:14px}.mt-20{margin-top:20px}.mt-28{margin-top:28px}
.mt-40{margin-top:40px}.mt-56{margin-top:56px}.mt-72{margin-top:72px}
.mb-14{margin-bottom:14px}.mb-20{margin-bottom:20px}.mb-28{margin-bottom:28px}.mb-40{margin-bottom:40px}
.tar { text-align: right; } .tac { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hide-sm { }
@media (max-width: 700px) { .hide-sm { display: none !important; } }

/* Skip link for keyboard users. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--paper); padding: 12px 20px; border-radius: 0 0 var(--r-md) 0; font-weight: 800; }
.skip:focus { left: 0; }

/* ------------------------------------------------------------ 16. Icons */
/* Lucide glyphs, inlined as a sprite in each page (no CDN, no emoji).
   strokeWidth 1.9 is the design-system value; 2.2 when the icon is "active". */
.i { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 28px; height: 28px; stroke-width: 1.7; }

/* =========================================================== 17. Configurator
   The package builder. Two columns: a picker on the left, a summary panel that
   sticks on the right. Everything inside stays inside the palette — selection
   is signalled with teal fills and the keycap press, never with a new hue. */

.cfg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
@media (max-width: 1080px) { .cfg { grid-template-columns: 1fr; } }

/* — Goal presets ------------------------------------------------------- */
.goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 12px; }
.goal {
  text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; box-shadow: 0 3px 0 var(--line);
  display: grid; gap: 6px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.goal:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--line-2); background: var(--brand-tint); }
.goal:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line-2); }
.goal:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.goal[aria-pressed="true"] { background: var(--teal-soft); border-color: var(--teal); box-shadow: 0 3px 0 var(--teal); }
.goal-label { font-weight: 800; letter-spacing: -.015em; font-size: 1rem; }
.goal-blurb { font-size: .82rem; line-height: 1.45; color: var(--ink-2); }
.goal[aria-pressed="true"] .goal-blurb { color: var(--teal-ink); }

/* — Game picker -------------------------------------------------------- */
.pick-group { margin-top: 34px; }
.pick-group:first-child { margin-top: 0; }
.pick-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.pick-sub { font-size: .82rem; font-weight: 700; color: var(--muted); margin-left: auto; }

.pick {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 14px; align-items: start;
  padding: 16px 12px 16px 0; border-bottom: var(--rule); cursor: pointer;
  transition: background var(--t-fast) var(--ease), padding-left var(--t) var(--ease);
}
.pick:hover { background: var(--brand-tint); padding-left: 10px; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick-box {
  width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  border: 2px solid var(--line-2); background: var(--paper);
  display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.pick-box::after {
  content: ""; width: 11px; height: 6px; margin-top: -2px;
  border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.pick[data-on="true"] .pick-box { background: var(--teal-deep); border-color: var(--teal-deep); }
.pick[data-on="true"] .pick-box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.pick input:focus-visible + .pick-box { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.pick-main { display: grid; gap: 7px; min-width: 0; }
.pick-name { font-weight: 800; letter-spacing: -.015em; }
.pick-skill { font-size: .84rem; color: var(--ink-2); line-height: 1.4; }
.pick-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-meta { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; padding-top: 2px; }

/* — Summary panel ------------------------------------------------------ */
.panel { position: sticky; top: 96px; background: var(--paper); border: var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
@media (max-width: 1080px) { .panel { position: static; } }
.panel-head { padding: 22px 24px 18px; border-bottom: var(--rule); background: var(--paper-2); }
.panel-body { padding: 22px 24px; }
.panel-body + .panel-body { border-top: var(--rule); }

.panel-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.panel-stats > div { text-align: left; }
.panel-stats .v { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 1.55rem; font-weight: 900; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.panel-stats .k { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 6px; line-height: 1.3; }

.abil { padding: 10px 0; border-bottom: var(--rule); }
.abil:last-child { border-bottom: 0; padding-bottom: 0; }
.abil.is-off { opacity: .45; }
.abil-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.abil-name { font-size: .88rem; font-weight: 800; letter-spacing: -.01em; }
.abil-val { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

.scorecard { padding: 14px 0; border-bottom: var(--rule); }
.scorecard:last-child { border-bottom: 0; padding-bottom: 0; }
.scorecard.is-off { opacity: .5; }
.scorecard-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scorecard-name { font-size: .92rem; font-weight: 800; letter-spacing: -.015em; }
.scorecard-q { margin: 6px 0 0; font-size: .82rem; color: var(--ink-2); }
.scorecard-note { margin: 6px 0 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }

.advice-item { margin: 0 0 12px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); padding-left: 14px; border-left: 3px solid var(--line-2); }
.advice-item:last-child { margin-bottom: 0; }
.advice-item strong { color: var(--ink); }
.advice-item.warn { border-left-color: var(--apricot); }
.advice-item.good { border-left-color: var(--teal); }
.advice-item .link { font-size: inherit; border-bottom-width: 1px; }
.advice-item button.link { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; padding: 0 0 1px; }

/* ============================================================== 18. Glossary
   Terms are set as marginalia: the headword and its layer badge hang in the
   left column, the definition and the two signals occupy the measure. The
   growth / gap pair is the point of the page, so it gets the only coloured
   rules on the site apart from the meters. */

.gloss-toolbar { position: sticky; top: 74px; z-index: 40; background: rgba(244,241,222,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: var(--rule); padding: 16px 0; }
.gloss-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  font-family: var(--font); font-size: .78rem; font-weight: 800; letter-spacing: .01em;
  padding: 8px 15px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.filter-chip:hover { background: var(--brand-tint); color: var(--teal-deep); }
.filter-chip:active { transform: scale(.97); }
.filter-chip[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.filter-chip:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }

.alpha { display: flex; flex-wrap: wrap; gap: 2px; }
.alpha a {
  font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 800;
  color: var(--ink-2); text-decoration: none; padding: 5px 9px; border-radius: 8px;
  transition: background var(--t-fast), color var(--t-fast);
}
.alpha a:hover { background: var(--teal-soft); color: var(--teal-deep); }
.alpha span { font-size: .82rem; font-weight: 800; color: var(--line-2); padding: 5px 9px; }

.letter-group { margin-top: clamp(36px, 4vw, 60px); }
.letter-group > h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 900; letter-spacing: -.05em;
  color: var(--teal); line-height: 1; padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}

.term { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 40px); padding: clamp(20px, 2.4vw, 28px) 0; border-bottom: var(--rule); scroll-margin-top: 160px; }
@media (max-width: 860px) { .term { grid-template-columns: 1fr; gap: 14px; } }
.term-name { font-size: 1.14rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.term-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.term-def { margin: 0; color: var(--ink-2); max-width: 66ch; }

.signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; }
@media (max-width: 700px) { .signals { grid-template-columns: 1fr; } }
.sig { padding-left: 14px; border-left: 3px solid var(--line-2); }
.sig dt { font-family: var(--font); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sig dd { margin: 0; font-size: .87rem; line-height: 1.5; color: var(--ink-2); }
.sig-up { border-left-color: var(--teal); } .sig-up dt { color: var(--teal-ink); }
.sig-down { border-left-color: var(--peach); } .sig-down dt { color: var(--peach-ink); }

.term-meta { margin: 16px 0 0; font-size: .8rem; color: var(--muted); }
.term-meta a { color: var(--teal-deep); text-decoration: none; border-bottom: 1px solid var(--teal-soft); }
.term-meta a:hover { border-color: var(--teal); }
.term-meta .sep { margin: 0 8px; color: var(--line-2); }

/* Narrow phones: four stat columns become two rows of two. */
@media (max-width: 430px) {
  .panel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .pick { grid-template-columns: 22px minmax(0, 1fr); }
  .pick-meta { grid-column: 2; padding-top: 0; }
}

/* ========================================================== 19. Product shots
   Real screens from the running product, in a browser frame. The window
   chrome's three dots reuse the traffic-light semantics the product itself
   uses everywhere — teal / apricot / peach — rather than borrowing macOS red.
   The UI in the screenshots is Russian, which is the product language; every
   frame carries an English caption saying what is on screen. */

.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 1080px) { .showcase { grid-template-columns: 1fr; } }

/* — Browser chrome ------------------------------------------------------ */
.frame {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-lg); overflow: hidden;
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}
.frame:hover { transform: translateY(-3px); }
.frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.frame-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.frame-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.frame-dots i:nth-child(1) { background: var(--peach); }
.frame-dots i:nth-child(2) { background: var(--apricot); }
.frame-dots i:nth-child(3) { background: var(--teal); }
.frame-url {
  flex: 1 1 auto; min-width: 0; margin-left: 8px;
  font-family: var(--font); font-size: .74rem; font-weight: 600; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 14px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame-role { flex: 0 0 auto; margin-left: 4px; }
.frame-shot { display: block; width: 100%; height: auto; background: var(--eggshell); }

/* Mascot peeking over the corner of a frame. Purely decorative. */
.frame-wrap { position: relative; }
.frame-peek {
  position: absolute; z-index: 3; right: 18px; top: -46px;
  width: 78px; height: auto; pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(61,64,91,.16));
  transition: transform .45s var(--spring);
  animation: float 5.6s ease-in-out infinite;
}
/* It leans in when you touch the screenshot it is sitting on. */
.frame-wrap:hover .frame-peek { transform: translateY(-6px) rotate(-5deg); }
@media (max-width: 700px) { .frame-peek { width: 58px; right: 10px; top: -32px; } }

/* — Screen switcher ----------------------------------------------------- */
.shot-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.shot-tab {
  font-family: var(--font); font-size: .8rem; font-weight: 800;
  padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2);
  box-shadow: 0 3px 0 var(--line);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.shot-tab:hover { transform: translateY(-1px); background: var(--brand-tint); color: var(--teal-deep); }
.shot-tab:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.shot-tab:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.shot-tab[aria-selected="true"] {
  background: linear-gradient(180deg, var(--teal-strong) 0%, var(--teal-deep) 78%);
  border-color: transparent; color: #fff; text-shadow: 0 1px 1px rgba(38,40,57,.28);
  box-shadow: 0 3px 0 var(--teal-deep), inset 0 1px 0 rgba(255,255,255,.3);
}
/* The HR half of the switcher is warm, so the two audiences read apart. */
.shot-tab[data-role="hr"][aria-selected="true"] {
  background: linear-gradient(180deg, var(--apricot-strong) 0%, var(--apricot-deep) 78%);
  box-shadow: 0 3px 0 var(--apricot-deep), inset 0 1px 0 rgba(255,255,255,.3);
}

.shot-panel[hidden] { display: none !important; }
.shot-caption { margin: 0; }
.shot-caption .h4 { margin-bottom: 8px; }

/* Side rail listing the screens, doubling as a caption for the active one. */
.shot-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.shot-list li { border-bottom: var(--rule); }
.shot-list button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 15px 0; display: grid; gap: 5px;
  transition: padding-left var(--t) var(--ease), color var(--t-fast) var(--ease);
}
.shot-list button:hover { padding-left: 10px; }
.shot-list button:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.shot-list .n { font-family: var(--font); font-size: .92rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.shot-list .d { font-size: .82rem; line-height: 1.45; color: var(--muted); }
.shot-list [aria-selected="true"] .n { color: var(--teal-deep); }
.shot-list [aria-selected="true"] { padding-left: 10px; border-left: 3px solid var(--teal); }
.shot-list [data-role="hr"][aria-selected="true"] { border-left-color: var(--apricot); }

/* A single inline frame used inside prose sections. */
.frame-inline { margin-top: 24px; }
.frame-inline figcaption { margin-top: 12px; font-size: .8rem; color: var(--muted); }

/* Crossfade between product screens (JS adds .is-in on the incoming panel). */
.shot-panel, [data-shot-panel] { transition: opacity .32s var(--ease), transform .32s var(--ease); }
[data-shot-panel]:not([hidden]) { opacity: 1; }
[data-shot-panel].is-in { animation: shot-in .34s var(--ease); }
@keyframes shot-in { from { opacity: 0; transform: translateY(8px) scale(.994); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-shot-panel].is-in { animation: none; } }

/* The header floats above the page, so every anchor target needs to clear it. */
[id] { scroll-margin-top: 112px; }
.term { scroll-margin-top: 168px; }          /* plus the sticky glossary toolbar */
.gloss-toolbar { top: 92px; }                /* sits under the floating capsules */

/* ===================================================== 20. Header v3 extras
   Search button + ⌘K palette, and the featured card inside mega panels.
   References: Mixpanel/Claude for the described panel, Linear/Raycast for the
   palette idiom. Everything stays inside the existing palette of tokens. */

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-family: var(--font); font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px;
}

.nav-search {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; margin-right: 2px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink-2); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-search:hover { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal-soft); }
.nav-search:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.nav-search .kbd { background: var(--paper); }

/* — Mega panel, now two columns: links + featured card ------------------ */
.nav-menu { min-width: 560px; grid-template-columns: minmax(0, 1fr) 200px; gap: 8px; }
.nav-menu-links { display: grid; gap: 2px; align-content: start; }
.nav-menu-feat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; border-radius: var(--r-md); text-decoration: none;
  background: linear-gradient(165deg, var(--teal-soft) 0%, var(--paper-2) 90%);
  border: 1px solid var(--line);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}
.nav-menu-feat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.nav-menu-feat img {
  width: 100%; height: 96px; object-fit: cover; object-position: top;
  border-radius: 10px; border: 1px solid var(--line); margin-bottom: 6px; background: var(--eggshell);
}
.nav-menu-feat .t { font-size: .86rem; font-weight: 800; letter-spacing: -.012em; color: var(--ink); }
.nav-menu-feat .d { font-size: .74rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 1080px) {
  .nav-menu { grid-template-columns: 1fr; min-width: 0; }
  .nav-menu-feat { display: none; }
  .nav-search { margin-right: 0; }
  .nav-search .kbd { display: none; }
}

/* — Command palette ----------------------------------------------------- */
.palette { position: fixed; inset: 0; z-index: 300; }
.palette-back { position: absolute; inset: 0; background: rgba(61,64,91,.34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.palette-box {
  position: relative; max-width: 580px; margin: clamp(60px, 14vh, 140px) auto 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: nav-drop .16s var(--ease);
}
@media (max-width: 640px) { .palette-box { margin: 20px 14px 0; } }
.palette-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: var(--rule); color: var(--muted); }
.palette-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none; font-family: var(--font-marketing); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.palette-input::placeholder { color: var(--muted); font-weight: 500; }
.palette-list { max-height: min(52vh, 430px); overflow-y: auto; padding: 8px; }
.palette-group { font-family: var(--font); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 5px; }
.palette-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md); text-decoration: none; cursor: pointer;
}
.palette-item .t { font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.palette-item .d { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.palette-item .pill { margin-left: auto; flex: 0 0 auto; }
.palette-item[aria-selected="true"], .palette-item:hover { background: var(--brand-tint); }
.palette-item[aria-selected="true"] .t { color: var(--teal-deep); }
.palette-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: .92rem; }
.palette-foot { display: flex; align-items: center; gap: 18px; padding: 11px 18px; border-top: var(--rule); font-size: .76rem; color: var(--muted); }
.palette-foot .kbd { margin-right: 4px; }
.palette-count { margin-left: auto; font-variant-numeric: tabular-nums; font-family: var(--font); }

/* ================================================= 21. Interactive infographics
   Four widgets, all driven by js/infographics.js + the LG_DATA dataset:
     .fmap  — the fact → ability → score flow map (measurement)
     .bsim  — the Burnout Risk formula, played by hand (measurement)
     .wline — the four-week timeline with cumulative coverage (platform)
     .acalc — the cost-of-attrition arithmetic (pricing)
   Shared visual language: white card, hairline internals, teal = selected,
   apricot = fact-side accents, peach = risk. Sliders are keycap-styled. */

.infog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.infog-head .lead { max-width: 40ch; }
.infog-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink); background: var(--teal-soft); border-radius: var(--r-pill); padding: 6px 12px; }
.infog-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse-dot 2.4s var(--ease) infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) { .infog-tag::before { animation: none; } }

/* — Sliders (keycap thumbs, gradient fill driven by --v) ---------------- */
.rng { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--teal) var(--v, 50%), var(--line) var(--v, 50%)); outline: none; cursor: pointer; }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 2px 0 var(--line-2), var(--shadow-sm); transition: transform var(--t-fast) var(--spring); }
.rng::-webkit-slider-thumb:hover { transform: scale(1.12); }
.rng:active::-webkit-slider-thumb { transform: scale(.94); }
.rng::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 2px 0 var(--line-2), var(--shadow-sm); }
.rng:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; }
.rng.warm { background: linear-gradient(90deg, var(--apricot) var(--v, 50%), var(--line) var(--v, 50%)); }
.rng.hot { background: linear-gradient(90deg, var(--peach) var(--v, 50%), var(--line) var(--v, 50%)); }

.rng-field { display: grid; gap: 9px; }
.rng-field > .rng-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rng-field .rng-label { font-size: .88rem; font-weight: 800; letter-spacing: -.01em; }
.rng-field .rng-val { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .92rem; font-weight: 800; color: var(--teal-deep); }
.rng-field .rng-note { font-size: .74rem; color: var(--muted); }

/* — Flow map ------------------------------------------------------------ */
.fmap { padding: 0; overflow: hidden; }
.fmap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fmap-grid { position: relative; display: grid; grid-template-columns: 280px 240px 280px; justify-content: space-between; gap: 40px; min-width: 920px; padding: clamp(20px, 2.6vw, 34px); }
.fmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.fmap-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.fmap-col[data-fmap-abilities], .fmap-col[data-fmap-scores] { justify-content: space-between; }
.fmap-h { font-family: var(--font); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.fmap-gap { height: 8px; flex: 0 0 auto; }

.fmap-node { text-align: left; background: var(--paper); border: 1px solid var(--line); cursor: pointer; font-family: var(--font-marketing); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.fmap-node:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.fmap-node.dim { opacity: .32; }
.fmap-node:hover { border-color: var(--teal); }

.fn { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 9px; font-size: .76rem; font-weight: 600; color: var(--ink-2); }
.fn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; transition: background var(--t-fast) var(--ease); }
.fn.lit { background: var(--apricot-soft); border-color: var(--apricot); color: var(--apricot-ink); }
.fn.lit::before { background: var(--apricot); }
.fn .fn-ai { margin-left: auto; font-size: .6rem; font-weight: 800; letter-spacing: .06em; color: var(--muted); }

.an { padding: 11px 14px; border-radius: var(--r-md); display: grid; gap: 3px; }
.an .n { font-size: .92rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.an .m { font-family: var(--font); font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.an.on { background: var(--teal-soft); border-color: var(--teal); }
.an.on .n { color: var(--teal-ink); }
.an.lit { border-color: var(--teal); }

.sn { padding: 12px 14px; border-radius: var(--r-md); display: grid; gap: 4px; }
.sn .n { font-size: .95rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.sn .q { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.sn.on { background: var(--teal-soft); border-color: var(--teal); }
.sn.on .n { color: var(--teal-ink); }
.sn.lit { border-color: var(--teal); }
.sn .sn-risk { justify-self: start; font-family: var(--font); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--peach-ink); background: var(--peach-soft); border-radius: var(--r-pill); padding: 3px 8px; }

.fmap-link { fill: none; stroke: var(--line-2); stroke-width: 1.5; opacity: .6; transition: opacity var(--t-fast) var(--ease); }
.fmap-link.lit { stroke: var(--teal-strong); stroke-width: 2.4; opacity: 1; }
.fmap-link.lit.warm { stroke: var(--apricot-strong); }
.fmap-link.faded { opacity: .14; }
.fmap-w { font-family: var(--font); font-size: 11px; font-weight: 800; fill: var(--teal-deep); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.fmap-w.warm { fill: var(--apricot-deep); }

.fmap-detail { border-top: var(--rule); background: var(--paper-2); padding: 16px clamp(20px, 2.6vw, 34px); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-height: 58px; }
.fmap-detail .fd-name { font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }
.fmap-detail .fd-f { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--ink-2); }
.fmap-detail .fd-note { font-size: .78rem; color: var(--muted); flex-basis: 100%; }
.fmap-hint { display: none; }
@media (max-width: 980px) { .fmap-hint { display: block; } }

/* — Burnout simulator --------------------------------------------------- */
.bsim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
@media (max-width: 900px) { .bsim { grid-template-columns: 1fr; } }
.bsim-controls { display: grid; gap: 24px; }
.bsim-out { text-align: center; display: grid; gap: 12px; justify-items: center; padding: clamp(16px, 2vw, 26px); background: var(--paper-2); border: var(--rule); border-radius: var(--r-lg); }
.bsim-num { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: -.05em; line-height: .9; font-size: clamp(4rem, 8vw, 6.4rem); transition: color var(--t) var(--ease); }
.bsim-num .tilde { font-size: .5em; vertical-align: .5em; color: var(--muted); font-weight: 800; }
.bsim-num.good { color: var(--teal-deep); } .bsim-num.warn { color: var(--apricot-deep); } .bsim-num.bad { color: var(--peach-deep); }
.bsim-meter { position: relative; width: 100%; }
.bsim-mark { position: absolute; left: 70%; top: -5px; bottom: -5px; width: 2px; background: var(--peach); border-radius: 2px; }
.bsim-mark::after { content: "70 · alert"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--font); font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: var(--peach-ink); white-space: nowrap; }
.bsim-verdict { font-size: .86rem; font-weight: 700; min-height: 2.6em; }
.bsim-toggle { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--ink-2); cursor: pointer; padding-top: 4px; }
.bsim-toggle input { width: 17px; height: 17px; accent-color: var(--teal-deep); margin-top: 1px; }

/* — Week timeline ------------------------------------------------------- */
.wline { padding: 0; overflow: hidden; }
.wline-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; border-bottom: var(--rule); }
@media (max-width: 760px) { .wline-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wline-stop.routine { grid-column: 1 / -1; } }
.wline-stop { position: relative; text-align: left; background: none; border: 0; border-right: var(--rule); padding: 16px 18px 14px; cursor: pointer; display: grid; gap: 3px; font-family: var(--font-marketing); transition: background var(--t-fast) var(--ease); }
.wline-stop:last-child { border-right: 0; }
.wline-stop:hover { background: var(--brand-tint); }
.wline-stop:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: -3px; }
.wline-stop .wk { font-family: var(--font); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wline-stop .th { font-size: .98rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.wline-stop::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; transition: background var(--t-fast) var(--ease); }
.wline-stop[aria-selected="true"] { background: var(--teal-soft); }
.wline-stop[aria-selected="true"]::after { background: var(--teal); }
.wline-stop.routine { background: var(--apricot-soft); cursor: default; }
.wline-stop.routine .th { color: var(--apricot-ink); }
.wline-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); padding: clamp(20px, 2.6vw, 32px); }
@media (max-width: 860px) { .wline-body { grid-template-columns: 1fr; } }
.wline-sub { font-family: var(--font); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.wline-game { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: var(--rule); }
.wline-game:last-child { border-bottom: 0; }
.wline-game .g { font-weight: 800; letter-spacing: -.012em; font-size: .92rem; }
.wline-game .e { font-size: .76rem; color: var(--muted); }
.wline-game .m { margin-left: auto; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .76rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* — Attrition calculator ------------------------------------------------ */
.acalc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
@media (max-width: 900px) { .acalc { grid-template-columns: 1fr; } }
.acalc-controls { display: grid; gap: 24px; }
.acalc-out { display: grid; gap: 8px; }
.acalc-big { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: -.045em; line-height: .95; font-size: clamp(2.6rem, 5.4vw, 4.2rem); color: var(--peach-deep); }
.acalc-big .u { font-size: .34em; font-weight: 800; letter-spacing: -.01em; color: var(--muted); margin-left: .2em; white-space: nowrap; }
.acalc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: var(--rule); font-size: .9rem; }
.acalc-line .v { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }

/* ------------------------------------------ 22. Language note (auto-locale)
   Shown once to visitors whose computer is set to one of the product's other
   eight languages: the site is English, the product speaks their language. */
.lang-note { background: var(--teal-soft); border-bottom: 1px solid var(--teal); }
.lang-note-in { display: flex; align-items: center; gap: 12px; padding-top: 11px; padding-bottom: 11px; font-size: .88rem; color: var(--teal-ink); }
.lang-note-in .i { color: var(--teal-deep); }
.lang-note-in > span { min-width: 0; }
.lang-note-in .link { flex: 0 0 auto; white-space: nowrap; }
.lang-note-x { margin-left: auto; flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: var(--teal-ink); font-size: .9rem; padding: 4px 8px; border-radius: 8px; }
.lang-note-x:hover { background: rgba(255,255,255,.5); }
.lang-note-x:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
@media (max-width: 700px) { .lang-note-in { flex-wrap: wrap; } .lang-note-x { order: -1; margin-left: auto; } }

/* Language toggle in the actions capsule (EN ↔ IT). */
.nav-lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 8px 10px;
  font-family: var(--font); font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-lang:hover { background: var(--teal-soft); color: var(--teal-deep); }
.nav-lang:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }