/* ============================================================================
   SECOND CHAMBERS · THE MASTER SKELETON · the white dress
   23 Sep 2026 · built on Rania's word: "CREATE A MASTER SKELETON WEBSITE for SECOND CHAMBERS with AI FEATURES
   … WHITE BACKGROUND. OUR FONT. CLEAN." The shape is the platform site's (a bar, a mega menu, a hero with the
   product, the sources read, one platform, the features, the grade, the numbers, the chambers, trust, a close).
   The dress is the house's on white paper: Givonic for the heads, Inter for the record, DM Sans for the bar,
   Esquie for the wordmark, the seal unchanged, the four accents used sparingly and the Aurora once.
   Rulings honoured: only black or white as a ground (2 Sep); the seal locked (19 Sep); ◇ never prints;
   every figure read from js/lab/home-data.js or master-data.js, never typed on a face.
   ========================================================================== */

@font-face { font-family: "Givonic"; src: url("../../assets/fonts/GivonicVariable.ttf") format("truetype-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../assets/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../../assets/fonts/DMSans-Variable.ttf") format("truetype-variations"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Esquie"; src: url("../../assets/fonts/Esquie.otf") format("opentype"); font-weight: 400; font-display: swap; }

:root {
  --ink: #0B0B0E; --ink-2: #2B2B33; --mute: #6B6B78; --dim: #9C9CA8;
  --line: #E7E7EC; --line-2: #F1F1F4; --paper: #FFFFFF; --panel: #F6F6F8; --panel-2: #FAFAFB; --night: #000000;
  /* 7 Oct 2026, Rania: "NO PURPLE. CRISP. SOLID. POWERFUL. SHARP. ON BRAND." The aurora palette of 16 Sep is retired at the root: every token that
     was violet or pink is ink or the one red; teal, which meant live / open / verified, is the green signal (1j); blue is the silver. The names
     stay so no rule breaks; no rule anywhere draws a gradient any more. The old values stand in master.css.bak-before-one-palette-7oct. */
  /* 7 Oct 2026, 23:2x, Rania: "ONLY RED accent": the green goes too. One accent, the news red; the rest ink, white and silver. */
  --pink: #E60000; --violet: #0B0B0E; --teal: #E60000; --blue: #8E90A0;
  --teal-ink: #0B0B0E; --blue-ink: #5F5E66; --violet-ink: #0B0B0E; --pink-ink: #E60000;
  --aurora: #0B0B0E;
  --font: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Givonic", "Inter", system-ui, sans-serif;
  --nav: "DM Sans", "Inter", system-ui, sans-serif;
  --wordmark: "Esquie", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 1360px; --gutter: clamp(16px, 4vw, 56px); --r: 18px; --r-s: 10px;
  --bar-h: 40px; --head-h: 68px; --news: #E60000;
  --shadow: 0 1px 2px rgba(11,11,14,.04), 0 12px 40px rgba(11,11,14,.08);
  --shadow-lg: 0 2px 4px rgba(11,11,14,.04), 0 30px 80px rgba(11,11,14,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.55; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; text-wrap: balance; }
/* the H1 as the-team.html sets it (Rania, 24 Sep 2026: "try the heading 1 font"): Givonic 800, tight, line-height .96 */
h1 { font-weight: 800; letter-spacing: -.02em; line-height: .96; }
h1 em { font-style: normal; color: var(--pink); }
p { margin: 0; }
::selection { background: rgba(230,0,0,.18); }
:focus-visible { outline: 2px solid var(--news); outline-offset: 3px; border-radius: 0; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); line-height: 1.2; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--aurora); border-radius: 2px; }
.lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.mute { color: var(--mute); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; font-family: var(--nav); font-weight: 600; font-size: 16px; letter-spacing: .005em; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s; }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; box-shadow: 0 10px 30px rgba(11,11,14,.22); transform: translateY(-1px); }
.btn-line { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--ink); }
.btn-aurora { position: relative; color: #fff; background: var(--news); }
.btn-aurora::after { content: none; box-shadow: none; opacity: 0; transition: opacity .3s; }
.btn-aurora:hover::after { opacity: 1; }
.btn-sm { height: 44px; padding: 0 20px; font-size: 15px; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-family: var(--nav); font-weight: 600; font-size: 15px; color: var(--ink); border-bottom: 1px solid transparent; }
.textlink:hover { border-color: var(--ink); }
.textlink .arr { transition: transform .25s var(--ease); }
.textlink:hover .arr { transform: translateX(3px); }

/* ---------- announcement bar ---------- */
.bar { height: var(--bar-h); background: linear-gradient(90deg, #0B0B0E 0%, #15161C 55%, #202229 100%); color: #fff;   /* 7 Oct 2026, Rania: a gradient on the bar, so it sits on the hero rather than cutting it */ font-family: var(--nav); font-size: 13.5px; letter-spacing: .01em; }
.bar .wrap { height: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; }
.bar b { font-weight: 600; }
.bar a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bar a:hover { color: #fff; }
.bar .close { margin-left: auto; color: var(--dim); font-size: 18px; line-height: 1; }
.bar .close:hover { color: #fff; }

/* ---------- header + mega menu ---------- */
/* the shell host lays out as if it were not there, so the header sticks to the page, not to its own short wrapper (Rania, 24 Sep 2026: "sticky navigation menu bar") */
#sc-shell-top { display: contents; }
.head { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.head.is-stuck { box-shadow: 0 10px 30px rgba(11,11,14,.06); }
.head.is-stuck, .head.is-open { border-bottom-color: var(--line); }
.head-row { height: var(--head-h); display: flex; align-items: center; gap: 20px; width: auto; max-width: none; margin-inline: 0; padding-inline: clamp(16px, 1.6vw, 28px); } /* 7 Oct 2026, Rania: "the navigation the full width of the screen, so the far left for the logo": the row leaves the .wrap measure; the name sits at the left edge, the buttons at the right */ /* 28 → 20 (24 Sep 2026): nine bar items at 1440 pushed the demo button past the edge */
/* the brand: the wordmark alone; the seal is the favicon only (Rania, 23 Sep 2026) */
.brand { --wm: 26.25px; /* 21px × 1.25, Rania 23 Sep 2026 */ display: inline-flex; align-items: center; margin-right: 8px; font-size: var(--wm); color: var(--ink); }
.brand .wm { font-family: var(--wordmark); font-size: var(--wm); letter-spacing: .03em; text-transform: uppercase; color: inherit; white-space: nowrap; line-height: 1; }
.brand .lk { height: var(--lk-h, 22px); width: auto; display: block; } /* 7 Oct 2026: the one-line wordmark (1248 × 94), slightly larger than the lockup's name stood */
.brand .lk.light { display: none; }
.nav { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav > li { position: relative; }
.nav-btn, .nav-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 999px; font-family: var(--nav); font-weight: 500; font-size: 15px; color: var(--ink-2); transition: background .2s, color .2s; }
.nav-btn:hover, .nav-link:hover, .nav-btn[aria-expanded="true"] { background: var(--panel); color: var(--ink); }
.nav-btn .chev { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.head-right .login { font-family: var(--nav); font-weight: 500; font-size: 15px; color: var(--ink-2); padding: 0 12px; height: 40px; display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; }
.head-right .login:hover { background: var(--panel); color: var(--ink); }
.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; }
.burger:hover { background: var(--panel); }
.burger svg { width: 22px; height: 22px; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px rgba(11,11,14,.10); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega .wrap { padding: 30px clamp(16px, 1.6vw, 28px) 34px; width: auto; max-width: none; margin-inline: 0; display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 40px; }   /* 7 Oct 2026, Rania: "The dropdown menu must utilise the entire menu width" */
.mega .wrap.cols-3 { grid-template-columns: repeat(2, 1fr) 1.1fr; }
.mega .wrap.cols-2 { grid-template-columns: 1fr 1.1fr; }
.mega .wrap.cols-5 { grid-template-columns: repeat(4, 1fr) 1.1fr; }
.mega-col h4 { font-size: 11.5px; letter-spacing: .2em; color: var(--dim); margin-bottom: 14px; }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-item { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 12px 12px; margin-left: -12px; border-radius: 0; transition: background .18s; }
.mega-item:hover { background: var(--panel); }
.mega-item .ic { width: 46px; height: 46px; border-radius: 0; background: var(--panel); display: grid; place-items: center; color: var(--ink); transition: background .18s, color .18s; }
.mega-item:hover .ic { background: var(--ink); color: #fff; }
.mega-item .ic svg { width: 24px; height: 24px; }
.mega-item b { display: block; font-family: var(--nav); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.25; }
.mega-item b .new { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 0; background: var(--news); color: #fff; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }
.mega-item span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--mute); margin-top: 2px; }
.mega-feature { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: 0; background: var(--night); color: #fff; min-height: 240px; position: relative; overflow: hidden; }
.mega-feature::before { content: none; }
.mega-feature > * { position: relative; }
.mega-feature .eyebrow { color: rgba(255,255,255,.62); }
.mega-feature h3 { font-size: 22px; line-height: 1.08; }
.mega-feature p { color: rgba(255,255,255,.7); font-size: 14px; }
.mega-feature .textlink { color: #fff; }
.mega-feature .textlink:hover { border-color: #fff; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; background: #fff; overflow: auto; padding: 0 var(--gutter) 40px; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer-head { height: var(--head-h); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; height: 56px; font-family: var(--nav); font-weight: 600; font-size: 17px; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary .chev { width: 14px; height: 14px; transition: transform .25s; }
.drawer details[open] summary .chev { transform: rotate(180deg); }
.drawer details ul { list-style: none; margin: 0; padding: 0 0 12px; }
.drawer details li a { display: block; padding: 10px 0; font-size: 15px; color: var(--ink-2); }
.drawer > a.plain { display: flex; height: 56px; align-items: center; border-bottom: 1px solid var(--line); font-family: var(--nav); font-weight: 600; font-size: 17px; }
.drawer .cta { display: grid; gap: 10px; margin-top: 22px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(56px, 8vw, 110px) 0 0; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-art { position: relative; }
.hero-art::before { content: ""; position: absolute; inset: 6% -6% -4% -6%; background: radial-gradient(55% 55% at 40% 45%, rgba(230,0,0,.14), transparent 70%), radial-gradient(45% 45% at 72% 62%, rgba(230,0,0,.12), transparent 70%); filter: blur(28px); pointer-events: none; }
.drawing { position: relative; aspect-ratio: 600 / 520; cursor: pointer; }
.drawing svg { width: 100%; height: 100%; overflow: visible; }
.dr-rule { stroke: var(--line); stroke-width: 1.5; }
.dr-line { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.dr-strike { stroke: var(--pink-ink); stroke-width: 4.5; }
.dr-cloud { stroke-width: 2.6; }
.dr-glyph { fill: var(--ink); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.dr-nib { pointer-events: none; }
.hero-art-k { margin-top: 10px; text-align: center; font-family: var(--nav); font-size: 12.5px; color: var(--dim); }
.hero h1 { font-size: clamp(46px, 6.4vw, 96px); letter-spacing: -.02em; line-height: .94; max-width: 12ch; margin-top: 28px !important; }
.hero h1 .key { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin-top: 30px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hero-meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-family: var(--nav); font-size: 14px; color: var(--mute); }
.hero-meta span { display: inline-flex; align-items: center; gap: 10px; }
.hero-meta b { color: var(--ink); font-weight: 600; }
.hero-meta .mi { width: 52px; height: 52px; border-radius: 14px; background: var(--panel); display: grid; place-items: center; color: var(--ink); flex: none; }
.hero-meta .mi svg { width: 26px; height: 26px; }
.hero-meta { font-size: 16px; gap: 14px 32px; }
.hero-side { display: grid; gap: 14px; }
.hero-side .card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.hero-side .card .k { font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.hero-side .card .q { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.hero-side .card .s { margin-top: 10px; font-size: 13px; color: var(--mute); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero-stage { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.hero-stage::before { content: ""; position: absolute; inset: 10% -10% -20% -10%; background: radial-gradient(60% 60% at 30% 40%, rgba(230,0,0,.16), transparent 70%), radial-gradient(50% 50% at 75% 60%, rgba(230,0,0,.14), transparent 70%), radial-gradient(40% 40% at 55% 20%, rgba(230,0,0,.12), transparent 70%); filter: blur(30px); z-index: 0; pointer-events: none; }
.hero-stage .ui { position: relative; z-index: 1; }

/* ---------- the product UI, drawn ---------- */
.ui { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; font-size: 13.5px; color: var(--ink-2); }
.ui-top { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
.ui-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.ui-top .t { margin-left: 10px; font-family: var(--nav); font-size: 12.5px; color: var(--mute); }
.ui-top .r { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--dim); }
.ui-body { display: grid; grid-template-columns: 220px 1fr; min-height: 460px; }
.ui-side { border-right: 1px solid var(--line-2); padding: 18px 14px; background: var(--panel-2); display: flex; flex-direction: column; gap: 6px; }
.ui-side .h { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); padding: 8px 10px 4px; }
.ui-side .it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); }
.ui-side .it.on { background: #fff; box-shadow: 0 1px 2px rgba(11,11,14,.06); color: var(--ink); font-weight: 500; }
.ui-side .it .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ui-side .it .dot.open { background: var(--teal); box-shadow: 0 0 0 3px rgba(230,0,0,.2); }
.ui-side .it .dot.building { background: var(--violet); box-shadow: 0 0 0 3px rgba(230,0,0,.18); }
.ui-main { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ui-ask { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(11,11,14,.04); }
.ui-ask .q { flex: 1; font-size: 15px; color: var(--ink); min-height: 22px; }
.ui-ask .q .caret { display: inline-block; width: 2px; height: 18px; background: var(--ink); vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(2) infinite; }
.ui-ask .go { width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.ui-ask .go svg { width: 15px; height: 15px; }
.ui-note { font-size: 12.5px; color: var(--mute); display: flex; gap: 10px; align-items: center; }
.ui-note .live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(230,0,0,.22); }
.ui-rows { display: grid; gap: 8px; }
.ui-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ui-row.in { opacity: 1; transform: none; }
.ui-row .d { font-family: var(--nav); font-size: 12px; color: var(--mute); padding-top: 3px; }
.ui-row .d b { display: block; color: var(--ink); font-weight: 600; }
.ui-row .q { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.ui-row .q::before { content: "“"; color: var(--dim); }
.ui-row .q::after { content: "”"; color: var(--dim); }
.ui-row .l { margin-top: 6px; font-size: 12.5px; color: var(--mute); line-height: 1.4; }
.ui-row .s { margin-top: 6px; font-size: 12px; color: var(--dim); }
.ui-row .s u { text-decoration: none; border-bottom: 1px solid var(--line); color: var(--mute); }
.grade { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 6px; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.grade.v { background: rgba(230,0,0,.16); color: var(--teal-ink); }
.grade.v2 { background: rgba(62,185,240,.16); color: var(--blue-ink); }
.grade.s { background: rgba(230,0,0,.14); color: var(--violet-ink); }
.grade.owed { background: rgba(230,0,0,.12); color: var(--pink-ink); }
.ui-answer { padding: 16px 18px; border-radius: 12px; background: var(--panel); font-size: 14px; line-height: 1.55; color: var(--ink-2); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ui-answer.in { opacity: 1; transform: none; }
.ui-answer sup { font-family: var(--nav); font-size: 10.5px; color: var(--violet-ink); font-weight: 600; margin-left: 1px; }
.ui-answer .k { display: block; font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
@keyframes blink { to { opacity: 0; } }

/* the morning desk and the record live, drawn */
.hero-mk .ui { font-size: 13px; }
.hero-mk .ui-main { padding: 18px 18px 20px; gap: 12px; }
.mk-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-k { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.mk-list { display: grid; gap: 8px; }
.mk-card { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mk-card.in { opacity: 1; transform: none; }
.mk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mk-when { font-family: var(--nav); font-size: 11.5px; color: var(--mute); }
.mk-q { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.mk-q mark { background: #FBF1A9; color: inherit; padding: 1px 2px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mk-src { display: block; margin-top: 6px; font-size: 11.5px; color: var(--dim); }
.mk-acts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.mk-acts .ui-chip { height: 26px; font-size: 11.5px; padding: 0 10px; }
.mk-live { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-col { display: grid; gap: 8px; align-content: start; }
.mk-said, .mk-rec { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; }
.mk-said { border-color: var(--ink); }
.mk-said p, .mk-rec p { margin: 6px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.status { margin-top: 26px; display: flex; gap: 10px; align-items: flex-start; font-family: var(--nav); font-size: 13.5px; color: var(--mute); max-width: 60ch; }
.status .live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(230,0,0,.22); margin-top: 6px; }

.mk-grid3 { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 14px; }
.mk-grid3 > div { display: grid; gap: 8px; align-content: start; }
.mk-page { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; gap: 6px; }
.mk-page b { font-family: var(--display); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.mk-page p { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.mk-strip { display: flex; justify-content: space-between; gap: 8px; font-family: var(--nav); font-size: 10.5px; color: var(--mute); border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
.mk-strip span:first-child { font-family: var(--wordmark); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.sc-mark { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--night); color: #fff; width: max-content; }
.sc-mark b { font-family: var(--wordmark); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 400; }
.sc-mark span { font-family: var(--nav); font-size: 10.5px; color: rgba(255,255,255,.7); }

/* table mockup */
.ui-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-table th { text-align: left; font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ui-table td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; color: var(--ink-2); }
.ui-table td.q { color: var(--ink); max-width: 380px; }
.ui-table td.m { font-family: var(--mono); font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--nav); font-size: 12.5px; color: var(--ink-2); background: #fff; }
.ui-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ui-chip .n { color: var(--dim); }
.ui-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ui-stat { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); }
.ui-stat .n { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); letter-spacing: -.01em; }
.ui-stat .t { font-size: 12px; color: var(--mute); margin-top: 2px; }

/* steps mockup (the door) */
.ui-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ui-step { position: relative; padding: 14px 14px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; }
.ui-step .n { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; color: var(--dim); }
.ui-step b { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink); }
.ui-step span { display: block; margin-top: 4px; font-size: 12px; color: var(--mute); line-height: 1.4; }
.ui-step.done { border-color: rgba(230,0,0,.5); }
.ui-step.done::after { content: ""; position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.ui-step.now { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(230,0,0,.14); }
.ui-hash { font-family: var(--mono); font-size: 11.5px; color: var(--mute); padding: 10px 12px; border-radius: 8px; background: var(--panel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* list mockup (the watchers / the gate) */
.ui-list { display: grid; gap: 6px; }
.ui-li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
.ui-li b { font-weight: 500; color: var(--ink); font-size: 13.5px; }
.ui-li b small { display: block; font-weight: 400; color: var(--mute); font-size: 12px; margin-top: 2px; }
.ui-li .when { font-family: var(--nav); font-size: 12px; color: var(--dim); }
.state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px; font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state.ready { background: rgba(230,0,0,.16); color: var(--teal-ink); }
.state.blocked { background: rgba(230,0,0,.12); color: var(--pink-ink); }
.state.unchecked { background: var(--panel); color: var(--mute); }
.state.nightly { background: rgba(230,0,0,.12); color: var(--violet-ink); }
.state.never { background: var(--panel); color: var(--mute); }

/* map mockup (the chambers) */
.ui-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-country { padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; }
.ui-country .code { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: .02em; color: var(--ink); }
.ui-country b { display: block; margin-top: 4px; font-weight: 500; font-size: 13.5px; color: var(--ink); }
.ui-country span { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; line-height: 1.4; }
.ui-country .state { margin-top: 10px; }
.ui-country.open { border-color: rgba(230,0,0,.55); }
.ui-country.building { border-color: rgba(230,0,0,.45); }
.ui-country.ask { border-style: dashed; }

/* code mockup (the api) */
.ui-code { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; background: var(--night); color: #E6E6EE; padding: 18px 20px; border-radius: 12px; overflow: auto; white-space: pre; }
.ui-code .k { color: #8BE9DD; } .ui-code .s { color: #FFB3D1; } .ui-code .c { color: #7A7A88; }

/* ---------- sections ---------- */
.sec { padding: clamp(80px, 9vw, 130px) 0; border-top: 1px solid var(--line); }
.hero + .sec, .marquee + .sec, .law + .sec, .sources + .sec, .phero + .sec, .pstage + .sec, .sec.trust, .sec.watch { border-top: 0; }
.law + .sec.tight, .pstage + .sec.tight, .phero + .sec.tight { padding-top: clamp(72px, 8vw, 110px); }
.sec-head { max-width: 820px; display: grid; gap: 0; }
.sec-head .eyebrow { margin-bottom: 26px; }
.sec-head h2 + .lede, .sec-head h2 + p { margin-top: 22px; }
.sec-head h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.0; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.sec.tight { padding-top: clamp(80px, 9vw, 130px); }

/* sources row */
.sources { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sources .k { text-align: center; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.sources-row { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.sources-row span { font-family: var(--display); font-weight: 600; font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); opacity: .72; transition: opacity .2s; }
.sources-row span:hover { opacity: 1; }

/* the logo marquee */
.marquee { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee .k { text-align: center; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-bottom: 30px; }
.mq { position: relative; overflow: hidden; padding: 10px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq + .mq { padding-top: 6px; }
.mq-track { display: flex; align-items: center; gap: clamp(40px, 5vw, 76px); width: max-content; padding-right: clamp(40px, 5vw, 76px); animation: mq calc(var(--n) * 3.2s) linear infinite; will-change: transform; }
.mq-rev .mq-track { animation-direction: reverse; animation-duration: calc(var(--n) * 4s); }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.lg { display: inline-flex; flex-direction: column; align-items: flex-start; white-space: nowrap; line-height: 1; opacity: .78; transition: opacity .25s, color .25s; color: var(--ink-2); cursor: default; }
.lg:hover { opacity: 1; color: var(--ink); }
.lg b { font-weight: 600; }
.lg small { margin-top: 6px; font-family: var(--nav); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.lg.v1 b { font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.lg.v2 b { font-family: var(--font); font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: #4A4A55; }
.lg.v3 b { font-family: var(--nav); font-size: 21px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #7A7A88; }
.lg.v4 b { font-family: var(--wordmark); font-size: 25px; font-weight: 400; letter-spacing: .02em; color: var(--ink-2); }
.lg.v5 b { font-family: var(--font); font-size: 23px; font-weight: 300; letter-spacing: .01em; color: #5C5C69; }
.lg.v6 b { font-family: var(--display); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #8E8E9A; }
.mq-note { margin-top: 22px; text-align: center; font-size: 13px; color: var(--mute); max-width: 78ch; margin-inline: auto; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; justify-content: center; }
.mq-note .live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(230,0,0,.22); margin-top: 6px; }

/* three doors */
.doors { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.door { display: flex; flex-direction: column; gap: 16px; padding: 36px 34px 32px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; min-height: 340px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.door .ic { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: var(--panel); color: var(--ink); }
.door .ic svg { width: 34px; height: 34px; }
.door .ic i { display: contents; }
.door h3 { font-size: 26px; line-height: 1.08; }
.door p { color: var(--mute); font-size: 17px; line-height: 1.5; flex: 1; }
.door .textlink { font-size: 14px; }
.door.free { background: var(--night); color: #fff; border-color: var(--night); }
.door.free .ic { background: rgba(255,255,255,.1); color: #fff; }
.door.free p { color: rgba(255,255,255,.7); }
.door.free .textlink { color: var(--teal); } .door.free .textlink:hover { border-color: var(--teal); }

.doors.cols-3, .steps.cols-3 { grid-template-columns: repeat(3, 1fr); }
.doors.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* the one law band */
.law { background: var(--night); color: #fff; padding: clamp(84px, 9vw, 140px) 0; position: relative; overflow: hidden; }
.law::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(230,0,0,.5), rgba(230,0,0,.2) 55%, transparent 72%); filter: blur(20px); }
.law .wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.law .eyebrow { color: rgba(255,255,255,.6); }
.law h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; margin-top: 26px; }
.law .lede { color: rgba(255,255,255,.72); margin-top: 24px; }
.law-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.law-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.law-list .n { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--teal); padding-top: 5px; }
.law-list b { display: block; font-family: var(--nav); font-weight: 600; font-size: 17px; }
.law-list span { display: block; color: rgba(255,255,255,.66); font-size: 15px; margin-top: 4px; line-height: 1.5; }

/* feature showcase */
.show { margin-top: 56px; display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; }
.show-tabs { display: grid; gap: 4px; position: sticky; top: calc(var(--head-h) + 24px); }
.show-tab { text-align: left; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; border-radius: 12px; border: 1px solid transparent; position: relative; overflow: hidden; transition: background .2s, border-color .2s; }
.show-tab b { font-family: var(--nav); font-weight: 600; font-size: 16px; color: var(--ink); }
.show-tab span { font-size: 14px; color: var(--mute); line-height: 1.45; display: none; }
.show-tab.on { background: var(--panel); border-color: var(--line); }
.show-tab.on span { display: block; }
.show-tab .bar-p { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--aurora); }
.show-tab.on .bar-p { animation: grow var(--show-ms, 7000ms) linear forwards; }
.show:hover .show-tab.on .bar-p, .show.paused .show-tab.on .bar-p { animation-play-state: paused; }
@keyframes grow { from { width: 0 } to { width: 100% } }
.show-stage { position: relative; min-height: 520px; }
.show-stage .ui { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(.99); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.show-stage .ui.on { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.show-stage .ui .ui-body { min-height: 470px; }
.show-more { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 14px; color: var(--mute); }

/* watch it work */
.watch { background: var(--panel); }
.watch-stage { margin-top: 56px; --watch-ms: 8000ms; }
.watch-frame { position: relative; min-height: 520px; }
.watch-scene { position: absolute; inset: 0; opacity: 0; transform: translateY(8px) scale(.995); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.watch-scene.on { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.watch-scene .ui { box-shadow: var(--shadow-lg); }
.watch-scene .ui-main { min-height: 470px; }
.watch-bar { margin-top: 18px; display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; }
.watch-btn { width: 44px; height: 44px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.watch-btn svg { width: 18px; height: 18px; }
.watch-caps { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); min-height: 24px; }
.watch-dots { display: flex; gap: 8px; }
.watch-dots button { width: 44px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.watch-dots button i { position: absolute; inset: 0; width: 0; background: var(--aurora); border-radius: 3px; }
.watch-dots button.on i { animation: grow var(--watch-ms) linear forwards; }
.watch-stage.paused .watch-dots button.on i { animation-play-state: paused; }
@media (max-width: 640px) { .watch-bar { grid-template-columns: 44px 1fr; } .watch-dots { grid-column: 1 / -1; } .watch-frame { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .watch-scene { transition: none; } .watch-dots button.on i { animation: none; width: 100%; } }

/* grade band */
.grades { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gcard { padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; gap: 14px; align-content: start; }
.gcard .grade { width: max-content; height: 38px; font-size: 15px; padding: 0 16px; }
.gcard h3 { font-size: 20px; font-family: var(--nav); text-transform: none; letter-spacing: 0; font-weight: 600; line-height: 1.3; }
.gcard p { color: var(--mute); font-size: 14.5px; line-height: 1.5; }

/* numbers */
.numbers { border-top: 1px solid var(--line); }
.numbers .k { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.num-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.num { padding: 34px 30px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.num .n { font-family: var(--display); font-weight: 600; font-size: clamp(48px, 5.2vw, 76px); letter-spacing: -.01em; line-height: 1; color: var(--ink); }
.num .t { font-family: var(--nav); font-weight: 600; font-size: 15px; color: var(--ink); margin-top: 8px; }
.num .s { font-size: 13px; color: var(--mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* chambers */
.chambers { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.chamber { padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; gap: 10px; align-content: start; min-height: 220px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.chamber:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.chamber .code { font-family: var(--display); font-weight: 600; font-size: 56px; letter-spacing: .02em; line-height: 1; }
.chamber b { font-family: var(--nav); font-weight: 600; font-size: 17px; }
.chamber span { color: var(--mute); font-size: 14.5px; line-height: 1.5; }
.chamber .state { width: max-content; margin-top: 6px; }
.chamber.open .code { color: var(--teal-ink); } .chamber.building .code { color: var(--violet-ink); } .chamber.ask { border-style: dashed; }

/* trust */
.trust { background: var(--panel); }
.trust-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tcard { padding: 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.tcard .ic { width: 64px; height: 64px; border-radius: 18px; background: var(--panel); display: grid; place-items: center; }
.tcard .ic svg { width: 30px; height: 30px; }
.tcard h3 { font-family: var(--nav); text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.tcard p { color: var(--mute); font-size: 14.5px; line-height: 1.5; }

/* two-up feature blocks (feature pages) */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.two.rev > :first-child { order: 2; }
.two h2 { font-size: clamp(28px, 3.2vw, 40px); }
.two .lede { margin-top: 16px; font-size: 18px; }
.two ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.two li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; color: var(--ink-2); }
.two li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aurora); margin-top: 8px; margin-left: 5px; }

/* steps (how it works) */
.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: st; }
.step { padding: 34px 30px 32px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; gap: 12px; align-content: start; }
.step::before { counter-increment: st; content: "0" counter(st); font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; color: var(--violet-ink); }
.step-ic { position: relative; width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11,11,14,.04), 0 10px 30px rgba(230,0,0,.10); margin: 4px 0 6px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.step-ic::before { content: ""; position: absolute; inset: 8px; border-radius: 20px; background: radial-gradient(60% 60% at 30% 30%, rgba(230,0,0,.14), transparent 70%), radial-gradient(60% 60% at 75% 75%, rgba(230,0,0,.12), transparent 70%); }
.step-ic .ico { position: relative; width: 46px; height: 46px; }
.step:hover .step-ic { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,11,14,.05), 0 16px 40px rgba(230,0,0,.16); }
.ico { display: block; }
.step h3 { font-family: var(--nav); text-transform: none; letter-spacing: 0; font-size: 20px; font-weight: 600; }
.step p { color: var(--mute); font-size: 16px; line-height: 1.5; }

/* plans */
.plans { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; gap: 14px; align-content: start; }
.plan.featured { border-color: var(--ink); box-shadow: var(--shadow); }
.plan .k { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.plan h3 { font-size: 28px; }
.plan .price { font-family: var(--nav); font-size: 15px; color: var(--mute); }
.plan .price b { color: var(--ink); font-weight: 600; }
.plan ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
.plan li { font-size: 14.5px; color: var(--ink-2); display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.plan li::before { content: "·"; color: var(--violet); font-weight: 700; }
.plan .btn { margin-top: 8px; }

/* rooms / solutions list */
.rooms { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.room { padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; scroll-margin-top: 100px; }
.room .k { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-ink); }
.room h3 { font-size: 24px; }
.room p { color: var(--mute); font-size: 15px; line-height: 1.5; }
.room .who { font-size: 13.5px; color: var(--ink-2); padding-top: 12px; border-top: 1px solid var(--line-2); }
.room .who b { font-weight: 600; }

/* team / company */
.facts { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fact { padding: 26px; border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 8px; }
.fact .k { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.fact p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.fact p b { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .facts[style] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .facts[style], .steps[style] { grid-template-columns: 1fr !important; } }

/* form (demo) */
.form { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; }
.form label { display: grid; gap: 6px; font-family: var(--nav); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form label.full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--ink); }
.form textarea { min-height: 110px; resize: vertical; }
.form .note { grid-column: 1 / -1; font-size: 13px; color: var(--mute); }
.form .done { grid-column: 1 / -1; padding: 16px 18px; border-radius: 10px; background: var(--panel); font-size: 14.5px; }

/* close band */
.close { padding: clamp(72px, 9vw, 130px) 0; text-align: center; border-top: 1px solid var(--line); }
.close h2 { font-size: clamp(34px, 5vw, 64px); max-width: 16ch; margin-inline: auto; }
.close .lede { margin: 22px auto 0; text-align: center; }
.close .hero-ctas { justify-content: center; }

/* page hero (secondary pages) */
.phero { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 5vw, 72px); overflow: clip; } /* clip added 24 Sep 2026: the hero-art glow (inset -6%) reached 5px past a phone's edge */
.phero h1 { font-size: clamp(42px, 5.2vw, 72px); letter-spacing: -.02em; max-width: 14ch; margin-top: 28px; }
.phero .hero-grid { grid-template-columns: 1.1fr .9fr; }
.phero .form { grid-column: 1 / -1; }
.phero .lede { margin-top: 30px; }
.phero .hero-ctas { margin-top: 40px; }
.pstage { padding-bottom: clamp(56px, 7vw, 100px); position: relative; overflow: clip; }
.pstage::before { content: ""; position: absolute; inset: 0 -10% -10%; background: radial-gradient(50% 60% at 30% 50%, rgba(230,0,0,.12), transparent 70%), radial-gradient(40% 50% at 78% 50%, rgba(230,0,0,.10), transparent 70%); filter: blur(30px); pointer-events: none; }
.pstage .ui { position: relative; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--nav); font-size: 13px; color: var(--mute); margin-bottom: 40px; }
.crumbs a:hover { color: var(--ink); }

/* ---------- footer ---------- */
.foot { background: var(--night); color: #fff; padding: clamp(64px, 8vw, 110px) 0 40px; margin-top: 0; }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.foot .foot-brand { --wm: clamp(37.5px, 4.25vw, 55px); color: #fff; margin: 0 0 18px; }
.foot .foot-brand .wm { font-size: var(--wm); }
.foot .tag { margin-top: 16px; color: rgba(255,255,255,.62); font-size: 15px; max-width: 34ch; line-height: 1.5; }
.foot h4 { font-size: 11.5px; letter-spacing: .2em; color: rgba(255,255,255,.5); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot li a { color: rgba(255,255,255,.78); font-size: 14.5px; }
.foot li a:hover { color: #fff; }
.foot-bottom { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-family: var(--nav); font-size: 13px; color: rgba(255,255,255,.5); }
.foot-bottom a { color: rgba(255,255,255,.6); } .foot-bottom a:hover { color: #fff; }
.foot-bottom .legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* the proof, three across */
.proof { margin-top: 40px; grid-template-columns: repeat(3, 1fr); }

/* the team: sketched people, the invitations */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.person { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; align-items: start; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.person:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.person.real { background: var(--night); color: #fff; border-color: var(--night); }
.person .k { display: block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.person.real .k { color: rgba(255,255,255,.6); }
.person h3 { margin-top: 6px; font-size: 19px; }
.person .role { margin-top: 4px; font-family: var(--nav); font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.person.real .role { color: rgba(255,255,255,.85); }
.person .past { margin-top: 8px; font-size: 13.5px; color: var(--mute); line-height: 1.45; }
.person.real .past { color: rgba(255,255,255,.62); }
.person .line { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.person.real .line { color: #fff; }
.portrait-tile { width: 120px; height: 120px; border-radius: 24px; background: var(--panel); display: grid; place-items: center; color: var(--ink); position: relative; overflow: hidden; }
.person.real .portrait-tile { background: rgba(255,255,255,.08); color: #fff; }
.portrait-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 30% 25%, rgba(230,0,0,.16), transparent 70%), radial-gradient(60% 60% at 75% 80%, rgba(230,0,0,.14), transparent 70%); }
.portrait { position: relative; width: 108px; height: 108px; }
.portrait path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.person.in .portrait path { animation: sketch 1.1s var(--ease) forwards; }
@keyframes sketch { to { stroke-dashoffset: 0; } }
.invites { display: grid; gap: 16px; }
.invite { padding: 30px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; gap: 14px; scroll-margin-top: 100px; }
.invite-head { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: start; }
.invite .k { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-ink); }
.invite h3 { font-size: 32px; margin-top: 6px; }
.invite .sub { margin-top: 4px; font-family: var(--nav); font-weight: 600; font-size: 14px; color: var(--mute); }
.invite > p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 80ch; }
.invite .who { font-size: 14.5px; color: var(--ink-2); padding: 14px 16px; border-radius: 10px; background: var(--panel); }
.invite .form { margin-top: 6px; }
.fact.new { border-color: var(--ink); box-shadow: var(--shadow); }
.fact.new .k { color: var(--pink-ink); }
@media (max-width: 980px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .people-grid { grid-template-columns: 1fr; } .person { grid-template-columns: 84px 1fr; } .portrait-tile { width: 84px; height: 84px; } .portrait { width: 74px; height: 74px; } .invite { padding: 22px; } .invite-head { grid-template-columns: 64px 1fr; } .step-ic { width: 64px; height: 64px; border-radius: 18px; } .step-ic .ico { width: 32px; height: 32px; } .door .ic { width: 56px; height: 56px; } .door .ic svg { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .portrait path { stroke-dashoffset: 0; } .person.in .portrait path { animation: none; } }

/* the section numbers: large, light grey, Givonic */
.secno { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(64px, 8vw, 120px); line-height: .82; letter-spacing: -.02em; color: #E4E4EA; margin: 0 0 22px -.03em; user-select: none; }
.law .secno { color: rgba(255,255,255,.10); }
.trust .secno, .watch .secno { color: #DCDCE3; }
/* on white the number stands in the unused space to the right of the section head (Rania, 24 Sep 2026) */
.wrap.has-secno { position: relative; }
.wrap.has-secno > .sec-head, .wrap.has-secno > .k { position: relative; z-index: 1; }
.secno.side { position: absolute; right: 0; top: -.08em; margin: 0; font-size: clamp(120px, 13vw, 200px); line-height: .8; pointer-events: none; z-index: 0; }
@media (max-width: 980px) { .secno.side { position: static; font-size: 72px; margin: 0 0 14px -.03em; } }
@media (max-width: 640px) { .secno, .secno.side { font-size: 56px; margin-bottom: 12px; } }

/* the donors graph */
.dg { margin-top: 56px; }
.dg-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; background: var(--panel-2); }
.dg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-chips .ui-chip { height: 34px; font-size: 13.5px; }
.dg-chips .ui-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dg-chips .ui-chip:not(.on) { opacity: .45; }
.dg-range { display: inline-flex; align-items: center; gap: 10px; font-family: var(--nav); font-size: 13.5px; color: var(--ink-2); }
.dg-range input { width: 160px; accent-color: var(--violet); }
.dg-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--nav); font-size: 13.5px; color: var(--ink-2); }
.dg-toggle input { width: 18px; height: 18px; accent-color: var(--pink); }
.dg-bar [data-dg-view] { margin-left: auto; height: 34px; }
.dg-bar [data-dg-view] + [data-dg-view] { margin-left: 0; }
.dg-stage { position: relative; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: #fff; overflow: hidden; box-shadow: var(--shadow-lg); }
.dg-svg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 760; }
.dg-link { stroke-opacity: .28; stroke-linecap: round; transition: stroke-opacity .2s; }
.dg-node { cursor: pointer; }
.dg-node .dg-dot { fill: #fff; stroke: var(--ink); stroke-width: 2; transition: stroke .2s, fill .2s; }
.dg-node.multi .dg-dot { stroke: var(--pink); stroke-width: 3; }
.dg-node:hover .dg-dot, .dg-node:focus .dg-dot { fill: var(--ink); }
.dg-node.multi:hover .dg-dot { fill: var(--pink); }
.dg-plabel { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); }
.dg-dlabel { font-family: var(--nav); font-size: 11.5px; fill: var(--mute); }
.dg-grid { stroke: var(--line-2); }
.dg-alabel { font-family: var(--nav); font-size: 12px; fill: var(--mute); }
.dg-bar-r { cursor: pointer; opacity: 0; transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: opacity .4s, transform .5s var(--ease); }
.dg-bar-r.in { opacity: .9; transform: none; }
.dg-bar-r:hover { opacity: 1; }
.dg-card { position: absolute; width: 380px; max-width: calc(100% - 24px); padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 5; font-size: 13px; }
.dg-card-h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.dg-card-h b { font-family: var(--nav); font-size: 15px; }
.dg-card-h span { color: var(--mute); white-space: nowrap; }
.dg-rows { display: grid; gap: 8px; margin-top: 10px; max-height: 260px; overflow: auto; }
.dg-row { display: grid; grid-template-columns: 78px 1fr; gap: 4px 10px; align-items: baseline; color: var(--ink-2); line-height: 1.4; }
.dg-row .dg-amt { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.dg-row a { grid-column: 2; color: var(--violet-ink); }
.dg-row .grade { grid-column: 2; width: max-content; height: 20px; font-size: 10px; }
.dg-more { color: var(--mute); }
.dg-src { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); color: var(--mute); font-size: 12px; }
.dg-src a { color: var(--ink); border-bottom: 1px solid var(--line); }
.dg-note { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--mute); }
.dg-note .live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(230,0,0,.22); margin-top: 6px; }
.dg-law { margin-top: 26px; display: grid; gap: 12px; }
.dg-law-k { font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.dg-law ul { margin: 0; padding: 0 0 0 18px; color: rgba(255,255,255,.85); font-size: 15.5px; line-height: 1.5; display: grid; gap: 6px; }
.dg-law-src { font-size: 13px; color: rgba(255,255,255,.55); }
.dg-law-src a { color: var(--teal); }
@media (max-width: 980px) { .dg-bar [data-dg-view] { margin-left: 0; } .dg-svg { aspect-ratio: 1 / 1; } }
@media (prefers-reduced-motion: reduce) { .dg-bar-r { transition: none; opacity: .9; transform: none; } }

/* the feature / live switch */
.mode-bar { position: sticky; top: var(--head-h); z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mode-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; flex-wrap: wrap; padding: 10px 0; }
.mode { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.mode button { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--nav); font-weight: 600; font-size: 15px; color: var(--mute); transition: background .2s, color .2s, box-shadow .2s; }
.mode button .ico { width: 20px; height: 20px; }
.mode button.on { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(11,11,14,.18); }
.mode button.on .ico { stroke: #fff; }
.mode-note { display: flex; align-items: center; gap: 10px; font-family: var(--nav); font-size: 14px; color: var(--mute); }
.mode-note .live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(230,0,0,.22); flex: none; }
[data-mode-pane][hidden] { display: none !important; }
@media (max-width: 640px) { .mode button { padding: 0 14px; font-size: 14px; } .mode-note { display: none; } }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .mega .wrap, .mega .wrap.cols-3 { grid-template-columns: 1fr 1fr; }
  .mega-feature { grid-column: 1 / -1; min-height: 0; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .nav, .head-right .login { display: none; }
  .mega { display: none; } /* 24 Sep 2026: the hidden panels still laid out 33px wider than a phone and gave every page a sideways scroll; the drawer serves the menu here */
  .burger { display: inline-flex; }
  .hero-grid, .phero .hero-grid, .law .wrap, .two, .two.rev { grid-template-columns: 1fr; } /* .phero added 24 Sep 2026: its own two-column rule outranked this one on a phone */
  .hero-art { max-width: 520px; }
  .two.rev > :first-child { order: 0; }
  .show { grid-template-columns: 1fr; }
  .show-tabs { position: static; grid-template-columns: repeat(2, 1fr); }
  .show-tab span { display: none !important; }
  .doors, .grades, .num-grid, .chambers, .trust-grid, .steps, .plans, .rooms, .facts { grid-template-columns: repeat(2, 1fr); }
  .proof { grid-template-columns: 1fr; }
  .doors.cols-3, .steps.cols-3, .doors.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ui-body { grid-template-columns: 1fr; }
  .ui-side { display: none; }
  .ui-steps { grid-template-columns: repeat(2, 1fr); }
  .ui-stats { grid-template-columns: repeat(2, 1fr); }
  .mk-live, .mk-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bar { font-size: 12.5px; } .bar .wrap { gap: 10px; justify-content: flex-start; }
  .bar .bar-detail, .head-right .btn { display: none; }
  .brand { --wm: 21.25px; --lk-h: 16px; }
  .doors, .grades, .num-grid, .chambers, .trust-grid, .steps, .plans, .rooms, .facts, .form, .show-tabs, .doors.cols-3, .steps.cols-3, .doors.cols-2 { grid-template-columns: 1fr; }
  .form label.full { grid-column: auto; }
  .hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .hero { padding-top: 40px; }
  .lg b { font-size: 19px !important; }
  .marquee .k { font-size: 11px; }
  .hero-ctas .btn { width: 100%; }
  .ui-row { grid-template-columns: 1fr; gap: 8px; }
  .ui-map { grid-template-columns: 1fr; }
  .ui-table td.q { max-width: none; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .num { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .ui-row, .ui-answer, .show-stage .ui { transition: none; opacity: 1; transform: none; }
  .show-tab.on .bar-p { animation: none; width: 100%; }
  .mq-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .mq { -webkit-mask: none; mask: none; }
  .ui-ask .q .caret { animation: none; }
}

/* ---- the investor one-page (24 Sep 2026, H91): the model's tables, in the white dress ---- */
.plan-table { margin-top: 36px; overflow-x: auto; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.plan-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.plan-table th, .plan-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: top; }
.plan-table th { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); background: var(--panel); }
.plan-table th:first-child, .plan-table td:first-child { text-align: left; font-family: var(--nav); font-weight: 600; color: var(--ink); white-space: normal; min-width: 18ch; }
.plan-table td.note { text-align: left; white-space: normal; color: var(--mute); font-family: var(--nav); font-size: 12.5px; min-width: 22ch; }
.plan-table tr:last-child td { border-bottom: 0; }
.plan-questions { margin: 36px 0 0; padding-left: 22px; max-width: 780px; display: grid; gap: 12px; font-size: 16px; color: var(--ink-2); }
.plan-questions b { color: var(--ink); font-family: var(--nav); }

/* ============================================================================
   THE STEP UP · 24 Sep 2026 (Fable 5.1, H92). Rania: "SECOND CHAMBERS NEEDS A BIG STEP UP … better features and icons."
   1. the icons redrawn as two layers (js/icons.js): ink object + one Aurora accent, on white tiles with a faint wash
   2. the figures (js/figures.js): the platform drawn in bordered panels, a caption under a hairline
   3. the bento: every piece of the platform as a tile with its icon, from the module
   4. two overflows H91 found: the footer wordmark at 375px, the header buttons at 1024px
   ========================================================================== */
.ico { display: block; width: 100%; height: 100%; overflow: visible; }
.ic, .mi, .step-ic, .mega-item .ic, .door .ic, .tcard .ic, .hero-meta .mi { color: var(--ink); }
.door .ic, .tcard .ic, .hero-meta .mi, .mega-item .ic {
  position: relative; background: #fff; border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,11,14,.03), 0 8px 24px rgba(230,0,0,.08);
}
.door .ic::before, .tcard .ic::before, .hero-meta .mi::before, .mega-item .ic::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 18% 14%, rgba(230,0,0,.14), transparent 70%), radial-gradient(60% 60% at 88% 90%, rgba(230,0,0,.12), transparent 70%);
}
.door .ic .ico, .tcard .ic .ico, .hero-meta .mi .ico, .mega-item .ic .ico { position: relative; }
.door .ic .ico { width: 38px; height: 38px; }
.tcard .ic .ico { width: 34px; height: 34px; }
.hero-meta .mi .ico { width: 28px; height: 28px; }
.mega-item .ic .ico { width: 24px; height: 24px; }
.mega-item:hover .ic { background: var(--ink); color: #fff; border-color: var(--ink); }
.mega-item:hover .ic::before { opacity: 0; }
.door.free .ic { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.door.free .ic::before { opacity: .8; }
.step-ic .ico { width: 48px; height: 48px; }
.step-ic::before { inset: 0; border-radius: inherit; }

/* ---- the bento: the pieces of the platform, each a tile ---- */
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 26px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; min-height: 236px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.tile .ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; color: var(--ink); box-shadow: 0 1px 2px rgba(11,11,14,.03), 0 8px 24px rgba(230,0,0,.08); }
.tile .ic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 18% 14%, rgba(230,0,0,.14), transparent 70%), radial-gradient(60% 60% at 88% 90%, rgba(230,0,0,.12), transparent 70%); }
.tile .ic .ico { position: relative; width: 32px; height: 32px; }
.tile h3 { font-family: var(--nav); text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 600; line-height: 1.25; }
.tile p { color: var(--mute); font-size: 15px; line-height: 1.5; flex: 1; }
.tile .k { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-ink); }
.tile .textlink { font-size: 14px; }
.tile.wide { grid-column: span 2; padding: 34px 32px 30px; }
.tile.wide::after { content: ""; position: absolute; right: -12%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(230,0,0,.16), rgba(230,0,0,.08) 55%, transparent 72%); filter: blur(18px); pointer-events: none; }
.tile.wide h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .01em; font-size: 28px; line-height: 1.05; }
.tile.wide p { font-size: 16.5px; max-width: 44ch; }
.tile.wide .ic { width: 72px; height: 72px; border-radius: 22px; }
.tile.wide .ic .ico { width: 40px; height: 40px; }
.tile.night { background: var(--night); color: #fff; border-color: var(--night); }
.tile.night p { color: rgba(255,255,255,.7); }
.tile.night .ic { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.tile.night .textlink { color: var(--teal); } .tile.night .textlink:hover { border-color: var(--teal); }
.tile .new { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(230,0,0,.16); color: var(--teal-ink); font-family: var(--display); font-size: 10px; letter-spacing: .14em; vertical-align: middle; }

/* ---- the figures: the platform drawn, a bordered panel, a caption under a hairline ---- */
.figure { margin: 56px 0 0; padding: clamp(18px, 2.4vw, 34px) clamp(14px, 2vw, 28px) 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; position: relative; overflow: hidden; }
.figure::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(230,0,0,.10), rgba(230,0,0,.05) 55%, transparent 72%); filter: blur(24px); pointer-events: none; }
.figure-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.figure-scroll svg { width: 100%; height: auto; min-width: min(var(--fw, 900px), 900px); display: block; }
.figure figcaption { position: relative; margin: 8px calc(-1 * clamp(14px, 2vw, 28px)) 0; padding: 22px clamp(18px, 2.4vw, 34px) 26px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.figure figcaption b { color: var(--ink); }
.figure + .show, .figure + .grades, .figure + .bento { margin-top: 40px; }
.figure.tight { margin-top: 40px; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile.wide { grid-column: span 2; } }
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; } .tile.wide { grid-column: auto; }
  .figure figcaption { font-size: 14px; }
  .figure-scroll svg { min-width: 900px; }
  /* H91's finding: the footer wordmark was 408px wide at 375px; clamp it to the column */
  .foot .foot-brand { --wm: clamp(26px, 8.6vw, 34px); }
  .foot .foot-brand .wm { white-space: normal; line-height: 1.05; }
}
/* H91's finding: at 1024px the bar's buttons pushed the row past the viewport; let the nav shrink first and hide Log in */
.nav-btn, .nav-link { white-space: nowrap; }
.head-row { min-width: 0; }
@media (max-width: 1180px) { .head-row { gap: 16px; } .nav-btn, .nav-link { padding: 0 9px; font-size: 14.5px; } }
@media (max-width: 1100px) { .brand { --wm: 22px; --lk-h: 18px; margin-right: 0; } .head-row { gap: 10px; } .nav { gap: 0; } .nav-btn, .nav-link { padding: 0 7px; font-size: 14px; } .head-right .login { display: none; } .head-right .btn-sm { padding: 0 16px; height: 40px; font-size: 14px; } }

/* ---- THE BUNDLE (24 Sep 2026, H92, Rania: the timeline on a document, the evidence linked as an appendix, the passages highlighted, the law beside) ---- */
.bd-doc { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.bd-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.bd-head .k, .bd-rule .k { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.bd-row { display: grid; grid-template-columns: 120px 1fr 200px 48px; gap: 14px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--line-2); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.bd-row.in { opacity: 1; transform: none; }
.bd-row .grade { justify-self: start; }
.bd-when b { display: block; font-family: var(--nav); font-weight: 600; font-size: 12.5px; color: var(--ink); }
.bd-when span { display: block; font-size: 11.5px; color: var(--mute); margin-top: 3px; line-height: 1.4; }
.bd-said mark { background: linear-gradient(transparent 12%, rgba(255,230,0,.55) 12%, rgba(255,230,0,.55) 88%, transparent 88%); color: var(--ink); font-size: 13px; line-height: 1.5; }
.bd-ref { margin-top: 6px; font-size: 11.5px; color: var(--violet-ink); font-family: var(--nav); }
.bd-rule { display: grid; gap: 4px; padding: 8px 10px; border-left: 2px solid var(--teal); background: rgba(230,0,0,.06); border-radius: 0 8px 8px 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.bd-rule .doc { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); }
.bd-appx .bd-head { border-top: 1px solid var(--line); }
.bd-appx .ui-list { padding: 4px 8px 8px; }
.ui-top .ui-chip { height: 24px; font-size: 11px; }
.bundle-band .lede { max-width: 56ch; }
@media (max-width: 980px) { .bd-row { grid-template-columns: 100px 1fr 48px; } .bd-rule { grid-column: 1 / -1; } }
@media (max-width: 640px) { .bd-row { grid-template-columns: 1fr; } .bd-doc { font-size: 12px; } }

/* ---- the Case File, built on the page (24 Sep 2026, H91) ---- */
.cf-app { margin-top: 36px; display: grid; gap: 22px; }
.cf-controls { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.cf-controls .ui-chip[role=button] { cursor: pointer; user-select: none; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.cf-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.cf-owed { font-family: var(--nav); font-size: 12.5px; color: var(--mute); display: inline-flex; gap: 8px; align-items: center; }
.cf-count { font-family: var(--nav); font-size: 13px; margin: 0; }
.cf-doc { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: clamp(18px, 3vw, 44px); max-height: 80vh; overflow: auto; font-family: Georgia, serif; color: var(--ink); line-height: 1.55; }
.cf-doc .cfd-eyebrow { font-family: var(--nav); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin: 0; }
.cf-doc h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.08; margin: 8px 0; }
.cf-doc .cfd-lede, .cf-doc .cfd-fine, .cf-doc .cfd-meta, .cf-doc .cfd-where, .cf-doc .cfd-body, .cf-doc .cfd-exhibits, .cf-doc .cfd-law, .cf-doc .cfd-foot { font-family: var(--nav); }
.cf-doc .cfd-fine { font-size: 12.5px; color: var(--mute); }
.cf-doc .cfd-era { font-family: var(--display); font-size: 22px; margin: 36px 0 4px; border-top: 1px solid var(--line); padding-top: 18px; }
.cf-doc .cfd-era span { color: var(--mute); font-weight: 400; font-size: 14px; margin-left: 8px; }
.cf-doc .cfd-where { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; }
.cf-doc .cfd-entry { margin: 18px 0; padding-left: 14px; border-left: 3px solid var(--line); }
.cf-doc .cfd-meta { font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cf-doc .cfd-kicker { font-family: var(--nav); font-weight: 600; margin: 4px 0; }
.cf-doc .cfd-q { margin: 8px 0; font-size: 17px; }
.cf-doc mark { background: #fff27a; padding: 0 2px; }
.cf-doc .cfd-body { font-size: 14px; color: var(--ink-2); }
.cf-doc .cfd-ours { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-ink); margin-right: 6px; }
.cf-doc .cfd-h { font-family: var(--display); font-size: 22px; margin: 40px 0 10px; border-top: 1px solid var(--line); padding-top: 18px; }
.cf-doc .cfd-exhibits li { margin: 10px 0; font-size: 13.5px; }
.cf-doc .cfd-law { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-doc .cfd-law th, .cf-doc .cfd-law td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.cf-doc .cfd-foot { margin-top: 48px; font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 640px) { .cf-doc { max-height: none; } }

/* ---- the live model and the field (24 Sep 2026, H91) ---- */
.live-model { margin-top: 36px; }
.lm-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.lm-ctl { display: grid; gap: 6px; font-family: var(--nav); font-size: 12.5px; color: var(--mute); }
.lm-ctl select { font: 600 14px var(--nav); color: var(--ink); padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.live-model .plan-table { margin-top: 16px; }
.field-app { margin-top: 36px; display: grid; gap: 18px; }
.fp { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(18px, 3vw, 32px); background: #fff; display: grid; gap: 18px; }
.fp-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.fp-head h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; margin: 6px 0; }
.fp-sells { color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.fp-big { text-align: right; display: grid; gap: 2px; min-width: 180px; }
.fp-big b { font-family: var(--display); font-size: 28px; line-height: 1; color: var(--ink); }
.fp .k { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 4px; }
.fp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fp-grid p { font-family: var(--nav); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.fp-rounds { overflow-x: auto; }
.fp-rounds table { border-collapse: collapse; width: 100%; font-family: var(--nav); font-size: 13px; }
.fp-rounds th, .fp-rounds td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.fp-rounds th { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.fp-rounds td.note { white-space: normal; color: var(--mute); min-width: 26ch; }
.fp-headline, .fp-unpinned { font-family: var(--nav); font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.fp-unpinned { color: var(--mute); font-size: 12.5px; }
.fp a { color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) { .fp-head { grid-template-columns: 1fr; } .fp-big { text-align: left; } .facts[style] { grid-template-columns: 1fr !important; } }

/* ============================================================================
   THE ECOSYSTEM AND THE ENGINE · 24 Sep 2026 (Fable 5.1, H92). Rania: "CREATE AN ECO system page … Showcase all of it" and
   "visuals of the actual software backend", after Harvey's platform pages: a scroll-driven stage, dark product frames,
   hairline feature rows.
   ========================================================================== */
/* ---- the scroll stage ---- */
.scrolly { margin-top: 56px; display: grid; grid-template-columns: minmax(300px, .9fr) 1.3fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.sy-steps { display: grid; }
.sy-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 0; opacity: .32; transition: opacity .5s var(--ease); }
.sy-step.on { opacity: 1; }
.sy-step:first-child { min-height: 46vh; }
.sy-n { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .22em; color: var(--violet-ink); }
.sy-step h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; max-width: 16ch; }
.sy-step p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 44ch; }
.sy-stage { position: sticky; top: calc(var(--head-h) + 28px); }
.sy-frame { position: relative; border-radius: 22px; background: var(--night); padding: clamp(18px, 2.4vw, 34px); min-height: 520px; overflow: hidden; box-shadow: var(--shadow-lg); }
.sy-frame::before { content: ""; position: absolute; inset: -30% -20% auto -20%; height: 90%; background: radial-gradient(50% 60% at 30% 40%, rgba(230,0,0,.5), transparent 70%), radial-gradient(40% 50% at 75% 60%, rgba(230,0,0,.34), transparent 70%), radial-gradient(35% 45% at 55% 20%, rgba(230,0,0,.2), transparent 70%); filter: blur(30px); pointer-events: none; }
.sy-frame::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px); opacity: .5; pointer-events: none; }
.sy-pane { position: absolute; inset: clamp(18px, 2.4vw, 34px); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; z-index: 1; }
.sy-pane.on { opacity: 1; transform: none; pointer-events: auto; position: relative; inset: auto; }
.sy-pane .ui { box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sy-rail { position: absolute; left: -14px; top: 8%; bottom: 8%; width: 2px; background: var(--line); border-radius: 2px; }
.sy-rail i { position: absolute; left: 0; top: 0; width: 100%; height: var(--p, 0%); background: var(--aurora); border-radius: 2px; transition: height .5s var(--ease); }
@media (max-width: 980px) {
  .scrolly { grid-template-columns: 1fr; }
  .sy-stage { position: static; }
  .sy-frame { min-height: 0; }
  .sy-rail { display: none; }
  .sy-step { min-height: 0; opacity: 1; padding: 28px 0 12px; }
  .sy-pane { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; margin: 0 0 8px; }
  .sy-pane:not(.on) { display: none; }
  .sy-step .sy-pane-holder { margin-top: 18px; border-radius: 16px; background: var(--night); padding: 14px; }
}

/* ---- the three names, on night ---- */
.names-wrap { grid-template-columns: 1fr 1.3fr !important; }
.names { display: grid; gap: 12px; }
.name { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 22px 22px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.04); }
.name .ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.name .ic .ico { width: 34px; height: 34px; }
.name b { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 20px; }
.name b i { font-style: normal; font-family: var(--nav); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 15px; margin-left: 10px; }
.name.violet b i { color: var(--violet); } .name.teal b i { color: var(--teal); } .name.pink b i { color: var(--pink); }
.name p { margin-top: 8px; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.5; }

/* ---- the rooms ---- */
.rooms-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.room-tile { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.room-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.room-tile .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink); position: relative; overflow: hidden; }
.room-tile .ic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 18% 14%, rgba(230,0,0,.14), transparent 70%); }
.room-tile .ic .ico { position: relative; width: 24px; height: 24px; }
.room-tile b { font-family: var(--nav); font-weight: 600; font-size: 15.5px; }
.room-tile small { font-family: var(--display); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.room-tile.new { border-style: dashed; border-color: var(--pink); }
.rooms-rule { margin-top: 14px; font-size: 13px; color: var(--mute); font-family: var(--nav); }
.shelves-wrap { margin-top: 56px; }
.shelves, .room-rules { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.shelves li, .room-rules li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.shelves li .n, .room-rules li .n { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--violet-ink); padding-top: 4px; }
.room-rules li .n { color: var(--pink-ink); }

/* ---- the ripple ---- */
.ripple-sec { overflow: hidden; }
.ripple { position: relative; margin: 48px auto 0; width: min(760px, 100%); display: grid; place-items: center; }
.ripple .rings { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.ripple .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: start center; transform: scale(calc(.3 + var(--i) * .175)); opacity: calc(1 - max(0, var(--i) - var(--p, 0) * 5) ); transition: opacity .4s var(--ease), border-color .4s; }
.ripple .ring.lit { border-color: var(--violet); box-shadow: 0 0 0 1px rgba(11,11,14,.06), 0 0 60px rgba(11,11,14,.04) inset; }
.ripple .ring span { position: absolute; top: -13px; padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-family: var(--nav); font-weight: 600; font-size: calc(12px + (5 - var(--i)) * .6px); color: var(--ink); white-space: nowrap; transform: scale(calc(1 / (.3 + var(--i) * .175))); transform-origin: center; }
.ripple .ring.lit span { border-color: var(--violet); color: var(--violet-ink); }
.ripple .core { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--aurora); display: grid; place-items: center; color: #fff; box-shadow: 0 12px 40px rgba(230,0,0,.3); }
.ripple .core .ico { width: 40px; height: 40px; } .ripple .core .ico .ink { stroke: #fff; } .ripple .core .ico .acc { stroke: #fff; }
.ripple .words { margin-top: 28px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ripple .words span { padding: 6px 14px; border-radius: 999px; background: var(--panel); font-family: var(--nav); font-weight: 600; font-size: 14px; color: var(--mute); opacity: .35; transition: opacity .4s, color .4s, background .4s; }
.ripple .words span.lit { opacity: 1; color: var(--ink); background: rgba(230,0,0,.16); }
@media (max-width: 640px) { .ripple { width: 100%; } .ripple .ring span { font-size: 11px; padding: 3px 9px; } .ripple .core { width: 56px; height: 56px; } .ripple .core .ico { width: 28px; height: 28px; } }
/* the dots on the rings (7 Oct 2026): who stands on each ring, a dot on the line and the name set along it, outside; placed by
   placeRipple() in js/master.js. Where the drawing is too small for the names (a phone), the dots stay and the names drop to the key. */
.ripple .rings { container-type: inline-size; }
.ripple .rdots { position: absolute; inset: 0; pointer-events: none; font-size: clamp(9.5px, 1.52cqw, 12px); opacity: calc(1 - max(0, var(--i) - var(--p, 0) * 5)); transition: opacity .4s var(--ease); }
.ripple .rdot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #fff; opacity: .3; transition: opacity .4s var(--ease); }
.ripple .rdot.building { background: #fff; box-shadow: 0 0 0 3px #fff, inset 0 0 0 2px var(--ink); }
.ripple .rdot.ask { background: #fff; box-shadow: 0 0 0 3px #fff, inset 0 0 0 1.5px var(--mute); }
.ripple .rlab { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--nav); font-weight: 500; font-size: 1em; line-height: 1.3; letter-spacing: .01em; color: var(--mute); opacity: .35; transition: opacity .4s var(--ease), color .4s; pointer-events: auto; }
.ripple .rdots.lit .rdot, .ripple .rdots.lit .rlab { opacity: 1; }
.ripple .rdots.lit .rlab { color: var(--ink); }
.ripple .rdots .rlab.ask { font-style: italic; }
.ripple-key { display: none; list-style: none; margin: 28px auto 0; padding: 0; max-width: 560px; }
.ripple-key li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-family: var(--nav); font-size: 14px; line-height: 1.45; }
.ripple-key li:last-child { border-bottom: 1px solid var(--line); }
.ripple-key b { font-weight: 600; color: var(--ink); }
.ripple-key span { color: var(--mute); }
.ripple.compact .rlab { display: none; }
.ripple.compact .ripple-key { display: block; }
@media (max-width: 420px) { .ripple-key li { grid-template-columns: 1fr; gap: 2px; } }

/* ---- the nine functions, the loads, the year, the price ---- */
.functions { margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.functions li { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 8px; align-content: start; }
.functions li .n { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; color: var(--violet-ink); display: flex; justify-content: space-between; }
.functions li .n small { font-family: var(--nav); letter-spacing: 0; text-transform: none; font-size: 11px; color: var(--teal-ink); font-weight: 600; }
.functions li b { font-family: var(--nav); font-weight: 600; font-size: 17px; }
.functions li p { color: var(--mute); font-size: 14.5px; line-height: 1.5; }
.functions li.always { border-color: rgba(230,0,0,.5); }
.functions li.teeth { border-color: rgba(230,0,0,.5); }
.loads { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.load { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.load .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink); position: relative; overflow: hidden; }
.load .ic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 18% 14%, rgba(230,0,0,.14), transparent 70%), radial-gradient(60% 60% at 88% 90%, rgba(230,0,0,.12), transparent 70%); }
.load .ic .ico { position: relative; width: 30px; height: 30px; }
.load b { font-family: var(--nav); font-weight: 600; font-size: 17px; display: block; }
.load p { margin-top: 6px; color: var(--mute); font-size: 15px; line-height: 1.5; }
.year { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.year > div { padding: 22px; border-left: 2px solid var(--violet); background: var(--panel-2); border-radius: 0 14px 14px 0; }
.year b { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; display: block; color: var(--violet-ink); }
.year p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.price-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.price { padding: 24px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 6px; align-content: start; }
.price .k { font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.price .v { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -.01em; line-height: 1; }
.price.free .v { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price p { color: var(--mute); font-size: 14px; line-height: 1.5; margin-top: 4px; }
.ui-code .ln { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 5px 0; opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ui-code .ln.in { opacity: 1; transform: none; }
.ui-code .ln .t { color: var(--teal-ink); font-weight: 600; }
.ui-country.held .code { color: var(--pink-ink); }
@media (max-width: 980px) { .rooms-grid { grid-template-columns: repeat(3, 1fr); } .functions, .year, .price-grid { grid-template-columns: repeat(2, 1fr); } .names-wrap { grid-template-columns: 1fr !important; } }
@media (max-width: 640px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); } .functions, .year, .price-grid, .loads { grid-template-columns: 1fr; } .name { grid-template-columns: 52px 1fr; } .name .ic { width: 52px; height: 52px; } }
/* the scroll stage and the code screen never force the page wider than the viewport (24 Sep 2026, H92) */
.scrolly, .sy-steps, .sy-stage, .sy-frame, .sy-pane, .sy-step { min-width: 0; }
.sy-pane .ui, .sy-pane .ui-main, .sy-pane .ui-body { min-width: 0; max-width: 100%; }
.ui-code { white-space: pre-wrap; overflow-x: auto; max-width: 100%; }
.ui-code .ln span:last-child { white-space: normal; overflow-wrap: anywhere; }
.ui-map { min-width: 0; }
@media (max-width: 640px) { .ui-code { font-size: 11px; } .ui-code .ln { grid-template-columns: 42px 1fr; gap: 8px; } }

/* ---- the pop-up, the wave, the funding routes (24 Sep 2026, H91) ---- */
.fp-modal { position: fixed; inset: 0; z-index: 90; display: none; }
.fp-modal.open { display: block; }
.fp-modal-back { position: absolute; inset: 0; background: rgba(11,11,14,.55); backdrop-filter: blur(3px); }
.fp-modal-box { position: absolute; inset: 4vh 0 auto 0; margin: 0 auto; width: min(960px, calc(100% - 32px)); max-height: 92vh; overflow: auto; background: #fff; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.35); padding: 8px; }
.fp-modal-box .fp { border: 0; }
.fp-modal-x { position: sticky; top: 6px; float: right; margin: 6px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 22px; cursor: pointer; z-index: 2; }
.fp-modal-foot { font-family: var(--nav); font-size: 12.5px; color: var(--mute); padding: 0 24px 18px; }
.fp-modal-foot a, [data-profile] { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wave-strip { margin-top: 30px; display: flex; align-items: flex-end; gap: 6px; height: 300px; overflow-x: auto; padding: 8px 4px 0; border-bottom: 1px solid var(--line); }
.wave-bar { flex: 0 0 auto; width: 56px; height: var(--h); min-height: 24px; border: 0; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--violet), var(--pink)); color: #fff; cursor: pointer; position: relative; display: grid; align-content: start; justify-items: center; padding-top: 6px; font-family: var(--nav); transition: transform .2s var(--ease); }
.wave-bar:hover { transform: translateY(-4px); }
.wave-bar .wave-v { font-weight: 700; font-size: 11px; white-space: nowrap; }
.wave-bar .wave-n, .wave-bar .wave-d { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: var(--ink-2); }
.wave-bar .wave-n { bottom: -18px; font-weight: 600; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.wave-bar .wave-d { bottom: -34px; color: var(--mute); }
.wave-strip { padding-bottom: 44px; height: 344px; }
.wave-note { font-family: var(--nav); font-size: 13px; margin-top: 14px; }
.fund-rules { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.fund-group { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 18px; background: #fff; }
.fund-group summary { cursor: pointer; padding: 12px 0; font-family: var(--nav); font-size: 16px; }
.fund-group .plan-table { margin: 0 0 14px; border: 0; }
.fund-group tr.excluded td { color: var(--mute); background: var(--panel); }
.fp-grid p, .fp-rounds td.note, .fp-headline, .fp-unpinned, .plan-table td.note { overflow-wrap: anywhere; }
.fp-head .eyebrow { display: block; max-width: 60ch; overflow-wrap: anywhere; }
.wave-bar { width: 76px; }
.wave-bar .wave-d { font-size: 9.5px; }

/* ---- the sheet on the page, in the Evidence Bank's dress (24 Sep 2026, H91) ---- */
/* the old .plan-sheet / .pl-* dress retired 24 Sep 2026 (H94): the sheet is now SC SHEET, below */
.fm-table { font-family: var(--nav); font-size: 11.5px; }
.fm-table th { vertical-align: bottom; white-space: normal; min-width: 64px; max-width: 90px; text-align: center; }
.fm-table th.us, .fm-table td.us { background: #FFF0F7; }
.fm-table th a { color: var(--ink); text-decoration: underline; }
.fm-table .fm-lane { display: block; font-size: 9.5px; color: var(--mute); font-weight: 400; letter-spacing: 0; text-transform: none; }
.fm-table td.fm { text-align: center; white-space: nowrap; font-weight: 600; }
.fm-table td.y { color: #0A6F63; background: rgba(230,0,0,.10); } .fm-table td.p { color: #7A5A11; background: #FFF7E8; } .fm-table td.n { color: #A0006D; background: rgba(230,0,0,.08); } .fm-table td.u { color: var(--mute); }
.fm-table .fm-g { font-size: 9px; color: var(--mute); font-weight: 400; }
.fm-table td.lab { min-width: 26ch; white-space: normal; text-align: left; }
.plan-table .fund-group, .fund-group .plan-table { border: 0; }

.pl-sheet { table-layout: auto; }
.pl-sheet td.lab { min-width: 0; max-width: 34ch; }
.pl-sheet td.input { min-width: 64px; }
.pl-sheet td, .pl-sheet thead th { padding: 5px 8px; }
@media (max-width: 720px) { .pl-sheet { font-size: 11.5px; } }

.fm-table th:first-child, .fm-table td.lab { position: sticky; left: 0; background: #fff; z-index: 2; box-shadow: 1px 0 0 var(--line); }
.fm-table th.us, .fm-table td.us { position: sticky; left: 220px; z-index: 2; }
.fm-table thead th:first-child { background: var(--panel); }
.fm-table td.lab { width: 220px; min-width: 220px; max-width: 220px; }


/* ============================================================================
   SC SHEET · THE EXCEL DRESS (24 Sep 2026, H94, W12). Rania: "The tables MUST look like an excel table, not round edges.
   Allow the user to drag the width of the rows etc, autosum, etc." Square cells on grey gridlines, column letters and row
   numbers, a name box and a formula bar, the status bar that sums the selection, a tab strip along the bottom. The house
   pink stands where a spreadsheet would put green. Engine and behaviour: master/js/sc-sheet.js.
   ========================================================================== */
.xl { --xl-line: #D9DDE3; --xl-head: #F3F4F6; --xl-head-ink: #444B54; --xl-sel: rgba(230,0,0,.10); --xl-act: #E60000; --xl-yellow: #FFF2CC; margin-top: 28px; border: 1px solid var(--xl-line); background: #fff; font: 13px var(--font); color: #1B1F24; border-radius: 0; }
.xl-ribbon { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; padding: 8px 10px; border-bottom: 1px solid var(--xl-line); background: #FAFAFB; flex-wrap: wrap; }
.xl-rib-left, .xl-rib-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xl-lab { font: 700 11px var(--nav); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-right: 4px; }
.xl-btn { font: 600 12.5px var(--nav); padding: 6px 12px; border: 1px solid var(--xl-line); background: #fff; color: var(--ink); border-radius: 0; cursor: pointer; line-height: 1.2; }
.xl-btn:hover { background: #F3F4F6; }
.xl-btn.on { background: #FFF0F7; border-color: var(--pink); color: var(--pink-ink); }
.xl-fbar { display: grid; grid-template-columns: 96px 32px 1fr; align-items: stretch; border-bottom: 1px solid var(--xl-line); background: #fff; }
.xl-name { font: 600 12.5px var(--nav); padding: 6px 8px; border: 0; border-right: 1px solid var(--xl-line); text-align: center; color: var(--ink); background: #fff; outline: 0; min-width: 0; border-radius: 0; }
.xl-fx { display: grid; place-items: center; font: italic 600 13px Georgia, "Times New Roman", serif; color: var(--mute); border-right: 1px solid var(--xl-line); }
.xl-formula { font: 13px var(--mono); padding: 6px 10px; border: 0; outline: 0; color: var(--ink); min-width: 0; background: #fff; border-radius: 0; }
.xl-formula:focus { box-shadow: inset 0 -2px 0 var(--pink); }
.xl-frame { overflow: auto; outline: 0; position: relative; background: #fff; }
.xl-frame:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(230,0,0,.35); border-radius: 0; }
.xl-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 13px var(--font); }
.xl-grid th, .xl-grid td { border-right: 1px solid var(--xl-line); border-bottom: 1px solid var(--xl-line); padding: 0 6px; height: 22px; overflow: hidden; white-space: nowrap; vertical-align: middle; box-sizing: border-box; }
.xl-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--xl-head); color: var(--xl-head-ink); font: 600 12px var(--nav); text-align: center; user-select: none; }
.xl-grid thead th.xl-corner { left: 0; z-index: 5; }
.xl-grid thead th.xl-fz { z-index: 4; }
.xl-grid th.xl-rh { position: sticky; left: 0; z-index: 2; background: var(--xl-head); color: var(--xl-head-ink); font: 600 12px var(--nav); text-align: center; user-select: none; }
.xl-grid th.xl-hl { background: #FFE3EF; color: var(--pink-ink); }
.xl-grid td.xl-cell { position: relative; background: #fff; text-align: right; font-variant-numeric: tabular-nums; cursor: cell; }
.xl-grid td.xl-fz { position: sticky; z-index: 1; }
.xl-grid td.xl-left, .xl-grid td.xl-head, .xl-grid td.xl-title, .xl-grid td.xl-sec, .xl-grid td.xl-note, .xl-grid td.xl-sub { text-align: left; }
.xl-grid td.xl-sel { background: var(--xl-sel); }
.xl-grid td.xl-act { box-shadow: inset 0 0 0 2px var(--xl-act); z-index: 1; }
.xl-grid td.xl-act::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 6px; height: 6px; background: var(--xl-act); border: 1px solid #fff; }
.xl-grid td.xl-in { background: var(--xl-yellow); }
.xl-grid td.xl-in.xl-sel { background: #FFE9A8; }
.xl-grid td.xl-err { color: var(--pink-ink); font-weight: 600; }
.xl-grid td.xl-head, .xl-grid tr.xl-head-row td { background: var(--xl-head); font: 600 12px var(--nav); color: var(--xl-head-ink); white-space: normal; line-height: 1.2; }
.xl-grid tr.xl-head-row { height: auto; }
.xl-grid td.xl-sub { color: var(--mute); font-size: 11.5px; }
.xl-grid td.xl-title { font: 700 12px var(--nav); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); overflow: visible; }
.xl-grid tr.xl-title-row td { border-bottom-color: #9AA1AA; }
.xl-grid td.xl-sec { font: 700 11px var(--nav); letter-spacing: .08em; text-transform: uppercase; color: var(--xl-head-ink); overflow: visible; }
.xl-grid tr.xl-sec-row td { background: #EEF0F3; }
.xl-grid tr.xl-total-row td { font-weight: 700; border-top: 1px solid #9AA1AA; }
.xl-grid tr.xl-cash-row td { font-weight: 700; border-top: 1px solid #9AA1AA; border-bottom: 3px double #9AA1AA; }
.xl-grid td.xl-b { font-weight: 600; }
.xl-grid td.xl-note { color: var(--mute); font-style: italic; overflow: visible; }
.xl-grid td.xl-derived { background: #F3F4F6; }
.xl-grid tr.xl-us-row td, .xl-grid td.xl-us { background: #FFF0F7; }
.xl-grid td.xl-yes { color: #0A6F63; } .xl-grid td.xl-partly { color: #7A5A11; } .xl-grid td.xl-no { color: #A0006D; }
.xl-grid tr.xl-excl-row td { color: var(--mute); background: #F6F6F8; }
.xl-grid td a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.xl-edit { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; padding: 0 6px; font: inherit; color: inherit; background: #fff; box-shadow: inset 0 0 0 2px var(--xl-act); border-radius: 0; text-align: left; }
.xl-rz { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 6; }
.xl-rzr { position: absolute; left: 0; bottom: -4px; height: 8px; width: 100%; cursor: row-resize; z-index: 6; }
.xl-foot { display: flex; justify-content: space-between; align-items: stretch; border-top: 1px solid var(--xl-line); background: #FAFAFB; flex-wrap: wrap; }
.xl-tabs { display: flex; flex-wrap: wrap; }
.xl-tab { font: 600 12.5px var(--nav); padding: 8px 14px; border-right: 1px solid var(--xl-line); background: #F3F4F6; color: var(--ink-2); border-radius: 0; }
.xl-tab:hover { background: #FAFAFB; }
.xl-tab.on { background: #fff; color: var(--pink-ink); box-shadow: inset 0 -2px 0 var(--pink); }
.xl-status { display: flex; align-items: center; gap: 16px; padding: 6px 12px; font: 12px var(--nav); color: var(--mute); margin-left: auto; flex-wrap: wrap; }
.xl-agg { display: flex; gap: 14px; } .xl-agg span { white-space: nowrap; }
.xl-ready { font-weight: 600; color: var(--ink-2); min-width: 40px; }
.xl-check { color: var(--teal-ink); font-weight: 600; }
@media (max-width: 720px) { .xl-fbar { grid-template-columns: 72px 28px 1fr; } .xl-status { margin-left: 0; } .xl { margin-inline: calc(-1 * var(--gutter)); border-left: 0; border-right: 0; } }

/* ============================================================================
   THE INVESTOR PAGE · the journey's own pieces (24 Sep 2026, H94). Square: no rounded corner anywhere on this page.
   ========================================================================== */
body[data-page="investors"] .btn, body[data-page="investors"] .btn-aurora::after, body[data-page="reopen"] .btn, body[data-page="reopen"] .btn-aurora::after { border-radius: 2px; }
body[data-page="investors"] .door, body[data-page="investors"] .door .ic { border-radius: 0; }
.inv-hero .hero-grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
.inv-hero h1 { max-width: 16ch; }
.inv-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.inv-grid.c5 { grid-template-columns: repeat(5, 1fr); }
.inv-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.inv-grid.c8 { grid-template-columns: repeat(8, 1fr); margin-top: 18px; }
.inv-stat, .inv-line, .inv-year, .inv-co, .inv-fg, .inv-hl { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; display: grid; align-content: start; text-align: left; }
.inv-stat { padding: 22px 22px 20px; gap: 6px; }
.inv-stat .n { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.inv-stat .t { font: 600 13.5px var(--nav); color: var(--ink); line-height: 1.35; }
.inv-stat .s { font-size: 12px; color: var(--mute); line-height: 1.4; }
.inv-stat.us, .inv-line.us { background: #FFF0F7; }
.inv-stat.us .n { color: var(--pink-ink); }
.inv-line { padding: 26px 24px 24px; gap: 10px; }
.inv-line .k { font: 600 11px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.inv-line h3 { font-size: 22px; line-height: 1.05; }
.inv-line p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.inv-line p b { color: var(--ink); }
.inv-line .price { font: 600 14px var(--nav); color: var(--ink); line-height: 1.4; }
.inv-line .s { font-size: 12px; color: var(--mute); }
.inv-year, .inv-co { padding: 18px 20px 16px; gap: 4px; cursor: pointer; font: inherit; color: inherit; transition: background .15s; }
.inv-year:hover, .inv-co:hover { background: var(--panel-2); }
.inv-year b { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1; }
.inv-year .t, .inv-co b { font: 600 15px var(--nav); color: var(--ink); }
.inv-year .s, .inv-co .s { font-size: 12px; color: var(--mute); line-height: 1.4; }
.inv-co .v { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; margin: 2px 0; }
.inv-fg { padding: 16px 18px 14px; gap: 3px; }
.inv-fg b { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; }
.inv-fg .t { font: 600 13.5px var(--nav); color: var(--ink); }
.inv-fg .s { font-size: 12px; color: var(--mute); line-height: 1.4; }
.inv-fg.excl { color: var(--mute); background: var(--panel-2); }
.inv-hl { padding: 12px 14px; gap: 4px; }
.inv-hl .k { font: 600 10.5px var(--nav); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); line-height: 1.3; }
.inv-hl b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; }
.inv-hl.note b { color: var(--pink-ink); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.inv-opt { border: 1px solid var(--ink); padding: 26px 26px 24px; background: #fff; display: grid; gap: 14px; }
.inv-opt h3 { font-size: 28px; line-height: 1; }
.inv-opt .lede-s { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.inv-opt .choices { display: grid; border: 1px solid var(--line); }
.inv-opt .choices label { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.inv-opt .choices label:last-child { border-bottom: 0; }
.inv-opt .choices label:hover { background: var(--panel-2); }
.inv-opt .choices b { display: block; font: 600 15px var(--nav); color: var(--ink); }
.inv-opt .choices span { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; line-height: 1.4; }
.inv-opt .choices input { margin: 4px 0 0; accent-color: var(--pink); }
.inv-opt .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-opt .fields label { font: 600 12px var(--nav); color: var(--ink-2); display: grid; gap: 5px; }
.inv-opt .fields label.full { grid-column: 1 / -1; }
.inv-opt input[type="text"], .inv-opt input[type="email"] { font: 15px var(--font); padding: 11px 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); width: 100%; }
.inv-opt input:focus { outline: 0; border-color: var(--ink); }
.inv-opt .btn { width: 100%; height: 52px; }
.inv-opt .note { font-size: 12.5px; color: var(--mute); line-height: 1.45; }
.inv-opt .done { padding: 14px 16px; background: var(--panel); font-size: 14px; line-height: 1.5; }
.inv-opt .done .xl-btn { margin-left: 6px; }
.inv-use { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.inv-use li { padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 32px 1fr; gap: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.inv-use li .n { font: 600 12px var(--display); letter-spacing: .14em; color: var(--pink-ink); padding-top: 3px; }
.inv-use li b { color: var(--ink); display: block; font-family: var(--nav); }
.inv-share { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 900px; }
.inv-share li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.inv-share .n { font: 600 12px var(--display); letter-spacing: .18em; color: var(--pink-ink); padding-top: 5px; }
.inv-share b { display: block; font: 600 17px var(--nav); color: var(--ink); }
.inv-share span { display: block; color: var(--ink-2); font-size: 15px; margin-top: 4px; line-height: 1.5; }
.inv-rules { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.inv-rules div { padding: 16px 18px; border-right: 1px solid var(--ink); font: 500 14.5px var(--nav); line-height: 1.45; }
.inv-rules div:last-child { border-right: 0; }
.inv-rules div b { display: block; font: 700 11px var(--display); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 6px; color: var(--pink-ink); }
.inv-q { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); max-width: 860px; }
.inv-q li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.inv-q li b { font-family: var(--display); color: var(--ink); }
.inv-steps { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.inv-step { padding: 24px 22px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.inv-step .n { font: 700 12px var(--display); letter-spacing: .2em; color: var(--pink-ink); }
.inv-step h3 { font-size: 20px; line-height: 1.05; }
.inv-step p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.inv-note { font-family: var(--nav); font-size: 13px; color: var(--mute); margin-top: 14px; line-height: 1.5; max-width: 90ch; }
@media (max-width: 1100px) { .inv-grid.c8 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px) { .inv-grid, .inv-grid.c5, .inv-grid.c3 { grid-template-columns: repeat(2, 1fr); } .inv-hero .hero-grid { grid-template-columns: 1fr; } .inv-use, .inv-rules, .inv-steps { grid-template-columns: 1fr; } .inv-rules div { border-right: 0; border-bottom: 1px solid var(--ink); } .inv-rules div:last-child { border-bottom: 0; } }
@media (max-width: 640px) { .inv-grid, .inv-grid.c5, .inv-grid.c3, .inv-grid.c8 { grid-template-columns: 1fr; } .inv-opt .fields { grid-template-columns: 1fr; } .inv-opt { padding: 20px; } }
.xl-kbd { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; resize: none; border: 0; padding: 0; margin: 0; left: 0; top: 0; }
.xl { position: relative; }

/* ---- THE QUESTION BANK (24 Sep 2026, H92): the live page's framework in the white dress ---- */
.qb-counts { margin-top: 0; }
.qb-tools { margin-top: 40px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qb-ports { display: flex; gap: 6px; flex-wrap: wrap; }
.qb-ports .ui-chip { cursor: pointer; }
.qb-search { margin-left: auto; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 15px; min-width: 240px; }
.qb-h { margin-top: 36px; font-size: clamp(22px, 2.2vw, 30px); display: flex; align-items: baseline; gap: 12px; }
.qb-h span { font-family: var(--nav); text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--mute); font-weight: 500; }
.qb-list { margin-top: 18px; display: grid; gap: 14px; }
.qa { padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; gap: 12px; }
.qa[hidden] { display: none; }
.qa-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.qa-top .k { font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.qa-clock { font-family: var(--nav); font-size: 13.5px; color: var(--pink-ink); display: inline-flex; align-items: baseline; gap: 6px; }
.qa-clock b { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; line-height: 1; }
.qa-done { font-family: var(--nav); font-size: 13.5px; color: var(--teal-ink); }
.qa h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; }
.qa-stand { color: var(--ink-2); font-size: 16px; }
.qa-q { padding: 16px 18px; border-left: 2px solid var(--violet); background: var(--panel-2); border-radius: 0 12px 12px 0; display: grid; gap: 6px; }
.qa-q .k { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-ink); }
.qa-q p { font-size: 17px; line-height: 1.5; color: var(--ink); }
.qa-meta { font-family: var(--nav); font-size: 13px; color: var(--mute); }
.qa-file summary { cursor: pointer; font-family: var(--nav); font-weight: 600; font-size: 14.5px; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.qa-file summary::-webkit-details-marker { display: none; }
.qa-file summary::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); transition: transform .2s; margin-right: 4px; }
.qa-file[open] summary::before { transform: rotate(45deg); }
.qa-body { margin-top: 14px; display: grid; gap: 8px; max-width: 74ch; }
.qa-body h4 { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-top: 10px; }
.qa-body p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.qa-said mark { background: linear-gradient(transparent 12%, rgba(255,230,0,.55) 12%, rgba(255,230,0,.55) 88%, transparent 88%); color: var(--ink); }
.qa-src { display: flex; gap: 8px; flex-wrap: wrap; }
.qa-src .ui-chip { height: auto; padding: 6px 10px; gap: 8px; white-space: normal; }
.qb-empty { color: var(--mute); }
.qb-clock-big { display: grid; gap: 4px; padding: 18px 0 14px; }
.qb-clock-big .n { font-family: var(--display); font-weight: 700; font-size: 64px; letter-spacing: -.02em; line-height: 1; color: var(--pink-ink); }
.qb-clock-big .t { font-family: var(--nav); font-size: 13px; color: var(--mute); }
@media (max-width: 640px) { .qa { padding: 20px; } .qb-search { min-width: 0; width: 100%; margin-left: 0; } }

/* BACK IN BUSINESS (24 Sep 2026, H94) */
.inv-opt select { font: 15px var(--font); padding: 11px 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); width: 100%; }
.rp-pool { margin-top: 24px; }
.rp-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }

/* ============================================================================
   THE MAPS · 24 Sep 2026 (Fable 5.1, H92). Rania: "a MAIN Navigation called MAPS then for each institution, create a page …
   the hero: the left the text, the right an image that represents the page. NOT the map. That goes into section 2."
   ========================================================================== */
.illo { position: relative; border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.illo svg { width: 100%; height: auto; display: block; }
.illo img { width: 100%; height: auto; display: block; }   /* 24 Sep 2026: a watchdog hero may carry a still (build-master-skeleton.py WATCHDOG_ART) */
.il-acc { stroke-dasharray: 600; stroke-dashoffset: 600; animation: il-draw 2.2s var(--ease) .4s forwards; }
@keyframes il-draw { to { stroke-dashoffset: 0; } }
.il-drift { animation: il-drift 6s ease-in-out infinite alternate; }
@keyframes il-drift { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.fg-flow { stroke-dashoffset: 0; animation: fg-flow 1.6s linear infinite; }
@keyframes fg-flow { to { stroke-dashoffset: -28; } }
.fg-pulse { transform-origin: center; transform-box: fill-box; animation: fg-pulse 2.6s ease-in-out infinite; }
@keyframes fg-pulse { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.08); opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .fg-flow, .fg-pulse, .il-drift { animation: none; } .il-acc { animation: none; stroke-dashoffset: 0; } }
.maps-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.map-tile { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; min-height: 170px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.map-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.map-tile .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink); position: relative; overflow: hidden; }
.map-tile .ic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 18% 14%, rgba(230,0,0,.14), transparent 70%); }
.map-tile .ic .ico { position: relative; width: 24px; height: 24px; }
.map-tile small { font-family: var(--display); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.map-tile b { font-family: var(--nav); font-weight: 600; font-size: 17px; flex: 1; }
.map-tile .textlink { font-size: 13.5px; }
.map-tile.built { border-color: var(--violet); box-shadow: 0 0 0 1px rgba(230,0,0,.12); }
.map-tile.built small { color: var(--violet-ink); }
.map-tile.owed .textlink { color: var(--mute); }
.opt-group { margin-top: 44px; }
.opt-group + .opt-group { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.opt-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
.opt-head h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; }
.opt-head p { color: var(--mute); font-size: 15px; }
.opt-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opt { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; align-items: start; }
.opt .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink); position: relative; overflow: hidden; }
.opt .ic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 18% 14%, rgba(230,0,0,.14), transparent 70%), radial-gradient(60% 60% at 88% 90%, rgba(230,0,0,.12), transparent 70%); }
.opt .ic .ico { position: relative; width: 26px; height: 26px; }
.opt b { font-family: var(--nav); font-weight: 600; font-size: 16.5px; display: block; }
.opt p { margin-top: 6px; color: var(--mute); font-size: 14.5px; line-height: 1.5; }
.opt-fig { display: block; margin-top: 10px; font-family: var(--nav); font-size: 13px; color: var(--ink-2); }
.opt-fig b { display: inline; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--violet-ink); margin-right: 6px; }
.opt-pin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-family: var(--nav); font-size: 12.5px; color: var(--mute); }
.shelf-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.shelf { padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 10px; align-content: start; }
.shelf .n { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .2em; color: var(--violet-ink); }
.shelf h3 { font-family: var(--nav); text-transform: none; letter-spacing: 0; font-size: 18px; font-weight: 600; }
.shelf ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.shelf li { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; line-height: 1.5; color: var(--ink-2); align-items: start; }
.shelf li b { grid-column: 1 / -1; font-family: var(--nav); font-weight: 600; font-size: 12.5px; color: var(--ink); }
.shelf li i { font-style: normal; color: var(--mute); }
.map-hero .status { max-width: 60ch; }
@media (max-width: 980px) { .maps-grid { grid-template-columns: repeat(3, 1fr); } .opt-grid, .shelf-grid { grid-template-columns: repeat(2, 1fr); } .opt-head { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .maps-grid { grid-template-columns: repeat(2, 1fr); } .opt-grid, .shelf-grid { grid-template-columns: 1fr; } .foot-top { grid-template-columns: 1fr 1fr; } }
.foot-top { grid-template-columns: 1.4fr repeat(5, 1fr); }
@media (max-width: 1180px) { .foot-top { grid-template-columns: 1fr 1fr 1fr; } .foot-top > :first-child { grid-column: 1 / -1; } }
/* the bar with Maps in it: at laptop width the two plain links fold into the menus and the drawer (24 Sep 2026, H92) */
@media (max-width: 1180px) { .nav-link[href="try.html"], .nav-link[href="chambers.html"] { display: none; } }
@media (max-width: 1100px) { .nav-link[href="ecosystem.html"] { display: none; } }

/* ---- THE WATCHDOGS (24 Sep 2026, H92): before and today, and one body's timeline ---- */
.bt-list { margin-top: 44px; display: grid; gap: 12px; }
.bt { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.bt > div { padding: 22px 22px; }
.bt-body { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 16px; line-height: 1.15; background: var(--panel-2); border-right: 1px solid var(--line); }
.bt-was { border-right: 1px solid var(--line); }
.bt .k { display: block; font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.bt-now .k { color: var(--pink-ink); }
.bt p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.bt p b { color: var(--ink); }
.tl { list-style: none; margin: 44px 0 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 18px; }
.tl::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-item { position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: start; }
.tl-dot { position: absolute; left: -28px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--violet); }
.tl-item.day .tl-dot { border-color: var(--teal); }
.tl-item.moment .tl-dot { border-color: var(--dim); }
.tl-when b { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .02em; padding-top: 6px; }
.tl-when span { display: block; margin-top: 4px; font-family: var(--nav); font-size: 12.5px; color: var(--mute); line-height: 1.4; }
.tl-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 8px; }
.tl-card > b { font-family: var(--nav); font-weight: 600; font-size: 16px; }
.tl-card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.tl-card p b { color: var(--ink); }
.tl-src { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--nav); font-size: 12.5px; color: var(--mute); }
.tl-item.day .tl-card { background: var(--panel-2); }
@media (max-width: 980px) { .bt { grid-template-columns: 1fr; } .bt-body, .bt-was { border-right: 0; border-bottom: 1px solid var(--line); } .tl-item { grid-template-columns: 1fr; gap: 6px; } }

/* THE SHELL ON THE SIGNALS SITE (7 Oct 2026, Rania: "IT MUST BE THE SAME … ONLY, THE SIGNALS NOT SILENCE IS RED"): the text wordmark in the lockup's face */
.brand.brand-text .wm { font-size: 30px; letter-spacing: .02em; -webkit-text-stroke: .45px currentColor; paint-order: stroke fill; }
.brand-red, .brand-red .wm, html.ay-at-top .head .brand.brand-red, html.ay-at-top .head .brand.brand-red .wm { color: var(--news, #E60000); }
@media (max-width: 1100px) { .brand.brand-text .wm { font-size: 22px; } }
@media (max-width: 640px) { .brand.brand-text .wm { font-size: 19px; } }
/* THE SHELL ON THE SIGNALS SITE, the eight titles on one line at 1440 (7 Oct 2026): a little tighter than the six of Second Chambers */
body.snt .head-row { gap: 14px; }
body.snt .nav { gap: 0; }
body.snt .nav-btn, body.snt .nav-link { font-size: 14px; padding: 0 7px; letter-spacing: 0; }
body.snt .brand { margin-right: 4px; }
/* below 1320 the eight titles do not hold one line beside the red wordmark: the Signals site goes to the burger and the drawer there (Second Chambers at 1100) */
@media (max-width: 1320px) { body.snt .nav { display: none; } body.snt .head .burger { display: inline-flex; } body.snt .brand.brand-text .wm { font-size: 26px; } }
@media (max-width: 640px) { body.snt .brand.brand-text .wm { font-size: 19px; } }
/* THE DRAWN WORDMARK (7 Oct 2026): a site's wordmark as paths (sns-trial/assets/sns-wordmark-line.svg, drawn by tools/draw-sns-wordmark.py the way the
   stamp set drew SECOND CHAMBERS), set in at the lockup's own height; fill and stroke are currentColor, so .brand-red colours it */
.brand.brand-drawn .wm-svg { display: block; line-height: 0; }
.brand.brand-drawn .wm-svg svg { height: var(--lk-h, 22px); width: auto; display: block; }
.foot-brand.brand-drawn .wm-svg svg { height: 20px; }
@media (max-width: 1100px) { .brand.brand-drawn .wm-svg svg { height: 18px; } }
@media (max-width: 640px) { .brand.brand-drawn .wm-svg svg { height: 15px; } }
/* the red wordmark stays red over the hero too (the airy sheet's at-top rule turns the brand white at a higher specificity) · 1j: the red on black is #E60000, on white #E60000 */
html.ay-at-top body.airy .head .brand.brand-red, html.ay-at-top body.airy .head .brand.brand-red .wm, html.ay-at-top body.airy .head .brand.brand-red svg { color: #E60000; }
body.airy .head .brand.brand-red, body.airy .head .brand.brand-red .wm, body.airy .head .brand.brand-red svg, .foot-brand.brand-red svg { color: var(--news, #E60000); }
html.ay-at-top body.airy .head .brand.brand-red svg { color: #E60000; }

/* SHARP (7 Oct 2026, Rania: "CRISP. SOLID. POWERFUL. SHARP."): the shell's buttons, pills and panels lose their rounding */
.btn, .btn-sm, .btn-ink, .btn-line, .btn-aurora, .nav-btn, .nav-link, .head-right .login, .mega, .drawer details summary, .foot .wrap { border-radius: 0 !important; }
.mega-item:hover .ic { background: var(--news); color: #fff; }