/* NOVERINT styles 01/11 — fonts (@font-face) and design tokens.
   Loaded in order by styles.css; the order is the cascade. */

/* Self-hosted, OFL-licensed IBM Plex family. No CDN request, no tracking and
   no layout jump from an unavailable third-party font. Files and licence live
   in app/fonts/. */
@font-face { font-family:"Noverint Sans"; src:url("./fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Noverint Sans"; src:url("./fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"Noverint Sans"; src:url("./fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:"Noverint Sans"; src:url("./fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2"); font-style:normal; font-weight:700 900; font-display:swap; }
@font-face { font-family:"Noverint Display"; src:url("./fonts/IBMPlexSansCondensed-SemiBold-Latin1.woff2") format("woff2"); font-style:normal; font-weight:500 600; font-display:swap; }
@font-face { font-family:"Noverint Display"; src:url("./fonts/IBMPlexSansCondensed-Bold-Latin1.woff2") format("woff2"); font-style:normal; font-weight:700 900; font-display:swap; }
@font-face { font-family:"Noverint Mono"; src:url("./fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); font-style:normal; font-weight:400 500; font-display:swap; }
@font-face { font-family:"Noverint Mono"; src:url("./fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2"); font-style:normal; font-weight:600 900; font-display:swap; }

/* NOVERINT — Forward Studio visual system (refinement v4).
   Young institutional confidence outside, operational certainty inside.
   aubergine ink · cool white work surfaces (Phase 11: no cream) · signal orange = change/action
   · fresh mint = current/ready/confirmed. A restrained UK-inspired
   red/white/blue line is reserved for the NOVERINT wordmark. Colour is never the only
   carrier of a status — icon, text and shape carry it too.

   Token layers:
     1. raw palette        — the four colour worlds + neutrals
     2. semantic roles     — what a token MEANS (canvas, paper, text, signal…)
     3. scale primitives   — spacing (4/8), radius (3 steps), shadow (3 steps)
   Legacy P0–P3 token names are kept as aliases so the engine shell is untouched.
*/

:root {
  /* 1. raw palette ------------------------------------------------------ */
  --night: #19131f;          /* aubergine ink / high-focus surfaces        */
  --night-2: #241a2c;        /* raised panel on the shell                  */
  --night-3: #30233a;        /* popover / nested panel on the shell        */
  --paper: #ffffff;          /* readable content surface (Phase 11: never cream) */
  --paper-2: #f4f6f9;        /* page ground behind paper                   */
  --paper-sunk: #e3e8ef;     /* recessed field / well                      */
  --ink: #1b1720;            /* primary text on paper                      */
  --chalk: #f4f6f9;          /* primary text on the shell                  */
  --chalk-2: #d4cbd7;        /* secondary text on the shell (≥ AA)         */
  --chalk-3: #aea4b2;        /* metadata / mono on the shell (≥ AA body)   */
  --hair-dark: rgba(247,249,250,.18); /* hairline on the shell           */
  --coral: #ff5a3d;          /* signal orange: change · reopened · action  */
  --coral-deep: #b6312d;     /* signal text/detail on paper                */
  --coral-soft: #ff765f;     /* action hover                               */
  --electric: #78d6b4;       /* fresh mint: current · ready · confirmed    */
  --electric-ink: #102019;   /* text on a mint surface                     */
  --amber-on-dark: #f2bd69;  /* needs-attention text/detail on the shell   */
  --critical-on-dark: #ff9687;/* critical / blocked detail on the shell    */
  --union-red: #c8102e;      /* British signal red; brand detail only     */
  --union-blue: #1b365d;     /* heritage navy; never a full-page surface  */

  /* 2. semantic roles — 16 legacy P0–P3 tokens kept at their exact hex
        (visual-token contract in theme-tokens.js) ---------------------- */
  --surface: #f4f6f9;
  --surface-raised: #ffffff;
  --surface-sunk: #e3e8ef;
  --ink-soft: #5b5560;
  --line: #cbc2ca;
  --accent: #b6312d;
  --accent-ink: #ffffff;
  --pine: #2d6b57;
  --attention: #7d4b06;
  --focus: #516de8;                    /* ≥ 3:1 on night AND paper        */
  --ink-strong: #19131f;
  --oxblood: #b6312d;
  --oxblood-ink: #ffffff;
  --brass-ink: #6e4e0f;
  --brass-line: #a17b32;
  --hair: var(--line);
  --paper: var(--surface-raised);
  --paper-2: var(--surface);
  --paper-sunk: var(--surface-sunk);
  --chalk-dim: var(--chalk-2);
  --amber: var(--attention);
  --critical: var(--oxblood);
  --focus-ring: var(--focus);
  --blue: var(--focus);               /* no decorative blue — focus only */

  /* 3. scale primitives --------------------------------------------- */
  --font-display: "Noverint Display", "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, "Times New Roman", serif;
  --font-sans: "Noverint Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Noverint Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;

  /* radius — 3 steps: control, panel, hero (+ pill) */
  --r-control: .45rem;
  --r-panel: .75rem;
  --r-hero: 1rem;
  --r-pill: 999px;
  --radius: var(--r-control);   /* legacy alias */
  --radius-lg: var(--r-panel);  /* legacy alias */

  /* shadow — 3 steps: panel, hero, dialog */
  --shadow-panel: 0 1px 2px rgba(25,19,31,.05), 0 14px 34px rgba(25,19,31,.08);
  --shadow-hero: 0 26px 70px rgba(16,10,20,.24);
  --shadow-dialog: 0 32px 80px rgba(16,10,20,.52);
  --shadow: var(--shadow-hero); /* legacy alias */

  --max: 1480px;
  --ease: cubic-bezier(.2,.75,.2,1);
  --tap: .16s var(--ease);
  --enter: .62s var(--ease);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- Phase 11 "Seal" identity (docs/design/2026-09-27-seal §2) over the Phase 10 layout ----------
   Internal design-system name: Signal Room. A cool paper — never cream or
   beige. Three states only: sealed (lime fill, ink text), broken (void pink,
   the only pink) and not sealed yet (dashed grey). Small white text on pink
   sits on --nv-void-strong (4.8:1), never on --nv-void (3.6:1); small pink
   text uses --nv-void-ink. Self-hosted from app/fonts/ (SIL OFL 1.1 —
   OFL-SchibstedGrotesk.txt, OFL-GeistMono.txt, OFL-InstrumentSerif.txt). No
   font host, no CDN. The raw values live on :root as --nv-*; the redesign's
   surfaces carry the class .nv, which maps them to the spec's short names.
   Scoping them keeps the rollback shells (?workspace=v2 / v1) on their own
   tokens. Every state also has a text label; colour is never the only carrier. */
@font-face { font-family:"Schibsted Grotesk"; src:url("./fonts/SchibstedGrotesk-Variable-Latin.woff2") format("woff2"); font-style:normal; font-weight:400 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("./fonts/GeistMono-400-Latin.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("./fonts/GeistMono-500-Latin.woff2") format("woff2"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("./fonts/GeistMono-600-Latin.woff2") format("woff2"); font-style:normal; font-weight:600 900; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("./fonts/InstrumentSerif-400-Latin.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("./fonts/InstrumentSerif-400-Italic-Latin.woff2") format("woff2"); font-style:italic; font-weight:400; font-display:swap; }

:root {
  --nv-bg: #F4F6F9;       /* paper — the page */
  --nv-rail: #0B0D12;     /* Studio sidebar: dark ink */
  --nv-surface: #FFFFFF;  /* cards */
  --nv-ink: #0B0D12;      /* text, dark panels, primary buttons */
  --nv-ink-2: #151922;    /* cards on dark */
  --nv-ink-line: #2A2F3A; /* borders on dark */
  --nv-text-2: #3A414C;   /* body copy on paper */
  --nv-muted: #545B66;    /* meta and mono labels (AA on paper and white) */
  --nv-line: #DCE2EA;     /* card borders */
  --nv-line-strong: #9AA4B2; /* field borders, "not sealed / not checked" dashes */
  --nv-line-dash: #C3CBD6; /* light dashed states */
  --nv-guilloche: #D3DBE5; /* background wave lines */
  --nv-void: #FF2E63;     /* broken seal, VOID, "Needs you" count — the only pink; graphics, display type, ink text */
  --nv-void-tint: #FFE3EA; /* struck-through old values, "being fixed" chips */
  --nv-void-ink: #B0103F; /* small pink text on white or void-tint (AA) */
  --nv-void-strong: #E0114A; /* fill behind small white text (4.8:1) */
  --nv-sealed: #C8FF00;   /* sealed · intact · done — with ink text only */
  --nv-quiet: #EEF2F6;    /* "not sealed yet" chip fill */
  --nv-silver: linear-gradient(135deg, #F4F6FA, #C7CFDA 45%, #EEF1F6 60%, #B9C2CF);
  --nv-holo: conic-gradient(#C8FF00, #00D4FF, #8B5CFF, #FF3EA5, #FFE14D, #C8FF00);
  /* Phase 10 names kept as aliases, re-pointed at the three states */
  --nv-lime: var(--nv-sealed);  /* still matches · sealed · done */
  --nv-pink: var(--nv-void);    /* changed since approval · broken */
  --nv-cyan: var(--nv-quiet);   /* new · not sealed yet */
  --nv-sun: var(--nv-void-tint); /* waiting on someone else · being fixed */
  --nv-night: #0B0D12;    /* dark cards and bars */
  --nv-night-2: #151922;  /* raised panel on a dark card */
  --nv-night-text: #C9D0DA; /* secondary text on dark (≥ 4.5:1) */
  --nv-night-muted: #9AA4B2; /* mono labels on dark (≥ 4.5:1) */
  --nv-focus: #2F5BFF;    /* focus ring (≥ 3:1 on paper, white and ink-adjacent fills) */
  --nv-font: "Schibsted Grotesk", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nv-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --nv-serif: "Instrument Serif", Georgia, "Times New Roman", serif; /* heritage voice, sparingly; never for controls */
  --nv-radius-card: 20px;
  --nv-radius-lg: 24px;
  --nv-radius-section: 40px;
  --nv-radius-field: 12px;
  --nv-pill: 999px;
  --nv-target: 44px;
  /* headline letter-spacing with the real font (Schibsted Grotesk; review fix 5): −0.03em at 48 px and up,
     −0.02em below — tighter closes the word spaces ("1seal"); badges and chips are 0 or positive */
  --nv-track-display: -0.03em;
  --nv-track: -0.02em;
  --nv-word: 0.08em;           /* display word spacing: the font's space is narrow at weight 900 */
  --nv-t-fast: .2s;
  --nv-t-slow: .4s;
}
.nv {
  --bg: var(--nv-bg); --paper: var(--nv-bg); --rail: var(--nv-rail); --surface: var(--nv-surface); --ink: var(--nv-ink);
  --ink-2: var(--nv-ink-2); --ink-line: var(--nv-ink-line); --text-2: var(--nv-text-2);
  --muted: var(--nv-muted); --line: var(--nv-line); --line-dash: var(--nv-line-dash); --guilloche: var(--nv-guilloche);
  --void: var(--nv-void); --void-tint: var(--nv-void-tint); --void-ink: var(--nv-void-ink); --void-strong: var(--nv-void-strong);
  --sealed: var(--nv-sealed); --silver: var(--nv-silver); --holo: var(--nv-holo);
  --lime: var(--nv-lime); --pink: var(--nv-pink); --cyan: var(--nv-cyan); --sun: var(--nv-sun);
  font-family: var(--nv-font);
  color: var(--nv-ink);
}
@media (prefers-reduced-motion: reduce) {
  .nv, .nv * { --nv-t-fast: 0s; --nv-t-slow: 0s; }
}

/* NOVERINT styles 02/11 — base: resets, accessibility helpers, wordmark, type roles, buttons, motion.
   Loaded in order by styles.css; the order is the cascade. */

/* keep in-page anchor targets clear of the sticky landing header */
.landing-page [id] { scroll-margin-top: 90px; }
body { margin: 0; color: var(--ink); background: var(--surface); font: 400 16px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; }
body { font-kerning:normal; font-synthesis:none; text-rendering:optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1,h2,h3,h4,p { margin-top: 0; }
h1,h2,h3,h4 { color: inherit; }
figure { margin: 0; }
em { font-family: var(--font-serif); font-weight: 400; }
code,.mono { font-family: var(--font-mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* accessible-only helpers */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .6rem .9rem; background: var(--electric); color: var(--electric-ink); font: 700 .8rem/1 var(--font-mono); text-decoration: none; transform: translateY(-160%); transition: transform var(--tap); }
.skip-link:focus-visible { transform: none; }

/* ---------- wordmark: unboxed typographic NOVERINT with a restrained
   UK red→white→blue signature line. The name never sits in a colour box; the
   descriptor may drop on very small screens, the name never does. Same
   proportions in header, start and Studio. ---------- */
.wordmark { display: inline-grid; grid-template-columns:auto auto; align-items:center; gap:.55rem; color:inherit; text-decoration:none; white-space:nowrap; }
.wordmark b { position:relative; padding:.18rem 0 .34rem; color:inherit; font:850 1rem/1 var(--font-display); letter-spacing:.06em; }
.wordmark b::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(to bottom,var(--union-red) 0 33%,var(--chalk) 33% 66%,var(--union-blue) 66% 100%); box-shadow:0 0 0 1px rgba(237,240,245,.09); transition:filter var(--tap), height var(--tap); }
.wordmark:hover b::after,.wordmark:focus-visible b::after { filter:saturate(1.15) brightness(1.08); height:3px; }
.wordmark span { color:var(--chalk-dim); font:700 .7rem/1.15 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.eyebrow,.section-index,.signal,.dialog-kicker { font:700 .75rem/1.25 var(--font-mono); letter-spacing:.11em; text-transform:uppercase; }
.eyebrow { color: var(--accent); }
.signal { display: flex; align-items: center; gap: .55rem; color: var(--chalk-dim); }
.signal span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--electric); box-shadow: 0 0 0 .28rem rgba(120,214,180,.14); }
.lead { font-size: clamp(1.05rem,1.5vw,1.2rem); line-height: 1.6; color: inherit; }
.muted { color: var(--ink-soft); }
.small { font-size: .82rem; }

/* Brand type roles: condensed display for statements and wayfinding, calm
   grotesk for reading, mono only for evidence, versions and system facts. */
:is(.hero h1,.section-head h2,.feature-copy h2,.ai-answer h2,.agency-intro h2,
    .security-mark,.security-copy h2,.tutorial-head h2,.final-cta h2,
    .access-headline,.access-card h1,.access-card h2,.empty h1,.empty h2) {
  font-family:var(--font-display);
  font-stretch:condensed;
  letter-spacing:-.035em;
}
:is(.hero h1,.section-head h2,.feature-copy h2,.ai-answer h2,.agency-intro h2,
    .security-copy h2,.tutorial-head h2,.final-cta h2,.access-headline,
    .access-card h1,.access-card h2) em {
  font-family:var(--font-serif);
  font-weight:400;
}
:is(.lead,.hero-copy > .lead,.section-lead,.feature-copy > p,.answer-grid p,
    .security-list span,.tutorial-head > p,.tutorial-steps p,.final-note) {
  letter-spacing:.002em;
}

/* ---------- button: one component, four intents ----------
   .btn                → tertiary (quiet, outline)
   .btn--primary       → primary on paper (solid critical-red)
   .btn--signal        → primary call-to-action (coral)
   .btn--ghost         → transparent / on the shell
   states: default · hover · active · focus-visible · disabled */
.btn { min-height: 2.65rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid var(--line); border-radius: var(--r-control); padding: .7rem 1.05rem; color: var(--ink); background: var(--surface-raised); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform var(--tap), background var(--tap), border-color var(--tap), color var(--tap), box-shadow var(--tap); }
.btn:hover { transform: translateY(-1px); border-color: currentColor; }
.btn:active { transform: translateY(0); }
.btn--signal { background: var(--coral); color: var(--night); border-color: var(--coral); box-shadow: none; }
.btn--signal:hover { background: var(--coral-soft); border-color: var(--coral-soft); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: #9d2a2c; border-color: #9d2a2c; }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--sm { min-height: 2.1rem; padding: .42rem .72rem; font-size: .78rem; }
.btn:disabled,.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Controlled kinetic signal: motion explains entry, progress and state change.
   Content remains fully visible without JS; .motion-ready is added by each
   page entry module and the reduced-motion switch below neutralises it. */
.motion-ready .hero-copy > * { animation:signalEnter var(--enter) both; }
.motion-ready .hero-copy > :nth-child(2) { animation-delay:.06s; }
.motion-ready .hero-copy > :nth-child(3) { animation-delay:.12s; }
.motion-ready .hero-copy > :nth-child(4) { animation-delay:.18s; }
.motion-ready .hero-copy > :nth-child(5) { animation-delay:.24s; }
.motion-ready .hero-proof { animation:proofEnter .68s var(--ease) .14s both; }
.motion-ready .access-card { animation:signalEnter var(--enter) both; }
.motion-ready .access-visual .wordmark { animation:signalEnter .45s var(--ease) both; }
.motion-ready .access-message { animation:signalEnter .62s var(--ease) .08s both; }
.motion-ready .access-aside-note { animation:signalEnter .5s var(--ease) .18s both; }
.motion-ready .onboard:not([hidden]) { animation:signalEnter .42s var(--ease) both; }
.motion-ready .app-topbar { animation:shellEnter .38s var(--ease) both; }
@keyframes signalEnter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes shellEnter { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes proofEnter { from { opacity:0; transform:translateY(22px) rotate(2.2deg); } to { opacity:1; transform:rotate(1deg); } }
@keyframes signalPing { 0% { box-shadow:0 0 0 0 rgba(120,214,180,.3); } 100% { box-shadow:0 0 0 .5rem rgba(120,214,180,0); } }

.motion-ready .reveal { opacity:0; transform:translateY(24px); transition:opacity .62s var(--ease), transform .62s var(--ease); transition-delay:calc(var(--reveal-order, 0) * 38ms); }
.motion-ready .reveal.is-visible { opacity:1; transform:none; }

/* boot guard (app/boot-guard.js): shown only when the Studio could not start — explicit colours, it must read on any shell */
.boot-error { max-width: 40rem; margin: 3rem auto; padding: 1.5rem 1.75rem; border-radius: 16px; background: #fff; color: #0a0a0c; border: 2px solid #0a0a0c; font: 400 1rem/1.55 var(--font-sans, system-ui, sans-serif); }
.boot-error h2 { margin: 0 0 .6rem; font-size: 1.4rem; line-height: 1.2; color: #0a0a0c; }
.boot-error p { margin: 0 0 .8rem; color: #0a0a0c; }
.boot-error code { padding: 1px 6px; border-radius: 6px; background: #E9EEF3; color: #0a0a0c; font-family: var(--font-mono, ui-monospace, monospace); }
.boot-error .btn { min-height: 44px; }

/* NOVERINT styles 03/11 — public pages: landing and access/onboarding.
   Loaded in order by styles.css; the order is the cascade. */

/* ---------- landing ---------- */
.landing-page { background: var(--night); color: var(--chalk); overflow-x: clip; }
.site-nav { height: 74px; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: clamp(1.25rem,3vw,2.5rem); padding: 0 clamp(1rem,3vw,3rem); background: rgba(25,19,31,.94); border-bottom: 1px solid var(--hair-dark); backdrop-filter: blur(18px); }
.page-progress { --page-progress:0; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:linear-gradient(to bottom,var(--union-red) 0 33%,var(--chalk) 33% 66%,var(--union-blue) 66% 100%); box-shadow:0 1px 0 rgba(237,240,245,.1); transform:scaleX(var(--page-progress)); transform-origin:left; transition:transform .1s linear; pointer-events:none; }
.site-nav .wordmark { margin-right: auto; }
.site-nav nav { display: flex; align-items: center; gap: clamp(1rem,2.4vw,2.25rem); }
.site-nav nav a { color: var(--chalk-dim); font: 650 .72rem/1 var(--font-mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.site-nav nav a:hover { color: var(--chalk); }
.site-nav nav a[aria-current="location"] { color:var(--chalk); text-decoration:underline; text-decoration-color:var(--coral); text-decoration-thickness:2px; text-underline-offset:.55rem; }
.site-nav nav a:focus-visible { outline-offset: 6px; }
.nav-cta { padding: .68rem .95rem; border-radius: var(--r-control); background: var(--chalk); color: var(--night); font-size: .8rem; font-weight: 750; text-decoration: none; }
.nav-cta:hover { background: #fff; }
.nav-toggle { display: none; color: var(--chalk); border-color: rgba(255,255,255,.28); background: transparent; }

.hero { max-width: var(--max); min-height: calc(100vh - 74px); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(400px,.95fr); gap: clamp(2.5rem,6vw,7rem); align-items: center; padding: clamp(4rem,8vw,8rem) clamp(1rem,4vw,4rem); overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 12ch; margin: 1.4rem 0 1.8rem; font: 780 clamp(3.5rem,7vw,7rem)/.9 var(--font-sans); letter-spacing: -.065em; text-transform: none; }
.hero h1 em { display: block; color: var(--coral); font:italic 650 .83em/1 var(--font-sans); text-transform:none; letter-spacing:-.045em; }
.hero .lead { max-width: 54ch; color: var(--chalk-dim); }
.cta-row { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.text-link { color: var(--chalk); font-weight: 700; text-underline-offset: .3rem; }
.trust { margin-top: 1.4rem; max-width: 60ch; color: var(--chalk-3); font: .74rem/1.6 var(--font-mono); letter-spacing: .01em; }

.hero-proof { position: relative; background: var(--paper); color: var(--ink); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-panel); box-shadow: var(--shadow-hero); transform:none; transition:transform .32s var(--ease), box-shadow .32s var(--ease); }
.hero-proof::before { content:""; position:absolute; inset:-9px 9px 9px -9px; border:1px solid rgba(255,255,255,.11); border-radius: var(--r-panel); z-index:-1; }
.proof-top,.proof-foot { display:flex; justify-content:space-between; gap:1rem; padding:.9rem 1.15rem; background:var(--night-2); color:var(--chalk); font:700 .75rem/1.3 var(--font-mono); letter-spacing:.06em; }
.proof-top { border-radius: var(--r-panel) var(--r-panel) 0 0; }
.live-dot::before { content:""; display:inline-block; width:.45rem; height:.45rem; margin-right:.45rem; border-radius:50%; background:var(--electric); }
.motion-ready .live-dot::before { animation:signalPing .72s var(--ease) .8s 2; }
.proof-body { padding: 1.4rem; }
.version { padding: 1rem; border:1px solid var(--line); border-radius: var(--r-control); background:var(--surface-raised); }
.version--old { opacity:.66; }
.version--new { border:2px solid var(--coral-deep); }
.version-label { display:flex; align-items:center; gap:.4rem; font:700 .75rem/1 var(--font-mono); letter-spacing:.08em; color:var(--ink-soft); }
.version-label::before { content:""; width:.4rem; height:.4rem; border-radius:50%; background:currentColor; }
.version--new .version-label { color:var(--coral-deep); }
.version p { margin:.6rem 0 0; font-size:1rem; line-height:1.45; }
.version mark { background:var(--electric); color:var(--electric-ink); padding:0 .12em; border-radius:2px; }
.delta-arrow { height:2rem; display:grid; place-items:center; color:var(--coral-deep); font-weight:900; }
.proof-findings { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-top:0; }
.proof-findings div { display:grid; gap:.15rem; padding:.9rem; border-right:1px solid var(--line); }
.proof-findings div:last-child { border:0; }
.proof-findings strong { font:800 1.25rem/1 var(--font-display); }
.proof-findings span { color:var(--ink-soft); font-size:.75rem; }
.proof-findings .proof-status { background:var(--coral); color:var(--night); }
.proof-findings .proof-status strong,.proof-findings .proof-status span { color:var(--night); }
.proof-findings .proof-status::before { content:"⚑ "; }
.proof-foot { justify-content:flex-start; flex-wrap:wrap; gap:.5rem; background:var(--surface-sunk); color:var(--ink-soft); border-radius:0 0 var(--r-panel) var(--r-panel); }
.proof-foot span { padding:.25rem .45rem; border:1px solid var(--line); border-radius:2px; }

/* capability strip — calm, not a moving ticker; a labelled list of what the product does */
.ticker { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.4rem; padding:1rem clamp(1rem,4vw,3rem); background:var(--night-2); color:var(--chalk-2); border-block:1px solid var(--hair-dark); font:700 .7rem/1.3 var(--font-mono); letter-spacing:.08em; }
.ticker span { white-space:nowrap; }
.ticker i { font-style:normal; color:var(--coral); }
.section-index { color:var(--coral-deep); }
/* measured on the painted background (uk/tests/e2e/contrast-and-clipping.js):
   coral-deep reads 2.75:1 on the night sections and the bright coral 2.98:1
   on the paper display headings — both under AA. Swap per surface. */
.workflow .section-index,.security .section-index { color:var(--coral); }
.legal-page .wordmark span { color:var(--ink-soft); }

.statement { padding:clamp(4.5rem,9vw,9rem) clamp(1rem,5vw,5rem); background:var(--paper-2); color:var(--ink); display:grid; grid-template-columns:180px minmax(0,1fr); gap:1.5rem 5rem; }
.statement-copy { max-width:60ch; }
.statement .kicker { margin:0 0 1.25rem; font:italic 1.3rem/1.3 var(--font-serif); color:var(--accent); }
.statement h2 { margin:0; font:600 clamp(2rem,3.8vw,3.6rem)/1.12 var(--font-serif); letter-spacing:-.01em; }
.statement-copy > p:last-child { max-width:52ch; margin:1.75rem 0 0; font-size:1.05rem; color:var(--ink-soft); }
.gap-diagram { grid-column:2; margin-top:3rem; display:flex; flex-wrap:wrap; align-items:stretch; gap:1px; border:1px solid var(--line); background:var(--line); border-radius:var(--r-control); overflow:hidden; }
.gap-diagram div { flex:1 1 130px; min-height:104px; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; background:var(--paper); }
.gap-diagram div.hot { background:var(--coral); color:var(--night); }
.gap-diagram b { font:800 1rem/1 var(--font-display); letter-spacing:.02em; }
.gap-diagram span { font: .7rem/1.3 var(--font-mono); color:var(--ink-soft); }
.gap-diagram .hot span { color:var(--night); }
.gap-diagram i { flex:0 0 2rem; display:grid; place-items:center; font-style:normal; color:var(--ink-soft); background:var(--paper); }
.gap-diagram i.broken { color:var(--coral-deep); font-size:1.4rem; }

.workflow { padding:clamp(4.5rem,8vw,8rem) clamp(1rem,5vw,5rem); background:var(--night-2); }
.section-head { max-width:var(--max); margin:0 auto 3rem; display:grid; grid-template-columns:180px 1fr; gap:1.25rem 5rem; align-items:start; }
.section-head h2 { margin:0; color:var(--chalk); font:760 clamp(2.5rem,4.2vw,4.4rem)/.98 var(--font-sans); letter-spacing:-.05em; text-transform:none; }
.section-head h2 em { color:var(--coral); text-transform:none; }
.section-head .section-lead { margin:1rem 0 0; grid-column:2; max-width:52ch; color:var(--chalk-2); }
.workflow-steps { max-width:var(--max); margin:0 auto; padding:0; list-style:none; border-top:1px solid var(--hair-dark); }
.workflow-steps li { display:grid; grid-template-columns:64px minmax(0,34%) 1fr; gap:1.25rem 2rem; align-items:baseline; padding:1.4rem 1rem; border-bottom:1px solid var(--hair-dark); color:var(--chalk); transition:background var(--tap),padding var(--tap); }
.workflow-steps li > span { color:var(--chalk-3); font:700 .75rem/1.6 var(--font-mono); }
.workflow-steps h3 { margin:0; font:700 clamp(1.25rem,2vw,1.8rem)/1.1 var(--font-sans); letter-spacing:-.02em; text-transform:none; }
.workflow-steps p { margin:0; color:var(--chalk-2); }
.workflow-steps li.active { position:relative; background:var(--night); color:var(--chalk); padding-left:1.5rem; }
.workflow-steps li.active::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(to bottom,var(--union-red) 0 33%,var(--chalk) 33% 66%,var(--union-blue) 66% 100%); }
.workflow-steps li.active > span { color:var(--coral-soft); }
.workflow-steps li.active p { color:var(--chalk-2); }
.workflow-steps li.active h3::after { content:" — happening now"; font:700 .7rem/1 var(--font-mono); letter-spacing:.06em; vertical-align:middle; }

.product-system { background:var(--paper-2); color:var(--ink); }
.system-intro { display:grid; grid-template-columns:180px minmax(0,620px); gap:1.25rem 5rem; align-items:start; padding:2rem clamp(1rem,6vw,7rem); border-bottom:1px solid var(--line); background:var(--paper); }
.system-intro p { margin:0; color:var(--ink-soft); font-size:1rem; }
.system-feature { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,7rem); align-items:center; padding:clamp(4rem,8vw,8rem) clamp(1rem,6vw,7rem); border-bottom:1px solid var(--line); overflow:hidden; }
.system-feature:nth-child(2) { background:var(--paper); }
.system-feature:nth-child(3) { background:#DBE1EA; color:var(--night); }
.feature-copy { max-width:56ch; }
.feature-no { display:block; margin-bottom:1.5rem; font:700 .72rem/1 var(--font-mono); }
.feature-copy h2 { margin:.6rem 0 1.25rem; font:760 clamp(2.3rem,4vw,4.1rem)/.98 var(--font-sans); letter-spacing:-.05em; text-transform:none; }
.feature-copy h2 em { text-transform:none; color:var(--coral-deep); }
.system-feature:nth-child(3) .feature-copy h2 em { color:var(--night); font-style:italic; }
.feature-copy > p:last-child { max-width:50ch; color:var(--ink-soft); }
.system-feature:nth-child(3) .feature-copy > p:last-child { color:var(--night); }

/* dependency map — a readable input → check → status diagram, not a decorative ellipse */
.dependency-map { display:grid; gap:.9rem; padding:1.5rem; background:var(--night); border-radius:var(--r-panel); box-shadow:var(--shadow-hero); color:var(--chalk); }
.dependency-map .dm-row { display:grid; gap:.6rem; }
.dependency-map .dm-label { font:700 .75rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-3); }
.dependency-map .dm-nodes { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.node { min-width:0; padding:.75rem .85rem; background:var(--paper); color:var(--night); border:1px solid var(--line); border-radius:var(--r-control); font:700 .75rem/1.4 var(--font-mono); }
.node b { display:block; margin-top:.25rem; color:var(--pine); }
.node.hot { background:var(--coral); border-color:var(--coral); }
.node.hot b { color:var(--night); }
.node.stale { background:var(--electric); border-color:var(--electric); }
.node.stale b { color:var(--electric-ink); }
.dependency-map .dm-link { justify-self:center; color:var(--chalk-3); font-size:1rem; }

.evidence-ticket { max-width:520px; background:var(--night); color:var(--chalk); padding:1.75rem; border-radius:var(--r-panel); box-shadow:var(--shadow-hero); transform:none; }
.ticket-meta,.manifest-header { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--hair-dark); font:700 .75rem/1 var(--font-mono); letter-spacing:.06em; }
.ticket-meta span:last-child { color:var(--electric); }
.evidence-ticket > p { margin:2rem 0; font:400 1.65rem/1.25 var(--font-serif); }
.ticket-fields { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; padding:1rem 0; border-top:1px solid var(--hair-dark); font-size:.78rem; }
.ticket-fields span { color:var(--chalk-2); }
.evidence-ticket button { width:100%; margin-top:1rem; padding:.8rem; border:0; border-radius:var(--r-control); background:var(--electric); color:var(--electric-ink); font-weight:800; }
.evidence-ticket button:disabled { opacity:.7; cursor:not-allowed; }
.manifest-card { background:var(--paper); color:var(--night); padding:1.6rem; border-radius:var(--r-panel); box-shadow:var(--shadow-hero); }
.manifest-header { border-color:var(--line); color:var(--ink-soft); }
.manifest-row { display:flex; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); font-size:.85rem; }
.manifest-row span { color:var(--ink-soft); }
.manifest-row.warn { background:#ECF0F4; margin:0 -.6rem; padding:.9rem .6rem; border-radius:var(--r-control); color:var(--amber); }
.manifest-row.warn span,.manifest-row.warn b { color:var(--amber); }
.manifest-row.warn::before { content:"! "; font-weight:800; }
.manifest-verdict { margin-top:1.5rem; padding:.9rem; border-radius:var(--r-control); background:var(--night); color:var(--chalk); text-align:center; font:800 .8rem/1 var(--font-mono); letter-spacing:.1em; }

.ai-answer { padding:clamp(4.5rem,8vw,8rem) clamp(1rem,5vw,5rem); background:#b9f2df; color:var(--ink); }
.ai-answer h2 { max-width:19ch; margin:1.5rem 0 1rem; font:760 clamp(2.5rem,4.4vw,4.8rem)/.98 var(--font-sans); letter-spacing:-.05em; text-transform:none; }
.answer-lead { max-width:44ch; font:italic clamp(1.25rem,2vw,1.9rem)/1.3 var(--font-serif); }
.answer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:3.5rem; border-top:1px solid rgba(17,22,10,.35); }
.answer-grid > div { padding:1.5rem 1.5rem 1.5rem 0; border-right:1px solid rgba(17,22,10,.35); }
.answer-grid > div + div { padding-left:1.5rem; }
.answer-grid > div:last-child { border-right:0; }
.answer-grid span { font:700 .7rem/1 var(--font-mono); }
.answer-grid p { margin:1.25rem 0 0; }

.agency { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,5rem); padding:clamp(4.5rem,8vw,8rem) clamp(1rem,5vw,5rem); background:var(--paper-2); color:var(--ink); }
.agency-intro h2 { max-width:14ch; margin:1.25rem 0; font:760 clamp(2.5rem,4.2vw,4.4rem)/.98 var(--font-sans); letter-spacing:-.05em; text-transform:none; }
.agency-intro > p { max-width:46ch; color:var(--ink-soft); }
.roles { border-top:1px solid var(--line); }
.role { display:grid; grid-template-columns:2.8rem 1fr; gap:1.25rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.role > span { width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:50%; background:var(--night); color:var(--electric); font:700 .75rem/1 var(--font-mono); }
.role b { font-size:1.05rem; }
.role p { margin:.25rem 0 0; color:var(--ink-soft); }

@media (hover:hover) and (pointer:fine) {
  .hero-proof:hover { transform:translateY(-4px); box-shadow:0 30px 78px rgba(12,13,11,.28); }
  .workflow-steps li:not(.active):hover { background:rgba(255,255,255,.035); padding-left:1.35rem; }
  .node { transition:transform var(--tap), border-color var(--tap), box-shadow var(--tap); }
  .node:hover { transform:translateY(-3px); border-color:var(--coral); box-shadow:0 8px 24px rgba(0,0,0,.22); }
  .role { transition:transform var(--tap), border-color var(--tap); }
  .role:hover { transform:translateX(.35rem); border-color:var(--coral-deep); }
  .btn span[aria-hidden="true"],.nav-cta span[aria-hidden="true"],.text-link span[aria-hidden="true"] { display:inline-block; transition:transform var(--tap); }
  .btn:hover span[aria-hidden="true"],.nav-cta:hover span[aria-hidden="true"],.text-link:hover span[aria-hidden="true"] { transform:translate(.18rem,-.12rem); }
}

.security { display:grid; grid-template-columns:.7fr 1.3fr; background:var(--night-2); color:var(--chalk); }
.security-mark { display:grid; place-content:center; padding:clamp(2.5rem,5vw,3rem); background:var(--coral); color:var(--night); border-right:1px solid rgba(25,19,31,.18); font:800 clamp(3rem,6vw,6rem)/.84 var(--font-sans); letter-spacing:-.06em; text-align:center; }
.security-mark span { display:block; margin-top:1.25rem; color:var(--night); font:700 .78rem/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.security-copy { padding:clamp(3rem,7vw,7rem); }
.security-copy h2 { margin:1.5rem 0 2.25rem; font:760 clamp(2.3rem,3.8vw,4rem)/.98 var(--font-sans); text-transform:none; letter-spacing:-.05em; }
.security-copy h2 em { color:var(--coral); text-transform:none; }
.security-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--hair-dark); }
.security-list li { display:grid; grid-template-columns:160px 1fr; gap:2rem; padding:1.1rem 0; border-bottom:1px solid var(--hair-dark); }
.security-list b::before { content:"— "; color:var(--coral); }
.security-list span { color:var(--chalk-2); }

/* A real first-run path, placed at the end of the narrative rather than
   repeating feature claims. Each card maps to an existing product action. */
.tutorial { padding:clamp(4rem,8vw,7rem) clamp(1rem,4vw,4rem); background:var(--paper); color:var(--ink); }
.tutorial-head { max-width:var(--max); margin:0 auto clamp(2rem,5vw,4rem); display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(2rem,6vw,7rem); align-items:end; }
.tutorial-head h2 { max-width:12ch; margin:1rem 0 0; font:780 clamp(2.8rem,5.6vw,5.7rem)/.92 var(--font-sans); letter-spacing:-.06em; text-transform:none; }
.tutorial-head h2 em { color:var(--union-red); text-transform:none; }
.tutorial-head > p { max-width:48ch; margin:0; color:var(--ink-soft); font-size:1.05rem; }
.tutorial-steps { max-width:var(--max); margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; background:var(--line); gap:1px; }
.tutorial-steps li { min-height:250px; display:grid; grid-template-rows:auto auto 1fr; gap:1rem; padding:1.35rem; background:var(--surface-raised); }
.tutorial-steps li.is-active { background:var(--night); color:var(--chalk); box-shadow:inset 0 3px 0 var(--union-red),inset 0 4px 0 var(--chalk),inset 0 5px 0 var(--union-blue); }
.tutorial-step-no { color:var(--union-red); font:800 .78rem/1 var(--font-mono); letter-spacing:.1em; }
.tutorial-steps li.is-active .tutorial-step-no { color:var(--chalk); }
.tutorial-steps h3 { margin:0; font:750 1.05rem/1.15 var(--font-sans); letter-spacing:-.015em; text-transform:none; }
.tutorial-steps p { align-self:end; margin:0; color:var(--ink-soft); font-size:.9rem; }
.tutorial-steps li.is-active p { color:var(--chalk-2); }
.tutorial-action { max-width:var(--max); margin:1.5rem auto 0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem 1.4rem; border-radius:var(--r-panel); background:var(--surface-sunk); }
.tutorial-action p { margin:0; color:var(--ink-soft); }
.tutorial-action b { color:var(--ink); }
.tutorial-action .btn { flex:0 0 auto; }

.final-cta { padding:clamp(4rem,8vw,8rem) clamp(1rem,4vw,3rem); background:var(--coral); color:var(--night); }
.final-cta-inner { max-width:64ch; margin:0 auto; text-align:center; }
.final-cta > .final-cta-inner > p:first-child { font:800 .72rem/1 var(--font-mono); letter-spacing:.12em; }
.final-cta h2 { margin:1.5rem auto 1.25rem; font:780 clamp(2.7rem,5.8vw,5.7rem)/.94 var(--font-sans); letter-spacing:-.06em; text-transform:none; }
.final-cta .final-note { max-width:48ch; margin:0 auto 2rem; color:var(--night); font-size:.95rem; }
.final-cta .btn { background:var(--night); color:var(--chalk); border-color:var(--night); box-shadow:none; }
.final-cta .btn:hover { background:#070509; border-color:#070509; }
.site-footer { display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:2rem 3rem; padding:2.5rem clamp(1rem,4vw,4rem); background:#100b14; color:var(--chalk-2); border-top:1px solid var(--hair-dark); font-size:.78rem; }
.footer-brand { display:grid; gap:.25rem; }
.footer-brand b { color:var(--chalk); }
.site-footer div:nth-child(2) { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; }
.site-footer > * { min-width:0; }
.site-footer a { color:var(--chalk); }
.site-footer a:hover { color:var(--coral); }
.site-footer p { margin:0; }

/* ---------- access / onboarding ----------
   The access screen bridges the expressive public site and the calmer
   workspace: aubergine + warm paper carry the brand, coral identifies the
   single route forward and mint marks current/safe-to-try states. These
   tokens are scoped so the operational workspace remains deliberately calm. */
.start-page {
  --night:#19131f;
  --night-2:#241a2c;
  --night-3:#30233a;
  --paper:#F9FAFC;
  --paper-2:#ECF0F5;
  --paper-sunk:#DBE1EB;
  --surface:#ECF0F5;
  --surface-raised:#FDFDFE;
  --surface-sunk:#ECF0F5;
  --ink:#1b1720;
  --ink-soft:#5b5560;
  --line:#d7cdd5;
  --chalk:#F7F9FA;
  --chalk-2:#d4cbd7;
  --chalk-3:#aea4b2;
  --hair-dark:rgba(247,249,250,.18);
  --electric:#78d6b4;
  --electric-ink:#102019;
  --focus:#516de8;
  min-height:100vh;
  background:var(--night);
  color:var(--chalk);
}
.access-page { min-height:100vh; display:grid; grid-template-columns:minmax(340px,.82fr) minmax(480px,1.18fr); }
.access-visual { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:clamp(1.5rem,4vw,4rem); background:var(--night-2); overflow:hidden; }
.access-visual::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.045) calc(25% - 1px) 25%); }
.access-visual::after { content:""; position:absolute; left:clamp(1.5rem,4vw,4rem); right:clamp(1.5rem,4vw,4rem); bottom:22%; height:1px; background:var(--hair-dark); }
.access-message { position:relative; z-index:1; }
.access-headline { margin:1.25rem 0 2.25rem; font:780 clamp(2.7rem,4.6vw,4.6rem)/.94 var(--font-sans); letter-spacing:-.055em; text-transform:none; }
.access-headline em { color:var(--electric); text-transform:none; }
.mini-flow { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font:700 .75rem/1 var(--font-mono); }
.mini-flow span { padding:.6rem .7rem; border:1px solid var(--hair-dark); border-radius:var(--r-control); }
.mini-flow span.hot { background:var(--electric); border-color:var(--electric); color:var(--electric-ink); }
.mini-flow i { font-style:normal; color:var(--chalk-3); }
.motion-ready .mini-flow span,.motion-ready .mini-flow i { animation:signalEnter .42s var(--ease) both; }
.motion-ready .mini-flow > :nth-child(2) { animation-delay:.05s; }
.motion-ready .mini-flow > :nth-child(3) { animation-delay:.1s; }
.motion-ready .mini-flow > :nth-child(4) { animation-delay:.15s; }
.motion-ready .mini-flow > :nth-child(5) { animation-delay:.2s; }
.motion-ready .mini-flow > :nth-child(6) { animation-delay:.25s; }
.motion-ready .mini-flow > :nth-child(7) { animation-delay:.3s; }
.access-aside-note { position:relative; z-index:1; margin:0; color:var(--chalk-2); font:.78rem/1.5 var(--font-sans); }
.access-panel { display:grid; place-items:center; padding:clamp(2rem,6vw,6rem) clamp(1.25rem,5vw,5rem); background:var(--paper); color:var(--ink); }
.access-card { width:min(560px,100%); }
.access-card h1 { margin:.7rem 0 1rem; font:780 clamp(2.5rem,4.2vw,4rem)/.96 var(--font-sans); letter-spacing:-.055em; text-transform:none; }
.access-card h2 { margin:.7rem 0 1rem; font:760 clamp(2.2rem,3.8vw,3.4rem)/.98 var(--font-sans); letter-spacing:-.05em; text-transform:none; }
.access-card .lead { color:var(--ink-soft); }
.access-card > .btn--signal { width:100%; margin:1.25rem 0 .5rem; }
.start-page .btn--signal { background:#ff5a3d; color:#19131f; border-color:#ff5a3d; }
.start-page .btn--signal:hover { background:#ff765f; border-color:#ff765f; }
.access-primary-note { margin:0 0 1.25rem; color:var(--ink-soft); font-size:.8rem; }
.access-divider { display:flex; align-items:center; gap:1rem; margin:1.5rem 0 1rem; color:var(--ink-soft); font:.7rem/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.access-divider::before,.access-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.file-row input { position:absolute; width:1px; height:1px; opacity:0; }
.file-trigger,.sample-button { width:100%; display:grid; grid-template-columns:2.5rem 1fr; gap:.1rem 1rem; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--r-control); background:transparent; color:var(--ink); text-align:left; cursor:pointer; transition:border-color var(--tap), background var(--tap); }
.file-trigger:hover,.sample-button:hover,.file-row input:focus-visible + .file-trigger { border-color:#b6312d; background:var(--surface-raised); }
.file-trigger > span,.sample-button > span { grid-row:1/3; align-self:center; width:2.3rem; height:2.3rem; display:grid; place-items:center; border-radius:var(--r-control); background:var(--night); color:var(--electric); }
.file-trigger small,.sample-button small { color:var(--ink-soft); }
.sample-button { margin-top:.6rem; }
/* private-pilot notice — a plain information card, NOT a sign-in form */
.pilot-card { margin-top:1.5rem; padding:1rem 1.1rem; background:var(--surface-sunk); border:1px solid var(--line); border-left:3px solid #2d6b57; border-radius:var(--r-control); }
.pilot-card .pilot-tag { display:inline-flex; align-items:center; gap:.4rem; color:#2d6b57; font:700 .75rem/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.pilot-card .pilot-tag::before { content:"◔"; }
.pilot-card strong { display:block; margin:.4rem 0 .3rem; font-size:.95rem; }
.pilot-card p { margin:0; color:var(--ink-soft); font-size:.8rem; }
.access-note { margin:1.25rem 0 0; padding:.8rem 0 0; border-top:1px solid var(--line); color:var(--ink-soft); font-size:.78rem; }
.start-page .access-note.small a { display:inline-flex; align-items:center; min-height:32px; padding:.35rem 0; }
.onboard ol { list-style:none; padding:0; margin:1.75rem 0; border-top:1px solid var(--line); }
.onboard li { display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.onboard li > span { color:var(--coral-deep); font:800 .7rem/1.7 var(--font-mono); }
.onboard li p { margin:.25rem 0 0; color:var(--ink-soft); }
.onboard .row { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.text-button { border:0; background:transparent; color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:.3rem; cursor:pointer; }

/* NOVERINT styles 04/11 — workspace layout: top bar, status, integrity chain, panels.
   Loaded in order by styles.css; the order is the cascade. */

/* ---------- workspace: operational certainty, low visual noise ---------- */
.workspace-page { height:100vh; overflow:hidden; background:var(--night); }
.app-frame { height:100vh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; overflow:hidden; }
/* Top bar (Tur 2D-B). One DOM, two arrangements:
   ≥ 901 px  row 1: wordmark · campaign context (name + the one campaign
             status chip) · Queue/Review/Record nav (or the v1 lens switch)
             row 2: the secondary group, right-aligned (Local demo · Guide ·
             Download workspace record · Open workspace · Release manifest ·
             New review). The More trigger is not displayed.
   ≤ 900 px  row 1: wordmark · context (name, status under it) · More
             row 2: the nav, full width
             row 3: the secondary group — only while More is open, in flow,
             so it pushes the content down and never covers the primary. */
.app-topbar { min-height:64px; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; padding:.45rem 1.25rem; background:var(--night); color:var(--chalk); border-bottom:1px solid var(--hair-dark); }
.app-topbar .wordmark { padding-right:1rem; border-right:1px solid var(--hair-dark); }
.app-topbar .context { min-width:0; display:grid; grid-template-columns:auto auto auto; gap:.1rem .7rem; align-items:center; }
.context-label { color:var(--coral); font:700 .7rem/1 var(--font-mono); letter-spacing:.1em; }
.cname { font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34ch; }
.cstatus { display:contents; }
.cmeta { grid-column:2 / span 2; color:var(--chalk-3); font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spacer { flex:1 1 auto; min-width:.5rem; }
/* status chips (left group) — read-only state, separated from the action group */
/* The action row WRAPS. It used to be a horizontal scroll strip, which at
   1440 px hid Download / Open / Release manifest / New review (and at
   1024 px the whole lens switch) off the right edge with no affordance —
   Download is the only way to keep work, so it must always be on screen.
   The lens switch takes its own line below the chips and actions. */
.top-actions { display:contents; }
.top-secondary { flex:1 1 100%; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.4rem; }
.more-trigger { display:none; }
.top-actions .divider { flex:0 0 auto; width:1px; align-self:stretch; margin:.5rem .2rem; background:var(--hair-dark); }
.top-actions .btn { flex:0 0 auto; white-space:nowrap; background:transparent; color:var(--chalk); border-color:var(--hair-dark); }
.top-actions .btn:hover { border-color:var(--chalk); }
.top-actions .btn--key { background:var(--chalk); color:var(--night); border-color:var(--chalk); }
.top-actions .btn--key:hover { background:#fff; border-color:#fff; }
.top-actions .btn--ghost { color:var(--chalk-2); border-color:transparent; }
.top-actions .btn--ghost:hover { color:var(--chalk); border-color:var(--hair-dark); }
.demo-chip,.currency-chip { flex:0 0 auto; min-height:2.35rem; display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .65rem; border:1px solid var(--hair-dark); border-radius:var(--r-control); background:transparent; color:var(--chalk-2); font:700 .75rem/1 var(--font-mono); white-space:nowrap; cursor:pointer; }
/* the campaign status label can be long ("Could not be assessed — specialist review or more information needed"): let it wrap inside the bar instead of forcing a 540 px line (measured at 320/390) */
.currency-chip { flex:0 1 auto; max-width:100%; white-space:normal; text-align:left; line-height:1.25; }
.currency-chip .dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--electric); }
.currency-chip.is-current .dot::after { content:""; }
.currency-chip.is-stale { color:var(--amber-on-dark); border-color:#7a541a; }
.currency-chip.is-stale .dot { width:0; height:0; border-radius:0; border-left:.32rem solid transparent; border-right:.32rem solid transparent; border-bottom:.5rem solid var(--amber-on-dark); background:transparent; }
.demo-pop { position:absolute; z-index:40; right:1rem; top:56px; width:min(370px,calc(100vw - 2rem)); padding:1.2rem; background:var(--night-3); color:var(--chalk-2); border:1px solid var(--hair-dark); border-radius:var(--r-panel); box-shadow:var(--shadow-dialog); }
.demo-pop h4 { color:var(--chalk); margin:0 0 .6rem; }
.demo-pop .warn { margin-top:.8rem; padding:.75rem; background:#2a2119; border-left:3px solid var(--amber-on-dark); border-radius:0 var(--r-control) var(--r-control) 0; color:var(--chalk); }

#app { min-height:0; background:var(--surface); }
.app-body { height:calc(100% - 62px); min-height:0; display:grid; grid-template-columns:250px minmax(0,1fr) 390px; }
.app-body > * { min-height:0; overflow:auto; }
.rail { padding:1.2rem; background:var(--night-2); color:var(--chalk); border-right:1px solid var(--hair-dark); }
.rail h2,.group-title { margin:0 0 .75rem; color:var(--chalk-3); font:700 .75rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.rail-section + .rail-section { margin-top:1.75rem; padding-top:1.2rem; border-top:1px solid var(--hair-dark); }
.asset-list { list-style:none; margin:0 0 .8rem; padding:0; display:grid; gap:.25rem; }
.asset-list button { width:100%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:.5rem; padding:.6rem .7rem; border:1px solid transparent; border-left:3px solid transparent; border-radius:var(--r-control); background:transparent; color:var(--chalk); text-align:left; cursor:pointer; transition:background var(--tap), border-color var(--tap); }
.asset-list button:hover { background:rgba(255,255,255,.06); }
.asset-list button[aria-current="true"] { background:rgba(255,90,61,.14); border-left-color:var(--coral); animation:selectionIn .26s var(--ease) both; }
.asset-list button[aria-current="true"] .a-title { color:var(--chalk); }
@keyframes selectionIn { from { background:rgba(255,90,61,0); } to { background:rgba(255,90,61,.14); } }
.asset-list .a-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset-list .a-tag { font-size:.75rem; }
.rail .btn { width:100%; background:transparent; color:var(--chalk); border-color:var(--hair-dark); }
.rail .small { color:var(--chalk-2) !important; }
.rail .small span:last-child { color:var(--chalk) !important; }
.pill { display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .48rem; border-radius:var(--r-pill); font:700 .75rem/1.3 var(--font-mono); }
.pill::before { font-size:.9em; }
.pill--stale { background:#E1E6EE; color:#6c3500; }
.pill--stale::before { content:"→"; }
.pill--missing { background:#FFE3EA; color:#7c231f; }
.pill--missing::before { content:"!"; }
.pill--ok { background:var(--electric); color:var(--electric-ink); }
.pill--ok::before { content:"✓"; }

/* Review Status vocabulary (core/review-status.js) — one glyph + word per
   recorded state, never colour alone. Kept distinct from the always-live,
   unrecorded instant-preview banner below. */
.pill--status { font:700 .7rem/1.3 var(--font-mono); }
.pill--status[data-state="not_reviewed"] { background:#e6e6ea; color:#3a3a42; }
.pill--status[data-state="not_reviewed"]::before { content:"○"; }
.pill--status[data-state="blocked_missing_input"] { background:#FFE3EA; color:#7c231f; }
.pill--status[data-state="blocked_missing_input"]::before { content:"!"; }
.pill--status[data-state="specialist_review_required"] { background:#e3d9ff; color:#3d2a80; }
.pill--status[data-state="specialist_review_required"]::before { content:"⚑"; }
.pill--status[data-state="reopened_after_change"] { background:#E1E6EE; color:#6c3500; }
.pill--status[data-state="reopened_after_change"]::before { content:"→"; }
.basis-line { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.15rem 0; }
/* key/value rows take their colour from the surface they sit on */
.kv-row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.15rem 0; }
.kv-row .kv-val { text-align:right; }
.rail .kv-row,.rail .kv-block { color:var(--chalk-2); }
.rail .kv-val,.rail .text-button { color:var(--chalk); }
.rail .kv-block .muted { color:var(--chalk-3); }
.review-setup .kv-row { color:var(--ink-soft); }
.review-setup .kv-val { color:var(--ink); }
.pill--status[data-state="changes_requested"] { background:#E1E6EE; color:#6c3500; }
.pill--status[data-state="changes_requested"]::before { content:"↺"; }
.pill--status[data-state="needs_human_decision"] { background:#EEF2F6; color:#5a4600; }
.pill--status[data-state="needs_human_decision"]::before { content:"●"; }
.pill--status[data-state="review_recorded"] { background:var(--electric); color:var(--electric-ink); }
.pill--status[data-state="review_recorded"]::before { content:"✓"; }
.pill--status[data-state="ready_for_handover"] { background:var(--electric); color:var(--electric-ink); }
.pill--status[data-state="ready_for_handover"]::before { content:"✓"; }

.rr-preview-banner { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; padding:.5rem .7rem; margin:-.2rem 0 .8rem; background:var(--surface-sunk); border:1px dashed var(--line); border-radius:var(--r-sm,6px); }
.rr-preview-tag { font:700 .7rem/1.3 var(--font-mono); text-transform:uppercase; letter-spacing:.03em; padding:.15rem .45rem; border-radius:var(--r-pill); background:var(--ink,#19131f); color:var(--chalk,#fff); }

.centre { padding:clamp(1rem,2vw,1.75rem); background:var(--surface-sunk); display:grid; gap:1rem; align-content:start; }
.review-col { padding:1.2rem; background:var(--surface-raised); border-left:1px solid var(--line); display:grid; gap:.9rem; align-content:start; }
.card { padding:1.2rem; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow-panel); animation:cardIn .2s var(--ease) both; }
.card h3 { margin:0 0 .55rem; font:800 1.1rem/1.1 var(--font-display); letter-spacing:-.01em; text-transform:uppercase; }
@keyframes cardIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.kv { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.badge { display:inline-block; padding:.25rem .52rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink-soft); font:700 .75rem/1 var(--font-mono); }
.delivery-text { min-height:220px; padding:1.35rem 1.4rem; background:var(--paper); border:1px solid var(--line); border-left:2px solid var(--ink); border-radius:0 var(--r-control) var(--r-control) 0; white-space:pre-wrap; word-break:break-word; font:400 1.05rem/1.7 var(--font-sans); }
img.preview { display:block; max-width:100%; max-height:420px; margin:auto; border:1px solid var(--line); border-radius:var(--r-control); }
.group-title { color:var(--accent); }
.check-row { padding:.85rem 0; border-top:1px solid var(--line); }
.check-row:first-of-type { border-top:0; }
.check-head { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:.78rem; font-weight:750; }
.outcome { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .45rem; border-radius:var(--r-control); font:700 .75rem/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.outcome::before { font-size:1em; }
.outcome--pass { background:#dff5df; color:#1f5137; }
.outcome--pass::before { content:"✓"; }
.outcome--attention { background:#E4E9F0; color:var(--attention); }
.outcome--attention::before { content:"▲"; }
.outcome--not_assessed,.outcome--unavailable { background:var(--surface-sunk); color:var(--ink-soft); }
.outcome--not_assessed::before,.outcome--unavailable::before { content:"–"; }
.outcome--out_of_scope { background:#FFE3EA; color:var(--oxblood); }
.outcome--out_of_scope::before { content:"⊘"; }
.finding { margin-top:.55rem; font-size:.82rem; }
.finding .basis { display:block; margin-top:.2rem; color:var(--ink-soft); font:.75rem/1.45 var(--font-mono); }
.finding.is-attention { padding-left:.75rem; border-left:3px solid var(--attention); }
.finding.is-info { padding-left:.75rem; border-left:3px solid var(--pine); }
.scope-note { margin-top:.5rem; color:var(--ink-soft); font-size:.75rem; font-style:italic; }
.check-preview { margin:.5rem 0 0; padding-left:1.1rem; color:var(--ink-soft); font-size:.8rem; }
.check-preview li { margin:.2rem 0; }
.needs-look { color:var(--attention); font-weight:750; font-size:.72rem; }

.summary-bar { min-height:62px; display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1.3rem; padding:.65rem 1.25rem; background:var(--night); color:var(--chalk); border-top:1px solid var(--hair-dark); }
.summary-bar .metric { display:flex; align-items:baseline; gap:.35rem; }
.summary-bar .metric b { color:var(--chalk); font:800 1.05rem/1 var(--font-display); }
.summary-bar .muted { color:var(--chalk-3); font-size:.7rem; }
.summary-bar .verdict { margin-left:auto; padding:.45rem .7rem; border-radius:var(--r-control); font:750 .75rem/1.35 var(--font-mono); }
.summary-bar .verdict::before { margin-right:.35rem; }
.summary-bar .verdict.ready { background:var(--electric); color:var(--electric-ink); }
.summary-bar .verdict.ready::before { content:"✓"; }
.summary-bar .verdict.blocked { background:var(--coral); color:var(--night); }
.summary-bar .verdict.blocked::before { content:"⚑"; }

/* Campaign-wide release integrity: a truthful chain, not a score or certificate.
   Same panel language as .card — a working surface, not a hero. */
.integrity-map { padding:1.2rem; color:var(--chalk); background:var(--night-2); border:1px solid var(--hair-dark); border-radius:var(--r-panel); box-shadow:var(--shadow-panel); animation:cardIn .2s var(--ease) both; }
.integrity-map--blocked { border-color:rgba(255,90,61,.5); }
.integrity-map--current { border-color:rgba(120,214,180,.48); }
.integrity-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.integrity-head .eyebrow { margin:0 0 .3rem; color:var(--chalk-3); }
.integrity-head h2 { margin:0; font:800 1.1rem/1.1 var(--font-display); letter-spacing:-.01em; text-transform:uppercase; }
.integrity-state { display:inline-flex; align-items:center; gap:.3rem; padding:.4rem .6rem; border:1px solid currentColor; border-radius:var(--r-pill); font:750 .75rem/1 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }
.integrity-state::before { font-size:1em; }
.integrity-state--current { color:var(--electric); }
.integrity-state--current::before { content:"✓"; }
.integrity-state--attention { color:var(--amber-on-dark); }
.integrity-state--attention::before { content:"▲"; }
.integrity-state--blocked { color:var(--critical-on-dark); }
.integrity-state--blocked::before { content:"⚑"; }
.integrity-headline { margin:.85rem 0 1.05rem; color:var(--chalk-2); font-size:.84rem; }
.integrity-chain { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0; padding:0; }
.integrity-stage { position:relative; min-width:0; padding-right:.7rem; }
.integrity-stage:not(:last-child)::after { content:""; position:absolute; z-index:0; top:.42rem; left:.9rem; right:-.1rem; height:2px; background:var(--hair-dark); }
.integrity-node { position:relative; z-index:1; display:grid; place-items:center; width:.95rem; height:.95rem; margin-bottom:.6rem; border:2px solid var(--chalk-3); border-radius:50%; background:var(--night-2); font:700 .5rem/1 var(--font-mono); color:var(--night-2); }
.motion-ready .integrity-node { animation:nodeIn .34s var(--ease) both; }
.motion-ready .integrity-stage:nth-child(2) .integrity-node { animation-delay:.04s; }
.motion-ready .integrity-stage:nth-child(3) .integrity-node { animation-delay:.08s; }
.motion-ready .integrity-stage:nth-child(4) .integrity-node { animation-delay:.12s; }
.motion-ready .integrity-stage:nth-child(5) .integrity-node { animation-delay:.16s; }
@keyframes nodeIn { from { transform:scale(.55); opacity:.35; } to { transform:none; opacity:1; } }
.integrity-stage--current .integrity-node { border-color:var(--electric); background:var(--electric); box-shadow:0 0 0 .22rem rgba(120,214,180,.12); }
.integrity-stage--current .integrity-node::before { content:"✓"; color:var(--electric-ink); }
.integrity-stage--attention .integrity-node { border-color:var(--amber-on-dark); background:var(--amber-on-dark); }
.integrity-stage--attention .integrity-node::before { content:"!"; color:#3a2200; }
.integrity-stage--blocked .integrity-node { border-color:var(--coral); background:var(--coral); }
.integrity-stage--blocked .integrity-node::before { content:"⚑"; color:var(--night); font-size:.42rem; }
.integrity-stage--unobserved .integrity-node { border-style:dashed; background:transparent; }
.integrity-stage b,.integrity-stage span:not(.integrity-node) { display:block; overflow-wrap:anywhere; }
.integrity-stage b { color:var(--chalk); font-size:.78rem; }
.integrity-stage span:not(.integrity-node) { margin-top:.2rem; color:var(--chalk-3); font:.72rem/1.4 var(--font-mono); }
.integrity-stage-status { margin-top:.25rem !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk-2) !important; }
.integrity-stage--current .integrity-stage-status { color:var(--electric) !important; }
.integrity-stage--attention .integrity-stage-status { color:var(--amber-on-dark) !important; }
.integrity-stage--blocked .integrity-stage-status { color:var(--critical-on-dark) !important; }
.integrity-caveat { margin:1rem 0 0; padding-top:.75rem; color:var(--chalk-3); border-top:1px solid var(--hair-dark); font:.75rem/1.5 var(--font-mono); }

/* ---------- Next Actions · Release Delta · Decision Currency Trace ----------
   Three views of the same real workflow, in the same paper-panel language.
   coral = a change / something blocking · lime = current / complete ·
   amber = a person needs to look. Status is always carried by a word + glyph,
   never colour alone. */

/* --- Next Actions --- */
.actions-panel .actions-head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.actions-count { color:var(--ink-soft); font:700 .75rem/1 var(--font-mono); }
.actions-count.is-clear { color:var(--pine); }
.actions-empty { margin:.4rem 0 0; padding:.75rem .85rem; border:1px dashed var(--line); border-radius:var(--r-control); color:var(--ink-soft); font-size:.9rem; }
.actions-list { list-style:none; margin:.7rem 0 0; padding:0; display:grid; gap:.5rem; }
.action-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem 1rem; padding:.7rem .8rem; border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.action-row--blocking { border-left-color:var(--coral); }
.action-row--needs_review { border-left-color:var(--attention); }
.action-row--recommended { border-left-color:var(--pine); }
.action-priority { display:inline-flex; align-items:center; gap:.3rem; align-self:start; padding:.16rem .4rem; border-radius:var(--r-pill); font:700 11px/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.action-priority[data-p="blocking"] { background:#FFE3EA; color:#7c231f; }
.action-priority[data-p="needs_review"] { background:#E4E9F0; color:var(--attention); }
.action-priority[data-p="recommended"] { background:#dff5df; color:#1f5137; }
.action-priority[data-p="complete"] { background:var(--surface-sunk); color:var(--ink-soft); }
.action-main { min-width:0; }
.action-title { margin:0; font-weight:750; font-size:.92rem; }
.action-why { margin:.15rem 0 0; color:var(--ink-soft); }
.action-row .btn { align-self:start; }
.motion-ready .action-row { animation:cardIn .2s var(--ease) both; }

/* --- Release Delta --- */
/* wraps: with three versions the baseline <select> used to force the column to 404 px at 320/390 (blueprint P10) */
.delta-panel .delta-pick { margin:.5rem 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; max-width:100%; }
.delta-panel .delta-pick select { max-width:100%; min-width:0; padding:.35rem .5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font:inherit; }
.delta-heads { margin:.7rem 0 .6rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem .75rem; }
.delta-head { display:grid; gap:.15rem; padding:.5rem .65rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.delta-head b { font:700 .8rem/1.2 var(--font-mono); }
.delta-head--approved { border-left:3px solid var(--ink-soft); }
.delta-head--supplied { border-left:3px solid var(--coral-deep); }
.delta-heads .delta-arrow { color:var(--coral-deep); font-weight:900; }
.delta-legend { list-style:none; margin:0 0 .5rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1rem; font:700 .75rem/1 var(--font-mono); color:var(--ink-soft); }
.delta-legend li { display:inline-flex; align-items:center; gap:.35rem; }
.delta-key { display:inline-grid; place-items:center; width:1.15rem; height:1.15rem; border-radius:4px; font-weight:800; }
.delta-key--add { background:var(--electric); color:var(--electric-ink); }
.delta-key--rem { background:#FFE3EA; color:#7c231f; }
.delta-key--chg { background:#E4E9F0; color:var(--attention); }
.delta-diff { margin:0; padding:.9rem 1rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-control); font:400 1rem/1.75 var(--font-sans); white-space:pre-wrap; overflow-wrap:anywhere; }
.delta-diff ins,.delta-diff del { margin:0 .06em; }
.delta-diff ins { text-decoration:none; background:rgba(120,214,180,.32); box-shadow:inset 0 -2px 0 #3d8a70; border-radius:2px; padding:0 .06em; }
.delta-diff ins::before { content:"+"; font:700 .7em/1 var(--font-mono); vertical-align:.15em; margin-right:.1em; color:#4d6110; }
.delta-diff del { text-decoration:line-through; text-decoration-thickness:2px; background:rgba(255,90,61,.16); border-radius:2px; padding:0 .06em; color:#7c2721; }
.delta-diff del::before { content:"−"; font:700 .7em/1 var(--font-mono); vertical-align:.15em; margin-right:.1em; text-decoration:none; display:inline-block; }
.delta-empty { margin:.4rem 0 0; padding:.7rem .85rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink-soft); font-size:.9rem; }
.delta-fulltext { display:grid; gap:.75rem; margin:.5rem 0; }
.delta-tag { display:inline-block; margin-bottom:.3rem; font:700 .72rem/1 var(--font-mono); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.delta-meta { width:100%; border-collapse:collapse; margin:.6rem 0 0; font-size:.85rem; }
.delta-meta th,.delta-meta td { padding:.4rem .5rem; border:1px solid var(--line); text-align:left; }
.delta-meta thead th { background:var(--surface-sunk); font:700 .72rem/1 var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.delta-meta tbody th { background:var(--surface); font-weight:700; }
.delta-meta tr.is-changed td:last-child { background:rgba(255,90,61,.12); font-weight:700; }
.delta-flag { color:var(--coral-deep); font-weight:800; }
.motion-ready .delta-diff { animation:cardIn .22s var(--ease) both; }

/* --- Decision Currency Trace --- */
.trace-panel { padding:0; overflow:hidden; }
.trace-panel > summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; padding:1.2rem; }
.trace-panel > summary::-webkit-details-marker { display:none; }
.trace-panel > summary::after { content:"▸"; margin-left:auto; color:var(--ink-soft); transition:transform var(--tap); }
.trace-panel[open] > summary::after { transform:rotate(90deg); }
.trace-panel > summary:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
.trace-badge { font:700 .75rem/1 var(--font-mono); }
.trace-badge.is-change { color:var(--coral-deep); }
.trace-badge.is-quiet { color:var(--pine); }
.trace-body { padding:0 1.2rem 1.2rem; }
.trace-chain-item { margin:0 0 1rem; }
.trace-chain-item:last-child { margin-bottom:.4rem; }
.trace-asset { margin:0 0 .4rem; font:800 .95rem/1.1 var(--font-display); text-transform:uppercase; letter-spacing:-.01em; }
.trace-chain { list-style:none; margin:0 0 .6rem; padding:0; display:grid; gap:.4rem; }
.trace-step { position:relative; padding:.55rem .7rem .55rem 1.4rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.trace-step::before { content:""; position:absolute; left:.55rem; top:.85rem; width:.5rem; height:.5rem; border-radius:50%; background:var(--ink-soft); }
.trace-step:not(:last-child)::after { content:"↓"; position:absolute; left:.62rem; bottom:-.55rem; font-size:.7rem; color:var(--ink-soft); z-index:1; }
.trace-step--input::before { background:var(--coral); }
.trace-step--review::before { background:var(--attention); }
.trace-step--decision::before { background:var(--ink-soft); }
.trace-step--handover::before { background:var(--coral-deep); }
.trace-step.is-undetermined::before { background:transparent; border:2px dashed var(--ink-soft); }
.trace-step-label { display:block; font:700 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.trace-step-text { display:block; margin-top:.2rem; font-size:.88rem; }
.trace-unaffected { margin:.35rem 0; padding:.5rem .7rem; border-left:3px solid var(--pine); background:var(--surface); color:var(--ink-soft); }
.trace-pub { margin:.6rem 0 0; padding-top:.6rem; border-top:1px solid var(--line); color:var(--ink-soft); font-family:var(--font-mono); }
.motion-ready .trace-panel[open] .trace-body { animation:cardIn .22s var(--ease) both; }

/* --- detailed checks: one card, collapsible groups --- */
.check-group { border:1px solid var(--line); border-radius:var(--r-control); margin-top:.55rem; }
.check-group > summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; padding:.6rem .75rem; font:700 .82rem/1.2 var(--font-sans); }
.check-group > summary::-webkit-details-marker { display:none; }
.check-group > summary::after { content:"▸"; color:var(--ink-soft); }
.check-group[open] > summary::after { content:"▾"; }
.check-group > summary:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; border-radius:var(--r-control); }
.check-group-meta { color:var(--ink-soft); font:700 .72rem/1 var(--font-mono); }
.check-group .check-row { padding:.7rem .75rem; }
.check-group .check-row:first-of-type { border-top:1px solid var(--line); }

/* --- responsive: the three centre panels on narrow screens --- */
@media (max-width:560px) {
  .action-row { grid-template-columns:1fr; }
  .action-priority { justify-self:start; }
  .action-row .btn { width:100%; }
  .delta-heads { grid-template-columns:1fr; }
  .delta-heads .delta-arrow { transform:rotate(90deg); justify-self:start; }
  .delta-meta { display:block; overflow-x:auto; white-space:nowrap; }
  .trace-panel > summary,.trace-body { padding-left:.9rem; padding-right:.9rem; }
}

/* NOVERINT styles 05/11 — workspace launchpad, dialogs, toasts, welcome and guided tour.
   Loaded in order by styles.css; the order is the cascade. */

/* Workspace launchpad — a compact operational foyer, not a marketing hero. */
.empty { min-height:100%; display:grid; align-items:center; padding:clamp(2rem,5vw,5rem) clamp(1rem,5vw,5rem); color:var(--ink); background:
  linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(25,19,31,.045) calc(100% - 1px)) 0 0/8rem 100%,
  var(--surface); overflow:auto; }
.empty-inner { width:min(1120px,100%); margin:auto; }
.empty-intro { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.8fr); gap:clamp(2rem,7vw,7rem); align-items:end; padding-bottom:clamp(1.5rem,3vw,2.4rem); border-bottom:1px solid var(--line); }
.empty-heading { min-width:0; }
.empty h1,.empty h2 { max-width:12ch; margin:.55rem 0 0; color:var(--ink-strong); font:780 clamp(3.2rem,6vw,6rem)/.9 var(--font-sans); letter-spacing:-.065em; text-transform:none; }
.empty .lead { max-width:40ch; margin:0 0 .15rem; color:var(--ink-soft); font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.55; }
.empty .options { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(.7rem,1.3vw,1rem); margin-top:clamp(1.5rem,3vw,2.5rem); }
.empty .option { min-height:220px; position:relative; display:grid; grid-template-rows:auto 1fr auto; align-items:start; gap:1rem; padding:1.15rem 1.2rem 1.25rem; border:1px solid var(--line); border-radius:var(--r-panel); background:rgba(249,250,252,.84); color:var(--ink); box-shadow:0 1px 0 rgba(25,19,31,.04); text-align:left; cursor:pointer; overflow:hidden; transition:border-color var(--tap), transform var(--tap), background var(--tap), box-shadow var(--tap); }
.empty .option::after { content:""; position:absolute; inset:auto 0 0; height:4px; background:var(--night); transform:scaleX(0); transform-origin:left; transition:transform var(--tap); }
.empty .option:hover { border-color:#8d929a; background:var(--surface-raised); box-shadow:var(--shadow-panel); transform:translateY(-3px); }
.empty .option:hover::after,.empty .option:focus-visible::after { transform:scaleX(1); }
.empty .option.primary { background:var(--coral); color:var(--night); border-color:var(--coral); box-shadow:var(--shadow-panel); }
.empty .option.primary::after { background:var(--night); transform:scaleX(1); }
.empty .option.primary:hover { background:var(--coral-soft); border-color:var(--coral-soft); }
.empty .option-meta { padding-right:2rem; color:var(--ink-soft); font:700 .75rem/1.25 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }
.empty .option.primary .option-meta { color:#3a1512; } /* 5.2:1 on coral (was 4.21) */
.empty .option .ico { align-self:center; display:grid; place-items:center; width:2.7rem; height:2.7rem; border:1px solid var(--line); border-radius:50%; color:var(--coral-deep); font:500 1.35rem/1 var(--font-sans); }
.empty .option.primary .ico { color:var(--night); border-color:rgba(25,19,31,.3); }
.empty .option-copy { align-self:end; }
.empty .option b { display:block; color:inherit; font:850 clamp(1.15rem,1.8vw,1.45rem)/1 var(--font-display); letter-spacing:-.015em; text-transform:uppercase; }
.empty .option .option-copy > span { display:block; max-width:34ch; margin-top:.55rem; color:var(--ink-soft); font-size:.86rem; line-height:1.5; }
.empty .option.primary .option-copy > span { color:#351b1a; }
.empty .option .go { position:absolute; top:1.05rem; right:1.1rem; color:var(--ink); font-size:1.25rem; transition:transform var(--tap); }
.empty .option:hover .go { transform:translateX(4px); }
.empty-foot { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:1rem; padding:1rem 0; border-top:1px solid var(--line); color:var(--ink-soft); }
.empty-assurance { display:flex; align-items:center; gap:.65rem; margin:0; font-size:.78rem; }
.empty-assurance b { color:var(--ink); }
.assurance-mark { display:grid; place-items:center; width:1.75rem; height:1.75rem; flex:0 0 auto; border-radius:50%; background:var(--night); color:var(--electric); }
.empty-draft { display:flex; align-items:center; gap:.8rem; color:var(--ink-soft); font-size:.78rem; }
.empty-draft .text-button { white-space:nowrap; font-size:.78rem; }
.motion-ready .empty-intro { animation:signalEnter .48s var(--ease) both; }
.motion-ready .empty .option { animation:signalEnter .5s var(--ease) both; }
.motion-ready .empty .option:nth-child(1) { animation-delay:.06s; }
.motion-ready .empty .option:nth-child(2) { animation-delay:.11s; }
.motion-ready .empty .option:nth-child(3) { animation-delay:.16s; }
.motion-ready .empty-foot { animation:signalEnter .45s var(--ease) .2s both; }

.field { display:grid; gap:.35rem; margin:.8rem 0; }
.field label { color:var(--ink-soft); font-size:.76rem; font-weight:700; }
.field input,.field select,.field textarea { width:100%; padding:.62rem .72rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); transition:border-color var(--tap); }
.field input:hover,.field select:hover,.field textarea:hover { border-color:#b4b0a6; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--focus); }
.area-fields { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }

dialog { width:min(560px,calc(100vw - 2rem)); max-height:88vh; padding:0; border:0; border-radius:var(--r-panel); background:var(--surface-raised); color:var(--ink); box-shadow:var(--shadow-dialog); }
dialog::backdrop { background:rgba(5,8,13,.72); backdrop-filter:blur(3px); }
dialog form { padding:1.6rem; border-top:5px solid var(--coral); border-radius:var(--r-panel) var(--r-panel) 0 0; display:flex; flex-direction:column; max-height:88vh; box-sizing:border-box; }
.dialog-kicker { color:var(--accent); }
dialog h2 { margin:.5rem 0 1.1rem; font:800 1.7rem/1.05 var(--font-display); text-transform:uppercase; letter-spacing:-.01em; }
/* the body takes what is left after the title and the buttons, so Cancel /
   Confirm stay in view on a short screen (320×568: G3, every Reach dialog) */
.dlg-scroll { flex:1 1 auto; min-height:0; max-height:60vh; overflow:auto; }
dialog menu { display:flex; justify-content:flex-end; gap:.7rem; margin:1.4rem 0 0; padding:0; }
/* a toast is an announcement, never a control: it must not intercept a tap on the action beneath it */
.toast-wrap { position:fixed; right:1rem; bottom:calc(62px + 1rem); z-index:70; display:grid; gap:.5rem; pointer-events:none; }
.toast { max-width:360px; padding:.8rem 1rem; background:var(--night); color:var(--chalk); border:1px solid var(--hair-dark); border-left:4px solid var(--electric); border-radius:0 var(--r-control) var(--r-control) 0; box-shadow:var(--shadow-dialog); font-size:.8rem; animation:toastIn .18s var(--ease); }
.toast.err { border-left-color:var(--coral); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.flash { animation:flash 1s var(--ease); }
@keyframes flash { 0% { background:var(--electric); color:var(--electric-ink); } 100% { background:transparent; } }

@media (max-width:1180px) {
  .hero { grid-template-columns:1fr; }
  .hero-proof { width:min(640px,100%); margin:0 auto; }
  .answer-grid { grid-template-columns:1fr 1fr; }
  .answer-grid > div:nth-child(2) { border-right:0; }
  /* tablet: the shell scrolls as one page; rail stays a sidebar, centre + review stack */
  .workspace-page,.app-frame { height:auto; min-height:100vh; overflow:visible; }
  .app-body { height:auto; min-height:0; grid-template-columns:220px minmax(0,1fr); grid-template-rows:auto; align-items:start; overflow:visible; }
  .app-body > * { min-width:0; overflow:visible; }
  .rail { position:sticky; top:64px; align-self:start; max-height:calc(100vh - 64px); overflow:auto; }
  .creator-lens,.quick-lens { height:auto; overflow:visible; }
  .centre { grid-column:2; }
  .review-col { grid-column:2; border-left:0; border-top:1px solid var(--line); }
  .integrity-chain { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem 0; }
  .integrity-stage:nth-child(3)::after { display:none; }
}
@media (max-width:900px) {
  .empty { align-items:start; padding:2.5rem 1.25rem; }
  .empty-intro { grid-template-columns:1fr; gap:1.25rem; }
  .empty .lead { max-width:58ch; }
  .empty .options { grid-template-columns:1fr 1fr; }
  .empty .option.primary { grid-column:1 / -1; min-height:190px; }
}
@media (max-width:1250px) {
  .app-topbar .wordmark span,.app-topbar .cmeta { display:none; }
  .app-topbar .context { grid-template-columns:auto minmax(110px,1fr); }
  .cname { max-width:22ch; }
  .top-actions .btn { padding-inline:.6rem; font-size:.72rem; }
}
@media (max-width:860px) {
  .site-nav nav { display:none; }
  .site-nav nav.open { position:absolute; top:74px; left:0; right:0; display:grid; padding:.5rem; background:var(--night-2); border-bottom:1px solid var(--hair-dark); box-shadow:var(--shadow-dialog); }
  .site-nav nav.open a { padding:.85rem; border-radius:var(--r-control); }
  .site-nav nav.open a:hover { background:rgba(255,255,255,.06); }
  .nav-toggle { display:inline-flex; margin-left:auto; }
  .statement,.section-head,.system-intro,.tutorial-head { grid-template-columns:1fr; }
  .section-head .section-lead { grid-column:1; }
  .gap-diagram { grid-column:1; }
  .system-feature { grid-template-columns:1fr; }
  .feature-evidence .feature-copy { order:-1; }
  .agency,.security { grid-template-columns:1fr; }
  .security-mark { padding:2.5rem 1.5rem; }
  /* start: on narrow screens the access panel (primary action) comes first;
     the marketing visual is a compact brand strip that must not push it down */
  .access-page { grid-template-columns:1fr; }
  .access-visual { order:2; min-height:auto; gap:1rem; padding:1.5rem 1.25rem 2rem; }
  .access-panel { order:1; }
  .access-visual::before,.access-visual::after { display:none; }
  .access-visual .mini-flow,.access-aside-note { display:none; }
  .access-headline { margin:1rem 0 0; font-size:clamp(1.6rem,7vw,2.2rem); }
  .site-footer { grid-template-columns:1fr; align-items:start; }
}
@media (max-width:700px) {
  .hero { min-height:0; padding-top:3.5rem; }
  .hero h1 { font-size:clamp(3rem,13vw,5rem); }
  .hero-proof { width:100%; box-shadow:8px 10px 0 var(--coral), var(--shadow-hero); }
  .hero-proof::before { display:none; }
  .proof-findings { grid-template-columns:1fr; }
  .proof-findings div { border-right:0; border-bottom:1px solid var(--line); }
  .statement,.workflow,.system-feature,.ai-answer,.agency { padding-left:1.1rem; padding-right:1.1rem; }
  .workflow-steps li { grid-template-columns:38px 1fr; gap:.4rem 1rem; }
  .workflow-steps h3 { grid-column:2; }
  .workflow-steps p { grid-column:2; }
  .workflow-steps li.active h3::after { content:""; }
  .dependency-map .dm-nodes { grid-template-columns:1fr; }
  .answer-grid { grid-template-columns:1fr; }
  .tutorial { padding-left:1.1rem; padding-right:1.1rem; }
  .tutorial-steps { grid-template-columns:1fr; }
  .tutorial-steps li { min-height:0; grid-template-columns:2.5rem 1fr; grid-template-rows:auto auto; gap:.45rem 1rem; }
  .tutorial-step-no { grid-row:1/3; padding-top:.18rem; }
  .tutorial-steps p { grid-column:2; align-self:auto; }
  .tutorial-action { align-items:stretch; flex-direction:column; }
  .tutorial-action .btn { width:100%; }
  .answer-grid > div,.answer-grid > div + div { padding:1.2rem 0; border-right:0; border-bottom:1px solid rgba(17,22,10,.35); }
  .security-list li { grid-template-columns:1fr; gap:.35rem; }
  .access-panel { padding:2rem 1.1rem; }
  .app-frame,.workspace-page { height:auto; min-height:100vh; overflow:visible; }
  .app-frame { display:block; }
  .app-topbar { min-height:64px; padding:.6rem .8rem; }
  .app-topbar .wordmark span { display:none; }
  .app-body { height:auto; display:flex; flex-direction:column; }
  .rail { order:1; }
  .centre { order:2; }
  .review-col { order:3; }
  .creator-lens,.quick-lens { height:auto; overflow:visible; }
  .summary-bar { position:static; overflow:visible; }
  .summary-bar > .small { width:100%; }
  .summary-bar .verdict { width:100%; margin-left:0; }
  /* narrow screens: the primary action sits low in the first viewport, so the toast goes to the top edge instead; only the two newest stay visible */
  .toast-wrap { top:.6rem; bottom:auto; left:1rem; }
  .toast { max-width:none; }
  .toast:nth-last-child(n+3) { display:none; }
  .integrity-chain { grid-template-columns:1fr; gap:.1rem; }
  .integrity-stage { display:grid; grid-template-columns:1.1rem 1fr; gap:.65rem; padding:.5rem 0; }
  .integrity-stage:not(:last-child)::after { top:1.4rem; bottom:-.55rem; left:.45rem; right:auto; width:2px; height:auto; }
  .integrity-stage:nth-child(3)::after { display:block; }
  .integrity-node { margin:.1rem 0 0; }
  .integrity-stage div { min-width:0; }
  .empty { min-height:calc(100vh - 64px); padding:2rem 1rem; }
  .empty h1,.empty h2 { font-size:clamp(3rem,15vw,4.8rem); }
  .empty .options { grid-template-columns:1fr; }
  .empty .option.primary { grid-column:auto; }
  .empty .option { min-height:180px; }
  .empty-foot { align-items:flex-start; flex-direction:column; }
  .empty-draft { align-items:flex-start; flex-direction:column; gap:.25rem; }
  .area-fields { grid-template-columns:1fr 1fr; }
}
@media (max-width:420px) {
  .site-nav { padding:0 .75rem; gap:.75rem; }
  .nav-cta { display:none; }
  .cta-row { align-items:flex-start; flex-direction:column; }
  .onboard .row { align-items:stretch; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .page-progress { display:none; }
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
@media print {
  .page-progress { display:none !important; }
  .motion-ready .reveal { opacity:1 !important; transform:none !important; }
}

/* ---------- onboarding: welcome dialog + guided tour (Forward Studio) ---------- */

/* Welcome modal — aubergine surface, not the paper dialog */
.guide-dlg { width:min(480px,calc(100vw - 2rem)); padding:0; border:0; border-radius:var(--r-panel); background:var(--night-2); color:var(--chalk); box-shadow:var(--shadow-dialog); }
.guide-dlg::backdrop { background:rgba(12,8,16,.74); backdrop-filter:blur(3px); }
.guide-card { position:relative; padding:1.9rem 1.7rem 1.5rem; border-top:4px solid var(--coral); border-radius:var(--r-panel); }
/* keep the eyebrow clear of the absolutely positioned close button (.guide-x, 2rem at .7rem inset) */
.guide-card .eyebrow { margin-right:2.4rem; color:var(--coral); }
.guide-card h2 { margin:.6rem 0 .85rem; color:var(--chalk); font:800 1.5rem/1.16 var(--font-sans); letter-spacing:-.02em; text-transform:none; }
.guide-card > p { margin:.5rem 0; color:var(--chalk-2); font-size:.92rem; line-height:1.6; }
.guide-meta { color:var(--chalk-3); font:700 .72rem/1.4 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }
.guide-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.35rem 0 .9rem; }
.guide-fineprint { margin:0; color:var(--chalk-3); font-size:.75rem; line-height:1.5; }
.guide-x { position:absolute; top:.7rem; right:.7rem; width:2rem; height:2rem; display:grid; place-items:center; border:1px solid var(--hair-dark); border-radius:var(--r-control); background:transparent; color:var(--chalk-2); font-size:1.15rem; line-height:1; cursor:pointer; }
.guide-x:hover { color:var(--chalk); border-color:var(--chalk); }
.guide-dlg .btn--ghost { color:var(--chalk-2); border-color:var(--hair-dark); background:transparent; }
.guide-dlg .btn--ghost:hover { color:var(--chalk); border-color:var(--chalk); }

/* Persistent Guide control in the top bar — quiet, in the status cluster */
.guide-chip { flex:0 0 auto; min-height:2.35rem; display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .65rem; border:1px solid var(--hair-dark); border-radius:var(--r-control); background:transparent; color:var(--chalk-2); font:700 .75rem/1 var(--font-mono); white-space:nowrap; cursor:pointer; }
.guide-chip:hover { color:var(--chalk); border-color:var(--chalk); }
.guide-chip-ico { display:grid; place-items:center; width:1.05rem; height:1.05rem; border:1px solid currentColor; border-radius:50%; font-size:.68rem; }

/* Guided tour overlay */
.tour-root { position:fixed; inset:0; z-index:200; }
.tour-blocker { position:absolute; inset:0; background:transparent; }
.tour-root.no-target .tour-blocker { background:rgba(16,11,20,.6); }
.tour-spotlight { position:fixed; z-index:201; pointer-events:none; border-radius:12px;
  box-shadow:0 0 0 2px var(--coral), 0 0 0 5px rgba(255,90,61,.32), 0 0 0 9999px rgba(16,11,20,.6);
  transition:left .18s var(--ease), top .18s var(--ease), width .18s var(--ease), height .18s var(--ease); }
.tour-target { border-radius:12px; }

.tour-pop { position:fixed; z-index:202; width:min(360px,calc(100vw - 24px)); padding:1.15rem 1.2rem 1.05rem;
  background:var(--night-2); color:var(--chalk); border:1px solid var(--hair-dark); border-top:4px solid var(--coral);
  border-radius:var(--r-panel); box-shadow:var(--shadow-dialog); }
.tour-pop-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.tour-pop-step { margin:0; color:var(--chalk-3); font:700 .7rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.tour-pop-x { width:1.8rem; height:1.8rem; display:grid; place-items:center; border:1px solid var(--hair-dark); border-radius:var(--r-control); background:transparent; color:var(--chalk-2); font-size:1.05rem; line-height:1; cursor:pointer; }
.tour-pop-x:hover { color:var(--chalk); border-color:var(--chalk); }
.tour-pop-title { margin:.5rem 0; color:var(--chalk); font:800 1.1rem/1.22 var(--font-sans); letter-spacing:-.01em; text-transform:none; }
.tour-pop-body p { margin:.35rem 0; color:var(--chalk-2); font-size:.86rem; line-height:1.55; }
.tour-pop-nav { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem; }
.tour-pop-nav .tour-skip { margin-left:auto; }
.tour-pop .btn--ghost { color:var(--chalk-2); border-color:var(--hair-dark); background:transparent; }
.tour-pop .btn--ghost:hover { color:var(--chalk); border-color:var(--chalk); }
.tour-pop .btn:disabled { color:var(--chalk-3); border-color:var(--hair-dark); }

@media (max-width:560px) {
  .tour-root.is-sheet .tour-pop { left:0; right:0; bottom:0; top:auto; width:100%; max-width:none;
    border-left:0; border-right:0; border-bottom:0; border-radius:var(--r-panel) var(--r-panel) 0 0;
    max-height:64vh; overflow:auto; padding-bottom:1.3rem; }
  .tour-root.is-sheet .tour-pop-nav { gap:.5rem; }
  .tour-root.is-sheet .tour-pop-nav .btn { flex:1 1 auto; }
  .tour-root.is-sheet .tour-pop-nav .tour-skip { margin-left:0; order:3; }
}
@media (prefers-reduced-motion:reduce) {
  .tour-spotlight { transition:none; }
}

/* NOVERINT styles 06/11 — lenses, Creator packet, reliability result, Queue and Focused Review.
   Loaded in order by styles.css; the order is the cascade. */

/* ============================================================
   Workspace lens · Review lens · Creator handoff · Resolution
   Presentation only — role differences are information density
   and primary action, not a separate colour palette per role.
   ============================================================ */

.lens-switch { order:10; flex:1 1 100%; display:flex; align-items:center; gap:.15rem; padding:.15rem; border:1px solid var(--hair-dark); border-radius:999px; }
.lens-opt { flex:0 0 auto; min-height:2rem; padding:.3rem .7rem; border:0; border-radius:999px; background:transparent; color:var(--chalk-2); font:700 .72rem/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.lens-opt:hover { color:var(--chalk); }
.lens-opt.is-on { background:var(--chalk); color:var(--night); }
.lens-opt:disabled { opacity:.5; cursor:not-allowed; }
.lens-switch .lens-hint { display:none; }
.lens-switch .lens-note { flex:1 1 12rem; min-width:0; margin-left:auto; padding-right:.6rem; color:var(--chalk-3); font-size:11px; text-align:right; }
.lens-opt:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

@media (max-width:700px) {
  .lens-switch { order:-2; width:100%; justify-content:flex-start; flex-wrap:wrap; border-radius:14px; }
  .lens-switch .lens-hint, .lens-switch .lens-note { display:block; flex:1 1 100%; width:100%; margin:.2rem 0 0; max-width:none; font-size:11px; text-align:left; }
}

/* --- Review lens --- */
.lens-review .review-setup { background:var(--surface); }
.lens-review .review-setup summary { cursor:pointer; font:700 .75rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.review-focus { border-left:4px solid var(--coral); }
.review-focus .eyebrow { color:var(--accent); margin:0 0 .3rem; }
.review-focus h3 { margin:0 0 .3rem; }
.review-focus-why { margin:.4rem 0; font-weight:700; }
.review-focus .btn { margin-top:.6rem; }
.reopened-list, .lens-review .reopened-list { margin:0; padding-left:1.1rem; display:grid; gap:.3rem; }
.reopened-list li { color:var(--ink); }
.lens-asset-pick select { width:100%; }

/* --- Creator handoff lens: deliberately sparse --- */
.creator-lens { padding:clamp(1rem,3vw,2.25rem); max-width:60rem; margin:0 auto; background:var(--surface-sunk); height:100%; overflow-y:auto; }
.creator-head { margin-bottom:1.25rem; }
.creator-head h2 { margin:.2rem 0 .4rem; font:800 1.5rem/1.1 var(--font-display); text-transform:uppercase; letter-spacing:-.01em; }
.creator-disclaimer { margin:.5rem 0; padding:.6rem .8rem; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-control); font-weight:700; }
.creator-tools { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.creator-lines { list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.creator-line { padding:1rem 1.1rem; background:var(--surface-raised); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--r-panel); }
.creator-line.is-blocking { border-left-color:var(--coral); }
.creator-line.is-review { border-left-color:var(--pine); }
.creator-line-asset { margin:0 0 .4rem; font:800 1rem/1.2 var(--font-display); text-transform:uppercase; }
.creator-tags { margin:0 0 .5rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.creator-tags .tag { border:1px solid var(--line); border-radius:999px; padding:.05rem .55rem; font-size:.75rem; color:var(--ink-soft); }
.creator-dl { display:grid; grid-template-columns:11rem 1fr; gap:.25rem .8rem; margin:0; }
.creator-dl dt { font-weight:700; color:var(--ink); }
.creator-dl dd { margin:0; color:var(--ink-soft); }
@media (max-width:560px) { .creator-dl { grid-template-columns:1fr; } .creator-dl dt { margin-top:.35rem; } }

/* --- Creator Note: one asset, one paste-ready message --- */
.creator-note { margin-bottom:1.25rem; }
.creator-note-preview { width:100%; min-height:9rem; resize:vertical; font:400 .85rem/1.5 var(--font-body,inherit); white-space:pre-wrap; }
.creator-note-status { min-height:1.2em; margin:.4rem 0 0; color:var(--ink-soft); }
.creator-note-help { display:block; }

/* --- Creator packet (Tur 2D-A, v2 Review) ---
   One card, grouped by asset: what to change → send back → snapshot ref →
   the exact preview → a secondary copy control. Same paper surface as the
   other Review sections; the selected asset leads, the others fold. */
.creator-packet { display:grid; gap:.8rem; }
.cp-lead { margin:0; max-width:64ch; line-height:1.5; }
.cp-none { margin:0; padding:.7rem .85rem; border:1px solid var(--line); border-left:3px solid var(--ink-soft); border-radius:var(--r-control); background:var(--surface); font-weight:700; }
.cp-stale { margin:0; padding:.55rem .8rem; border:1px dashed var(--line); border-radius:var(--r-control); color:var(--ink-soft); }
.cp-group { padding:.85rem .95rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); display:grid; gap:.6rem; }
.cp-group.is-selected { border-left:3px solid var(--coral-deep); }
.cp-asset { margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .6rem; font:800 1rem/1.15 var(--font-display); text-transform:uppercase; letter-spacing:.01em; }
.cp-ver { color:var(--ink-soft); font-size:.78rem; text-transform:none; letter-spacing:.04em; }
.cp-dl { margin:0; display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.3rem .9rem; font-size:.86rem; }
.cp-dl dt { color:var(--ink-soft); font:600 .74rem/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.cp-dl dd { margin:0; overflow-wrap:anywhere; }
.cp-actions { margin:0; padding-left:1.25rem; display:grid; gap:.3rem; }
.cp-actions li.is-confirm { font-weight:700; }
.cp-send { margin:0; padding-left:1.1rem; display:grid; gap:.25rem; }
.cp-confirm { margin:0; padding:.5rem .75rem; border-left:3px solid var(--attention); background:var(--surface-raised); }
.cp-instruction { margin:0; color:var(--ink-soft); }
.cp-group .field { margin:.2rem 0 0; }
.cp-preview { min-height:8.5rem; }
.cp-copy-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; }
.cp-copy-row .small { max-width:40ch; }
.cp-status { min-height:1.2em; margin:0; color:var(--ink-soft); overflow-wrap:anywhere; }
.cp-status.is-error { color:var(--coral-deep); font-weight:700; }
.cp-others .rv-sub-body { display:grid; gap:.6rem; }
.cp-boundary { margin:0; max-width:64ch; }
@media (max-width:900px) {
  .cp-dl { grid-template-columns:1fr; }
  .cp-group { padding:.75rem .8rem; }
}

/* --- Quick review lens: the 90-second first-value flow --- */
.quick-lens { padding:clamp(1rem,3vw,2.25rem); max-width:44rem; margin:0 auto; background:var(--surface-sunk); height:calc(100% - 62px); overflow-y:auto; display:grid; gap:1rem; align-content:start; }
.quick-head { margin-bottom:.2rem; }
.quick-head h2 { margin:.2rem 0 .4rem; font:800 1.5rem/1.1 var(--font-display); text-transform:uppercase; letter-spacing:-.01em; }
.quick-status, .quick-cta, .quick-handover { padding:1rem 1.1rem; }
.quick-cta { border-left:4px solid var(--coral,var(--union-red,#c8102e)); }
.quick-foot { text-align:center; margin-top:.4rem; }
@media (max-width:640px) { .quick-lens { padding:1rem; } }

/* --- Resolution loop panel --- */
.resolution-panel { border-left:4px solid var(--coral); }
.res-steps { list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.55rem; }
.res-step { display:grid; grid-template-columns:1.4rem 1fr auto; gap:.5rem; align-items:start; padding:.55rem .65rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.res-step.is-done { background:#dff5df; border-color:#bfe3bf; }
.res-mark { font-weight:800; color:var(--ink-soft); }
.res-step.is-done .res-mark { color:var(--pine); }
.res-step-label { margin:0; font-weight:700; }
.res-step .btn { grid-column:3; }
.res-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
@media (max-width:560px) { .res-step { grid-template-columns:1.4rem 1fr; } .res-step .btn { grid-column:1 / -1; } }

/* --- Controlled reliability result (input-quality -> scope -> safe-eval -> contract) --- */
.rr-panel { border-left:4px solid var(--line); }
.rr-panel.rr--ok { border-left-color:var(--pine); }
.rr-panel.rr--attention { border-left-color:var(--attention); }
.rr-panel.rr--stop { border-left-color:var(--accent); }
.rr-panel.rr--info { border-left-color:var(--ink-soft); }
.rr-head { display:flex; gap:.7rem; align-items:flex-start; }
.rr-status-chip { flex:none; align-self:flex-start; padding:.2rem .5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); font:700 .72rem/1.3 var(--font-mono); letter-spacing:.03em; text-transform:uppercase; }
.rr-status-chip[data-tone="ok"] { background:#dff5df; border-color:#bfe3bf; color:#215c21; }
.rr-status-chip[data-tone="attention"] { background:#E8EDF2; border-color:#e6c48c; color:#6c3d00; }
.rr-status-chip[data-tone="stop"] { background:#FFE3EA; border-color:#e5aaa6; color:#7c231f; }
.rr-headline { margin:0; font:800 1.05rem/1.25 var(--font-display); }
.rr-sub { margin:.15rem 0 0; }
.rr-summary { margin:.7rem 0 .4rem; font-weight:600; }
.rr-sec { border-top:1px solid var(--line); padding:.5rem 0; }
.rr-sec > summary { cursor:pointer; font-weight:700; list-style-position:inside; }
.rr-sec > summary::-webkit-details-marker { color:var(--ink-soft); }
.rr-list { margin:.5rem 0 0; padding-left:1.1rem; display:grid; gap:.35rem; }
.rr-list li { line-height:1.45; }
.rr-rule { font-size:.78rem; color:var(--ink-soft); }
.rr-findings li { padding:.5rem .6rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); list-style:none; margin-left:-1.1rem; }
.rr-finding-msg { margin:0 0 .25rem; font-weight:600; }
.rr-row { display:flex; gap:.6rem; align-items:baseline; padding:.5rem 0; border-top:1px solid var(--line); }
.rr-label { flex:none; width:8rem; }
.rr-hr.is-required { color:#7c231f; font-weight:700; }
.rr-hr.is-open { color:var(--ink-soft); }
.rr-diag { margin:.7rem 0 0; }
.rr-source-link { color:var(--ink); text-decoration-thickness:1px; text-underline-offset:.18em; }
.rr-source-link:hover { color:var(--accent-deep); }
.rr-boundary { margin:.5rem 0 0; max-width:68ch; }
.rr-decision-list { list-style:none; padding-left:0; }
.rr-decision-list li { padding:.65rem .7rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.rr-decision-list p { margin:.3rem 0 0; }
.rr-decision-head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
@media (max-width:560px) { .rr-row { flex-direction:column; gap:.15rem; } .rr-label { width:auto; } }

/* --- Shell v2: Queue · Review · Record (default after Tur 2D/G3) ---
   The view nav replaces the four-lens switch; the Queue rail replaces the
   asset rail. Review = the existing centre + review column, unchanged. */
.view-nav { flex:0 0 auto; display:flex; align-items:center; }
.view-nav-list { list-style:none; margin:0; padding:.15rem; display:flex; gap:.15rem; border:1px solid var(--hair-dark); border-radius:999px; }
.view-opt { min-height:2.1rem; min-width:5.5rem; padding:.3rem .9rem; border:0; border-radius:999px; background:transparent; color:var(--chalk-2); font:700 .72rem/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.view-opt:hover { color:var(--chalk); }
.view-opt.is-on { background:var(--chalk); color:var(--night); }
.view-opt:disabled { opacity:.5; cursor:not-allowed; }
.view-opt:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

.shell-v2 { grid-template-columns:284px minmax(0,1fr); }
.queue { padding:1rem .9rem 1.4rem; }
.queue:focus { outline:none; }
.queue-head h2 { margin:0 0 .5rem; }
.queue-campaign { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin:0 0 .25rem; font-size:.82rem; color:var(--chalk-2); }
.queue-campaign-label { font:700 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-3); }
.queue-count { margin:0 0 .8rem; font-size:.82rem; color:var(--chalk-3); }
.queue-list { list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.queue-row { display:grid; gap:.35rem; padding:.15rem 0 .6rem; border-bottom:1px solid var(--hair-dark); }
.queue-row:last-child { border-bottom:0; }
.q-select { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.3rem .5rem; align-items:center; padding:.55rem .65rem; border:1px solid transparent; border-left:3px solid transparent; border-radius:var(--r-control); background:transparent; color:var(--chalk); text-align:left; cursor:pointer; transition:background var(--tap), border-color var(--tap); }
.q-select:hover { background:rgba(255,255,255,.06); }
.q-select[aria-current="true"] { background:rgba(255,90,61,.14); border-left-color:var(--coral); }
.q-select:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
.q-title { display:flex; flex-wrap:wrap; gap:.15rem .45rem; align-items:baseline; min-width:0; font-weight:700; overflow-wrap:anywhere; }
.q-ver { color:var(--chalk-3); font-size:.72rem; white-space:nowrap; }
.q-why { grid-column:1 / -1; margin:0; font-size:.82rem; color:var(--chalk-2); overflow-wrap:anywhere; }
.queue-row.is-selected .q-why { color:var(--chalk); }
.q-main { padding:.4rem .65rem 0; }
.q-main .q-title { margin:0; font:700 .68rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-3); }
.q-main .q-why { margin:.15rem 0 0; color:var(--chalk); }
.q-action { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; padding-left:.65rem; }
.rail .q-action .btn { width:auto; flex:0 0 auto; }
.rail .q-action .btn--primary { background:var(--coral); color:var(--night); border-color:var(--coral); }
.rail .q-action .btn--primary:hover { background:var(--coral-soft); border-color:var(--coral-soft); }
.q-action-title, .q-none { flex:1 1 8rem; min-width:0; margin:0; font-size:.82rem; color:var(--chalk-3); overflow-wrap:anywhere; }
/* the top step is marked, not shouted: the one strong button is in Review */
.q-next { align-self:center; padding:.1rem .4rem; border-radius:var(--r-pill); background:var(--coral); color:var(--night); font:700 11px/1.2 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.queue-row.is-top .q-select { border-left-color:var(--coral); }
/* "just reopened" flash on the night rail: an outline pulse, never a light
   background under light text (the generic .flash keyframe would drop the
   row to 1.9:1 for a second) */
.queue-row.flash { animation:none; }
.queue-row.flash .q-select { animation:queueFlash 1s var(--ease); }
@keyframes queueFlash { 0% { box-shadow:inset 0 0 0 2px var(--electric); } 100% { box-shadow:none; } }
.queue-adders { display:grid; gap:.4rem; margin-top:.9rem; }
.queue-setup { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--hair-dark); }
.queue-setup summary { min-height:2rem; display:flex; align-items:center; padding:.4rem 0; cursor:pointer; color:var(--chalk-3); font:700 .75rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.queue-setup summary::before { content:"▸"; margin-right:.4rem; }
.queue-setup[open] summary::before { content:"▾"; }
.queue-setup summary:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.queue-setup .campaign-setup { margin-top:.7rem; }
.queue-setup .kv-row,.queue-setup .kv-block { color:var(--chalk-2); }
.queue-setup .kv-val,.queue-setup .text-button { color:var(--chalk); }
.queue-setup .text-button { min-height:24px; min-width:24px; padding:.15rem 0; } /* "Edit" was 22px wide */

/* --- Focused Review (Tur 2B): Layer 1 band + Layer 2 <details> sections.
   One card (the band), scannable rows, one .btn--primary. Reused v1 panels
   inside a section lose their card chrome so there is no card inside a card. */
.review { padding:clamp(1rem,2vw,1.75rem) clamp(1rem,2.5vw,2.25rem) 2.5rem; background:var(--surface-sunk); }
.review:focus { outline:none; }
.review > * { max-width:860px; }
.review-band { padding:1.25rem 1.4rem 1.2rem; background:var(--surface-raised); border:1px solid var(--line); border-left:4px solid var(--coral); border-radius:var(--r-panel); box-shadow:var(--shadow-panel); }
.review-band[data-tour] { scroll-margin-top:72px; }
.rv-eyebrow { margin:0 0 .35rem; }
.rv-title { margin:0 0 .55rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .6rem; font:800 clamp(1.35rem,2.2vw,1.7rem)/1.05 var(--font-display); letter-spacing:-.01em; text-transform:uppercase; }
.rv-title:focus-visible { outline:3px solid var(--focus); outline-offset:4px; border-radius:2px; }
.rv-ver { color:var(--ink-soft); font-size:.8rem; letter-spacing:.04em; text-transform:none; }
.rv-status { margin:0 0 .6rem; }
.rv-status .pill--status { font-size:.78rem; padding:.28rem .62rem; }
.rv-why { margin:0 0 1rem; max-width:64ch; font-size:.98rem; line-height:1.55; }
.rv-action { padding:.9rem 0 0; border-top:1px solid var(--line); }
.rv-next { margin:0 0 .55rem; font-weight:700; }
.rv-next-label { display:inline-block; margin-right:.5rem; padding:.12rem .42rem; border-radius:var(--r-control); background:var(--night); color:var(--chalk); font:700 11px/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; vertical-align:middle; }
.rv-primary { min-height:2.65rem; padding:.7rem 1.2rem; font-size:.92rem; }
.rv-note { margin:.5rem 0 0; max-width:64ch; }
.rv-none { margin:0; color:var(--ink-soft); }
.rv-links { margin:.85rem 0 0; display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; }
.rv-links .text-button, .rv-other .text-button { padding:.2rem 0; min-height:24px; }
.rv-other { margin:.6rem 0 0; }
.rv-sections { margin-top:1rem; display:grid; gap:.35rem; }
.rv-sec { background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-control); }
.rv-sec > summary { min-height:2.75rem; display:flex; align-items:center; gap:.4rem .8rem; flex-wrap:wrap; padding:.55rem .95rem; cursor:pointer; list-style:none; }
.rv-sec > summary::-webkit-details-marker { display:none; }
.rv-sec > summary::before { content:"▸"; width:1rem; color:var(--ink-soft); font-size:.8rem; }
.rv-sec[open] > summary::before { content:"▾"; }
.rv-sec > summary:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; border-radius:var(--r-control); }
.rv-sec-title { font:800 .92rem/1.2 var(--font-display); letter-spacing:.01em; text-transform:uppercase; }
.rv-sec-meta { color:var(--ink-soft); font:600 .74rem/1.3 var(--font-mono); overflow-wrap:anywhere; }
.rv-sec-body { padding:.35rem 1rem 1.1rem; border-top:1px solid var(--line); }
.rv-sec-body > * { margin-top:.75rem; }
.review .rv-sec-body .card, .review .rv-sec-body .trace-panel { padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; animation:none; }
.review .rv-sec-body .card + .card { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
/* entry animations inside a <details> would freeze at their first frame while the section is closed (content-visibility) and offset the box */
.review .rv-sec-body .delta-diff, .review .rv-sec-body .trace-body, .review .rv-sec-body .action-row { animation:none; }
.review .rv-sec-body .card h3 { font-size:.92rem; }
.rv-sec-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin-top:.9rem; }
.rv-recorded-line { margin:0; }
.rv-recorded-tag { display:inline-block; padding:.15rem .45rem; border-radius:var(--r-pill); background:var(--electric); color:var(--electric-ink); font:700 11px/1.3 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.rv-recorded-tag.is-earlier { background:var(--surface-sunk); color:var(--ink-soft); }
.rv-coverage { list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; font-size:.82rem; }
.rv-coverage b { font:700 .95rem/1 var(--font-mono); margin-right:.25rem; }
.rv-group-empty { margin:.4rem 0 0; }
.rv-dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; font-size:.86rem; }
.rv-dl dt { color:var(--ink-soft); font:600 .74rem/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.rv-dl dd { margin:0; overflow-wrap:anywhere; }
.rv-sub { margin-top:.9rem; border:1px dashed var(--line); border-radius:var(--r-control); }
.rv-sub > summary { min-height:2.5rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.5rem .8rem; cursor:pointer; list-style:none; }
.rv-sub > summary::-webkit-details-marker { display:none; }
.rv-sub > summary::before { content:"▸"; color:var(--ink-soft); font-size:.8rem; }
.rv-sub[open] > summary::before { content:"▾"; }
.rv-sub > summary:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
.rv-sub-body { padding:.2rem .8rem .8rem; }
.rv-sub-body .rr-panel { padding:0; border:0; box-shadow:none; background:transparent; animation:none; }
.review .res-step.is-next .res-step-label { color:var(--coral-deep); }
.review .delivery-text { min-height:0; }
/* the section summary already names the delta; its inner eyebrow would say it twice */
.review .rv-sec-body .delta-panel > .group-title { display:none; }
.review .check-group[open] > summary { margin-bottom:.2rem; }
@media (max-width:1180px) {
  .shell-v2 { grid-template-columns:250px minmax(0,1fr); }
  .shell-v2 .queue { position:sticky; top:64px; align-self:start; max-height:calc(100vh - 64px); overflow:auto; }
}
@media (max-width:900px) {
  /* one region at a time, chosen by the view nav; the nav itself is full width */
  .shell-v2 { display:block; }
  .shell-v2 .queue { position:static; max-height:none; border-right:0; }
  #app[data-view="queue"] .shell-v2 .review, #app[data-view="queue"] .summary-bar { display:none; }
  #app[data-view="review"] .shell-v2 .queue { display:none; }
  .review { padding:1rem 1rem 2rem; }
  .review-band { padding:1rem 1rem .9rem; }
  .rv-sec > summary { padding:.55rem .75rem; }
  .rv-sec-body { padding:.3rem .75rem 1rem; }
  .rv-dl { grid-template-columns:1fr; gap:.1rem; }
  .rv-dl dd { margin-bottom:.4rem; }
}

/* --- Top bar on small screens: More disclosure (Tur 2D-B) --- */
@media (max-width:900px) {
  .app-topbar { gap:.4rem .6rem; padding:.5rem .8rem; }
  .app-topbar .wordmark { padding-right:.6rem; }
  .app-topbar .spacer { display:none; }
  .app-topbar .context { flex:1 1 0; min-width:0; grid-template-columns:minmax(0,1fr); gap:.2rem 0; }
  .app-topbar .context-label { display:none; }
  .cname { max-width:none; font-size:.9rem; }
  .cstatus { display:block; min-width:0; }
  .cmeta { display:none; }
  .currency-chip { min-height:0; padding:.15rem 0; border:0; font-size:11px; line-height:1.3; }
  .more-trigger { order:1; flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem; min-height:2.35rem; padding:.4rem .7rem; border:1px solid var(--hair-dark); border-radius:var(--r-control); background:transparent; color:var(--chalk); font:700 .75rem/1 var(--font-mono); letter-spacing:.04em; cursor:pointer; }
  .more-trigger-ico { font-size:1rem; line-height:1; }
  .more-trigger:hover,.more-trigger[aria-expanded="true"] { border-color:var(--chalk); }
  .more-trigger:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
  .view-nav,.lens-switch { order:2; flex:1 1 100%; width:100%; }
  .view-nav-list { width:100%; }
  .view-nav-list li { flex:1 1 0; min-width:0; }
  .view-opt { width:100%; min-width:0; padding-inline:.4rem; }
  /* the secondary group: hidden until More opens, then a plain in-flow list */
  .top-secondary { display:none; order:3; }
  .top-secondary.is-open { display:grid; grid-template-columns:1fr; gap:.3rem; padding:.5rem; border:1px solid var(--hair-dark); border-radius:var(--r-panel); background:var(--night-2); }
  .top-secondary.is-open .divider { display:none; }
  .top-secondary.is-open > .btn,.top-secondary.is-open > .demo-chip,.top-secondary.is-open > .guide-chip { width:100%; min-height:2.75rem; justify-content:flex-start; padding-inline:.85rem; font-size:.8rem; white-space:normal; text-align:left; }
  .top-secondary.is-open > .btn--ghost { border-color:var(--hair-dark); }
  .top-secondary.is-open .guide-chip-label { display:inline; }
}

/* NOVERINT styles 07/11 — Record (passport, timeline, history, evidence, technical).
   Loaded in order by styles.css; the order is the cascade. */

/* --- Shell v2: Record (Tur 2C) ---
   Read-oriented: passport (first viewport) → timeline → history → basis →
   evidence → technical. Paper surface, calm high-density key/value rows,
   one coral primary, mono only for real technical values. The v2 shell no
   longer renders the v1 summary bar: its metrics live in the passport. */
.shell-v2 { height:100%; }
.record { padding:clamp(1rem,2vw,1.75rem) clamp(1rem,2.5vw,2.25rem) 3rem; background:var(--surface-sunk); }
.record:focus { outline:none; }
.record > * { max-width:900px; }
.record-head { padding:1.25rem 1.4rem 1.2rem; background:var(--surface-raised); border:1px solid var(--line); border-left:4px solid var(--night); border-radius:var(--r-panel); box-shadow:var(--shadow-panel); }
.rc-eyebrow { margin:0 0 .35rem; overflow-wrap:anywhere; }
.rc-title { margin:0 0 .55rem; font:800 clamp(1.35rem,2.2vw,1.7rem)/1.05 var(--font-display); letter-spacing:-.01em; text-transform:uppercase; }
.rc-title:focus-visible { outline:3px solid var(--focus); outline-offset:4px; border-radius:2px; }
.rc-status { margin:0 0 .7rem; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .5rem; }
.rc-status .pill--status { font-size:.78rem; padding:.28rem .62rem; }
.rc-status-note { overflow-wrap:anywhere; }
.rc-package,.rc-open { margin:0 0 .35rem; display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.2rem .8rem; font-size:.9rem; }
.rc-package-label { color:var(--ink-soft); font:600 .72rem/1.6 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
.rc-open.has-open span:last-child { color:var(--coral-deep); font-weight:700; }
.rc-boundary { margin:.9rem 0 0; padding:.7rem .85rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font-size:.86rem; line-height:1.5; }
.rc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:.9rem 0 0; padding-top:.9rem; border-top:1px solid var(--line); }
.rc-actions .small { max-width:54ch; }
.rc-primary { min-height:2.65rem; padding:.7rem 1.2rem; font-size:.92rem; }
.rc-back { margin:.6rem 0 0; }
.rc-back .text-button { min-height:24px; padding:.2rem 0; }
.rc-imported { margin:.5rem 0 0; padding:.45rem .7rem; border-left:3px solid var(--attention); background:var(--surface); }
.rc-empty { margin:.7rem 0 0; font-size:.92rem; }

.passport { margin-top:1rem; padding:1.1rem 1.4rem 1.2rem; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-panel); }
.passport h3,.rc-sec-title,.rc-sub-title { font:800 .92rem/1.2 var(--font-display); letter-spacing:.01em; text-transform:uppercase; }
.passport h3 { margin:0 0 .7rem; }
.pp-dl { margin:0; display:grid; grid-template-columns:10rem minmax(0,1fr); gap:0 .9rem; font-size:.86rem; }
.pp-dl dt,.pp-dl dd { padding:.42rem 0; border-top:1px solid var(--line); }
.pp-dl dt { color:var(--ink-soft); font:600 .72rem/1.7 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.pp-dl dd { margin:0; overflow-wrap:anywhere; }
.pp-dl dd .mono { font-size:.82rem; }
.rc-copy { min-height:24px; margin-left:.35rem; padding:.15rem .5rem; font-size:.7rem; vertical-align:middle; }
.rc-full { display:inline-block; max-width:100%; overflow-wrap:anywhere; word-break:break-all; font-size:.8rem; }
.pp-table-wrap { margin-top:.9rem; max-width:100%; overflow-x:auto; }
.pp-assets,.rc-rules { width:100%; border-collapse:collapse; font-size:.84rem; }
.pp-assets th,.pp-assets td,.rc-rules th,.rc-rules td { padding:.45rem .55rem; border-top:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.pp-assets thead th,.rc-rules thead th { border-top:0; white-space:nowrap; color:var(--ink-soft); font:600 .7rem/1.5 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
.pp-assets tbody th,.rc-rules tbody th { font-weight:700; }
.pp-assets td .pill { margin-left:.3rem; }
.pp-assets td .mono { font-size:.8rem; }
.pp-chain { list-style:none; margin:1rem 0 0; padding:.85rem 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
.pp-stage { position:relative; min-width:0; padding-right:.7rem; }
.pp-stage:not(:last-child)::after { content:""; position:absolute; z-index:0; top:.42rem; left:.9rem; right:-.1rem; height:2px; background:var(--line); }
.pp-node { position:relative; z-index:1; display:grid; place-items:center; width:.95rem; height:.95rem; margin-bottom:.5rem; border:2px solid var(--ink-soft); border-radius:50%; background:var(--surface-raised); font:700 .5rem/1 var(--font-mono); }
.pp-stage--current .pp-node { border-color:var(--pine); background:var(--pine); }
.pp-stage--current .pp-node::before { content:"✓"; color:#fff; }
.pp-stage--attention .pp-node { border-color:var(--attention); background:var(--attention); }
.pp-stage--attention .pp-node::before { content:"!"; color:#fff; }
.pp-stage--blocked .pp-node { border-color:var(--coral-deep); background:var(--coral-deep); }
.pp-stage--blocked .pp-node::before { content:"⚑"; color:#fff; font-size:.42rem; }
.pp-stage--unobserved .pp-node { border-style:dashed; background:transparent; }
.pp-stage b,.pp-stage span:not(.pp-node) { display:block; overflow-wrap:anywhere; }
.pp-stage b { font-size:.78rem; }
.pp-stage-status { margin-top:.15rem; font:700 11px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.pp-stage--current .pp-stage-status { color:var(--pine); }
.pp-stage--attention .pp-stage-status { color:var(--attention); }
.pp-stage--blocked .pp-stage-status { color:var(--coral-deep); }
.pp-stage-detail { margin-top:.1rem; color:var(--ink-soft); font:.72rem/1.4 var(--font-mono); }
.pp-caveat { margin:.9rem 0 0; }

.rc-scope { margin:1rem 0 0; padding:.6rem .9rem .7rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 1rem; }
.rc-scope legend { float:left; padding:0; margin-right:.4rem; color:var(--ink-soft); font:600 .72rem/2 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
.rc-scope-opt { display:inline-flex; align-items:center; gap:.35rem; min-height:24px; font-size:.86rem; cursor:pointer; }
.rc-scope-opt input { margin:0; width:1.15rem; height:1.15rem; accent-color:var(--coral-deep); }
.rc-scope-opt input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.rc-scope-note { flex:1 1 100%; }

.rc-sections { margin-top:1rem; display:grid; gap:.35rem; }
.rc-sec { min-width:0; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-control); } /* a grid item: never wider than its track (720 px overflowed by 6 px) */
.rc-sec > summary { min-height:2.75rem; display:flex; align-items:center; gap:.4rem .8rem; flex-wrap:wrap; padding:.55rem .95rem; cursor:pointer; list-style:none; }
.rc-sec > summary::-webkit-details-marker { display:none; }
.rc-sec > summary::before { content:"▸"; width:1rem; color:var(--ink-soft); font-size:.8rem; }
.rc-sec[open] > summary::before { content:"▾"; }
.rc-sec > summary:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; border-radius:var(--r-control); }
.rc-sec-meta { color:var(--ink-soft); font:600 .74rem/1.3 var(--font-mono); overflow-wrap:anywhere; }
.rc-sec-body { padding:.35rem 1rem 1.1rem; border-top:1px solid var(--line); }
.rc-sec-body > * { margin-top:.75rem; }
/* every heading under the Record's h2 is an h3 (the <summary> rows are not headings, so no level is skipped); .rc-h-sub is the quieter look for the basis groups */
.rc-sec-body h3 { margin:1.1rem 0 .4rem; font:800 .88rem/1.2 var(--font-display); letter-spacing:.01em; text-transform:uppercase; }
.rc-sec-body h3.rc-h-sub { margin:.9rem 0 .3rem; color:var(--ink-soft); font:600 .72rem/1.5 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
.rc-sec-body ul.small { margin:0; padding-left:1.1rem; }
.rc-sec-body ul.small li { margin:.15rem 0; overflow-wrap:anywhere; }
.rc-sub { border:1px dashed var(--line); border-radius:var(--r-control); }
.rc-sub + .rc-sub { margin-top:.5rem; }
.rc-sub > summary { min-height:2.5rem; display:flex; align-items:center; gap:.4rem .8rem; flex-wrap:wrap; padding:.5rem .8rem; cursor:pointer; list-style:none; }
.rc-sub > summary::-webkit-details-marker { display:none; }
.rc-sub > summary::before { content:"▸"; color:var(--ink-soft); font-size:.8rem; }
.rc-sub[open] > summary::before { content:"▾"; }
.rc-sub > summary:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
.rc-sub-body { padding:.2rem .8rem .8rem; }
.rc-sub-body > * + * { margin-top:.6rem; }
.rc-more { margin-top:.9rem; }
.rc-more > summary,.tl-tech > summary,.rc-json > summary { min-height:24px; display:inline-flex; align-items:center; cursor:pointer; color:var(--ink); font-weight:700; font-size:.82rem; text-decoration:underline; text-underline-offset:.3rem; }
.rc-more > summary:focus-visible,.tl-tech > summary:focus-visible,.rc-json > summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:2px; }

/* timeline: one vertical rule, glyph on the rule, stamp column, body */
.timeline { list-style:none; margin:.6rem 0 0; padding:0; position:relative; }
.timeline::before { content:""; position:absolute; top:.5rem; bottom:.5rem; left:.5rem; width:2px; background:var(--line); }
.tl-ev { position:relative; display:grid; grid-template-columns:1.6rem 9.5rem minmax(0,1fr); gap:0 .6rem; padding:.55rem 0; border-top:1px solid var(--line); }
.tl-ev:first-child { border-top:0; }
.tl-glyph { position:relative; z-index:1; width:1.05rem; height:1.05rem; display:grid; place-items:center; border-radius:50%; background:var(--surface-raised); color:var(--ink-soft); font-size:.62rem; line-height:1; border:2px solid var(--line); }
.tl-ev.is-current .tl-glyph { border-color:var(--pine); color:var(--pine); }
.tl-ev--decision_recorded .tl-glyph,.tl-ev--checks_recorded .tl-glyph { color:var(--ink); }
.tl-ev.is-current.tl-ev--decision_recorded .tl-glyph,.tl-ev.is-current.tl-ev--checks_recorded .tl-glyph { color:var(--pine); }
.tl-ev--evidence_opened .tl-glyph,.tl-ev--work_opened .tl-glyph,.tl-ev--work_reopened .tl-glyph { color:var(--coral-deep); border-color:var(--coral-deep); }
.tl-ev.is-history .tl-glyph { border-style:dashed; }
.tl-stamp { color:var(--ink-soft); font-size:.74rem; line-height:1.5; padding-top:.1rem; overflow-wrap:anywhere; }
.tl-body { min-width:0; }
.tl-label { margin:0; font-size:.9rem; font-weight:700; overflow-wrap:anywhere; }
.tl-ev.is-history .tl-label { font-weight:600; color:var(--ink); }
.tl-detail { margin:.15rem 0 0; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:center; }
.tl-tag { display:inline-block; padding:.1rem .42rem; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--ink-soft); font:700 11px/1.4 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
.tl-tag.is-current { border-color:var(--pine); color:var(--pine); }
.tl-tag.is-current::before { content:"✓ "; }
.tl-tag.is-open { border-color:var(--coral-deep); color:var(--coral-deep); }
.tl-tag.is-open::before { content:"⚑ "; }
.tl-tag.is-imported { border-color:var(--attention); color:var(--attention); }
.tl-tag.is-imported::before { content:"↧ "; }
.tl-tech { margin-top:.3rem; }
.tl-tech ul { margin:.3rem 0 0; padding-left:1.1rem; }
.tl-tech li { overflow-wrap:anywhere; word-break:break-all; margin:.1rem 0; }
.timeline--detail .tl-label { font-weight:600; }

/* history */
.hist-asset { padding:.9rem 0 .4rem; border-top:1px solid var(--line); }
.hist-asset:first-of-type { border-top:0; padding-top:.3rem; }
.hist-asset h3 { margin:0 0 .5rem; }
.hist-currency { padding:.6rem .8rem; border-left:3px solid var(--night); background:var(--surface); }
.hist-sentence { margin:0; font-size:.9rem; line-height:1.5; }
.hist-sentence + .hist-sentence { margin-top:.3rem; }
.hist-versions { list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.5rem; }
.hist-version { padding:.6rem .8rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.hist-version.is-current { border-color:var(--pine); }
.hist-version.is-history { background:transparent; }
.hist-vhead { margin:0 0 .45rem; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .6rem; }
.hist-vnum { font-weight:700; font-size:.9rem; }
.hist-dl { gap:.25rem .8rem; }
.hist-dd-tech { grid-column:2; }
.hist-decision b { text-transform:capitalize; }
.hist-decision.is-earlier_version,.hist-decision.is-superseded { color:var(--ink-soft); }
.hist-unbound { margin-top:1rem; padding:.7rem .85rem; border-left:3px solid var(--attention); background:var(--surface); }
.hist-unbound h4 { margin:0 0 .4rem; }
.rc-inline-link { margin:.6rem 0 0; }
.rc-inline-link .text-button,.rc-item .text-button { min-height:24px; padding:.2rem 0; }

/* evidence & open work */
.rc-items { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.rc-item { padding:.6rem .8rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.rc-item.is-open { border-left:3px solid var(--coral-deep); }
.rc-item.is-closed { color:var(--ink-soft); }
.rc-item.is-unlinked { border-style:dashed; }
.rc-item-head { margin:0 0 .25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .5rem; }
.rc-item p { margin:.2rem 0 0; }
.rc-item .basis { color:var(--ink-soft); font:.75rem/1.45 var(--font-mono); }

/* basis & sources */
.rc-sources { list-style:none; margin:0; padding:0; }
.rc-sources li { margin:.15rem 0; overflow-wrap:anywhere; }
.rc-sources a { color:var(--ink); }
.rc-rules tr.is-unrecorded { color:var(--ink-soft); }
.rc-rules th code { font-size:.8rem; }
.rc-sec-body li.is-history { color:var(--ink-soft); }

/* technical */
.rc-json { margin-top:.9rem; }
.rc-json pre { margin:.5rem 0 0; max-width:100%; max-height:28rem; overflow:auto; padding:.8rem; background:var(--night); color:var(--chalk); border-radius:var(--r-control); font-size:.74rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }

@media (max-width:900px) {
  #app[data-view="record"] .shell-v2 .queue { display:none; }
  .record { padding:1rem 1rem 2.5rem; }
  .record-head { padding:1rem 1rem .9rem; }
  .rc-package,.rc-open { grid-template-columns:1fr; gap:0; font-size:.86rem; }
  .rc-boundary { margin-top:.7rem; padding:.55rem .7rem; font-size:.8rem; }
  .rc-actions { margin-top:.7rem; padding-top:.7rem; }
  .pp-dl { grid-template-columns:1fr; }
  .pp-dl dt { padding-bottom:0; border-top:1px solid var(--line); }
  .pp-dl dd { padding-top:.1rem; border-top:0; }
  .pp-chain { grid-template-columns:1fr; gap:.1rem; }
  .pp-stage { display:grid; grid-template-columns:1.1rem 1fr; gap:.65rem; padding:.45rem 0; padding-right:0; }
  .pp-stage:not(:last-child)::after { top:1.4rem; bottom:-.55rem; left:.45rem; right:auto; width:2px; height:auto; }
  .pp-node { margin:.1rem 0 0; }
  .tl-ev { grid-template-columns:1.6rem minmax(0,1fr); }
  .tl-stamp { grid-column:2; }
  .tl-body { grid-column:2; }
  .hist-dd-tech { grid-column:1; }
  .rc-sec > summary { padding:.55rem .75rem; }
  .rc-sec-body { padding:.3rem .75rem 1rem; }
}
.rc-nowrap { white-space:nowrap; }
@media (max-width:560px) {
  .pp-assets thead,.rc-rules thead { display:none; }
  .pp-assets tr,.rc-rules tr { display:grid; grid-template-columns:1fr; padding:.45rem 0; border-top:1px solid var(--line); }
  .pp-assets th,.pp-assets td,.rc-rules th,.rc-rules td { padding:.1rem 0; border-top:0; }
  .pp-assets td::before,.rc-rules td::before { content:attr(data-label) " "; color:var(--ink-soft); font:600 .68rem/1.6 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
  .rc-nowrap { white-space:normal; }
}

/* NOVERINT styles 08/11 — Reach Lab (workspace mode).
   Loaded in order by styles.css; the order is the cascade. */

/* ===== Reach Lab (G1) — second working mode, same identity ===== */
.mode-nav { margin-right:.5rem; }
.mode-opt { min-width:6.2rem; }
.reach-body { grid-template-columns:284px minmax(0,1fr); }
.reach-list .queue-count { margin-bottom:.4rem; }
.reach-rail-note { margin-top:1rem; }
.reach-editor > * { max-width:860px; }
.reach-editor .reach-back { margin-bottom:.75rem; }
.reach-back { display:none; } /* always rendered; shown at ≤ 900 px only (G3-D10) */
.reach-empty h2 { margin:.2rem 0 .5rem; }
.reach-empty .btn { margin-top:.8rem; }
.reach-band .eyebrow { color:var(--accent); margin:0 0 .3rem; }
.reach-band h2 { margin:0 0 .35rem; }
.reach-band-status { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.25rem 0; }
.reach-band-actions { margin:.7rem 0 .5rem; }
.reach-sec { margin-top:.9rem; }
.reach-sec > summary h3 { margin:0; font:800 .92rem/1.2 var(--font-display); letter-spacing:.01em; text-transform:uppercase; }
.pill--reach { font:700 .7rem/1.3 var(--font-mono); }
.pill--reach[data-state="draft"] { background:#e6e6ea; color:#3a3a42; }
.pill--reach[data-state="draft"]::before { content:"○"; }
.pill--reach[data-state="needs_input"] { background:#FFE3EA; color:#7c231f; }
.pill--reach[data-state="needs_input"]::before { content:"!"; }
.pill--reach[data-state="needs_review"] { background:#EEF2F6; color:#5a4600; }
.pill--reach[data-state="needs_review"]::before { content:"●"; }
.pill--reach[data-state="changed_since_review"] { background:#E1E6EE; color:#6c3500; }
.pill--reach[data-state="changed_since_review"]::before { content:"→"; }
.pill--reach[data-state="reviewed_snapshot"] { background:var(--electric); color:var(--electric-ink); }
.pill--reach[data-state="reviewed_snapshot"]::before { content:"✓"; }
.pill--reach-result { margin-right:.3rem; }
.pill--reach-result[data-result="finding"] { background:#FFE3EA; color:#7c231f; }
.pill--reach-result[data-result="needs_human_review"] { background:#EEF2F6; color:#5a4600; }
.pill--reach-result[data-result="insufficient_input"] { background:#E1E6EE; color:#6c3500; }
.pill--reach-result[data-result="unsupported"] { background:#e3d9ff; color:#3d2a80; }
.pill--reach-result[data-result="no_finding_in_checked_scope"] { background:#e6e6ea; color:#3a3a42; }
.reach-fields .field.is-missing input,.reach-fields .field.is-missing textarea { border-color:var(--attention); }
.reach-missing { color:var(--accent); font-weight:700; font-size:.76rem; }
.reach-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.reach-bindings li,.reach-results li { display:grid; gap:.2rem; }
.reach-bindings li .btn { justify-self:start; margin-top:.3rem; }
.reach-explain { margin:.15rem 0 0; }
.reach-tech > summary { cursor:pointer; font-size:.78rem; color:var(--ink-soft); }
.reach-tech > summary,.reach-map > summary { min-height:24px; display:flex; align-items:center; } /* WCAG 2.2 target size (G3-D9) */
.reach-suggestions { margin-top:.9rem; padding:.8rem; border:1px dashed var(--line); border-radius:var(--r-control); }
.reach-suggestions h4 { margin:0 0 .4rem; font-size:.88rem; }
.reach-sug { display:block; margin:.25rem 0; font-size:.84rem; }
.reach-map { margin-top:.9rem; }
.reach-map > summary { cursor:pointer; font-size:.84rem; font-weight:700; }
.reach-promise { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.6rem; }
.reach-promise-col h4 { margin:0 0 .25rem; font:700 .72rem/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.reach-promise-col .delivery-text { min-height:0; }
.reach-change-form { display:grid; gap:.2rem; }
.reach-impact { margin-top:1rem; padding:.9rem 1rem; border:1px solid var(--line); border-left:4px solid var(--coral); border-radius:var(--r-control); background:var(--surface-sunk); }
.reach-impact:focus { outline:3px solid var(--focus); outline-offset:2px; }
.reach-impact h4 { margin:0 0 .3rem; font-size:.95rem; overflow-wrap:anywhere; }
.reach-impact h5 { margin:.7rem 0 .2rem; font:700 .74rem/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.reach-impact-summary { margin:0; font-weight:700; }
.reach-impact .basis { overflow-wrap:anywhere; }
/* G2: experiments · answer worksheet · platform notes */
.reach-plan { margin-top:.9rem; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-sunk); }
.reach-plan h4 { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 .3rem; font-size:.95rem; overflow-wrap:anywhere; }
.reach-plan h5 { margin:.8rem 0 .25rem; font:700 .74rem/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.reach-plan .basis,.reach-plan .delivery-text { overflow-wrap:anywhere; }
.reach-plan-why { margin:.3rem 0; }
.pill--plan[data-state="basis_not_reviewed"],.pill--plan[data-state="no_facts_bound"] { background:#e6e6ea; color:#3a3a42; }
.pill--plan[data-state="basis_not_reviewed"]::before,.pill--plan[data-state="no_facts_bound"]::before { content:"○"; }
.pill--plan[data-state="basis_reviewed"],.pill--plan[data-state="facts_current"] { background:var(--electric); color:var(--electric-ink); }
.pill--plan[data-state="basis_reviewed"]::before,.pill--plan[data-state="facts_current"]::before { content:"✓"; }
.pill--plan[data-state="basis_changed"],.pill--plan[data-state="facts_changed"] { background:#E1E6EE; color:#6c3500; }
.pill--plan[data-state="basis_changed"]::before,.pill--plan[data-state="facts_changed"]::before { content:"→"; }
.reach-readout { margin-top:.6rem; padding:.6rem .8rem; border-left:3px solid var(--line); }
.reach-readout-variant { margin:.3rem 0; }
.reach-readout-variant b { display:block; font-size:.82rem; }
.reach-obs { margin:.1rem 0; overflow-wrap:anywhere; }
.reach-readout-result { margin:.6rem 0 .2rem; font-weight:700; }
.reach-variants li,.reach-answer-obs li,.reach-cards li { display:grid; gap:.2rem; }
.reach-answer-obs .delivery-text { white-space:pre-wrap; }
.reach-live li { padding:.25rem .6rem; }
@media (max-width:1180px) {
  .reach-body { grid-template-columns:250px minmax(0,1fr); }
  .reach-body .reach-list { position:sticky; top:64px; align-self:start; max-height:calc(100vh - 64px); overflow:auto; }
}
@media (max-width:900px) {
  .reach-body { display:block; }
  .reach-body .reach-list { position:static; max-height:none; border-right:0; }
  .reach-body[data-reach-pane="editor"] .reach-list { display:none; }
  .reach-body[data-reach-pane="list"] .reach-editor { display:none; }
  .reach-editor { padding:1rem 1rem 2rem; }
  .reach-back { display:inline-flex; }
  .mode-nav { margin-right:0; }
  .view-nav + .view-nav { margin-top:.1rem; }
}
@media (max-width:560px) {
  .reach-promise { grid-template-columns:1fr; }
}

/* NOVERINT styles 09/11 — Working Studio and Release Studio art direction (overrides above).
   Loaded in order by styles.css; the order is the cascade. */

/* Working Studio — scoped to v2. The public brand and v1 stay unchanged.
   Quiet chrome / real content / explicit tasks. No decorative dashboards. */
.studio-refined {
  --font-body: "Noverint Sans", "Helvetica Neue", Arial, sans-serif;
  --font-studio-display: "Noverint Display", "Arial Narrow", Arial, sans-serif;
  --surface:#ECF0F5; --surface-raised:#F9FAFC; --surface-sunk:#E2E7EF;
  --ink:#1b1720; --ink-soft:#5b5560; --line:#d3c8d0; --accent:#b6312d;
  --focus:#516de8; --shadow-panel:none;
  font-family:var(--font-body);
}
.studio-refined .app-topbar { padding:12px 22px; gap:10px 18px; background:#19131f; }
.studio-refined .app-topbar .wordmark { border:0; padding-right:6px; }
.studio-refined .context-label { display:none; }
/* run-mode line under the wordmark (app.js renderTopbar) — visible at every width */
.studio-refined .app-topbar .wordmark { grid-template-columns:auto; gap:2px; }
.studio-refined .app-topbar .wordmark span { display:block; color:#d6cad8; font:600 11px/1.2 var(--font-mono); letter-spacing:.08em; }
.studio-refined .app-topbar .context { flex:1; display:flex; gap:5px 14px; flex-wrap:wrap; }
.studio-refined .cname { font-size:13px; font-weight:600; max-width:32ch; }
.studio-refined .cmeta { display:block; width:100%; font:11px/1.4 var(--font-body); color:#d4cbd7; }
.studio-refined .cstatus .currency-chip { border:0; padding:0; font:500 11px/1.4 var(--font-body); }
.studio-refined .app-topbar .spacer { display:none; }
.studio-refined .view-nav-list { border:0; border-radius:7px; background:#30233a; padding:3px; }
.studio-refined .view-opt { font:600 12px/1.2 var(--font-body); text-transform:none; letter-spacing:0; min-width:0; padding:8px 13px; border-radius:5px; }
.studio-refined .mode-nav .view-opt.is-on { background:#78d6b4; color:#102019; }
.studio-refined .more-trigger { display:inline-flex; order:3; align-items:center; gap:6px; min-height:34px; padding:7px 10px; background:transparent; border:1px solid #6a5c70; color:#F7F9FA; border-radius:6px; font:600 12px/1 var(--font-body); cursor:pointer; }
.studio-refined .top-secondary { display:none; }
.studio-refined .top-secondary.is-open { display:flex; order:4; flex:1 1 100%; gap:8px; padding:10px 0 0; background:transparent; border:0; border-top:1px solid #4c3d54; border-radius:0; }
.studio-refined .top-secondary.is-open > button { width:auto; min-height:36px; }
.studio-refined .top-secondary .divider { display:none; }
.studio-refined .shell-v2,.studio-refined .reach-body { grid-template-columns:252px minmax(0,1fr); }
.studio-refined .reach-body { height:100%; }
.studio-refined .queue {
  --chalk:#1b1720; --chalk-2:#5b5560; --chalk-3:#655c67; --hair-dark:#d3c8d0;
  background:#E2E7EF; color:#1b1720; border-right:1px solid #d3c8d0;
  padding:24px 14px; box-shadow:none;
}
.studio-refined .queue-head { padding:0 10px 14px; }
.studio-refined .queue-head h2 { color:#252d2a; font:650 17px/1.3 var(--font-body); letter-spacing:-.02em; text-transform:none; margin:0 0 6px; }
.studio-refined .queue-count { color:#53615b; font-size:12px; margin:0; }
.studio-refined .queue-campaign { margin-top:10px; padding-top:10px; border-top:1px solid #d5dcd8; font-size:11px; line-height:1.5; }
.studio-refined .queue-campaign-label { font:600 11px/1.5 var(--font-body); color:#53615b; }
.studio-refined .queue-list { gap:6px; }
.studio-refined .queue-row { border:0; padding:0; gap:0; border-radius:8px; }
.studio-refined .q-select { grid-template-columns:1fr; padding:12px; gap:7px; border:1px solid transparent; border-radius:8px; color:#252d2a; }
.studio-refined .q-select:hover { background:#e4d9dd; }
.studio-refined .q-select[aria-current="true"] { border-color:#b9a9b7; background:#F9FAFC; box-shadow:0 2px 8px #19131f0b; }
.studio-refined .queue-row.is-top .q-select { border-left-color:#b6312d; }
.studio-refined .q-title { font-size:13px; font-weight:650; }
.studio-refined .q-ver { font:500 11px/1.4 var(--font-body); color:#555e58; } /* 4.88:1 on the hover tint (was 4.13) */
.studio-refined .q-next { margin-left:auto; color:#102019; background:#bcebd9; font:600 11px/1.2 var(--font-body); text-transform:none; letter-spacing:0; }
.studio-refined .q-select .pill { justify-self:start; font:500 11px/1.3 var(--font-body); padding:3px 7px; }
.studio-refined .q-why { font-size:11px; line-height:1.45; color:#59645e; }
.studio-refined .queue-row.is-selected .q-why { color:#59645e; }
.studio-refined .q-action { padding:4px 12px 10px; gap:5px; }
.studio-refined .q-action-title { display:none; } /* same task in select reason + button; no data removed */
.studio-refined .queue-row:not(.queue-row--campaign) .q-action { display:none; } /* choose in Queue, act in Review */
.studio-refined .queue-row:not(.is-selected) .q-why { display:none; }
.studio-refined .q-action .btn { min-height:28px; font-size:11px; padding:4px 8px; color:#30233a; background:transparent; border-color:#ab9eaa; }
.studio-refined .queue-adders { padding:8px; }
.studio-refined .queue-adders .btn { border:1px dashed #958795; color:#30233a; background:transparent; min-height:38px; }
.studio-refined .queue-setup { margin:14px 8px 0; }
.studio-refined .queue-setup summary { color:#43594b; font:600 12px/1.4 var(--font-body); letter-spacing:0; text-transform:none; }
.studio-refined .queue .muted { color:#53615b; }
.studio-refined .reach-rail-note { padding:0 8px; font-size:11px; line-height:1.6; }
.studio-refined :is(.review,.record) { background:#ECF0F5; padding:30px clamp(20px,3.5vw,60px) 60px; }
.studio-refined :is(.review,.record) > * { max-width:1024px; margin-left:auto; margin-right:auto; }
.studio-refined .review-band,.studio-refined .record-head { background:transparent; padding:0 0 22px; border:0; box-shadow:none; border-radius:0; }
.studio-refined .review-band .eyebrow,.studio-refined .rc-eyebrow { font:600 11px/1.4 var(--font-body); color:#606b66; text-transform:none; letter-spacing:.02em; margin-bottom:7px; }
.studio-refined :is(.rv-title,.reach-band h2,.rc-title) { font:650 clamp(23px,2.5vw,30px)/1.2 var(--font-body); letter-spacing:-.04em; text-transform:none; margin-bottom:10px; }
.studio-refined .rv-ver { font:500 12px/1 var(--font-body); color:#616a65; padding:4px 7px; background:#e7ece9; border-radius:5px; }
.studio-refined .rv-status { margin:0 0 10px; }
.studio-refined .rv-status .pill,.studio-refined .reach-band .pill { font:600 11px/1.4 var(--font-body); }
.studio-refined .rv-why,.studio-refined .review-focus-why { font-size:13px; line-height:1.6; color:#525b56; max-width:78ch; margin:0 0 12px; }
.studio-refined .rv-action { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 16px; border:0; padding:0; }
.studio-refined .rv-next { font-size:12px; font-weight:500; margin:0; flex:1 1 240px; }
.studio-refined .rv-next-label { background:transparent; color:#52655a; padding:0; font:600 11px/1.4 var(--font-body); text-transform:none; letter-spacing:0; }
.studio-refined .rv-note { grid-column:1/-1; font-size:11px; margin:0; }
.studio-refined .rv-links { margin-top:12px; gap:8px 18px; }
.studio-refined .text-button { font-size:12px; text-underline-offset:3px; font-weight:550; }
.studio-refined .rv-other { font-size:11px; margin-top:8px; }
.studio-refined .btn--primary { color:#F7F9FA; background:#19131f; border-color:#19131f; border-radius:7px; box-shadow:none; font:600 13px/1.3 var(--font-body); min-height:40px; padding:10px 16px; }
.studio-refined .btn--primary:hover { background:#30233a; border-color:#30233a; }
.studio-refined .asset-canvas { background:#F9FAFC; border:1px solid #d3c8d0; border-radius:12px; overflow:hidden; margin-top:0; margin-bottom:24px; }
.studio-refined .asset-canvas-head { padding:12px 20px; border-bottom:1px solid #eef0ef; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; font-size:11px; font-weight:600; color:#647069; }
.studio-refined .asset-copy { margin:0; padding:24px; font:400 17px/1.75 var(--font-body); white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow:auto; color:#28322c; }
.studio-refined .asset-image { display:block; max-height:310px; max-width:100%; width:auto; margin:20px auto; object-fit:contain; }
.studio-refined .work-deck { display:block; margin-top:0; }
.studio-refined .work-tabs { display:flex; flex-wrap:wrap; gap:4px 20px; border-bottom:1px solid #ccd5ce; margin-bottom:18px; }
.studio-refined .work-tabs button { min-height:44px; padding:10px 2px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; color:#637069; font:600 13px/1.3 var(--font-body); cursor:pointer; }
.studio-refined .work-tabs button[aria-selected="true"] { color:#19131f; border-color:#b6312d; }
.studio-refined .work-tabs button:hover { color:#19131f; }
.studio-refined .work-tabs button:focus-visible,.studio-refined .work-panel:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.studio-refined .work-panel[hidden] { display:none !important; }
.studio-refined .work-task-hint { font-size:12px; color:#505d56; margin:0 0 16px; }
.studio-refined .rv-sec { background:#F9FAFC; border-color:#d3c8d0; border-radius:8px; margin:0 0 10px; box-shadow:none; }
.studio-refined .rv-sec > summary { padding:14px 18px; gap:8px; }
.studio-refined :is(.rv-sec-title,.reach-sec > summary h3,.rc-sec-title,.passport h3) { font:600 14px/1.4 var(--font-body); letter-spacing:-.01em; text-transform:none; }
.studio-refined .rv-sec-meta { font:400 11px/1.5 var(--font-body); }
.studio-refined .rv-sec-body { padding:4px 20px 20px; border-color:#eef0ef; }
.studio-refined .delta-diff { font:400 15px/1.8 var(--font-body); border-radius:6px; }
.studio-refined .reach-band > .small:last-child { font-size:11px; max-width:82ch; line-height:1.5; }
.studio-refined .reach-band { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 24px; }
.studio-refined .reach-band > :is(.eyebrow,.small) { grid-column:1/-1; }
.studio-refined .reach-band > h2 { grid-column:1; margin:0; }
.studio-refined .reach-band-status { grid-column:1; margin:6px 0; }
.studio-refined .reach-band .review-focus-why { grid-column:1; margin:0; }
.studio-refined .reach-band-actions { grid-column:2; grid-row:2/5; align-self:center; margin:0; }
.studio-refined .reach-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.studio-refined .reach-fields .field { margin:0; }
.studio-refined .reach-fields .field:first-child,.studio-refined .reach-fields > .reach-actions,.studio-refined .reach-fields > p { grid-column:1/-1; }
.studio-refined :is(.reach-fields,.reach-change-form) label { font:600 12px/1.5 var(--font-body); margin-bottom:8px; color:#30233a; }
.studio-refined :is(input,textarea,select) { border-color:#a99ca8; background:#F9FAFC; border-radius:6px; color:#1b1720; font-family:var(--font-body); }
.studio-refined textarea { line-height:1.65; font-size:14px; }
.studio-refined .reach-fields .small { font-size:11px; line-height:1.5; margin:6px 0 0; }
.studio-refined .reach-save-state { font-size:12px; color:#54645a; margin:0; }
.studio-refined .reach-save-state.is-dirty { color:#7b4410; background:#F1F3F7; border-left:3px solid #aa732d; padding:10px 12px; border-radius:4px; }
.studio-refined .reach-actions { gap:8px; }
.studio-refined .reach-actions .btn { font-size:12px; border-radius:6px; }
.studio-refined .reach-bindings { list-style:none; padding:0; }
.studio-refined .reach-bindings li { padding:12px 0; border-bottom:1px solid #e0e6e2; }
.studio-refined .reach-clear-results { margin-top:20px; padding-top:16px; border-top:1px solid #dce0df; }
.studio-refined .reach-clear-results > summary { cursor:pointer; font-size:12px; min-height:32px; color:#456250; }
.studio-refined .reach-results { list-style:none; padding:0; }
.studio-refined .reach-results > li { margin:10px 0; border:1px solid #dce0df; border-left:3px solid #b89b69; border-radius:6px; padding:14px 16px; background:#fafbf9; }
.studio-refined .reach-results > li[data-status="no_finding_in_checked_scope"] { border-left-color:#8aa995; }
.studio-refined .reach-results > li > b { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; font-size:13px; }
.studio-refined .reach-results > li > p { font-size:13px; line-height:1.65; }
.studio-refined .reach-results .reach-tech > summary { font-size:11px; }
.studio-refined .passport,.studio-refined .rc-sec { border-color:#dce0df; border-radius:8px; box-shadow:none; }
.studio-refined .pp-dl dt,.studio-refined .rc-package-label { font-family:var(--font-body); text-transform:none; letter-spacing:0; }
.studio-refined .record-head .rc-boundary { border:0; border-left:2px solid #8aab98; border-radius:0; padding:4px 12px; font-size:12px; }
.studio-refined .rc-title { margin:0 0 12px; }
.studio-refined .reach-back { border:0; padding-left:0; color:#354f40; font-size:12px; }
.studio-refined .toast { border-radius:8px; }
.studio-refined dialog { background:#F9FAFC; border:1px solid #d3c8d0; border-top:3px solid #78d6b4; border-radius:12px; color:#1b1720; }
.studio-refined dialog h2 { font:650 24px/1.25 var(--font-body); text-transform:none; letter-spacing:-.03em; }
.studio-refined .dialog-kicker { color:#5c6c62; font:600 11px/1.4 var(--font-body); letter-spacing:.03em; }
.studio-refined dialog .btn--signal { background:#19131f; color:#F7F9FA; border-color:#19131f; }
/* The welcome guide is intentionally a dark orientation surface. The generic
   refined-dialog rule above previously painted it white while its descendants
   retained the dark-surface chalk colours, making the introduction unreadable. */
.studio-refined dialog.guide-dlg { background:#19131f; color:#F7F9FA; border:1px solid #4c3d54; border-top:4px solid #ff5a3d; }
.studio-refined .guide-dlg .guide-card h2 { color:#F7F9FA; }
.studio-refined .guide-dlg .guide-card > p { color:#d4cbd7; }
.studio-refined .guide-dlg .guide-meta,.studio-refined .guide-dlg .guide-fineprint { color:#aea4b2; }
.studio-refined .guide-dlg .guide-x { color:#d4cbd7; border-color:#6a5c70; }
.studio-refined .guide-dlg .guide-x:hover { color:#F7F9FA; border-color:#F7F9FA; }
.studio-refined .guide-dlg .btn--signal { background:#ff5a3d; border-color:#ff5a3d; color:#19131f; }
.studio-refined .guide-dlg .btn--signal:hover { background:#ff765f; border-color:#ff765f; }
.studio-refined .guide-dlg .btn--ghost { color:#d4cbd7; border-color:#6a5c70; }
.studio-refined .guide-dlg .btn--ghost:hover { color:#F7F9FA; border-color:#F7F9FA; }

/* A primary surface is one coherent choice, not two unrelated text fields. */
.studio-refined .surface-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; padding:14px; margin:.2rem 0 .9rem; border:1px solid #d3c8d0; border-left:3px solid #ff5a3d; border-radius:8px; background:#EEF2F6; }
.studio-refined .surface-fields > .field { margin:0; }
.studio-refined .surface-custom { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.studio-refined .surface-custom[hidden] { display:none; }
.studio-refined .surface-boundary { grid-column:1/-1; margin:9px 0 0; padding-top:9px; border-top:1px solid #ddd2d9; line-height:1.5; }
.studio-refined .surface-note { margin:.5rem 0 0; padding:.65rem .75rem; border-left:3px solid #78d6b4; background:#e2f5ed; color:#273b34; }
.studio-refined :is(.reach-editor,.record) :is(h4,h5) { font-family:var(--font-body); text-transform:none; letter-spacing:0; }
.studio-refined .reach-impact-group > summary { cursor:pointer; font:600 12px/1.5 var(--font-body); padding:12px 0; }
.studio-refined .reach-impact-group[data-group="unmapped"] > summary { color:#795019; }
@media (min-width:901px) {
  .studio-refined .app-topbar > .view-nav:not(.mode-nav) { order:2; }
  .studio-refined .queue { overflow:auto; }
}
@media (max-width:1180px) and (min-width:901px) {
  .studio-refined .app-topbar .context { flex-basis:35%; }
  .studio-refined .app-topbar > .view-nav:not(.mode-nav) { flex:0 0 auto; width:auto; }
}
@media (max-width:900px) {
  .studio-refined .app-topbar { padding:12px; gap:10px; }
  .studio-refined .app-topbar .context { flex:1 1 calc(100% - 160px); }
  .studio-refined .cname { max-width:none; font-size:12px; }
  .studio-refined .cmeta { font-size:11px; }
  .studio-refined .mode-nav { order:1; flex:1 1 auto; width:auto; }
  .studio-refined .view-nav:not(.mode-nav) { order:4; flex-basis:100%; width:100%; }
  .studio-refined .top-secondary.is-open { order:5; display:grid; grid-template-columns:1fr 1fr; }
  .studio-refined .top-secondary.is-open > button { width:100%; }
  .studio-refined .view-opt { padding:8px 10px; font-size:12px; }
  .studio-refined .shell-v2,.studio-refined .reach-body { display:block; }
  .studio-refined :is(.review,.record) { padding:20px 16px 40px; }
  .studio-refined .queue { padding:22px 14px; }
  .studio-refined .review-band { padding-bottom:20px; }
  .studio-refined .asset-copy { padding:18px; font-size:15px; }
  .studio-refined .asset-canvas-head { padding:10px 16px; }
  .studio-refined .work-tabs { gap:4px 16px; }
  .studio-refined .work-tabs button { font-size:12px; }
}
@media (max-width:560px) {
  .studio-refined .surface-fields,.studio-refined .surface-custom { grid-template-columns:1fr; }
  .studio-refined .reach-band { display:block; }
  .studio-refined .reach-band-actions { margin:12px 0; }
  .studio-refined .reach-fields { grid-template-columns:1fr; }
  .studio-refined .rv-action { display:block; }
  .studio-refined .rv-primary { margin-top:10px; }
  .studio-refined .rv-note { margin-top:8px; }
  .studio-refined .rv-sec > summary { padding:12px; }
  .studio-refined .rv-sec-body { padding:4px 14px 16px; }
}

/* Release Studio — product art direction, 2026-09-22.
   The interface is a working surface, not a stack of generic dashboard cards:
   dark operational rail, paper review stage, signal-colour state and a ruled
   evidence record. Scope stays inside the v2 shell; the public site and v1
   rollback path remain untouched. */
.studio-refined {
  --studio-night:#17111d;
  --studio-plum:#2b1d33;
  --studio-paper:#F8FAFB;
  --studio-paper-2:#E7EBF1;
  --studio-coral:#ff5a3d;
  --studio-coral-deep:#a9322a;
  --studio-mint:#78d6b4;
  --studio-lime:#c8ff47;
  --studio-blue:#4267d5;
  --studio-rule:#cfc1ca;
  --studio-quiet:#655d68;
  background:var(--studio-night);
}
.studio-refined #frame { background:var(--studio-paper-2); }
.studio-refined .app-topbar {
  min-height:72px;
  padding:12px 18px;
  background:var(--studio-night);
  border-bottom:0;
  box-shadow:inset 0 -1px #4d3b55;
}
.studio-refined .app-topbar::before {
  display:none;
}
.studio-refined .app-topbar .wordmark b { font-weight:900; letter-spacing:.085em; }
.studio-refined .app-topbar .context { padding-left:4px; }
.studio-refined .cname { color:#F8FAFB; font-size:14px; }
.studio-refined .cmeta { color:#bfb3c3; letter-spacing:.015em; }
.studio-refined .view-nav-list {
  gap:1px;
  padding:2px;
  border-radius:4px;
  background:#382742;
  box-shadow:inset 0 0 0 1px #54405e;
}
.studio-refined .view-opt {
  position:relative;
  min-height:36px;
  padding:9px 14px;
  border-radius:2px;
  color:#cbbfce;
}
.studio-refined .view-opt.is-on { background:var(--studio-paper); color:var(--studio-night); }
.studio-refined .mode-nav .view-opt.is-on { background:var(--studio-mint); color:#12251e; }
.studio-refined .view-opt.is-on::after {
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-4px;
  height:3px;
  background:var(--studio-coral);
}
.studio-refined .mode-nav .view-opt.is-on::after { background:#163c2e; }
.studio-refined .more-trigger { border-radius:3px; border-color:#77647d; }

/* Dark release rail: compact, scannable, visually distinct from the work. */
.studio-refined .shell-v2,.studio-refined .reach-body { grid-template-columns:286px minmax(0,1fr); }
.studio-refined .queue {
  --chalk:#F8FAFB; --chalk-2:#d6cad8; --chalk-3:#aea0b3; --hair-dark:#4d3b55;
  position:relative;
  padding:28px 16px 44px;
  background:var(--studio-plum);
  color:#F8FAFB;
  border-right:0;
  box-shadow:inset -1px 0 #4d3b55;
}
/* 901–1180 px: the rail stays in view while a long Review scrolls. The older
   rule used top:64px for a sticky top bar that no longer exists; with
   position:relative above, that offset pushed the rail 64 px down. */
@media (min-width:901px) and (max-width:1180px) {
  .studio-refined .queue { position:sticky; top:0; max-height:100vh; }
}
.studio-refined .queue::after {
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:4px;
  background:var(--studio-coral);
  opacity:.9;
  pointer-events:none;
}
.studio-refined .queue-head { padding:0 10px 18px; }
.studio-refined .queue-head::before {
  content:"RELEASE LINE";
  display:block;
  margin-bottom:10px;
  color:var(--studio-mint);
  font:800 10px/1 var(--font-mono);
  letter-spacing:.15em;
}
.studio-refined .queue-head h2 { color:#F8FAFB; font-size:20px; font-weight:760; }
.studio-refined .queue-count { color:#bfb3c3; }
.studio-refined .queue-campaign { border-color:#57425f; color:#d6cad8; }
.studio-refined .queue-campaign-label { color:#9d8da4; }
.studio-refined .queue-list { gap:5px; counter-reset:release-item; }
.studio-refined .queue-row { counter-increment:release-item; }
.studio-refined .q-select {
  position:relative;
  grid-template-columns:24px minmax(0,1fr);
  column-gap:9px;
  padding:12px 11px;
  border-radius:3px;
  color:#EEF2F6;
}
.studio-refined .q-select::before {
  content:counter(release-item,decimal-leading-zero);
  grid-column:1;
  grid-row:1 / span 4;
  padding-top:2px;
  color:#8f7e96;
  font:700 9px/1.4 var(--font-mono);
  letter-spacing:.04em;
}
.studio-refined .q-select > * { grid-column:2; }
.studio-refined .q-select:hover { background:#3a2943; }
.studio-refined .q-select[aria-current="true"] {
  border-color:transparent;
  background:var(--studio-paper);
  color:var(--studio-night);
  box-shadow:7px 7px 0 #140f19;
}
.studio-refined .q-select[aria-current="true"]::before { color:var(--studio-coral-deep); }
.studio-refined .queue-row.is-top .q-select { border-left-color:var(--studio-coral); }
.studio-refined .q-title { font-size:13px; font-weight:720; }
.studio-refined .q-ver { color:#b9aabd; }
.studio-refined .q-select[aria-current="true"] .q-ver { color:#665d68; }
.studio-refined .q-next { border-radius:2px; background:var(--studio-lime); color:#172012; }
.studio-refined .q-select .pill { border-radius:2px; }
.studio-refined .q-why,.studio-refined .queue-row.is-selected .q-why { color:#716876; }
.studio-refined .queue-row:not(.is-selected) .q-why { color:#b9acbc; }
.studio-refined .queue-adders { margin-top:18px; border-top:1px solid #584460; padding:16px 8px 0; }
.studio-refined .queue-adders .btn { color:#F8FAFB; border-color:#8f7e96; border-radius:3px; }
.studio-refined .queue-adders .btn:hover { background:var(--studio-mint); border-color:var(--studio-mint); color:#16231d; }
.studio-refined .queue-setup { border-color:#584460; }
.studio-refined .queue-setup summary,.studio-refined .queue .muted { color:#bdb0c0; }
.studio-refined .queue-setup .kv-row,.studio-refined .queue-setup .kv-block { color:#cfc3d1; }
.studio-refined .queue-setup .kv-val,.studio-refined .queue-setup .text-button { color:#F8FAFB; }
/* the rail went plum after the light-rail rules above were written: its own buttons need light text (was 1.08:1) */
.studio-refined .queue .q-action .btn { color:#F8FAFB; border-color:#8f7e96; }
.studio-refined .queue .surface-note { color:#273b34 !important; } /* light mint note inside the plum rail: must beat `.rail .small { … !important }` (was 1.39:1) */
.studio-refined .queue .q-action .btn:hover { background:var(--studio-mint); border-color:var(--studio-mint); color:#16231d; }
.studio-refined .reach-rail-note { color:#a99cad; }

/* Paper stage: editorial hierarchy and deliberate negative space. */
.studio-refined :is(.review,.record) {
  position:relative;
  padding:42px clamp(24px,5vw,82px) 88px;
  background:var(--studio-paper-2);
  background-image:linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(43,29,51,.045) calc(100% - 1px));
  background-size:32px 100%;
}
.studio-refined :is(.review,.record)::before {
  content:"";
  position:absolute;
  left:clamp(24px,5vw,82px); top:0;
  width:84px; height:7px;
  background:var(--studio-coral);
}
.studio-refined :is(.review,.record) > * { max-width:1120px; }
.studio-refined .review-band,.studio-refined .record-head {
  display:grid;
  /* the action column is bounded: an "auto" track took the max-content of the
     action note and squeezed the content column to 0 px at 901–1180 px */
  grid-template-columns:minmax(0,1fr) minmax(250px,380px);
  gap:5px 32px;
  padding:0 0 28px;
  border-bottom:1px solid var(--studio-rule);
}
.studio-refined .review-band > :not(.rv-action),.studio-refined .record-head > :not(.rc-actions) { grid-column:1; }
.studio-refined .review-band .eyebrow,.studio-refined .rc-eyebrow {
  color:var(--studio-coral-deep);
  font:800 10px/1.3 var(--font-mono);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.studio-refined :is(.rv-title,.reach-band h2,.rc-title) {
  max-width:22ch;
  color:var(--studio-night);
  font:780 clamp(32px,3.8vw,50px)/.92 var(--font-studio-display);
  letter-spacing:-.025em;
}
.studio-refined .rv-ver { border-radius:2px; background:#dfd3dc; color:#4a4350; } /* 6.6:1 (was 3.86) */
.studio-refined .rv-status .pill,.studio-refined .reach-band .pill { border-radius:2px; }
.studio-refined .rv-why,.studio-refined .review-focus-why { max-width:66ch; color:#4c4550; font-size:14px; line-height:1.65; }
.studio-refined .rv-action {
  grid-column:2;
  grid-row:1 / span 7;
  align-self:end;
  min-width:250px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding-left:28px;
  border-left:1px solid var(--studio-rule);
}
.studio-refined .rv-action .rv-next { flex:0 0 auto; }
.studio-refined .rv-next-label { color:var(--studio-coral-deep); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.studio-refined .btn--primary {
  border-radius:2px;
  background:var(--studio-night);
  border-color:var(--studio-night);
  box-shadow:5px 5px 0 var(--studio-coral);
  font-weight:750;
}
.studio-refined .btn--primary:hover { background:var(--studio-plum); transform:translate(-1px,-1px); box-shadow:7px 7px 0 var(--studio-coral); }
.studio-refined .rv-links { border-top:1px solid var(--studio-rule); padding-top:12px; }

/* The supplied asset is the canvas: it should dominate before controls do. */
.studio-refined .asset-canvas {
  margin:28px 0 30px;
  border:1px solid #bcaeba;
  border-radius:2px;
  background:var(--studio-paper);
  box-shadow:10px 10px 0 #d9cbd3;
}
.studio-refined .asset-canvas-head {
  min-height:43px;
  padding:10px 18px;
  border-bottom:1px solid #cfc1ca;
  background:var(--studio-night);
  color:#d8cbd9;
  font-family:var(--font-mono);
  letter-spacing:.035em;
}
.studio-refined .asset-canvas-head::before { content:"SUPPLIED RELEASE"; color:var(--studio-mint); font-weight:800; }
.studio-refined .asset-canvas-head .text-button { color:#F8FAFB; min-height:24px; padding:.2rem 0; } /* dark header: the generic ink link read 1.05:1; target was 21px tall */
.studio-refined .asset-copy { padding:34px clamp(22px,4vw,52px); color:#241d27; font:450 clamp(17px,1.55vw,20px)/1.78 var(--font-body); }

/* Tasks are a studio index, not another pill switch. */
.studio-refined .work-tabs {
  counter-reset:studio-task;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:0;
  margin:0 0 26px;
  border:1px solid var(--studio-rule);
  border-right:0;
  background:var(--studio-paper);
}
.studio-refined .work-tabs button {
  counter-increment:studio-task;
  position:relative;
  min-height:58px;
  margin:0;
  padding:12px 14px 11px 38px;
  border-right:1px solid var(--studio-rule);
  border-bottom:0;
  text-align:left;
  color:#746b76;
}
.studio-refined .work-tabs button::before {
  content:counter(studio-task,decimal-leading-zero);
  position:absolute;
  left:12px; top:14px;
  color:#a396a2;
  font:700 9px/1 var(--font-mono);
}
.studio-refined .work-tabs button[aria-selected="true"] { color:var(--studio-night); background:var(--studio-mint); border-color:var(--studio-rule); }
.studio-refined .work-tabs button[aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--studio-night); }
.studio-refined .work-task-hint { padding-left:14px; border-left:3px solid var(--studio-coral); }

/* Progressive sections are ruled sheets, not floating cards. */
.studio-refined .rv-sec,.studio-refined .rc-sec,.studio-refined .passport {
  margin:0;
  border:0;
  border-top:1px solid var(--studio-rule);
  border-radius:0;
  background:transparent;
}
.studio-refined .rv-sec:last-child,.studio-refined .rc-sec:last-child { border-bottom:1px solid var(--studio-rule); }
.studio-refined .rv-sec > summary,.studio-refined .rc-sec > summary { min-height:58px; padding:15px 10px; }
.studio-refined .rv-sec > summary::before,.studio-refined .rc-sec > summary::before { color:var(--studio-coral-deep); }
.studio-refined .rv-sec-body,.studio-refined .rc-sec-body { padding:4px 18px 26px 34px; border:0; }
.studio-refined .rv-sec[open],.studio-refined .rc-sec[open] { background:rgba(248,250,251,.58); }
.studio-refined .delta-diff { border-radius:2px; background:var(--studio-paper); }
.studio-refined .passport { margin-top:28px; padding:22px 24px; border:1px solid var(--studio-night); background:var(--studio-paper); box-shadow:7px 7px 0 var(--studio-mint); }
.studio-refined .passport h3 { color:var(--studio-coral-deep); font:800 11px/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.studio-refined .rc-scope { border-radius:2px; background:var(--studio-paper); }
.studio-refined .record-head .rc-boundary { border-left:4px solid var(--studio-mint); background:rgba(120,214,180,.12); padding:9px 12px; }
.studio-refined .record-head .rc-actions { grid-column:2; grid-row:1 / span 8; align-self:end; min-width:250px; border:0; border-left:1px solid var(--studio-rule); padding:0 0 0 28px; }

/* Reach Lab uses the same studio, with packages reading as channel strips. */
.studio-refined .reach-band { grid-template-columns:minmax(0,1fr) auto; }
.studio-refined .reach-band-actions { min-width:220px; padding-left:24px; border-left:1px solid var(--studio-rule); }
.studio-refined .reach-list .queue-head::before { content:"CHANNEL BOARD"; color:var(--studio-lime); }
.studio-refined .reach-list .queue-row:nth-child(3n+1) .q-select[aria-current="true"] { box-shadow:7px 7px 0 var(--studio-coral); }
.studio-refined .reach-list .queue-row:nth-child(3n+2) .q-select[aria-current="true"] { box-shadow:7px 7px 0 var(--studio-mint); }
.studio-refined .reach-list .queue-row:nth-child(3n) .q-select[aria-current="true"] { box-shadow:7px 7px 0 var(--studio-lime); }
.studio-refined .reach-fields {
  padding:24px;
  border:1px solid var(--studio-rule);
  border-top:5px solid var(--studio-coral);
  background:var(--studio-paper);
}
.studio-refined .reach-results > li,.studio-refined .reach-plan,.studio-refined .reach-impact,.studio-refined .reach-suggestions {
  border-radius:2px;
  background:var(--studio-paper);
}
.studio-refined .reach-results > li { border-left-width:5px; }
.studio-refined :is(input,textarea,select) { border-radius:2px; border-color:#9f909d; background:#FDFDFE; }
.studio-refined :is(input,textarea,select):focus { outline:3px solid rgba(66,103,213,.28); border-color:var(--studio-blue); }

/* The first screen is a launch desk, not three generic SaaS cards. */
.studio-refined .empty { background:var(--studio-paper-2); }
.studio-refined .empty-inner { max-width:1180px; }
.studio-refined .empty-intro { position:relative; border-bottom:1px solid var(--studio-night); }
.studio-refined .empty-intro::before { content:""; position:absolute; left:0; bottom:-4px; width:112px; height:7px; background:var(--studio-coral); }
.studio-refined .empty h2 { color:var(--studio-night); font-family:var(--font-studio-display); font-size:clamp(3.5rem,7vw,7.2rem); letter-spacing:-.035em; }
.studio-refined .empty .options { grid-template-columns:1.35fr 1fr 1fr; gap:0; border:1px solid var(--studio-night); }
.studio-refined .empty .option {
  min-height:238px;
  border:0;
  border-right:1px solid var(--studio-night);
  border-radius:0;
  box-shadow:none;
  background:var(--studio-paper);
}
.studio-refined .empty .option:last-child { border-right:0; }
.studio-refined .empty .option.primary { background:var(--studio-coral); }
.studio-refined .empty .option:hover { transform:none; background:var(--studio-mint); box-shadow:inset 0 -8px var(--studio-night); }
.studio-refined .empty .option.primary:hover { background:#ff725c; }
.studio-refined .empty .option .ico { border-radius:2px; }

@media (max-width:1180px) and (min-width:901px) {
  .studio-refined .shell-v2,.studio-refined .reach-body { grid-template-columns:250px minmax(0,1fr); }
  .studio-refined :is(.review,.record) { padding-left:34px; padding-right:34px; }
  .studio-refined :is(.review,.record)::before { left:34px; }
}
@media (max-width:900px) {
  .studio-refined .app-topbar::before { display:none; }
  .studio-refined .queue::after { width:100%; height:4px; bottom:0; top:auto; }
  .studio-refined :is(.review,.record) { padding:30px 18px 54px; }
  .studio-refined :is(.review,.record)::before { left:18px; }
  .studio-refined .review-band,.studio-refined .record-head { display:block; }
  .studio-refined .rv-action,.studio-refined .record-head .rc-actions { min-width:0; margin-top:20px; padding:16px 0 0; border-left:0; border-top:1px solid var(--studio-rule); }
  .studio-refined .empty .options { grid-template-columns:1fr; }
  .studio-refined .empty .option { min-height:170px; border-right:0; border-bottom:1px solid var(--studio-night); }
  .studio-refined .empty .option:last-child { border-bottom:0; }
}
@media (max-width:560px) {
  .studio-refined .work-tabs { grid-template-columns:1fr 1fr; }
  .studio-refined .work-tabs button { min-height:52px; }
  .studio-refined .asset-canvas { box-shadow:6px 6px 0 #d9cbd3; }
  .studio-refined :is(.rv-title,.reach-band h2,.rc-title) { font-size:30px; }
  .studio-refined .passport { padding:18px 16px; box-shadow:5px 5px 0 var(--studio-mint); }
}

/* NOVERINT styles 10/11 — public atelier direction, public Reach Lab explainer, interaction language.
   Loaded in order by styles.css; the order is the cascade. */

/* NOVERINT public atelier — premium editorial direction, 2026-09-22.
   Flat colour fields, sharp rules and one expressive type contrast. Colour is
   never arranged as a flag: coral signals change/action, mint marks current
   context, aubergine carries authority, paper carries the explanation. */
.landing-page {
  --atelier-ink:#17111d;
  --atelier-plum:#2b1d33;
  --atelier-paper:#F8FAFB;
  --atelier-ground:#E4E9F0;
  --atelier-coral:#ff6248;
  --atelier-coral-deep:#982f27;
  --atelier-mint:#78d6b4;
  --atelier-lime:#c8ff47;
  background:var(--atelier-paper);
  color:var(--atelier-ink);
}
.landing-page .site-nav {
  height:78px;
  padding:0 clamp(18px,3vw,48px);
  background:rgba(248,250,251,.96);
  color:var(--atelier-ink);
  border-bottom:1px solid var(--atelier-ink);
  backdrop-filter:blur(16px);
}
.landing-page .site-nav .wordmark span { color:#5f5662; }
.landing-page .site-nav nav a { color:#5f5662; font-family:var(--font-sans); font-weight:600; letter-spacing:.035em; }
.landing-page .site-nav nav a:hover,.landing-page .site-nav nav a[aria-current="location"] { color:var(--atelier-ink); }
.landing-page .site-nav .nav-cta {
  min-height:44px;
  padding:.7rem 1rem;
  background:var(--atelier-ink);
  color:var(--atelier-paper);
  border:1px solid var(--atelier-ink);
  border-radius:2px;
  font-weight:700;
}
.landing-page .page-progress { height:4px; background:var(--atelier-coral); box-shadow:none; }

.landing-page .hero {
  min-height:calc(100vh - 78px);
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
  gap:clamp(38px,7vw,110px);
  padding:clamp(72px,9vw,138px) clamp(20px,5vw,76px) clamp(66px,8vw,120px);
  background:var(--atelier-paper);
  color:var(--atelier-ink);
}
.landing-page .hero::before {
  content:"N / 01";
  position:absolute;
  top:30px; right:clamp(20px,5vw,76px);
  color:#796f7a;
  font:600 11px/1 var(--font-mono);
  letter-spacing:.12em;
}
.landing-page .hero-copy { position:relative; z-index:2; }
.landing-page .hero .signal { color:#5d555f; }
.landing-page .hero .signal span { background:#27725a; box-shadow:none; border-radius:1px; }
.landing-page .hero h1 {
  max-width:9.5ch;
  margin:1.2rem 0 1.5rem;
  color:var(--atelier-ink);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(4.7rem,8.9vw,9.4rem);
  line-height:.78;
  letter-spacing:-.045em;
}
.landing-page .hero h1 em {
  display:block;
  margin-top:.11em;
  color:var(--atelier-coral);
  font-family:var(--font-serif);
  font-weight:400;
  font-size:.67em;
  line-height:.94;
  letter-spacing:-.055em;
}
.landing-page .hero .lead { max-width:52ch; color:#463e48; font-size:clamp(1.08rem,1.5vw,1.27rem); line-height:1.62; }
.landing-page .hero .btn--signal { border-radius:2px; background:var(--atelier-ink); border-color:var(--atelier-ink); color:var(--atelier-paper); box-shadow:5px 5px 0 var(--atelier-coral); }
.landing-page .hero .btn--signal:hover { background:var(--atelier-plum); border-color:var(--atelier-plum); box-shadow:7px 7px 0 var(--atelier-coral); }
.landing-page .hero .text-link { color:var(--atelier-ink); text-decoration-color:var(--atelier-coral); }
.landing-page .hero .trust { max-width:62ch; color:#716773; font-family:var(--font-sans); font-size:.77rem; line-height:1.55; }
.landing-page .hero-proof {
  align-self:center;
  border:1px solid var(--atelier-ink);
  border-radius:2px;
  background:var(--atelier-ground);
  box-shadow:18px 18px 0 var(--atelier-mint);
  transform:rotate(1.2deg);
}
.landing-page .proof-top { background:var(--atelier-ink); color:var(--atelier-paper); }
.landing-page .proof-top .live-dot { color:var(--atelier-mint); }
.landing-page .proof-body { background:var(--atelier-ground); }
.landing-page .version { border-radius:2px; background:var(--atelier-paper); }
.landing-page .version--new { border-color:var(--atelier-coral); box-shadow:inset 5px 0 var(--atelier-coral); }
.landing-page .proof-findings { border-color:var(--atelier-ink); }
.landing-page .proof-status { background:var(--atelier-coral); color:var(--atelier-ink); }
.landing-page .proof-foot { background:#dfd2d9; color:var(--atelier-ink); }
.landing-page .proof-foot span { border-color:#b5a6b1; background:transparent; }

.landing-page .ticker {
  justify-content:space-around;
  padding:1.1rem clamp(20px,4vw,64px);
  background:var(--atelier-coral);
  color:var(--atelier-ink);
  border-block:1px solid var(--atelier-ink);
  font-family:var(--font-sans);
  font-weight:700;
}
.landing-page .ticker i { color:var(--atelier-paper); }

.landing-page .statement {
  padding:clamp(72px,10vw,150px) clamp(20px,6vw,92px);
  background:var(--atelier-coral);
  color:var(--atelier-ink);
  border-bottom:1px solid var(--atelier-ink);
}
.landing-page .statement .section-index,.landing-page .statement .kicker { color:#5d201b; }
.landing-page .statement h2 { max-width:21ch; color:var(--atelier-ink); font-family:var(--font-serif); font-size:clamp(2.5rem,4.5vw,5rem); line-height:1.05; }
.landing-page .statement-copy > p:last-child { max-width:54ch; font-size:1.08rem; line-height:1.65; }
.landing-page .gap-diagram { border:1px solid var(--atelier-ink); border-radius:2px; background:var(--atelier-paper); box-shadow:10px 10px 0 var(--atelier-ink); }
.landing-page .gap-diagram > div { border-color:#b7aab4; }
.landing-page .gap-diagram .hot { background:var(--atelier-mint); }

.landing-page .workflow {
  padding:clamp(78px,10vw,150px) clamp(20px,5vw,76px);
  background:var(--atelier-ink);
  color:var(--atelier-paper);
}
.landing-page .workflow .section-index { color:var(--atelier-mint); }
.landing-page .section-head h2 { max-width:11ch; font-family:var(--font-display); font-size:clamp(3.4rem,6.4vw,7rem); line-height:.86; }
.landing-page .section-head h2 em { color:var(--atelier-mint); }
.landing-page .workflow-steps { border-top:1px solid #5c4b62; }
.landing-page .workflow-steps li { border-color:#5c4b62; }
.landing-page .workflow-steps li.active { background:var(--atelier-coral); color:var(--atelier-ink); }
.landing-page .workflow-steps li.active::before { background:var(--atelier-lime); }
.landing-page .workflow-steps li.active h3,.landing-page .workflow-steps li.active p,.landing-page .workflow-steps li.active > span { color:var(--atelier-ink); }

.landing-page .product-system { background:var(--atelier-paper); color:var(--atelier-ink); }
.landing-page .system-intro { padding:clamp(52px,7vw,92px) clamp(20px,5vw,76px); border-bottom:1px solid var(--atelier-ink); }
.landing-page .system-feature {
  min-height:660px;
  padding:clamp(62px,9vw,130px) clamp(20px,6vw,92px);
  border-bottom:1px solid var(--atelier-ink);
}
.landing-page .feature-copy h2 { max-width:13ch; color:var(--atelier-ink); font-family:var(--font-display); font-size:clamp(3.1rem,5.5vw,6rem); line-height:.88; }
.landing-page .feature-copy h2 em { color:var(--atelier-coral-deep); }
.landing-page .feature-copy > p { color:#514853; font-size:1.05rem; line-height:1.7; }
.landing-page .feature-no { color:var(--atelier-coral-deep); }
.landing-page .feature-delta { background:var(--atelier-paper); }
.landing-page .feature-evidence { background:var(--atelier-mint); }
.landing-page .feature-evidence .feature-no,.landing-page .feature-evidence .feature-copy h2 em { color:#704035; }
.landing-page .feature-manifest { background:var(--atelier-ground); }
.landing-page .dependency-map,.landing-page .evidence-ticket,.landing-page .manifest-card { border-radius:2px; box-shadow:12px 12px 0 var(--atelier-ink); }
.landing-page .dependency-map { background:var(--atelier-plum); }
.landing-page .evidence-ticket { background:var(--atelier-paper); color:var(--atelier-ink); border:1px solid var(--atelier-ink); }
.landing-page .evidence-ticket .ticket-meta span:last-child { color:#245846; }
.landing-page .manifest-card { border:1px solid var(--atelier-ink); }

.landing-page .ai-answer {
  padding:clamp(78px,10vw,150px) clamp(20px,6vw,92px);
  background:var(--atelier-lime);
  color:var(--atelier-ink);
  border-bottom:1px solid var(--atelier-ink);
}
.landing-page .ai-answer .section-index { color:#36470c; }
.landing-page .ai-answer h2 { max-width:18ch; font-family:var(--font-display); font-size:clamp(3.2rem,6vw,6.5rem); line-height:.88; }
.landing-page .answer-grid { border-color:var(--atelier-ink); }
.landing-page .answer-grid > div { border-color:var(--atelier-ink); }

.landing-page .agency {
  background:var(--atelier-plum);
  color:var(--atelier-paper);
}
.landing-page .agency .section-index { color:var(--atelier-mint); }
.landing-page .agency-intro h2 { max-width:13ch; font-family:var(--font-display); font-size:clamp(3.3rem,5.6vw,6rem); line-height:.9; }
.landing-page .agency-intro > p { color:#d7cad9; }
.landing-page .roles { border-color:#6b5871; }
.landing-page .role { border-color:#6b5871; }
.landing-page .role > span { border-radius:2px; background:var(--atelier-mint); color:var(--atelier-ink); }
.landing-page .role b { color:var(--atelier-paper); }
.landing-page .role p { color:#c8b9cb; }

.landing-page .security { background:var(--atelier-paper); color:var(--atelier-ink); border-bottom:1px solid var(--atelier-ink); }
.landing-page .security-mark { background:var(--atelier-coral); border-color:var(--atelier-ink); font-family:var(--font-display); }
.landing-page .security-copy h2 { font-family:var(--font-display); font-size:clamp(3rem,5vw,5.6rem); line-height:.9; }
.landing-page .security .section-index,
.landing-page .security-copy h2 em { color:var(--atelier-coral-deep); }
.landing-page .security-list { border-color:#b8abb4; }
.landing-page .security-list li { border-color:#b8abb4; }
.landing-page .security-list span { color:#574d58; }

.landing-page .tutorial { background:var(--atelier-ground); color:var(--atelier-ink); }
.landing-page .tutorial-head h2 { font-family:var(--font-display); font-size:clamp(3.4rem,6.2vw,6.8rem); line-height:.86; }
.landing-page .tutorial-head h2 em { color:var(--atelier-coral-deep); }
.landing-page .tutorial-steps { border-color:var(--atelier-ink); }
.landing-page .tutorial-steps li { border-color:#b9acb5; }
.landing-page .tutorial-action { border-radius:2px; background:var(--atelier-ink); color:var(--atelier-paper); }
.landing-page .tutorial-action .btn--primary { background:var(--atelier-coral); border-color:var(--atelier-coral); color:var(--atelier-ink); }

.landing-page .final-cta { background:var(--atelier-ink); color:var(--atelier-paper); }
.landing-page .final-cta::before { background:var(--atelier-mint); }
.landing-page .final-cta h2 { max-width:13ch; font-family:var(--font-display); font-size:clamp(3.5rem,6.8vw,7.4rem); line-height:.86; }
.landing-page .final-cta .final-note { color:#d7cad9; }
.landing-page .final-cta .btn--signal { border-radius:2px; background:var(--atelier-coral); color:var(--atelier-ink); }
.landing-page .site-footer { background:#0e0a12; color:#bfb2c2; border-top:1px solid #4c3b52; }

@media (max-width:980px) {
  .landing-page .hero { grid-template-columns:1fr; min-height:auto; }
  .landing-page .hero h1 { max-width:10ch; }
  .landing-page .hero-proof { width:min(720px,94%); justify-self:center; }
  .landing-page .system-feature { min-height:0; }
}
@media (max-width:720px) {
  .landing-page .site-nav { height:auto; min-height:70px; }
  .landing-page .hero { padding-top:70px; }
  .landing-page .hero h1 { font-size:clamp(4rem,19vw,6.6rem); }
  .landing-page .hero-proof { width:100%; box-shadow:8px 8px 0 var(--atelier-mint); }
  .landing-page .ticker { justify-content:flex-start; }
  .landing-page .statement,.landing-page .workflow,.landing-page .ai-answer { padding-block:72px; }
  .landing-page .gap-diagram { box-shadow:6px 6px 0 var(--atelier-ink); }
}

/* Public opening — dark editorial cover.
   The former cream header/hero flattened the first impression. This cover
   makes the identity feel deliberate while the warm paper remains available
   for evidence, explanations and records. */
.landing-page .site-nav {
  background:rgba(23,17,29,.97);
  color:var(--atelier-paper);
  border-bottom-color:#514257;
}
.landing-page .site-nav .wordmark b,
.landing-page .site-nav .wordmark span,
.landing-page .site-nav nav a { color:var(--atelier-paper); }
.landing-page .site-nav nav a { opacity:.76; }
.landing-page .site-nav nav a:hover,
.landing-page .site-nav nav a[aria-current="location"] { color:#fff; opacity:1; }
.landing-page .site-nav .nav-toggle { color:var(--atelier-paper); border-color:#746578; }
.landing-page .site-nav .nav-cta {
  background:var(--atelier-coral);
  color:var(--atelier-ink);
  border-color:var(--atelier-coral);
}
.landing-page .hero {
  background:var(--atelier-ink);
  color:var(--atelier-paper);
  border-bottom:1px solid #514257;
}
.landing-page .hero::before { color:#948699; }
.landing-page .hero .signal { color:#cbbdce; }
.landing-page .hero .signal span { background:var(--atelier-mint); }
.landing-page .hero h1 { color:var(--atelier-paper); }
.landing-page .hero .lead { color:#ded2df; }
.landing-page .hero .trust { color:#bcaebf; }
.landing-page .hero .btn--signal {
  background:var(--atelier-coral);
  border-color:var(--atelier-coral);
  color:var(--atelier-ink);
  box-shadow:5px 5px 0 var(--atelier-mint);
}
.landing-page .hero .btn--signal:hover {
  background:#ff7965;
  border-color:#ff7965;
  box-shadow:7px 7px 0 var(--atelier-mint);
}
.landing-page .hero .text-link { color:var(--atelier-paper); }

/* Dark surfaces own their readable text colours. This prevents an older
   light-surface token from producing dark-on-dark supporting copy. */
.landing-page .workflow .section-lead,
.landing-page .workflow-steps li:not(.active) p { color:#cdbfd0; }
.landing-page .workflow-steps li:not(.active) > span { color:#aa9bad; }
.landing-page .agency-intro > p { color:#d7cad9; }
.landing-page .role b { color:var(--atelier-paper); }
.landing-page .role p { color:#c8b9cb; }
.landing-page .final-cta > .final-cta-inner > p:first-child,
.landing-page .final-cta .final-note { color:#d7cad9; }
.landing-page .site-footer,
.landing-page .site-footer p { color:#c8b9cb; }

/* Readability refinements from the public-page review. */
.landing-page .hero { background:#211826; }
.landing-page .statement-copy > p:last-child {
  color:var(--atelier-ink);
  font-weight:550;
}
.landing-page .evidence-ticket .ticket-fields {
  border-color:#8f818a;
}
.landing-page .evidence-ticket .ticket-fields span {
  color:#514650;
  font-weight:650;
}
.landing-page .evidence-ticket .ticket-fields b {
  color:var(--atelier-ink);
  font-weight:750;
}
.landing-page .tutorial-action p { color:#d7cad9; }
.landing-page .tutorial-action b { color:var(--atelier-paper); }

/* Final public-page readability + colour bridge. */
.landing-page .ticker {
  border-top:12px solid #8b3f4d;
}
.landing-page .statement-copy > p:last-child {
  padding:16px 18px;
  color:var(--atelier-paper);
  background:var(--atelier-ink);
  border-left:5px solid var(--atelier-mint);
}
.landing-page .evidence-ticket .ticket-fields span,
.landing-page .evidence-ticket .ticket-fields b {
  color:var(--atelier-ink);
}
.landing-page .tutorial-action p,
.landing-page .tutorial-action b {
  color:#fff;
}

/* Reach Lab — a public, interactive explanation of channel preparation.
   It is an honest scope viewer, not an algorithm scorecard. */
.landing-page .reach-showcase {
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);
  gap:clamp(48px,7vw,112px);
  align-items:center;
  padding:clamp(82px,10vw,150px) clamp(20px,6vw,92px);
  background:#211826;
  color:var(--atelier-paper);
  border-block:1px solid #5a485f;
}
.landing-page .reach-showcase-copy .section-index { color:var(--atelier-mint); }
.landing-page .reach-showcase-copy h2 {
  max-width:12ch;
  margin:1.15rem 0 1.5rem;
  color:var(--atelier-paper);
  font:800 clamp(3.4rem,6vw,6.7rem)/.86 var(--font-display);
  letter-spacing:-.04em;
}
.landing-page .reach-showcase-copy h2 em {
  color:var(--atelier-coral);
  font-family:var(--font-serif);
  font-weight:400;
  letter-spacing:-.04em;
}
.landing-page .reach-showcase-copy > p {
  max-width:53ch;
  color:#d7cad9;
  font-size:1.05rem;
  line-height:1.7;
}
.landing-page .reach-boundaries {
  margin:2.1rem 0 1.8rem;
  padding:0;
  list-style:none;
  border-top:1px solid #65536a;
}
.landing-page .reach-boundaries li {
  display:grid;
  grid-template-columns:94px 1fr;
  gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid #65536a;
}
.landing-page .reach-boundaries b { color:var(--atelier-mint); font-family:var(--font-mono); font-size:.77rem; letter-spacing:.06em; text-transform:uppercase; }
.landing-page .reach-boundaries span { color:#c9bbcc; }
.landing-page .reach-showcase-copy .text-link { color:var(--atelier-paper); text-decoration-color:var(--atelier-coral); }

.landing-page .reach-demo {
  min-width:0;
  border:1px solid var(--atelier-paper);
  background:var(--atelier-paper);
  color:var(--atelier-ink);
  box-shadow:16px 16px 0 var(--atelier-mint);
}
.landing-page .reach-demo-top {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:12px 16px;
  background:#0f0a12;
  color:var(--atelier-paper);
  font:700 .68rem/1.2 var(--font-mono);
  letter-spacing:.09em;
}
.landing-page .reach-demo-top span:last-child { color:var(--atelier-mint); }
.landing-page .reach-channel-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--atelier-ink);
}
.landing-page .reach-channel-tabs button {
  min-height:58px;
  padding:.75rem .8rem;
  border:0;
  border-right:1px solid #c6b9c2;
  border-radius:0;
  background:var(--atelier-ground);
  color:#5b515c;
  font:700 .77rem/1.25 var(--font-sans);
  cursor:pointer;
}
.landing-page .reach-channel-tabs button:last-child { border-right:0; }
.landing-page .reach-channel-tabs button[aria-selected="true"] {
  background:var(--atelier-coral);
  color:var(--atelier-ink);
  box-shadow:inset 0 -5px var(--atelier-ink);
}
.landing-page .reach-channel-tabs button:focus-visible { position:relative; z-index:1; outline:3px solid var(--studio-blue); outline-offset:-4px; }
.landing-page .reach-demo-panel { min-height:390px; padding:clamp(22px,4vw,38px); background:var(--atelier-paper); }
.landing-page .reach-demo-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.landing-page .reach-platform { font:800 clamp(1.7rem,2.8vw,2.7rem)/1 var(--font-display); letter-spacing:-.025em; }
.landing-page .reach-state { padding:.4rem .55rem; background:var(--atelier-mint); font:800 11px/1 var(--font-mono); letter-spacing:.08em; }
.landing-page .reach-scope { margin:.8rem 0 1.5rem; color:#5c515d; }
.landing-page .reach-field-list { display:flex; flex-wrap:wrap; gap:7px; min-height:68px; align-content:flex-start; }
.landing-page .reach-field-list span { padding:.48rem .62rem; border:1px solid #aa9ca7; background:#FDFDFE; font:650 .76rem/1 var(--font-sans); }
.landing-page .reach-demo-result {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:1.7rem;
  border:1px solid var(--atelier-ink);
  background:var(--atelier-ink);
}
.landing-page .reach-demo-result > div { min-width:0; padding:1rem; background:var(--atelier-ground); }
.landing-page .reach-demo-result > div:first-child { background:#d9f2e9; }
.landing-page .reach-demo-result small { display:block; margin-bottom:.5rem; color:#6b606b; font:800 11px/1 var(--font-mono); letter-spacing:.08em; }
.landing-page .reach-demo-result strong { display:block; font-size:.86rem; line-height:1.45; }
.landing-page .reach-demo-flow {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:1.6rem 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid #b7aab4;
}
.landing-page .reach-demo-flow li { position:relative; padding:1rem .35rem 0; color:#766b76; font:700 .68rem/1.2 var(--font-mono); text-transform:uppercase; }
.landing-page .reach-demo-flow li::before { content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; background:#b7aab4; }
.landing-page .reach-demo-flow li.is-current { color:var(--atelier-ink); }
.landing-page .reach-demo-flow li.is-current::before { width:38px; background:var(--atelier-coral); }
@keyframes reach-panel-in { from { opacity:.35; transform:translateY(8px); } to { opacity:1; transform:none; } }
.landing-page .reach-demo-panel.is-switching > * { animation:reach-panel-in .32s cubic-bezier(.2,.75,.25,1) both; }
.landing-page .reach-demo-panel.is-switching > :nth-child(2) { animation-delay:.035s; }
.landing-page .reach-demo-panel.is-switching > :nth-child(3) { animation-delay:.07s; }
.landing-page .reach-demo-panel.is-switching > :nth-child(4) { animation-delay:.105s; }

@media (max-width:1040px) {
  .landing-page .reach-showcase { grid-template-columns:1fr; }
  .landing-page .reach-showcase-copy h2 { max-width:14ch; }
  .landing-page .reach-demo { width:min(760px,100%); }
}
@media (max-width:620px) {
  .landing-page .reach-showcase { padding-block:72px; }
  .landing-page .reach-channel-tabs { grid-template-columns:1fr 1fr; }
  .landing-page .reach-channel-tabs button:nth-child(2) { border-right:0; }
  .landing-page .reach-channel-tabs button:nth-child(-n+2) { border-bottom:1px solid #c6b9c2; }
  .landing-page .reach-demo-result { grid-template-columns:1fr; }
  .landing-page .reach-demo-flow { grid-template-columns:1fr 1fr; row-gap:1rem; }
  .landing-page .reach-demo { box-shadow:8px 8px 0 var(--atelier-mint); }
}
@media (prefers-reduced-motion:reduce) {
  .landing-page .reach-demo-panel.is-switching > * { animation:none; }
}

/* Site-wide interaction language — selection reveals structure; it never
   changes product data or invents a result. Keyboard focus mirrors hover. */
.landing-page :is(.gap-diagram > div,.workflow-steps li,.tutorial-steps li,.security-list li) {
  cursor:pointer;
}
.landing-page .gap-diagram > div {
  position:relative;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.landing-page .gap-diagram > div:is(:hover,:focus-visible,.is-active) {
  z-index:1;
  transform:translateY(-7px);
  box-shadow:0 7px 0 var(--atelier-ink);
}
.landing-page .gap-diagram > div.is-active::after {
  content:"CURRENT FOCUS";
  position:absolute;
  top:8px; right:8px;
  color:var(--atelier-coral-deep);
  font:800 .54rem/1 var(--font-mono);
  letter-spacing:.07em;
}
.landing-page .gap-diagram > div.hot.is-active::after { color:var(--atelier-ink); }

.landing-page .workflow-steps li { transition:background .22s var(--ease),padding .22s var(--ease),transform .22s var(--ease); }
.landing-page .workflow-steps li:is(:hover,:focus-visible):not(.active) { background:#302238; transform:translateX(5px); }
.landing-page .workflow-steps li:focus-visible,.landing-page .tutorial-steps li:focus-visible,.landing-page .security-list li:focus-visible { outline:3px solid var(--atelier-mint); outline-offset:-3px; }
.landing-page .workflow-steps li.active h3::after { content:" — selected"; }

.landing-page .system-feature > :not(.feature-copy) { transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .landing-page .system-feature:hover > :not(.feature-copy) { transform:translateY(-8px) rotate(-.35deg); box-shadow:16px 16px 0 var(--atelier-ink); }
  .landing-page .feature-evidence:hover > .evidence-ticket { transform:translateY(-8px) rotate(.35deg); }
}

.landing-page .security-list li { transition:background .2s var(--ease),padding .2s var(--ease); }
.landing-page .security-list li:is(:hover,:focus-visible,.is-active) { padding-inline:12px; background:#E1E6EE; }
.landing-page .security-list li:is(:hover,:focus-visible,.is-active) b::before { color:var(--atelier-coral-deep); }

.landing-page .tutorial-steps li { transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease); }
.landing-page .tutorial-steps li:is(:hover,:focus-visible):not(.is-active) { background:#D9E1EA; transform:translateY(-4px); }
.landing-page .tutorial-steps li.is-active { background:var(--atelier-ink); color:var(--atelier-paper); box-shadow:inset 0 5px var(--atelier-coral); }
.landing-page .tutorial-steps li.is-active .tutorial-step-no { color:var(--atelier-mint); }
.landing-page .tutorial-steps li.is-active p { color:#d7cad9; }

@media (prefers-reduced-motion:reduce) {
  .landing-page :is(.gap-diagram > div,.workflow-steps li,.tutorial-steps li,.security-list li,.system-feature > :not(.feature-copy)) {
    transition:none;
    transform:none !important;
  }
}

/* Landing colour rhythm refinement — keep coral as a signal, not a surface. */
.landing-page .ticker {
  background:#bde2d3;
  color:var(--atelier-ink);
  border-top:1px solid #31594d;
  border-bottom-color:var(--atelier-ink);
}
.landing-page .ticker i { color:#31594d; }
.landing-page .statement {
  background:#a8d5c3;
  color:var(--atelier-ink);
}
.landing-page .statement .section-index,
.landing-page .statement .kicker { color:#21483d; }
.landing-page .statement-copy > p:last-child { border-left-color:var(--atelier-coral); }
.landing-page .gap-diagram .hot {
  background:var(--atelier-coral);
  color:var(--atelier-ink);
}

/* who the open step waits on (review-band.js STEP_OWNER_LABEL) — wording, not an access control */
.rv-owner { display:inline-block; margin-left:8px; padding:1px 6px; border:1px solid #bcaeba; border-radius:2px; font:600 11px/1.5 var(--font-body); color:#3f3a45; background:#F8FAFB; white-space:nowrap; }
.rv-owner[data-role="creator"] { border-color:#78d6b4; background:#e2f5ed; color:#1f3a2e; }

/* NOVERINT styles 11/11 — Decision Thread, phone layout and the sample task path.
   Loaded in order by styles.css; the order is the cascade. */

/* Decision Thread — the approved visual direction, implemented with real
   campaign state. No generated mock-up values or new review calculation. */
.landing-page .hero {
  max-width:none;
  grid-template-columns:minmax(0,.98fr) minmax(400px,1.02fr);
  background:#1d1722;
}
.landing-page .hero-proof {
  transform:none;
  border-color:#ece6e7;
  border-radius:18px;
  background:#FDFDFE;
  box-shadow:0 24px 72px rgba(7,4,10,.24);
}
.landing-page .hero-proof::before { display:none; }
.motion-ready .landing-page .hero-proof { animation:none; }
@media (hover:hover) and (pointer:fine) {
  .landing-page .hero-proof:hover { transform:none; box-shadow:0 26px 74px rgba(7,4,10,.28); }
}
.landing-page .proof-body { background:#FDFDFE; }
.landing-page .version { border-radius:6px; }
.landing-page .proof-foot { background:#EDF0F5; border-radius:0 0 18px 18px; }
.landing-page .hero .btn--signal { box-shadow:none; border-radius:6px; }
.landing-page .hero .btn--signal:hover { box-shadow:0 5px 0 var(--atelier-mint); }
@media (max-width:980px) {
  .landing-page .hero { grid-template-columns:1fr; }
}

.studio-refined {
  --studio-night:#1d1722;
  --studio-paper:#FDFDFE;
  --studio-paper-2:#F6F8FA;
  --studio-rule:#e5dfe3;
  --studio-quiet:#5d5660;
  background:var(--studio-paper-2);
}
.studio-refined #frame { background:var(--studio-paper-2); }
.studio-refined .queue {
  background:#EEF1F5;
  color:#231c27;
  border-right:1px solid var(--studio-rule);
  box-shadow:none;
}
.studio-refined .queue::after { display:none; }
.studio-refined .queue-head::before,
.studio-refined .reach-list .queue-head::before { color:#287259; }
.studio-refined .queue-head h2,
.studio-refined .queue .q-title,
.studio-refined .queue .q-main .q-why,
.studio-refined .queue .kv-val,
.studio-refined .queue .text-button { color:#231c27; }
.studio-refined .queue-count,
.studio-refined .queue-campaign,
.studio-refined .queue-campaign-label,
.studio-refined .queue .q-ver,
.studio-refined .queue .q-why,
.studio-refined .queue-row:not(.is-selected) .q-why,
.studio-refined .queue .muted,
.studio-refined .reach-rail-note { color:#5b535e !important; }
.studio-refined .queue-row { border-color:#ded8dd; }
.studio-refined .q-select { color:#231c27; border-radius:6px; }
.studio-refined .q-select::before { color:#655c67; } /* 5.65:1 at rest, 5.06:1 on the hover tint (was 4.24 / 3.80) */
.studio-refined .q-select:hover { background:#e9e3e7; }
.studio-refined .q-select[aria-current="true"] { background:#FDFDFE; border-color:#d6cdd4; border-left-color:#78d6b4; box-shadow:none; }
.studio-refined .queue-row.is-top .q-select { border-left-color:#ff5a3d; }
.studio-refined .q-select[aria-current="true"] .q-ver { color:#5b535e; }
.studio-refined .queue-adders { border-color:#ded8dd; }
.studio-refined .queue-adders .btn,
.studio-refined .queue .q-action .btn { color:#231c27; border-color:#aba1aa; }
.studio-refined .queue-setup { border-color:#ded8dd; }
.studio-refined .queue-setup summary,
.studio-refined .queue-setup .kv-row,
.studio-refined .queue-setup .kv-block { color:#514a55; }
/* the legacy dark rail forces .rail .small (and its last span) to chalk with
   !important and .rail .btn to chalk: on this light Queue that painted the
   campaign details at 1.39:1 / 1.08:1. Ink here, same weight. */
.studio-refined .queue-setup .small { color:#514a55 !important; }
.studio-refined .queue-setup .small span:last-child,
.studio-refined .queue-setup .kv-val { color:#231c27 !important; }
.studio-refined .queue-setup .btn { color:#231c27; border-color:#aba1aa; }
.studio-refined .queue .surface-note { color:#273b34 !important; }

.studio-refined :is(.review,.record) {
  background:var(--studio-paper-2);
  background-image:none;
  padding:28px clamp(20px,3vw,46px) 72px;
}
.studio-refined :is(.review,.record)::before { display:none; }
.studio-refined .review-context {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 23px;
  color:#5d5660;
  font-size:12px;
}
.studio-refined .review-sample {
  padding:3px 7px;
  border-radius:999px;
  background:#def3e9;
  color:#245b47;
  font-weight:700;
}
.studio-refined .asset-canvas {
  margin:0 0 18px;
  border:1px solid var(--studio-rule);
  border-radius:7px;
  background:var(--studio-paper);
  box-shadow:none;
}
.studio-refined .asset-canvas-head {
  min-height:42px;
  color:#4e4652;
  background:transparent;
  border-color:var(--studio-rule);
  font:600 12px/1.4 var(--font-body);
  letter-spacing:0;
}
.studio-refined .asset-canvas-head::before { content:"SELECTED ASSET"; color:#287259; }
.studio-refined .asset-canvas-head .text-button { color:#352d39; }
.studio-refined .asset-copy { max-height:132px; padding:18px 22px; font-size:14px; line-height:1.6; }
.studio-refined .review-band,
.studio-refined .reach-band,
.studio-refined .record-head {
  display:block;
  min-width:0;
  margin:0 0 22px;
  padding:25px 27px;
  border:1px solid var(--studio-rule);
  border-radius:7px;
  background:var(--studio-paper);
  box-shadow:none;
}
.studio-refined .review-band > :not(.rv-action),
.studio-refined .record-head > :not(.rc-actions) { grid-column:auto; }
.studio-refined .review-band .eyebrow,
.studio-refined .rc-eyebrow { color:#287259; }
.studio-refined :is(.rv-title,.reach-band h2,.rc-title) {
  max-width:none;
  margin:.4rem 0 .8rem;
  font:700 clamp(25px,2.7vw,37px)/1.12 var(--font-body);
  letter-spacing:-.045em;
}
.studio-refined .rv-ver { background:#e1f3ea; color:#205b45; }
.studio-refined .rv-why,.studio-refined .review-focus-why { color:#4d4650; }
.studio-refined .rv-action,
.studio-refined .record-head .rc-actions,
.studio-refined .reach-band-actions {
  display:block;
  min-width:0;
  margin-top:16px;
  padding:15px 0 0;
  border:0;
  border-top:1px solid var(--studio-rule);
}
.studio-refined .rv-action .rv-next { margin-bottom:12px; }
.studio-refined .btn--primary {
  min-height:43px;
  padding:10px 20px;
  border-radius:5px;
  background:#ff5a3d;
  border-color:#ff5a3d;
  color:#211820;
  box-shadow:none;
  font-weight:750;
}
.studio-refined .btn--primary:hover { background:#ff725b; border-color:#ff725b; transform:none; box-shadow:none; }
.studio-refined .rv-links { border-color:var(--studio-rule); }
.studio-refined .work-tabs { margin-bottom:15px; border-color:var(--studio-rule); background:#FDFDFE; }
.studio-refined .work-tabs button { min-height:48px; border-color:var(--studio-rule); color:#5d5660; }
.studio-refined .work-tabs button[aria-selected="true"] { background:#e1f3ea; }
.studio-refined .work-tabs button[aria-selected="true"]::after { height:2px; }
.studio-refined .rv-sec,.studio-refined .rc-sec,.studio-refined .passport { border-color:var(--studio-rule); }
.studio-refined .rv-sec[open],.studio-refined .rc-sec[open] { background:#FDFDFE; }
.studio-refined .passport { box-shadow:none; border-radius:7px; }
.studio-refined .reach-fields { border:1px solid var(--studio-rule); border-top:3px solid #78d6b4; border-radius:7px; }
.studio-refined .reach-results > li { background:#FDFDFE; }
.studio-refined .reach-list .queue-row .q-select[aria-current="true"] { box-shadow:none; }
.studio-refined .reach-list .queue-row:nth-child(n) .q-select[aria-current="true"] { box-shadow:none; }
.studio-refined .reach-editor .work-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
.studio-refined .reach-editor .work-tabs button { min-width:0; padding-left:26px; }
.studio-refined .reach-editor .work-tabs button::before { left:9px; }
.studio-refined .reach-band-actions { margin:16px 0 0; }
.studio-refined .reach-band > :is(.eyebrow,.small),
.studio-refined .reach-band > h2,
.studio-refined .reach-band-status,
.studio-refined .reach-band .review-focus-why,
.studio-refined .reach-band-actions { grid-column:auto; grid-row:auto; }

.studio-refined .decision-thread {
  min-width:0;
  padding:5px 0 15px 26px;
  border-left:1px solid var(--studio-rule);
  color:#231c27;
}
.studio-refined .decision-thread h3 { margin:0 0 22px; font:700 14px/1.4 var(--font-body); }
.studio-refined .decision-thread ol { margin:0; padding:0; list-style:none; }
.studio-refined .decision-thread li { position:relative; min-height:112px; padding:0 0 28px 34px; }
.studio-refined .decision-thread li:not(:last-child)::before { content:""; position:absolute; left:12px; top:28px; bottom:7px; border-left:1px solid #d5ddd8; }
.studio-refined .decision-thread-number {
  position:absolute; left:0; top:0;
  display:grid; place-items:center; width:25px; height:25px;
  border-radius:50%; background:#e0f4ea; color:#245b47;
  font:700 11px/1 var(--font-body);
}
.studio-refined .decision-thread-label { color:#29735a; font:700 11px/1.4 var(--font-body); letter-spacing:.08em; text-transform:uppercase; }
.studio-refined .decision-thread li p { margin:8px 0 0; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.studio-refined .decision-thread-boundary { margin:10px 0 0; padding-top:14px; border-top:1px solid var(--studio-rule); color:#5d5660; font-size:11px; line-height:1.55; }

@media (min-width:1280px) {
  .studio-refined #frame { grid-template-columns:170px minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .studio-refined .app-topbar {
    grid-column:1; grid-row:1;
    display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    gap:10px; min-width:0; min-height:0; padding:28px 12px 16px;
    overflow-y:auto; border-right:1px solid #423747; border-bottom:0;
    background:#1d1722;
  }
  .studio-refined .app-topbar .wordmark { margin:0 0 12px; padding:0 8px 18px; border-bottom:1px solid #473c4b; }
  .studio-refined .app-topbar .wordmark b { font-size:14px; letter-spacing:.09em; }
  .studio-refined .app-topbar .context { display:block; flex:0 0 auto; padding:0 8px 10px; border-bottom:1px solid #473c4b; }
  .studio-refined .cname { display:block; white-space:normal; overflow-wrap:anywhere; font-size:12px; }
  .studio-refined .cstatus { display:block; margin-top:5px; }
  .studio-refined .cmeta { display:none; }
  .studio-refined .app-topbar .spacer { display:none; }
  .studio-refined .app-topbar .view-nav { display:block; flex:0 0 auto; width:100%; }
  .studio-refined .app-topbar .view-nav-list { display:grid; gap:2px; width:100%; padding:0; border:0; border-radius:0; background:transparent; }
  .studio-refined .app-topbar .view-opt { width:100%; min-width:0; min-height:43px; padding:12px 11px; text-align:left; border-radius:4px; color:#e6dce7; font-size:12px; }
  .studio-refined .app-topbar .view-opt.is-on,
  .studio-refined .app-topbar .mode-nav .view-opt.is-on { color:#FDFDFE; background:#3c3340; box-shadow:inset 3px 0 #78d6b4; }
  .studio-refined .app-topbar .mode-nav { order:3; margin:0 0 10px; padding-top:10px; border-top:1px solid #473c4b; }
  .studio-refined .app-topbar .mode-nav .view-opt { min-height:38px; }
  .studio-refined .app-topbar .view-nav:not(.mode-nav) { order:2; width:100%; }
  .studio-refined .app-topbar .view-opt.is-on::after { display:none; }
  .studio-refined .app-topbar .more-trigger { order:4; margin-top:auto; width:100%; justify-content:flex-start; }
  .studio-refined .top-secondary.is-open { order:5; display:grid; grid-template-columns:1fr; width:100%; }
  .studio-refined .top-secondary.is-open > button { width:100%; white-space:normal; text-align:left; }
  .studio-refined #app { grid-column:2; grid-row:1; min-height:0; }
  .studio-refined .app-body { height:100%; }
  .studio-refined .shell-v2,.studio-refined .reach-body { grid-template-columns:226px minmax(0,1fr); }
  .studio-refined .queue { position:static; max-height:none; overflow:auto; }
  .studio-refined .review:not(.reach-editor) { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,250px); grid-auto-rows:max-content; column-gap:clamp(20px,2.5vw,44px); align-content:start; }
  .studio-refined .review:not(.reach-editor) > :not(.decision-thread) { grid-column:1; min-width:0; max-width:none; }
  .studio-refined .review:not(.reach-editor) > .decision-thread { grid-column:2; grid-row:1 / span 5; align-self:stretch; }
  .studio-refined .reach-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,250px); grid-auto-rows:max-content; column-gap:clamp(20px,2.5vw,44px); align-content:start; }
  .studio-refined .reach-editor > :not(.decision-thread) { grid-column:1; min-width:0; max-width:none; }
  .studio-refined .reach-editor > .decision-thread { grid-column:2; grid-row:1 / span 4; }
}
@media (max-width:1279px) {
  .studio-refined .decision-thread { margin:20px 0 0; padding:20px 0 0; border-left:0; border-top:1px solid var(--studio-rule); }
  .studio-refined .decision-thread ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .studio-refined .decision-thread li { min-height:0; padding-bottom:0; }
  .studio-refined .decision-thread li:not(:last-child)::before { display:none; }
}
@media (max-width:900px) {
  .studio-refined .app-topbar { min-height:0; }
  .studio-refined .review-band,.studio-refined .reach-band,.studio-refined .record-head { padding:20px; }
  .studio-refined .decision-thread ol { grid-template-columns:1fr; }
  .studio-refined .decision-thread li { padding-bottom:10px; }
  .studio-refined .reach-editor .work-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  .landing-page .hero-proof,
  .studio-refined .btn--primary { transition:none; transform:none; }
}

/* Phone (≤560 px): the Review's one primary action inside a 320×568 first
   screen. Nothing leaves the page: the campaign facts stay in the Queue's
   campaign details; the campaign name and the current view stay in the top
   bar and the nav. The run mode, campaign status, "unsaved", both working
   modes, More and every nav tab stay visible. */
@media (max-width:560px) {
  .studio-refined .app-topbar { padding:8px 12px; gap:8px; }
  .studio-refined .cmeta-facts,
  .studio-refined .cmeta-sep { display:none; }
  .studio-refined .cmeta:not(:has(.cmeta-unsaved)) { display:none; }
  .studio-refined .review-context-repeat { display:none; }
  .studio-refined .review-context:not(:has(.review-sample)) { display:none; }
  .studio-refined .review-context { margin-bottom:12px; }
  .studio-refined :is(.review,.record) { padding-top:16px; }
}
/* ≤900 px the why follows the next step (app.js renderReviewBand) */
@media (max-width:900px) {
  .studio-refined .rv-action + .rv-why { margin-top:14px; }
}

/* ---------- sample task path + first-layer "what now" (app.js, sample-path.js) ----------
   Light Queue palette (ink #231c27, quiet #5b535e, rule #ded8dd, mint #287259).
   Nothing here animates; the "Show me" mark is a static outline. */
.guide-howto { margin:.9rem 0 .3rem; padding-left:1.35rem; color:var(--chalk); font-size:.92rem; line-height:1.55; }
.guide-howto li { margin:.15rem 0; padding-left:.2rem; }
.guide-howto li::marker { color:var(--chalk-3); font:700 .78rem var(--font-mono); }
.guide-steps-note { margin:.2rem 0 .8rem; color:var(--chalk-2); font-size:.82rem; line-height:1.5; }

.studio-refined .queue-next { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:8px 0 0; font-size:12.5px; line-height:1.45; }
.studio-refined .queue-next-label { font:700 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:#a33a26; }
.studio-refined .queue .queue-next .text-button { padding:0; font-size:12.5px; text-align:left; overflow-wrap:anywhere; color:#231c27; }

.studio-refined .sample-path { margin:0 10px 16px; padding:12px 12px 10px; background:#FDFDFE; border:1px solid #ded8dd; border-left:3px solid #287259; border-radius:6px; color:#231c27; }
.studio-refined .sample-path:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.studio-refined .sp-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
.studio-refined .sp-title { margin:0; color:#231c27; font:650 14px/1.3 var(--font-body); letter-spacing:-.01em; text-transform:none; }
.studio-refined .sp-count { color:#5b535e; font-size:12px; }
.studio-refined .sp-steps { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.studio-refined .sp-step { display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; align-items:start; }
.studio-refined .sp-mark { display:grid; place-items:center; width:20px; height:20px; border:1px solid #aba1aa; border-radius:50%; color:#5b535e; font:700 11px/1 var(--font-mono); }
.studio-refined .sp-step.is-done .sp-mark { background:#287259; border-color:#287259; color:#fff; }
.studio-refined .sp-step.is-current .sp-mark { border-color:#231c27; color:#231c27; border-width:2px; }
.studio-refined .sp-step-title { margin:1px 0 0; color:#231c27; font-size:13px; line-height:1.4; }
.studio-refined .sp-step.is-done .sp-step-title { color:#5b535e; }
.studio-refined .sp-step.is-current .sp-step-title { font-weight:650; }
.studio-refined .sp-step-text { margin:3px 0 8px; color:#3f3843; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.studio-refined .queue .sample-path .btn { min-height:32px; padding:5px 12px; font-size:12px; color:#231c27; background:#fff; border-color:#8f8591; }
.studio-refined .queue .sample-path .btn:hover { background:#e9e3e7; }
.studio-refined .sp-complete { margin:10px 0 0; color:#273b34; font-size:12px; line-height:1.45; }
.studio-refined .sp-foot { display:flex; align-items:baseline; justify-content:space-between; gap:6px 10px; flex-wrap:wrap; margin:10px 0 0; padding-top:8px; border-top:1px solid #ded8dd; color:#5b535e; font-size:11.5px; line-height:1.4; }
.studio-refined .queue .sp-foot .text-button { padding:0; font-size:12px; color:#231c27; }

.studio-refined .sp-mini { display:flex; align-items:baseline; gap:6px 10px; flex-wrap:wrap; margin:12px 0 0; padding:8px 10px; border:1px dashed #b9aeb7; border-radius:6px; color:#5b535e; font-size:12px; line-height:1.45; }
.studio-refined .sp-mini-count { font-weight:650; color:#231c27; }
.studio-refined .sp-mini .text-button { padding:0; text-align:left; }
@media (min-width:901px) { .studio-refined .sp-mini { display:none; } } /* the Queue rail shows the steps beside the Review */

.sp-spot { outline:3px solid var(--focus) !important; outline-offset:3px; box-shadow:0 0 0 7px rgba(81,109,232,.2); }

.studio-refined .cp-who { margin:4px 0 10px; color:#3f3843; }
.studio-refined .cp-how { margin:4px 0 10px; }
.studio-refined .cp-more { margin-top:12px; }
/* WCAG 2.2 target size (24 × 24 CSS px) for the text buttons of the path and the Queue's Next line */
.studio-refined .queue .queue-next .text-button,
.studio-refined .queue .sp-foot .text-button,
.studio-refined .sp-mini .text-button { display:inline-flex; align-items:center; min-height:24px; min-width:24px; }

/* NOVERINT — server mode (program Phase 3): the server banner, the read-only
   home for brand viewers and creators, the conflict view, the team panel and
   the Passport share panel. Loaded last; nothing here applies in local mode
   (every selector is scoped to an element only server mode renders). */

.server-banner { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin:0 auto .9rem; max-width:var(--max); padding:.55rem .8rem; border:1px solid var(--line); border-left:4px solid var(--pine); border-radius:var(--r-control); background:var(--surface); color:var(--ink); }
.server-banner .server-where { font:700 .82rem/1.4 var(--font-mono); overflow-wrap:anywhere; }
.server-banner .server-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-left:auto; }
.server-banner .server-note { flex-basis:100%; color:var(--ink-soft); }
@media (max-width: 600px) { .server-banner .server-actions { margin-left:0; } }

/* the signed-in role cannot record decisions: the controls are hidden, the server still refuses */
body.role-no-decision [data-op="record_decision"] { display:none !important; }

/* the run mode line under the wordmark marks an unsaved / conflicting server state */
.app-topbar .wordmark span[data-sync="conflict"], .app-topbar .wordmark span[data-sync="error"] { color:var(--critical-on-dark); }

.viewer-home { max-width:48rem; margin:1.5rem auto; padding:0 1rem; }
.viewer-home h2 { margin:.4rem 0 .6rem; }
.viewer-list { display:grid; gap:.5rem; padding:0; list-style:none; }
.viewer-list li { padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); overflow-wrap:anywhere; }
.viewer-list a { font-weight:700; }

.conflict-view .table-scroll { overflow-x:auto; margin:.6rem 0; }
.conflict-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.conflict-table th, .conflict-table td { padding:.3rem .5rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.conflict-table tr.is-diff td { font-weight:700; }
.conflict-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0; }

.team-panel h3, .share-panel h3 { margin:1rem 0 .4rem; font-size:1rem; }
.team-panel h4 { margin:.8rem 0 .3rem; font-size:.9rem; }
.team-panel li.is-unread { font-weight:700; }
.team-panel select { max-width:100%; }
.share-panel input[readonly] { width:100%; font:.8rem/1.4 var(--font-mono); }

/* API keys (Phase 7): the one-time secret and the scope list */
.ak-scopes { border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem; margin: .5rem 0; }
.ak-scope { display: block; margin: .25rem 0; overflow-wrap: anywhere; }
.ak-secret input { width: 100%; font-family: var(--font-mono, ui-monospace, monospace); }
.ak-key .xp-actions { display: inline-flex; margin: 0 0 0 .5rem; }

/* NOVERINT — Phase 4 extraction review (the #dlg dialog is always paper).
   An unconfirmed proposal carries a dashed attention edge and the words
   "Proposed — not used by any check": state is never colour alone. */
:root { --mark: #dcebff; }
.xp-review .xp-group { margin: .9rem 0 0; }
.xp-review .xp-kind { font: 700 .95rem/1.3 var(--font-sans); margin: 0 0 .35rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.xp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.xp-item { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; background: var(--surface-raised); color: var(--ink); }
.xp-item--proposed { border: 2px dashed var(--attention); }
.xp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; align-items: baseline; }
.xp-value { font-weight: 650; overflow-wrap: anywhere; }
.xp-state { font-size: .8rem; font-weight: 650; color: var(--attention); }
.xp-item--confirmed .xp-state, .xp-item--edited_and_confirmed .xp-state { color: var(--pine); }
.xp-item--rejected .xp-state { color: var(--ink-soft); }
.xp-meta { color: var(--ink-soft); margin: .25rem 0; overflow-wrap: anywhere; }
.xp-source { margin: .25rem 0; color: var(--ink); overflow-wrap: anywhere; }
.xp-mark { background: var(--mark); color: var(--ink); padding: 0 .1em; border-radius: 2px; outline: 1px solid var(--attention); }
.xp-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .45rem; align-items: center; }
.xp-actions input { min-width: 12rem; flex: 1 1 12rem; }
.xp-model-note { border-left: 3px solid var(--attention); padding-left: .5rem; color: var(--ink); }
.xp-decided { margin-top: 1rem; }
.xp-decided summary { cursor: pointer; font-weight: 650; }

/* Live Watch (Phase 5): one explicit state per published asset — the pill
   carries the words, colour only repeats them. */
.lw-panel h3, .lw-review h3 { font: 700 .95rem/1.3 var(--font-sans); margin: .9rem 0 .35rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.lw-assets, .lw-flags, .lw-inbox-list, .lw-pending ul, .lw-decided ul, .lw-reminders ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.lw-asset { border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; background: var(--surface-raised); color: var(--ink); }
.lw-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; align-items: baseline; }
.lw-title { font-weight: 650; }
.lw-state { font-size: .78rem; font-weight: 650; border: 1px solid currentColor; color: var(--ink); background: transparent; }
.lw-state[data-state="overdue"] { color: var(--attention); }
.lw-state[data-state="not_observed"] { border-style: dashed; }
.lw-flags li { border-left: 3px solid var(--attention); padding-left: .5rem; overflow-wrap: anywhere; }
.lw-mock { border-left: 3px solid var(--attention); padding-left: .5rem; color: var(--ink); }
.lw-url { overflow-wrap: anywhere; }
.lw-schedule { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.lw-schedule .field { flex: 1 1 14rem; margin: 0; }

/* NOVERINT — Phase 6 change-impact preview (inside the #dlg dialog: paper). */
.ip-dialog .ip-scope { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; margin: .6rem 0; display: grid; gap: .25rem; }
.ip-dialog .ip-scope legend { padding: 0 .3rem; }
.ip-report { margin-top: .8rem; color: var(--ink); }
.ip-heading { font-weight: 700; margin: 0 0 .2rem; }
.ip-group { margin: .6rem 0 0; }
.ip-h { font: 700 .92rem/1.3 var(--font-sans); margin: 0 0 .25rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ip-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; overflow-wrap: anywhere; }
.ip-same, .ip-diff { font-weight: 650; padding-left: .5rem; border-left: 3px solid var(--pine); color: var(--ink); }
.ip-diff { border-left-color: var(--attention); }
.ip-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .ip-columns { grid-template-columns: 1fr; } }
/* Phase 9 — Regulation update panel and the rule-pack mode of the preview */
.rg-panel h3 { font: 700 .95rem/1.3 var(--font-sans); margin: .9rem 0 .3rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.rg-update { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin: .4rem 0; display: grid; gap: .35rem; }
.rg-changelog { width: 100%; border-collapse: collapse; font-size: .84rem; line-height: 1.35; }
.rg-changelog th, .rg-changelog td { text-align: left; vertical-align: top; padding: .3rem .4rem; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.rg-changelog .rg-rule { white-space: nowrap; }
.rg-changelog .rg-change { min-width: 8.5rem; }
.rg-changelog .rg-mat { display: block; }
.rg-changelog thead th { font-weight: 700; }
.rg-synthetic { font-weight: 600; color: var(--ink); }
.rg-assets { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.rg-assets li { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 640px) { .rg-changelog thead { display: none; } .rg-changelog tr { display: grid; padding: .3rem 0; border-bottom: 1px solid var(--line); } .rg-changelog th, .rg-changelog td { border: 0; padding: .05rem 0; } }
/* Phase 9 — claim evidence vault */
.ev-panel h3 { font: 700 .95rem/1.3 var(--font-sans); margin: .9rem 0 .3rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ev-claims, .ev-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ev-claim, .ev-item { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .65rem; display: grid; gap: .2rem; overflow-wrap: break-word; }
.ev-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ev-linked { margin: 0; padding-left: 1.1rem; }
.ev-item p, .ev-claim p { margin: 0; }
.ev-visible { display: inline-flex; gap: .3rem; align-items: center; }
.ev-panel, .ev-claims, .ev-items, .ev-claim, .ev-item { min-width: 0; max-width: 100%; }
.ev-panel select { max-width: 100%; min-width: 0; }
.ev-panel .xp-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-width: 0; }
.ev-head .pill { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.ev-linked li { overflow-wrap: anywhere; }

/* NOVERINT styles — Phase 11: the seal component (app/seal.js; spec §3).
   Size comes from --nvs (set inline by seal.js, 20–400 px); every inner
   measure is a fraction of it. The shadow sits on a wrapper as a
   drop-shadow filter so the clip-path halves of a broken seal keep it.
   Loops (holo 7 s, ring 40 s) only run inside [data-motion="playing"] — the
   site under its Pause motion toggle; everywhere else the seal is still
   between state changes (D42). No motion at all under reduced motion. */

.nvs { position: relative; display: inline-block; flex: none; width: var(--nvs); height: var(--nvs); vertical-align: middle; line-height: 1; }
.nvs-shadow { position: absolute; inset: 0; filter: drop-shadow(0 calc(var(--nvs) * .06) calc(var(--nvs) * .1) rgba(11, 13, 18, .26)); }
.nvs--mini .nvs-shadow { filter: none; }
.nvs-disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 3px var(--nv-ink); isolation: isolate; }
.nvs--mini .nvs-disc { box-shadow: inset 0 0 0 2px var(--nv-ink); }
.nvs-silver { position: absolute; inset: 0; background: var(--nv-silver); }
.nvs-holo { position: absolute; inset: -25%; opacity: .55; mix-blend-mode: color; background: var(--nv-holo); }
.nvs--mini .nvs-holo { inset: -30%; opacity: .6; }
.nvs-hi { position: absolute; inset: 0; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .85), transparent 42%); }
.nvs-rose { position: absolute; inset: 0; width: 100%; height: 100%; }
.nvs-rose path { fill: none; stroke: rgba(11, 13, 18, .55); stroke-width: .5; }
.nvs--card .nvs-rose path { stroke: rgba(11, 13, 18, .5); stroke-width: .9; }
.nvs-rose .nvs-rim, .nvs-rose .nvs-rim2 { fill: none; stroke: var(--nv-ink); stroke-width: 1.2; }
.nvs-rose .nvs-rim2 { stroke-width: .8; }
.nvs-core { position: absolute; left: 50%; top: 50%; width: calc(var(--nvs) * .32); height: calc(var(--nvs) * .32); transform: translate(-50%, -50%); border-radius: 50%; background: var(--nv-ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--nvs) * .012); }
.nvs--card .nvs-core { width: calc(var(--nvs) * .38); height: calc(var(--nvs) * .38); }
.nvs--mini .nvs-core { width: calc(var(--nvs) * .56); height: calc(var(--nvs) * .56); }
.nvs-n { font: 900 calc(var(--nvs) * .127)/1 var(--nv-font); letter-spacing: 0; }
/* the centre text is always white on ink, whatever the host styles for b / i */
.nvs .nvs-core, .nvs .nvs-n, .nvs .nvs-label { color: #fff; font-style: normal; }
.nvs--card .nvs-n { font-size: calc(var(--nvs) * .18); }
.nvs--mini .nvs-n { font-size: calc(var(--nvs) * .33); }
.nvs-label { font: 600 max(11px, calc(var(--nvs) * .03))/1 var(--nv-mono); font-style: normal; letter-spacing: .14em; white-space: nowrap; }

/* ring microtext (≥ 150 px): per-character rotated spans */
.nvs-ring { position: absolute; inset: 0; pointer-events: none; color: var(--nv-ink); font: 600 calc(var(--nvs) * .037)/1 var(--nv-mono); }
.nvs-ring-in { position: absolute; inset: 0; }
.nvs-ring-in > span { position: absolute; left: 50%; top: 50%; width: 1.2em; margin-left: -.6em; text-align: center; height: calc(var(--nvs) * .44); margin-top: calc(var(--nvs) * -.44); transform-origin: 50% 100%; }

/* broken: a pink disc behind two halves */
.nvs-void { position: absolute; inset: calc(var(--nvs) * .03); border-radius: 50%; background: var(--nv-void-strong); overflow: hidden; }
.nvs-void--dot { inset: 0; background: var(--nv-void); }
/* Phase 21h (G8): the centre stays whole and readable on top; VOID is one stamp below it, clear of the centre at any size */
.nvs-mid { position: absolute; inset: 0; pointer-events: none; }
.nvs-mid .nvs-core { box-shadow: 0 0 0 calc(var(--nvs) * .02) var(--nv-void-strong); }
.nvs-stamp { position: absolute; left: 50%; top: 84%; transform: translate(-50%, -50%) rotate(-10deg); padding: .2em .45em .15em; border-radius: 3px; background: var(--nv-void-strong); color: #fff; box-shadow: 0 0 0 1.5px #fff; font: 700 max(11px, calc(var(--nvs) * .1))/1 var(--nv-mono); letter-spacing: .12em; white-space: nowrap; }
/* below the centre at any card size: the centre ends at 69 %; the stamp is at least 11 px, so its offset grows with it */
.nvs--card .nvs-stamp { top: calc(var(--nvs) * .69 + max(13px, var(--nvs) * .11)); }
.nvs--full .nvs-stamp { top: 82%; }
.nvs-half { position: absolute; inset: 0; }
.nvs--full .nvs-half--l { transform: translate(calc(var(--nvs) * -.147), calc(var(--nvs) * .053)) rotate(-16deg); }
.nvs--full .nvs-half--r { transform: translate(calc(var(--nvs) * .147), calc(var(--nvs) * -.033)) rotate(14deg); }
.nvs--card .nvs-half--l { transform: translate(calc(var(--nvs) * -.2), calc(var(--nvs) * .06)) rotate(-16deg); }
.nvs--card .nvs-half--r { transform: translate(calc(var(--nvs) * .2), calc(var(--nvs) * -.05)) rotate(14deg); }

/* not sealed yet */
.nvs-none { position: absolute; inset: 0; border-radius: 50%; border: 2.5px dashed var(--nv-line-strong); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--nv-muted); font: 600 clamp(11px, calc(var(--nvs) * .045), 13px)/1.2 var(--nv-mono); letter-spacing: .16em; }
.nvs--mini .nvs-none { border-width: 1.5px; }

/* motion — a class only when the person has not asked for reduced motion (seal.js never adds it then) */
.nvs-anim-drop .nvs-shadow { animation: nvs-drop .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.nvs-anim-split .nvs-half { animation: nvs-split .6s cubic-bezier(.2, 1.2, .4, 1) backwards; }
.nvs-anim-split .nvs-void { animation: nvs-fade .3s ease-out backwards; }
.nvs-anim-split .nvs-stamp { animation: nvs-fade .3s ease-out .3s backwards; }
[data-motion="playing"] .nvs-holo { animation: nvs-spin 7s linear infinite; }
[data-motion="playing"] .nvs-ring-in { animation: nvs-spin 40s linear infinite; }
@keyframes nvs-spin { to { transform: rotate(360deg); } }
@keyframes nvs-drop { from { transform: scale(1.4) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nvs-split { from { transform: none; } }
@keyframes nvs-fade { from { opacity: 0; } }

/* a broken card: shakes once; the VOID tape sits in its bottom-right corner, under the controls */
.nv-anim-shake { animation: nv-shake .45s ease both; }
@keyframes nv-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.nv-void-tape { position: absolute; right: -46px; bottom: 26px; z-index: 0; width: 190px; height: 24px; transform: rotate(-38deg); overflow: hidden; pointer-events: none; background: repeating-linear-gradient(135deg, #E0114A 0 12px, #C20D40 12px 24px), #E0114A; }
.nv-void-tape-in { display: flex; align-items: center; justify-content: center; gap: 1.6em; height: 100%; color: #fff; font: 600 11px/1 var(--nv-mono); letter-spacing: .3em; white-space: nowrap; }
.nv-anim-tape { animation: nv-tape .45s cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes nv-tape { from { transform: rotate(-38deg) translateX(160px); } }

/* guilloché bands (decorative) */
.nv-guilloche { display: block; width: 100%; pointer-events: none; }
.nv-guilloche path { fill: none; stroke: var(--nv-guilloche); stroke-width: .8; vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: reduce) {
  .nvs, .nvs *, .nv-anim-shake, .nv-void-tape { animation: none !important; transition: none !important; }
}
@media print {
  .nvs, .nvs *, .nv-anim-shake, .nv-void-tape { animation: none !important; transition: none !important; }
  .nvs-shadow { filter: none; }
}

/* NOVERINT styles — the website (Phase 14: Check · Fix · Seal · Reach, docs/design/2026-09-28-site-story;
   the seal sections below the hero are Phase 11's, docs/design/2026-09-27-seal §5.1–5.3).
   Cool paper, never cream. Small white text on pink sits on --nv-void-strong. The seal itself is
   styles-seal.css. Loops (the seal's holo and ring, the marquee) run only inside [data-motion="playing"],
   which the Pause motion toggle sets (D37); reduced motion starts paused and nothing moves. */

body.sl-page { margin: 0; background: var(--nv-bg); color: var(--nv-ink); font: 400 17px/1.5 var(--nv-font); -webkit-font-smoothing: antialiased; }
.sl-page h1, .sl-page h2, .sl-page h3, .sl-page p, .sl-page ul, .sl-page figure { margin: 0; }
.sl-root { width: 100%; overflow: clip; }
.sl-page a { color: var(--nv-ink); }
.sl-page :focus-visible { outline: 3px solid var(--nv-focus); outline-offset: 3px; border-radius: 8px; }
.sl-page .skip-link { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--nv-ink); color: #fff; font-weight: 800; text-decoration: none; transform: none; }
.sl-page .skip-link:focus { top: 12px; }
.sl-page main { outline: none; }
.sl-mono { font-family: var(--nv-mono); font-size: 12px; letter-spacing: .16em; color: var(--nv-muted); }
.sl-serif { font-family: var(--nv-serif); font-style: italic; font-weight: 400; }

/* buttons */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 16px; line-height: 1.15; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.sl-btn:hover { transform: translateY(-2px); }
.sl-btn--lg { min-height: 58px; padding: 0 30px; font-size: 18px; }
.sl-page a.sl-btn--ink, .sl-btn--ink { border: 0; background: var(--nv-ink); color: #fff; }
.sl-btn--line { border: 2px solid var(--nv-ink); background: var(--nv-surface); color: var(--nv-ink); }
.sl-page a.sl-btn--lime, .sl-btn--lime { border: 0; background: var(--nv-sealed); color: var(--nv-ink); }
.sl-btn--white { border: 0; background: #fff; color: var(--nv-ink); }
.sl-btn[disabled] { cursor: default; transform: none; opacity: 1; }

/* small chips: READY / COMING SOON, and a ruling's outcome */
.sl-tag, .sl-rchip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 700 11px/1.3 var(--nv-mono); letter-spacing: .1em; white-space: nowrap; }
.sl-tag--ready { background: var(--nv-sealed); color: var(--nv-ink); }
.sl-tag--soon { background: #E6EBF1; color: #3A414C; }
.sl-tag--soon-ink { background: var(--nv-ink); color: #fff; }
.sl-rchip--upheld { background: var(--nv-void-strong); color: #fff; }
.sl-rchip--upheld_in_part { background: var(--nv-void-tint); color: var(--nv-void-ink); }
.sl-rchip--not_upheld { background: var(--nv-sealed); color: var(--nv-ink); }
.sl-rchip--cma { background: #E6EBF1; color: var(--nv-ink); }

/* the Pause motion toggle (D37): fixed, bottom corner, 44 px */
.sl-motion { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 2px solid var(--nv-ink); border-radius: 999px; background: var(--nv-surface); color: var(--nv-ink); font: inherit; font-family: var(--nv-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 3px 3px 0 var(--nv-ink); }
.sl-motion[hidden] { display: none; }
.sl-motion:hover { background: var(--nv-sealed); }
.sl-motion:focus-visible { outline: 3px solid var(--nv-focus); outline-offset: 3px; }
.sl-motion-ico { display: inline-block; width: 10px; height: 10px; }
.sl-motion[data-motion="playing"] .sl-motion-ico { border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.sl-motion[data-motion="paused"] .sl-motion-ico { border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; width: 0; height: 0; }

/* nav */
.sl-nav { position: relative; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 22px 56px; }
.sl-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.sl-brand b { font-weight: 900; font-size: 18px; letter-spacing: .08em; }
.sl-brand-seal { display: block; }
.sl-navlinks { display: flex; gap: 28px; margin-left: auto; }
.sl-navlinks a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: none; }
.sl-navlinks a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* hero: the text, and the demo post in four tabs (board Hero4) */
.sl-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 660px; gap: 48px; align-items: center; padding: 32px 56px 88px; }
.sl-hero-bg, .sl-final-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sl-waves { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-hero > :not(.sl-hero-bg) { position: relative; z-index: 1; }
.sl-hero-text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sl-latin { font-family: var(--nv-serif); font-size: 23px; color: var(--nv-text-2); }
.sl-h1 { font-weight: 900; font-size: clamp(64px, calc(6.4vw - 10px), 84px); line-height: .92; letter-spacing: var(--nv-track-display); word-spacing: var(--nv-word); }
.sl-h1-line, .sl-h2-line { display: block; }
.sl-lead { font-size: 20px; line-height: 1.5; color: var(--nv-text-2); max-width: 580px; }
.sl-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.sl-ctas--center { justify-content: center; }
/* the hero's quiet way to the 48-second film (/how-it-works/) */
.sl-watch { margin: 0; }
.sl-page a.sl-watch-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--nv-ink); font-weight: 700; font-size: 16px; text-underline-offset: 4px; }
.sl-watch-link span { font-size: 12px; }
.sl-promise { font-size: 12px; line-height: 1.7; }
.sl-promise-line { display: block; }

/* the demo keeps its top edge whichever tab is shown, so the tab bar never jumps */
.sl-hero-demo { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: start; padding-top: 12px; }
.sl-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 999px; background: var(--nv-surface); box-shadow: 0 0 0 1px var(--nv-line); }
.sl-tab { min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--nv-ink); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sl-tab:hover { background: var(--nv-bg); }
.sl-tab[aria-selected="true"] { background: var(--nv-ink); color: #fff; font-weight: 800; }
.sl-demo-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }

.sl-post { position: relative; border-radius: 22px; background: var(--nv-surface); box-shadow: 0 24px 60px rgba(11, 13, 18, .14), 0 0 0 1px rgba(11, 13, 18, .06); overflow: hidden; min-width: 0; }
.sl-post-head { display: flex; align-items: center; gap: 9px; padding: 11px 13px; font-size: 13px; }
.sl-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #F4F6FA 0 40%, transparent 41%), var(--nv-holo); }
.sl-post-img { position: relative; height: 250px; display: flex; align-items: flex-end; padding: 16px; box-sizing: border-box; color: #fff; font-weight: 900; font-size: 30px; line-height: .95; letter-spacing: -.02em;
  background: repeating-linear-gradient(90deg, rgba(47, 79, 70, .55) 0 18px, transparent 18px 40px, rgba(231, 236, 239, .55) 40px 46px, transparent 46px 64px), repeating-linear-gradient(0deg, rgba(47, 79, 70, .5) 0 18px, transparent 18px 40px, rgba(231, 236, 239, .5) 40px 46px, transparent 46px 64px), #C8553D; }
.sl-post-img > span:first-child { text-shadow: 0 2px 10px rgba(11, 13, 18, .45); }
.sl-post-seal { position: absolute; right: 12px; bottom: 12px; line-height: 0; }
.sl-post-seal:empty { display: none; }
.sl-post-seal[data-broken] { top: 14px; right: 30px; bottom: auto; } /* Seal tab, beat 2: the halves of the split seal stay inside the image, in the top corner — clear of "The autumn throw." (Phase 16) */
.sl-post-cap { padding: 12px 14px 16px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.sl-post-cap mark, .sl-post-cap ins, .sl-post-cap del { color: var(--nv-ink); border-radius: 3px; padding: 0 2px; }
.sl-bad { background: var(--nv-void-tint); box-shadow: inset 0 -2px 0 var(--nv-void-strong); }
.sl-add { background: var(--nv-sealed); font-weight: 700; text-decoration: none; }
.sl-gone { background: var(--nv-void-tint); text-decoration: line-through; text-decoration-color: var(--nv-void-strong); text-decoration-thickness: 2px; }
.sl-more { color: var(--nv-muted); }
.sl-behind { display: block; margin-top: 8px; padding: 6px 9px; border: 1.5px dashed var(--nv-line-dash); border-radius: 10px; font-size: 13px; }
.sl-behind-k { font: 600 11px/1.4 var(--nv-mono); letter-spacing: .12em; color: var(--nv-muted); }

.sl-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 4px; }
.sl-panel:focus-visible { outline-offset: 4px; }
.sl-rise { animation: sl-rise .35s ease both; }
@keyframes sl-rise { from { opacity: 0; transform: translateY(10px); } }
.sl-panel-k { font-size: 11px; letter-spacing: .08em; white-space: nowrap; } /* one line in the 312 px panel (Phase 16) */
.sl-panel-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-findings { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sl-finding, .sl-pcard { display: flex; flex-direction: column; gap: 8px; padding: 13px 14px; border-radius: 16px; background: var(--nv-surface); box-shadow: 0 0 0 1px var(--nv-line); }
.sl-finding-t { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; font-weight: 800; line-height: 1.3; }
.sl-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; font-weight: 900; font-size: 12px; line-height: 1; }
.sl-ico--bad { background: var(--nv-void-strong); color: #fff; }
.sl-ico--ok { background: var(--nv-sealed); color: var(--nv-ink); }
.sl-similar { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 0 10px; border-left: 3px solid var(--nv-ink); }
.sl-similar-k { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font: 600 11px/1.8 var(--nv-mono); letter-spacing: .1em; color: var(--nv-muted); }
.sl-similar-meta { flex-basis: 100%; }
.sl-similar-none { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--nv-muted); } /* Phase 21d: no ruling is about it */
.sl-similar-t { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.sl-page .sl-similar-go { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: 12.5px; text-underline-offset: 3px; }
.sl-pcard-t { font-size: 15px; font-weight: 800; }
.sl-pcard-x { font-size: 13px; line-height: 1.5; color: var(--nv-text-2); }
.sl-pcard--dark { background: var(--nv-ink); color: #fff; box-shadow: none; }
.sl-pcard--dark .sl-pcard-x { color: var(--nv-night-text); }
.sl-pcard--broke { box-shadow: inset 4px 0 0 var(--nv-void); } /* Seal tab, beat 2: the seal has broken */
.sl-nobody { padding: 12px 14px; border: 1.5px dashed var(--nv-line-dash); border-radius: 16px; font-size: 12.5px; line-height: 1.45; color: var(--nv-text-2); }
.sl-nobody b { color: var(--nv-ink); }
.sl-panel-serif { font-size: 19px; line-height: 1.25; }
.sl-readiness { list-style: none; margin: 0; }
.sl-readiness li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.sl-readiness .sl-ico { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.sl-panel-line { font-size: 12px; line-height: 1.45; color: var(--nv-muted); }

/* marquee: what a seal covers */
.sl-band { background: var(--nv-ink); color: #fff; overflow: hidden; padding: 12px 0; }
.sl-marquee { display: flex; width: max-content; gap: 30px; align-items: center; white-space: nowrap; font: 600 13px/1 var(--nv-mono); letter-spacing: .16em; }
.sl-marquee i { font-style: normal; color: var(--nv-sealed); font-size: 11px; }
.sl-page[data-motion] .sl-marquee { animation: sl-mq 30s linear infinite; }
.sl-page[data-motion="paused"] .sl-marquee { animation-play-state: paused; }
@keyframes sl-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* sections */
.sl-sec { padding: 96px 56px; }
.sl-h2 { font-weight: 900; font-size: 64px; line-height: .98; letter-spacing: var(--nv-track-display); word-spacing: var(--nv-word); }
.sl-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 60px; flex-wrap: wrap; margin-bottom: 44px; }
.sl-sec-head .sl-h2 { max-width: 760px; }
.sl-sec-sub { font-size: 18px; line-height: 1.55; color: var(--nv-text-2); max-width: 440px; }

/* four steps, one person decides (board Sections4) */
.sl-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sl-card4 { display: flex; flex-direction: column; gap: 14px; min-height: 300px; min-width: 0; padding: 26px; border-radius: 26px; box-sizing: border-box; background: var(--nv-surface); box-shadow: 0 0 0 1px var(--nv-line); }
.sl-card4--dark { background: var(--nv-ink); color: #fff; box-shadow: none; }
.sl-card4-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sl-card4-top .sl-mono { font-size: 13px; letter-spacing: .14em; }
.sl-card4--dark .sl-card4-top .sl-mono { color: var(--nv-night-muted); }
.sl-card4 h3 { font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.sl-card4 p:not(.sl-card4-top):not(.sl-card4-line) { font-size: 15px; line-height: 1.55; color: var(--nv-text-2); }
.sl-card4--dark p:not(.sl-card4-top):not(.sl-card4-line) { color: var(--nv-night-text); }
.sl-card4-line { margin-top: auto !important; padding-top: 12px; border-top: 1px solid #E6EBF1; font-size: 13px; font-weight: 700; }
.sl-card4--dark .sl-card4-line { border-top-color: var(--nv-ink-line); }

/* real rulings, not opinions: counts and cards from the register */
.sl-rulings { margin: 0 24px; padding: 72px 56px; border-radius: 40px; background: var(--nv-ink); color: #fff; display: flex; flex-direction: column; gap: 40px; }
.sl-rulings-head { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px 60px; align-items: end; }
.sl-rulings-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sl-rulings-k { color: var(--nv-sealed); font-size: 13px; }
.sl-rulings .sl-h2 { font-size: 54px; line-height: .98; }
.sl-rulings-facts { display: flex; flex-direction: column; gap: 14px; }
.sl-counts { display: flex; gap: 28px; }
.sl-counts p { display: flex; flex-direction: column; gap: 4px; max-width: 200px; }
.sl-count { font-weight: 900; font-size: 52px; line-height: 1; }
.sl-counts span { font-size: 13px; line-height: 1.4; color: var(--nv-night-muted); }
.sl-rulings-note { font-size: 14px; line-height: 1.5; color: var(--nv-night-text); }
.sl-ruling-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sl-ruling { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px; border-radius: 22px; background: var(--nv-ink-2); border: 1px solid var(--nv-ink-line); }
.sl-ruling-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-ruling-meta { font-size: 11px; letter-spacing: .1em; color: var(--nv-night-muted); }
.sl-ruling-title { font-size: 18px; font-weight: 800; line-height: 1.3; }
.sl-ruling-x { font-size: 14px; line-height: 1.5; color: var(--nv-night-text); }
.sl-ruling-match { margin-top: auto !important; padding-top: 10px; border-top: 1px solid var(--nv-ink-line); font-size: 12px; color: var(--nv-night-muted); }
.sl-ruling-match b { color: #fff; }
.sl-page .sl-ruling-go { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; color: #fff; font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.sl-rulings-foot { display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; }
.sl-rulings-boundary { font-size: 13px; color: var(--nv-night-muted); }

/* try it on this page */
.sl-try { margin: 64px 24px 0; padding: 72px 56px; border-radius: 40px; background: var(--nv-ink); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: center; }
.sl-try-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sl-try-k { color: var(--nv-sealed); }
.sl-try .sl-h2 { font-size: 60px; }
.sl-try-sentence { padding: 18px 22px; border-radius: 18px; background: var(--nv-ink-2); border: 2px solid var(--nv-ink-line); font-size: 22px; line-height: 1.45; max-width: 560px; }
.sl-try-sentence[data-state="sealed"] { border-color: var(--nv-sealed); }
.sl-try-sentence[data-state="broken"] { border-color: var(--nv-void); }
.sl-try-sentence[data-state="broken"] b { background: var(--nv-void-strong); color: #fff; padding: 0 6px; border-radius: 6px; }
.sl-try-row { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.sl-try-msg { font-size: 16px; font-weight: 700; color: var(--nv-night-muted); }
.sl-try-msg[data-state="sealed"] { color: var(--nv-sealed); }
.sl-try-msg[data-state="broken"] { color: #FF8AA8; }
.sl-try-seal { display: flex; align-items: center; justify-content: center; min-height: 420px; }
.sl-try .nvs-none { border-color: var(--nv-night-muted); color: var(--nv-night-text); }

/* what one seal holds */
.sl-anatomy { display: grid; grid-template-columns: minmax(0, 1fr) 820px; gap: 40px; align-items: center; }
.sl-anatomy-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sl-anatomy-text .sl-h2 { font-size: 56px; }
/* the board's 820 × 520 stage (boards/Site.dc.html): the 240 px seal, five labels and their dashed ink
   connectors (review fix 6); below 900 px the labels stack as a list under the seal, with no lines */
.sl-anatomy-map { position: relative; width: 820px; height: 520px; max-width: 100%; justify-self: center; }
.sl-anatomy-lines { position: absolute; inset: 0; width: 820px; height: 520px; overflow: visible; }
.sl-anatomy-lines path { fill: none; stroke: var(--nv-ink); stroke-width: 1.5; stroke-dasharray: 4 5; }
.sl-anatomy-seal { position: absolute; left: 290px; top: 140px; }
.sl-parts { list-style: none; margin: 0; padding: 0; }
.sl-part { position: absolute; display: flex; flex-direction: column; gap: 4px; width: 210px; box-sizing: border-box; padding: 14px 16px; border-radius: 18px; background: var(--nv-surface); border: 1px solid var(--nv-line); box-shadow: 0 10px 24px rgba(11, 13, 18, .06); font-size: 15px; font-weight: 800; line-height: 1.3; }
.sl-part .sl-mono { font-size: 11px; letter-spacing: .14em; font-weight: 600; }
.sl-part--wording { left: 0; top: 20px; } .sl-part--brief { left: 610px; top: 20px; }
.sl-part--offer { left: 0; top: 330px; } .sl-part--rules { left: 610px; top: 330px; }
.sl-part--file { left: 305px; top: 420px; }
/* two columns only when the stage fits beside the text (820 + gap + text + padding); else text above the stage */
@media (max-width: 1351px) { .sl-anatomy { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
  .sl-anatomy-map { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .sl-anatomy-lines { display: none; }
  .sl-anatomy-seal { position: static; }
  .sl-part, .sl-part--file { position: static; width: auto; transform: none; }
  .sl-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; }
}

/* reach more people without breaking a rule (coming soon; the checklist is a labelled preview) */
.sl-reach { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 60px; align-items: center; padding-top: 32px; }
.sl-reach-text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; min-width: 0; }
.sl-reach-k { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sl-reach-k .sl-mono { font-size: 13px; }
.sl-reach .sl-h2 { font-size: 56px; }
.sl-reach-p { font-size: 18px; line-height: 1.55; color: var(--nv-text-2); max-width: 620px; }
.sl-reach-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px; border-radius: 26px; background: var(--nv-surface); box-shadow: 0 0 0 1px var(--nv-line), 0 24px 60px rgba(11, 13, 18, .08); }
.sl-reach-card-k { font-size: 11px; letter-spacing: .12em; }
.sl-reach-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sl-reach-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.sl-reach-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--nv-muted); }
.sl-reach-list b { font-size: 15px; font-weight: 800; color: var(--nv-ink); }
.sl-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font-weight: 900; font-size: 12px; }
.sl-dot--ok { background: var(--nv-sealed); color: var(--nv-ink); }
.sl-dot--info { background: var(--nv-ink); color: #fff; }
.sl-reach-note { padding-top: 12px; border-top: 1px solid #E6EBF1; font-size: 12.5px; color: var(--nv-muted); }

/* honesty */
.sl-honesty { margin: 0 24px; padding: 56px; border-radius: 40px; background: var(--nv-surface); border: 1px solid var(--nv-line); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sl-honesty-text { display: flex; flex-direction: column; gap: 16px; padding-right: 20px; }
.sl-honesty-text h2 { font-size: 36px; line-height: 1.15; }
.sl-honesty-text p { font-size: 16px; line-height: 1.55; color: var(--nv-text-2); }
.sl-do, .sl-never { padding: 22px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; }
.sl-do { background: var(--nv-ink); color: #fff; }
.sl-do-k { color: var(--nv-sealed); }
.sl-never { border: 2px dashed var(--nv-line-dash); }
.sl-never-k { color: var(--nv-void-ink); }
.sl-do ul, .sl-never ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; }
.sl-never ul { color: var(--nv-text-2); }

/* final call to action */
.sl-final { position: relative; padding: 120px 24px 96px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.sl-final > :not(.sl-final-bg) { position: relative; z-index: 1; }
.sl-final-latin { font-size: 26px; color: var(--nv-text-2); }
.sl-final-h { font-size: 88px; }

/* footer */
.sl-foot { background: var(--nv-ink); color: #fff; padding: 36px 56px 96px; }
.sl-foot-in { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 40px; }
.sl-foot-brand { display: flex; flex-direction: column; gap: 8px; max-width: 680px; font-size: 14px; line-height: 1.55; color: var(--nv-night-text); }
.sl-foot-brand b { color: #fff; letter-spacing: .06em; }
.sl-footlinks { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; }
.sl-page .sl-footlinks a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* the founder line (owner request, 2026-10-12): one small line under the footer, also on /how-it-works/ */
.sl-founder { max-width: 1320px; margin: 12px auto 0; font-size: 13px; line-height: 1.6; color: var(--nv-night-text); }
.sl-page .sl-founder a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* mid widths: the demo goes under the text; two step cards a row */
@media (max-width: 1180px) {
  .sl-h1 { font-size: 72px; }
  .sl-h2, .sl-try .sl-h2, .sl-anatomy-text .sl-h2, .sl-rulings .sl-h2, .sl-reach .sl-h2 { font-size: 48px; }
  .sl-final-h { font-size: 64px; }
  .sl-hero, .sl-sec { padding-left: 32px; padding-right: 32px; }
  .sl-nav { padding: 18px 32px; }
  .sl-hero { grid-template-columns: minmax(0, 1fr); }
  .sl-hero-demo { width: 100%; max-width: 660px; justify-self: center; }
  .sl-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-rulings { padding: 56px 40px; }
  .sl-rulings-head { grid-template-columns: minmax(0, 1fr); }
  .sl-reach { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sl-reach-card { max-width: 560px; }
  .sl-try { grid-template-columns: minmax(0, 1fr) 320px; padding: 56px 40px; }
  .sl-try-seal { min-height: 340px; }
  .sl-honesty { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 40px; }
  .sl-honesty-text { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .sl-navlinks { display: none; }
  .sl-navcta { margin-left: auto; }
  .sl-ruling-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-anatomy { grid-template-columns: minmax(0, 1fr); }
  .sl-try { grid-template-columns: minmax(0, 1fr); }
}

/* phones (390 and 320 px): the tabs are a 2 × 2 grid above the post; the panel stacks under it */
@media (max-width: 700px) {
  body.sl-page { font-size: 16px; }
  .sl-nav { padding: 14px 16px; gap: 12px; }
  .sl-navcta { flex: none; min-height: 44px; padding: 0 16px; font-size: 14px; margin-right: 52px; }
  .sl-nav .sl-brand b { font-size: 16px; letter-spacing: .06em; }
  .sl-nav .sl-brand-seal { width: 30px; height: 30px; }
  /* review fix 4: on phones Pause motion is a 44 × 44 icon in the nav bar, right of "Open the Studio" — it
     overlaps nothing and stays the second Tab stop (D37; it is still first in the DOM after the skip link) */
  .sl-motion { position: absolute; top: 14px; right: 16px; bottom: auto; width: 44px; height: 44px; padding: 0; justify-content: center; box-shadow: 2px 2px 0 var(--nv-ink); }
  .sl-motion #motionLabel { display: none; } /* named by aria-label (landing.js) */
  .sl-hero { padding: 16px 16px 48px; gap: 28px; }
  .sl-latin { font-size: 18px; }
  .sl-h1 { font-size: 48px; }
  .sl-h1, .sl-h2 { letter-spacing: var(--nv-track); } /* below 48 px (review fix 5) */
  .sl-lead { font-size: 17px; }
  .sl-ctas .sl-btn { flex: 1 1 100%; }
  .sl-promise { font-size: 11px; letter-spacing: .1em; }
  .sl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .sl-demo-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-panel-k { white-space: normal; }
  .sl-post-img { height: 220px; }
  .sl-sec { padding: 64px 16px; }
  .sl-h2, .sl-try .sl-h2, .sl-anatomy-text .sl-h2, .sl-rulings .sl-h2, .sl-reach .sl-h2 { font-size: 36px; }
  .sl-sec-head { margin-bottom: 24px; }
  .sl-step-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-card4 { min-height: 0; padding: 22px; }
  .sl-rulings { margin: 0 12px; padding: 40px 20px; border-radius: 28px; gap: 28px; }
  .sl-counts { gap: 20px; }
  .sl-count { font-size: 42px; }
  .sl-rulings-foot .sl-btn { width: 100%; }
  .sl-reach { padding-top: 16px; }
  .sl-reach-text .sl-btn { width: 100%; }
  .sl-reach-card { padding: 20px; }
  .sl-try { margin: 48px 12px 0; padding: 40px 20px; border-radius: 28px; }
  .sl-try-sentence { font-size: 18px; }
  .sl-try-seal { min-height: 240px; }
  .sl-honesty { margin: 0 12px; padding: 28px 20px; border-radius: 28px; grid-template-columns: minmax(0, 1fr); }
  .sl-honesty-text { padding-right: 0; }
  .sl-honesty-text h2 { font-size: 28px; }
  .sl-final { padding: 72px 16px 64px; }
  .sl-final-h { font-size: 42px; }
  .sl-foot { padding: 28px 16px 88px; }
  .sl-foot-in { flex-direction: column; }
}
@media (max-width: 340px) {
  .sl-h1 { font-size: 42px; }
  .sl-h2, .sl-try .sl-h2, .sl-anatomy-text .sl-h2, .sl-rulings .sl-h2, .sl-reach .sl-h2 { font-size: 31px; }
  .sl-final-h { font-size: 36px; }
  .sl-tab { font-size: 13px; padding: 0 6px; }
  .sl-btn { white-space: normal; text-align: center; }
}
/* brand + "Open the Studio" + the Pause motion icon don't fit below 385 px: the seal mark stays, the
   wordmark is visually hidden (the link keeps its name, "NOVERINT home") */
@media (max-width: 384px) {
  .sl-nav .sl-brand b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-page *, .sl-page *::before, .sl-page *::after { animation: none !important; transition: none !important; }
  html:has(body.sl-page) { scroll-behavior: auto; }
  /* reduced motion starts paused (landing.js); the loops run only if the visitor presses "Play motion" */
  .sl-page[data-motion="playing"] .sl-marquee { animation: sl-mq 30s linear infinite !important; }
  .sl-page[data-motion="playing"] .nvs-holo { animation: nvs-spin 7s linear infinite !important; }
  .sl-page[data-motion="playing"] .nvs-ring-in { animation: nvs-spin 40s linear infinite !important; }
}

/* NOVERINT styles — Phase 10 Studio (v3): shell, sidebar, phone bar, Today
   and the shared components of the redesign (chips, buttons, cards, pills).
   Everything is scoped to body.studio-v3 / .nv, so the rollback shells keep
   their own look. Tokens: styles-tokens.css (§3 of the spec). */

/* ---------- frame ---------- */
body.studio-v3 { height: auto; min-height: 100vh; overflow: visible; background: var(--nv-bg); color: var(--nv-ink); font-family: var(--nv-font); }
body.studio-v3 .app-topbar { display: none; }
body.studio-v3 .app-frame { display: block; height: auto; min-height: 100vh; overflow: visible; }
body.studio-v3 #app { min-height: 100vh; background: var(--nv-bg); }
body.studio-v3 :focus-visible { outline: 3px solid var(--nv-focus); outline-offset: 2px; border-radius: 6px; }
body.studio-v3 .skip-link { position: absolute; top: -120px; left: 12px; transform: none; border-radius: 999px; background: var(--nv-ink); color: #fff; font: 800 14px/1 var(--nv-font); padding: 14px 18px; z-index: 90; }
body.studio-v3 .skip-link:focus { top: 8px; }
.nv-studio, .nv-boot-studio { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: var(--bg); font-family: var(--nv-font); color: var(--ink); }
.nv-studio h1, .nv-studio h2, .nv-studio h3, .nv-studio p { margin: 0; }
.nv-studio button { font-family: inherit; color: inherit; }
.nv .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* one toast at a time, bottom-left of the main column; ws-dom.js placeToast() moves it clear of the
   cards, the decision panel and the navigation (review fix 3) */
body.studio-v3 .toast-wrap { top: auto; left: 272px; right: auto; bottom: 24px; max-width: min(420px, calc(100vw - 296px)); }
body.studio-v3 .toast { max-width: none; background: var(--nv-ink); color: #fff; border: 0; border-left: 4px solid var(--nv-lime); border-radius: 12px; font: 600 14px/1.4 var(--nv-font); padding: 12px 16px; }
body.studio-v3 .toast.err { border-left-color: var(--nv-pink); }

/* ---------- sidebar ---------- */
.nv-side, .nv-boot-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box; background: var(--rail); border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; }
.nv-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; color: var(--ink); text-decoration: none; align-self: flex-start; }
.nv-brand b { font-weight: 900; font-size: 16px; letter-spacing: .04em; }
.nv-logo { width: 20px; height: 20px; border-radius: 6px; background: var(--lime); border: 2px solid var(--ink); box-sizing: border-box; flex: none; }
.nv-camp { position: relative; }
.nv-camp-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 12px; border-radius: 12px; border: 1px solid #CED7E4; background: var(--surface); text-align: left; cursor: pointer; }
.nv-camp-btn:hover { border-color: var(--ink); }
.nv-camp-k { font-size: 12px; color: var(--muted); }
.nv-camp-v { font-size: 14px; font-weight: 700; line-height: 1.3; display: flex; gap: 6px; align-items: flex-start; }
.nv-caret { flex: none; }
.nv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nv-nav-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; font-size: 15px; text-align: left; cursor: pointer; }
.nv-nav-item:hover { background: #DCE2EB; }
.nv-nav-item.is-on { background: var(--ink); color: #fff; font-weight: 700; }
.nv-badge { min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; background: var(--pink); color: var(--ink); font-size: 12px; font-weight: 800; box-sizing: border-box; }
.nv-preview-tag { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--sun); color: var(--ink); }
.nv-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; position: relative; }
.nv-tourcard { padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.nv-tourcard-h { font-weight: 700; color: var(--ink); }
.nv-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-weight: 800; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.nv-more-btn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #CED7E4; background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; }
.nv-more-btn:hover { background: #DCE2EB; }
.nv-menu { list-style: none; margin: 6px 0 0; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ink); box-shadow: 0 16px 40px rgba(10,10,12,.14); display: flex; flex-direction: column; gap: 2px; z-index: 30; }
.nv-camp .nv-menu { position: absolute; left: 0; right: 0; top: 100%; }
.nv-menu--up { position: absolute; left: 0; right: 0; bottom: calc(100% - 44px); margin: 0 0 8px; }
.nv-side-foot .nv-menu--up { bottom: auto; top: auto; position: static; }
.nv-menu-item { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; line-height: 1.3; border-radius: 10px; border: 0; background: transparent; text-align: left; font-size: 14px; font-weight: 600; cursor: pointer; }
.nv-menu-item:hover, .nv-menu-item:focus-visible { background: var(--bg); }
.nv-runmode { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 0 8px; }
.nv-runmode-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
.nv-runmode[data-sync="conflict"] .nv-runmode-dot, .nv-runmode[data-sync="error"] .nv-runmode-dot { background: var(--pink); outline: 1px solid var(--ink); }
.nv-runmode-line { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.nv-runmode-note { grid-column: 2; font-size: 12px; line-height: 1.4; color: var(--muted); }
.nv-phonebar, .nv-boot-bar { display: none; }

/* ---------- main + page head ---------- */
.nv-main, .nv-boot-main { min-width: 0; padding: 36px 48px 64px; box-sizing: border-box; }
.nv-page { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.nv-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 32px; flex-wrap: wrap; }
.nv-pagehead-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nv-pagehead-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.nv-eyebrow { font-family: var(--nv-mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.nv-daynote { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.nv-main h1, .nv-h1 { font-weight: 900; font-size: 52px; line-height: .98; letter-spacing: var(--nv-track-display); word-spacing: var(--nv-word); outline-offset: 6px; }
.nv-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; cursor: pointer; }
.nv-back:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- buttons, chips, pills ---------- */
.nv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 14px; line-height: 1.15; white-space: nowrap; cursor: pointer; text-decoration: none; text-align: center; transition: transform var(--nv-t-fast) ease, background-color var(--nv-t-fast) ease; }
.nv-btn:active { transform: scale(.98); }
.nv-btn--ink { border: 0; background: var(--ink); color: #fff !important; }
.nv-btn--ink:hover { background: #26262E; }
.nv-btn--line { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.nv-btn--line:hover { background: rgba(10,10,12,.06); }
.nv-btn--lime { border: 0; background: var(--lime); color: var(--ink); }
.nv-btn--lg { min-height: 48px; padding: 0 20px; font-size: 15px; }
.nv-btn[disabled] { background: #CED7E4; color: var(--muted) !important; border-color: #CED7E4; cursor: not-allowed; }
.nv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.nv-chip svg { flex: none; }
.nv-chip--pink { background: var(--pink); } .nv-chip--cyan { background: var(--cyan); } .nv-chip--sun { background: var(--sun); } .nv-chip--lime { background: var(--lime); }
.nv-chip--ink { background: var(--ink); color: #fff; }
.nv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-pill { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #CED7E4; background: var(--surface); font-size: 14px; cursor: pointer; }
.nv-pill.is-on { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 700; }

/* ---------- Today ---------- */
.nv-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.nv-lanes[data-filter="mine"], .nv-lanes[data-filter="creator"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nv-lane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nv-lane-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.nv-lane-head h2 { font-size: 17px; font-weight: 800; }
.nv-lane-dot { width: 12px; height: 12px; border-radius: 4px; box-sizing: border-box; }
.nv-lane-dot--pink { background: var(--pink); } .nv-lane-dot--sun { background: var(--sun); border: 1px solid var(--ink); } .nv-lane-dot--lime { background: var(--lime); border: 1px solid var(--ink); }
.nv-lane-count { font-family: var(--nv-mono); font-size: 13px; color: var(--muted); }
.nv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--nv-radius-card); padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: transform var(--nv-t-fast) ease, box-shadow var(--nv-t-fast) ease; }
.nv-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(10,10,12,.08); }
.nv-card.is-changed { border: 2px solid var(--ink); padding: 17px; }
.nv-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.nv-card-title { font-size: 17px; font-weight: 800; line-height: 1.3; }
.nv-card-body { display: flex; gap: 14px; align-items: center; }
.nv-card-sentence { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.nv-card-more { font-size: 14px; line-height: 1.45; color: var(--muted); }
.nv-thumb { flex: none; width: 46px; height: 76px; border-radius: 9px; background: #DDEFF3; border: 1px solid #C3DCE2; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; box-sizing: border-box; font-family: var(--nv-mono); font-size: 11px; color: #2F4A51; }
.nv-thumb--missing { background: transparent; border: 2px dashed #C7D2DF; }
.nv-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nv-card-meta { font-size: 13px; color: var(--muted); }
.nv-card-foot .nv-btn { margin-left: auto; }
.nv-empty { border: 2px dashed #C7D2DF; border-radius: var(--nv-radius-card); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.nv-empty-h { font-size: 16px; font-weight: 800; color: var(--ink); }

/* ---------- shared panels and dialogs in the v3 look ---------- */
.nv-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--nv-radius-lg); padding: 22px; min-width: 0; }
.nv-choice-list { display: flex; flex-direction: column; gap: 10px; }
.nv-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 14px 16px; border-radius: 14px; border: 1px solid #CED7E4; background: #fff; text-align: left; cursor: pointer; font: inherit; }
.nv-choice:hover:not([disabled]) { border-color: var(--nv-ink); }
.nv-choice b { font-size: 16px; }
.nv-choice span { font-size: 13px; color: var(--nv-muted); }
.nv-choice[disabled] { opacity: .6; cursor: not-allowed; }
.nv-copybox { width: 100%; box-sizing: border-box; font: 14px/1.5 var(--nv-font); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--nv-line-strong); }

/* ---------- mid widths ---------- */
@media (max-width: 1180px) {
  .nv-main, .nv-boot-main { padding: 32px 32px 56px; }
  .nv-lanes, .nv-lanes[data-filter] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-main h1, .nv-h1 { font-size: 44px; letter-spacing: var(--nv-track); }
}

/* ---------- phones and small tablets: the sidebar becomes a top bar with a menu ---------- */
@media (max-width: 900px) {
  .nv-studio, .nv-boot-studio { grid-template-columns: minmax(0, 1fr); }
  .nv-phonebar, .nv-boot-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px 8px 16px; background: var(--rail); border-bottom: 1px solid var(--line); box-sizing: border-box; }
  .nv-phonebar .nv-brand, .nv-boot-bar .nv-brand { padding: 0; }
  .nv-phone-mode { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--nv-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); min-width: 0; }
  .nv-phone-mode span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nv-side-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--surface); font-weight: 700; font-size: 14px; cursor: pointer; flex: none; }
  .nv-side, .nv-boot-side { display: none; position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .nv-side.is-open { display: flex; }
  .nv-side > .nv-brand, .nv-boot-side > .nv-brand { display: none; }
  .nv-main, .nv-boot-main { padding: 24px 16px 48px; }
  .nv-main h1, .nv-h1 { font-size: 36px; letter-spacing: var(--nv-track); }
  .nv-lanes, .nv-lanes[data-filter] { grid-template-columns: minmax(0, 1fr); }
  body.studio-v3 .toast-wrap { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .nv-pagehead { align-items: flex-start; }
}
@media (max-width: 420px) {
  /* the run mode is never hidden: on the narrowest phones it takes its own row */
  .nv-phonebar, .nv-boot-bar { flex-wrap: wrap; row-gap: 2px; padding-bottom: 6px; }
  .nv-phone-mode { order: 3; width: 100%; margin-left: 0; }
  .nv-side-toggle { margin-left: auto; }
  .nv-pagehead-actions { width: 100%; }
  .nv-pagehead-actions .nv-btn { flex: 1 1 auto; }
  .nv-main h1, .nv-h1 { font-size: 32px; letter-spacing: var(--nv-track); }
}
@media (prefers-reduced-motion: reduce) {
  .nv-card, .nv-btn { transition: none; }
  .nv-card:hover { transform: none; }
}
/* the creator page preview inside a dialog: a phone-width frame */
.nv-phoneframe { max-width: 390px; margin: 12px auto 0; border: 2px solid var(--nv-ink); border-radius: 22px; overflow: hidden; background: var(--nv-bg); }
.nv-phoneframe .cc-foot { position: static; }

/* ---------- dialogs in the Studio's look (the one #dlg helper, the guide) ---------- */
body.studio-v3 dialog { border-radius: 22px; background: #fff; color: var(--nv-ink); font-family: var(--nv-font); box-shadow: 0 30px 80px rgba(10,10,12,.28); }
body.studio-v3 dialog::backdrop { background: rgba(10,10,12,.55); backdrop-filter: none; }
body.studio-v3 dialog form { border-top: 0; padding: 24px; }
body.studio-v3 .dialog-kicker { display: none; }
.nv-manifest { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.nv-manifest-k { font: 600 11px/1.4 var(--nv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--nv-muted); margin-bottom: -6px !important; }
.nv-manifest-fp { font: 500 13px/1.5 var(--nv-mono) !important; overflow-wrap: anywhere; padding: 10px 12px; border-radius: 12px; background: var(--nv-quiet); }
.nv-manifest .btn { align-self: flex-start; }

/* ---------- the tour popover in the Studio's look (Phase 16: was the old orange "Next") ----------
   An ink card, the seal's lime for the one forward step (ink text only), white-outline pills for
   the others; the spotlight ring is lime, not orange. */
body.studio-v3 .tour-spotlight { box-shadow: 0 0 0 2px var(--nv-sealed), 0 0 0 5px rgba(200, 255, 0, .28), 0 0 0 9999px rgba(11, 13, 18, .6); }
body.studio-v3 .tour-root.no-target .tour-blocker { background: rgba(11, 13, 18, .6); }
body.studio-v3 .tour-pop { background: var(--nv-ink); color: #fff; border: 1px solid var(--nv-ink-line); border-top: 4px solid var(--nv-sealed); border-radius: 18px; font-family: var(--nv-font); box-shadow: 0 30px 80px rgba(11, 13, 18, .45); }
body.studio-v3 .tour-pop-step { color: var(--nv-night-muted); font: 600 11px/1 var(--nv-mono); letter-spacing: .12em; }
body.studio-v3 .tour-pop-x { width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: 999px; color: var(--nv-night-text); font-size: 20px; }
body.studio-v3 .tour-pop-x:hover { color: #fff; background: var(--nv-ink-2); }
body.studio-v3 .tour-pop-title { color: #fff; font: 800 18px/1.25 var(--nv-font); letter-spacing: -.01em; }
body.studio-v3 .tour-pop-body p { color: var(--nv-night-text); font: 400 14px/1.55 var(--nv-font); }
body.studio-v3 .tour-pop .btn { min-height: 44px; padding: 0 18px; border-radius: 999px; font: 700 14px/1 var(--nv-font); text-transform: none; letter-spacing: 0; box-shadow: none; }
body.studio-v3 .tour-pop .btn--signal { background: var(--nv-sealed); border: 0; color: var(--nv-ink); }
body.studio-v3 .tour-pop .btn--signal:hover { background: #D9FF4D; }
body.studio-v3 .tour-pop .btn--ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .34); color: #fff; }
body.studio-v3 .tour-pop .btn--ghost:hover { border-color: #fff; background: var(--nv-ink-2); color: #fff; }
body.studio-v3 .tour-pop .btn:disabled { border-color: var(--nv-ink-line); color: var(--nv-night-muted); background: transparent; }
body.studio-v3 .tour-pop :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.studio-v3 dialog h2 { margin: 0 0 14px; font: 900 26px/1.1 var(--nv-font); letter-spacing: -.02em; text-transform: none; }
body.studio-v3 dialog h3 { font: 800 16px/1.3 var(--nv-font); margin: 14px 0 6px; }
body.studio-v3 dialog .field label { font: 800 13px/1.3 var(--nv-font); text-transform: none; letter-spacing: 0; }
body.studio-v3 dialog input:not([type=checkbox]):not([type=radio]), body.studio-v3 dialog select, body.studio-v3 dialog textarea { font: 15px/1.45 var(--nv-font); border-radius: 10px; border: 1px solid var(--nv-line-strong); min-height: 44px; padding: 8px 12px; box-sizing: border-box; }
body.studio-v3 dialog menu .btn, body.studio-v3 dialog .btn { min-height: 44px; padding: 0 18px; border-radius: 999px; font: 700 15px/1 var(--nv-font); text-transform: none; letter-spacing: 0; border: 1.5px solid var(--nv-ink); background: transparent; color: var(--nv-ink); box-shadow: none; }
body.studio-v3 dialog menu .btn--signal, body.studio-v3 dialog .btn--signal, body.studio-v3 dialog #dlgConfirm { background: var(--nv-ink); color: #fff; border-color: var(--nv-ink); }
body.studio-v3 dialog .small, body.studio-v3 dialog p { font-family: var(--nv-font); }
/* the creator's page keeps its own type inside any dialog */
body.studio-v3 dialog .cc-page h1, body.studio-v3 dialog .cc-page h2, body.studio-v3 dialog .cc-page h3 { text-transform: none; letter-spacing: normal; margin: 0; }
body.studio-v3 dialog .cc-page .cc-h1 { font: 900 34px/1 var(--nv-font); letter-spacing: var(--nv-track); word-spacing: var(--nv-word); }
body.studio-v3 dialog .cc-page .cc-for { font: 400 14px/1.5 var(--nv-font); color: var(--nv-muted); }
body.studio-v3 dialog .cc-page .cc-caption-head h3 { font: 800 14px/1.3 var(--nv-font); }
body.studio-v3 dialog .cc-page .cc-btn { border-radius: 999px; }

/* ---------- Brief & facts ---------- */
.nv-brief-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.nv-brief-card { display: flex; flex-direction: column; gap: 12px; }
.nv-brief-card h2 { font-size: 17px; font-weight: 800; }
.nv-brief-meta { font-family: var(--nv-mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.nv-brief-body { font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.nv-brief-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nv-brief-facts li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.nv-brief-fact-v { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.nv-brief .nv-fact-k { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.nv-brief-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.nv-brief-dl dt { color: var(--muted); }
.nv-brief-dl dd { margin: 0; font-weight: 700; }
.nv-brief-legacy { font-size: 14px; }
@media (max-width: 1180px) { .nv-brief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nv-brief-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .nv-brief-grid { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================================
   Phase 11 — Seal identity (docs/design/2026-09-27-seal §5.4). Overrides
   the Phase 10 rules above: dark ink sidebar and phone bar, the seal logo,
   "N broken" badge, "How the seal works", seals on the cards, the VOID tape
   under the controls, mono chips, the guilloché band and the Seal log.
   Small white text on pink always sits on --nv-void-strong.
   ====================================================================== */
.nv-side, .nv-boot-side { background: var(--nv-rail); border-right: 0; color: #fff; }
.nv-brand { color: inherit; gap: 12px; }
.nv-side .nv-brand, .nv-phonebar .nv-brand, .nv-boot-side .nv-brand, .nv-boot-bar .nv-brand { color: #fff; }
.nv-brand b { font-size: 17px; letter-spacing: .06em; }
.nv-logo-seal { flex: none; }
.nv-camp-btn { background: var(--nv-ink-2); border: 1px solid var(--nv-ink-line); color: #fff; }
.nv-camp-btn:hover { border-color: #fff; }
.nv-camp-k { color: var(--nv-night-muted); }
.nv-camp-v { color: #fff; }
.nv-side .nv-nav-item { color: #fff; }
.nv-side .nv-nav-item:hover { background: var(--nv-ink-2); }
.nv-side .nv-nav-item.is-on { background: #fff; color: var(--nv-ink); }
.nv-badge { min-width: 0; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.3 var(--nv-font); letter-spacing: .01em; word-spacing: .25em; white-space: nowrap; } /* "1 broken", never "1broken" (review fix 5) */
.nv-badge--broken { background: var(--nv-void-strong); color: #fff; }
.nv-badge--needs { background: var(--nv-quiet); color: var(--nv-ink); }
.nv-side .nv-preview-tag { background: var(--nv-quiet); color: var(--nv-ink); }
.nv-sealcard { background: var(--nv-ink-2); border: 1px solid var(--nv-ink-line); color: var(--nv-night-text); padding: 16px; gap: 8px; }
.nv-sealcard-h { font: italic 400 21px/1.15 var(--nv-serif); color: #fff; }
.nv-sealcard p:not(.nv-sealcard-h) { font-size: 13px; line-height: 1.5; }
.nv-side .nv-link { color: #fff; font-size: 13px; }
.nv-side .nv-more-btn { border-color: var(--nv-ink-line); color: #fff; }
.nv-side .nv-more-btn:hover { background: var(--nv-ink-2); }
.nv-side .nv-menu { color: var(--nv-ink); }
.nv-side .nv-runmode-dot { background: var(--nv-sealed); }
.nv-side .nv-runmode-line { color: var(--nv-night-text); }
.nv-side .nv-runmode-note { color: var(--nv-night-muted); }
.nv-side .nv-runmode[data-sync="conflict"] .nv-runmode-dot, .nv-side .nv-runmode[data-sync="error"] .nv-runmode-dot { background: var(--nv-void); outline: 1px solid #fff; }

/* page head: the seal sentence, a guilloché band behind it */
.nv-main { overflow-x: clip; }
.nv-today { position: relative; }
.nv-today-band { position: absolute; top: -36px; left: -48px; width: calc(100% + 96px); height: 150px; z-index: 0; }
.nv-today > :not(.nv-today-band) { position: relative; z-index: 1; }
.nv-main h1.is-broken { color: var(--nv-void); }
.nv-pagehead-sub { font-size: 18px; line-height: 1.45; color: var(--nv-text-2); max-width: 720px; }
.nv-pagehead-actions { align-self: center; }

/* chips: mono, three states */
.nv-chip { font: 600 11px/1.2 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; }
.nv-chip--pink { background: var(--nv-void-strong); color: #fff; }
.nv-chip--cyan { background: var(--nv-quiet); color: var(--nv-text-2); }
.nv-chip--sun { background: var(--nv-void-tint); color: var(--nv-void-ink); }
.nv-chip--lime { background: var(--nv-sealed); color: var(--nv-ink); }
.nv-lane-dot--pink { background: var(--nv-void); }
.nv-lane-dot--sun { background: var(--nv-void-tint); border: 1px solid var(--nv-void-ink); }
.nv-lane-dot--lime { background: var(--nv-sealed); border: 1px solid var(--nv-ink); }

/* cards */
.nv-card { position: relative; overflow: hidden; border-radius: var(--nv-radius-card); }
.nv-card.is-broken { border: 2px solid var(--nv-void); padding: 17px; }
.nv-card-top { flex-wrap: nowrap; align-items: flex-start; }
.nv-card-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nv-card-head .nv-card-meta { font-size: 13px; color: var(--nv-muted); }
.nv-card-seal { margin: -2px 0 0 0; }
.nv-card.is-broken .nv-card-seal { margin: -4px 6px -6px 0; }
.nv-main { overflow-x: clip; }
.nv-card-foot { position: relative; z-index: 1; }
.nv-card-foot .nv-chip { flex: none; }
.nv-card > :not(.nv-void-tape) { position: relative; z-index: 1; }
/* Phase 21 (B6): the VOID tape crosses the card's bottom-right corner — the action row keeps clear of it (the button wraps on a phone) */
.nv-card.is-broken .nv-card-foot { padding-right: 104px; }
.nv-thumb--plaid { width: 56px; height: 76px; border: 0; background:
  repeating-linear-gradient(90deg, rgba(47, 79, 70, .55) 0 6px, transparent 6px 14px, rgba(231, 236, 239, .6) 14px 16px, transparent 16px 22px),
  repeating-linear-gradient(0deg, rgba(47, 79, 70, .5) 0 6px, transparent 6px 14px, rgba(231, 236, 239, .55) 14px 16px, transparent 16px 22px),
  #C8553D; }
.nv-thumb--missing { width: 56px; height: 76px; font: 600 11px/1.2 var(--nv-mono); letter-spacing: .1em; color: var(--nv-muted); align-items: center; padding: 0; border-color: var(--nv-line-strong); }
/* the campaign line (D45): has every post arrived? Apart from every seal — never lime, never pink */
.nv-campaign { display: flex; align-items: flex-start; gap: 12px; max-width: 880px; padding: 14px 18px; background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius-card); }
.nv-campaign[data-state="unknown"], .nv-campaign[data-state="unavailable"] { border: 2px dashed var(--nv-line-strong); padding: 13px 17px; }
.nv-campaign-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nv-quiet); color: var(--nv-ink); }
.nv-campaign[data-state="incomplete"] .nv-campaign-icon { background: var(--nv-void-tint); color: var(--nv-void-ink); }
.nv-campaign-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.nv-campaign-text { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--nv-ink); overflow-wrap: anywhere; }
.nv-campaign-note { font-size: 14px; line-height: 1.5; color: var(--nv-muted); overflow-wrap: anywhere; }
/* owner ruling on D45: an empty slot blocks hand-over; the line offers to remove it (44 px targets) */
.nv-campaign-actions { display: flex; flex-wrap: wrap; gap: 0 18px; }
.nv-campaign-actions .nv-link { font-size: 14px; }
.nv-honest { border: 2px dashed var(--nv-line-dash); border-radius: var(--nv-radius-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--nv-muted); }
.nv-honest-h { font-size: 16px; font-weight: 800; color: var(--nv-ink); }

/* the Seal log */
.nv-seallog { display: flex; flex-direction: column; gap: 16px; }
.nv-seallog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; }
.nv-seallog-head h2 { font-size: 18px; font-weight: 800; }
.nv-seallog-head .nv-eyebrow { font-size: 11px; }
.nv-seallog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 20px; }
.nv-seallog-item::before { content: ""; position: absolute; left: 26px; right: -16px; top: 11px; height: 1px; background: var(--nv-line); }
.nv-seallog-item:last-child::before { display: none; }
.nv-seallog-item { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-seallog-dot { display: inline-flex; background: var(--nv-surface); border-radius: 50%; align-self: flex-start; }
.nv-seallog-time { font: 600 11px/1.3 var(--nv-mono); letter-spacing: .08em; color: var(--nv-muted); }
.nv-seallog-text { font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.nv-seallog-item--broken .nv-seallog-text { color: var(--nv-ink); }
.nv-seallog-empty, .nv-seallog-note { font-size: 14px; line-height: 1.5; color: var(--nv-muted); }

@media (max-width: 900px) {
  .nv-phonebar, .nv-boot-bar { background: var(--nv-rail); border-bottom: 0; color: #fff; }
  .nv-phone-mode { color: var(--nv-night-text); }
  .nv-phone-mode .nv-runmode-dot { background: var(--nv-sealed); }
  .nv-side-toggle { background: transparent; border-color: #fff; color: #fff; }
  .nv-side, .nv-boot-side { border-bottom: 0; }
  .nv-today-band { left: -16px; width: calc(100% + 32px); top: -24px; }
  .nv-seallog-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nv-seallog-item::before { left: 11px; right: auto; top: 26px; bottom: -14px; width: 1px; height: auto; }
  .nv-seallog-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; }
  .nv-seallog-dot { grid-row: 1 / span 2; }
}
@media (max-width: 420px) {
  .nv-card.is-broken .nv-card-seal { --nvs: 58px !important; margin: -2px 0 -4px 0; }
}

/* ---------- the first painted frame (Phase 16, A1) ----------
   index.html's static shell, shown until app.js renders into #app: the same sidebar (or set-up side),
   brand and background as the real shell — its classes share every geometry rule above
   (.nv-boot-studio = .nv-studio, .nv-boot-side = .nv-side, .nv-boot-bar = .nv-phonebar,
   .nv-boot-main = .nv-main; start: styles-start3.css) — and one quiet line. boot-shell.js picks the
   variant; the old top bar never shows. */
.nv-boot { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--nv-bg); }
.nv-boot > .nv-boot-studio, .nv-boot > .nv-boot-start { display: none; }
html:not([data-boot]) .nv-boot > .nv-boot-studio, html[data-boot="studio"] .nv-boot > .nv-boot-studio, html[data-boot="start"] .nv-boot > .nv-boot-start { display: grid; }
html[data-boot="legacy"] .nv-boot, #app:not(:empty) ~ .nv-boot, body.boot-failed .nv-boot { display: none; }
.nv-boot .nv-logo-seal { flex: none; border-radius: 50%; }
.nv-boot-note { margin: 0; font: 600 11px/1.4 var(--nv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--nv-muted); animation: nv-boot-in .3s ease .6s both; }
@keyframes nv-boot-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nv-boot-note { animation: none; } }

/* NOVERINT styles — Phase 10 Review page (v3, spec §5.4). Scoped to .nv-review. */

.nv-review { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "main decide" "record decide"; gap: 22px 28px; align-items: start; }
.nv-review-main { grid-area: main; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.nv-review .nv-decide { grid-area: decide; }
.nv-review .nv-record { grid-area: record; }
.nv-review-head { display: flex; flex-direction: column; gap: 12px; }
.nv-review-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nv-review-titlerow h1 { font-size: 46px; line-height: 1; }
.nv-review-titlerow .nv-chip { font-size: 13px; padding: 6px 12px; }
.nv-summary { font-size: 19px; line-height: 1.5; max-width: 720px; }

/* compare */
.nv-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nv-cmp--single { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.nv-cmp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--nv-radius-card); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nv-cmp-card.is-strong { border: 2px solid var(--ink); padding: 19px; }
.nv-cmp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nv-cmp-head h3 { font-size: 14px; font-weight: 800; }
.nv-vtag { font-family: var(--nv-mono); font-size: 11px; padding: 4px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.nv-vtag--lime { background: var(--lime); border-color: var(--lime); } .nv-vtag--pink { background: var(--pink); border-color: var(--pink); }
.nv-cmp-text { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.nv-del { background: #E6EBF1; color: var(--ink); padding: 1px 4px; border-radius: 5px; text-decoration: line-through; text-decoration-thickness: 2px; }
.nv-ins { background: var(--pink); color: var(--ink); padding: 1px 4px; border-radius: 5px; font-weight: 700; text-decoration: none; }
.nv-cmp-img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 12px; background: var(--bg); }
.nv-cmp-missing { font-size: 14px; color: var(--muted); }

/* what this means */
.nv-meaning { display: flex; flex-direction: column; gap: 10px; }
.nv-meaning h2 { font-size: 18px; font-weight: 800; }
.nv-changes-list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.nv-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nv-finding { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.nv-num { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; box-sizing: border-box; color: var(--ink); }
.nv-num--pink { background: var(--pink); } .nv-num--sun { background: var(--sun); border: 1px solid var(--ink); } .nv-num--lime { background: var(--lime); } .nv-num--ink { background: var(--ink); color: #fff; }
.nv-finding-t { font-size: 16px; font-weight: 800; line-height: 1.35; }
.nv-already { font-weight: 500; color: var(--muted); }
.nv-finding-w { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 4px !important; }
.nv-notchecked { background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.nv-notchecked p { font-size: 15px; line-height: 1.5; }
.nv-nobody { border: 2px dashed var(--nv-line-strong); border-radius: 16px; padding: 14px 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.nv-nobody-t { font-weight: 800; color: var(--ink); }
.nv-checked-line { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.nv-muted { color: var(--muted); }

/* decision panel */
.nv-decide { background: var(--surface); border: 1px solid var(--line); border-radius: var(--nv-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; margin-top: 48px; position: sticky; top: 24px; min-width: 0; }
.nv-decide h2 { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.nv-decide-state { font-size: 15px; line-height: 1.5; }
.nv-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 14px 16px; border-radius: 14px; border: 1px solid #CED7E4; background: var(--surface); text-align: left; cursor: pointer; transition: border-color var(--nv-t-fast) ease, background-color var(--nv-t-fast) ease; }
.nv-opt:hover:not([disabled]) { border-color: var(--ink); }
.nv-opt.is-rec { border: 2px solid var(--ink); padding: 13px 15px; }
.nv-opt.is-on { border: 2px solid var(--ink); padding: 13px 15px; background: var(--bg); }
.nv-opt.is-lime { background: var(--lime); }
.nv-opt[disabled] { cursor: not-allowed; opacity: .55; }
.nv-opt-t { font-size: 16px; font-weight: 800; }
.nv-opt-s { font-size: 13px; line-height: 1.45; color: var(--muted); }
.nv-opt.is-lime .nv-opt-s { color: #2B2B31; }
.nv-optbody { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--bg); animation: nv-pop .3s ease both; }
.nv-optbody-h { font-size: 13px; font-weight: 800; }
.nv-msg { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.nv-field { width: 100%; box-sizing: border-box; font: 14px/1.5 var(--nv-font); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--nv-line-strong); background: #fff; color: var(--ink); min-height: 44px; }
.nv-edit > summary { cursor: pointer; font-size: 13px; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.nv-edit[open] > summary { margin-bottom: 6px; }
.nv-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; min-height: 44px; padding-top: 10px; box-sizing: border-box; cursor: pointer; }
.nv-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.nv-fixedcap { font-size: 14px; line-height: 1.55; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px dashed var(--nv-line-strong); overflow-wrap: anywhere; }
.nv-warn { font-size: 13px; color: var(--ink); background: var(--sun); padding: 8px 10px; border-radius: 8px; }
.nv-btn--block { width: 100%; white-space: normal; min-height: 48px; font-size: 15px; font-weight: 800; }
.nv-fine { font-size: 12px; line-height: 1.5; color: var(--muted); }
.nv-sent { font-size: 14px; font-weight: 800; background: var(--lime); padding: 10px 14px; border-radius: 12px; }
.nv-decide-foot { font-size: 12px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }

/* details for the record */
.nv-record { border-top: 1px solid var(--line); padding-top: 12px; min-width: 0; }
.nv-record > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; flex-wrap: wrap; }
.nv-record > summary::-webkit-details-marker { display: none; }
.nv-plus { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: #DCE2EB; align-items: center; justify-content: center; font-weight: 800; }
.nv-record[open] .nv-plus { transform: rotate(45deg); }
.nv-record-t { font-weight: 800; }
.nv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.nv-tile { padding: 12px; border-radius: 12px; background: var(--nv-quiet); min-width: 0; overflow-wrap: anywhere; }
.nv-tile-k { font-weight: 800; color: var(--ink); }
.nv-mono { font-family: var(--nv-mono); font-size: 12px; }
.nv-legacy { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-top: 8px; }
.nv-legacy > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 700; }
.nv-legacy > .rv-sec-body { padding: 0 14px 14px; font-size: 14px; }
@keyframes nv-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .nv-review { grid-template-columns: minmax(0, 1fr) 340px; }
  .nv-review-titlerow h1 { font-size: 40px; }
}
@media (max-width: 1024px) {
  .nv-review { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "decide" "record"; }
  .nv-decide { margin-top: 0; position: static; }
}
@media (max-width: 640px) {
  .nv-cmp { grid-template-columns: minmax(0, 1fr); }
  .nv-tiles { grid-template-columns: minmax(0, 1fr); }
  .nv-review-titlerow h1 { font-size: 34px; }
  .nv-summary { font-size: 17px; }
  .nv-decide { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .nv-optbody { animation: none; } .nv-opt { transition: none; } }
/* Safari keeps a native <select> at its own ~23 px height and ignores min-height/padding unless the native
   look is switched off (found in WebKit, 2026-09-27): draw the field ourselves so it is 44 px everywhere */
select.nv-field, body.studio-v3 dialog select { -webkit-appearance: none; appearance: none; padding-right: 38px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230A0A0C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
select.nv-field:disabled { background-color: #E9EEF3; cursor: default; }

/* ---------- Phase 11 — the seal on Review (spec §5.5) ---------- */
.nv-review-head--seal { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 28px; align-items: center; }
.nv-review-band { position: absolute; top: -24px; left: -48px; width: calc(100% + 96px); height: 180px; z-index: 0; }
.nv-review-head--seal > :not(.nv-review-band) { position: relative; z-index: 1; }
.nv-review-headtext { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nv-review-eyerow { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.nv-review-head--seal h1 { font-size: 50px; line-height: .98; letter-spacing: var(--nv-track-display); word-spacing: var(--nv-word); }
.nv-review-head--seal h1.is-broken-h { color: var(--nv-ink); }
.nv-cmp-card { position: relative; overflow: hidden; }
.nv-cmp-card > :not(.nv-cmp-band):not(.nv-void-tape) { position: relative; z-index: 1; }
.nv-cmp-band { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .7; }
.nv-cmp-card.is-broken .nv-cmp-text { padding-right: 34px; }
.nv-cmp-card .nv-void-tape { right: -54px; bottom: 18px; }
.nv-vtag { font-family: var(--nv-mono); letter-spacing: .08em; }
.nv-vtag--lime { background: var(--nv-sealed); color: var(--nv-ink); }
.nv-vtag--pink { background: var(--nv-void-strong); color: #fff; }
.nv-holds { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border: 2px dashed var(--nv-line-dash); border-radius: var(--nv-radius-card); font-size: 15px; line-height: 1.5; color: var(--nv-text-2); }
.nv-holds b { color: var(--nv-ink); }
.nv-postlog { display: flex; flex-direction: column; gap: 14px; }
.nv-postlog h2 { font-size: 20px; font-weight: 800; }
.nv-msg { font: italic 400 19px/1.4 var(--nv-serif); color: var(--nv-ink); }
.nv-msg b { font-style: italic; font-weight: 400; }
@media (max-width: 1180px) {
  .nv-review-band { left: -32px; width: calc(100% + 64px); }
  .nv-review-head--seal h1 { font-size: 42px; letter-spacing: var(--nv-track); }
}
@media (max-width: 900px) {
  .nv-review-head--seal { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; }
  .nv-review-seal.nvs { --nvs: 96px !important; }
  .nv-review-band { left: -16px; width: calc(100% + 32px); }
  .nv-review-head--seal h1 { font-size: 32px; }
}
@media (max-width: 420px) {
  .nv-review-head--seal { grid-template-columns: minmax(0, 1fr); }
  .nv-review-seal.nvs { --nvs: 88px !important; margin: 4px 0 0 22px; }
  .nv-review-head--seal h1 { font-size: 30px; }
}
.nv-yours { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; list-style: disc; font: 400 14px/1.5 var(--nv-font); color: var(--nv-text-2, inherit); }

/* NOVERINT styles — Phase 10 first run (v3, spec §5.2): the three-step set-up. */

.nv-start, .nv-boot-start { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--nv-font); }
.nv-start h1, .nv-start h2, .nv-start h3, .nv-start p { margin: 0; }
.nv-start button { font-family: inherit; }
.nv-start-side, .nv-boot-start-side { background: var(--nv-night); color: #fff; padding: 40px 44px; display: flex; flex-direction: column; gap: 36px; position: sticky; top: 0; height: 100vh; box-sizing: border-box; overflow-y: auto; }
.nv-brand--dark { color: #fff; padding: 0; }
.nv-logo--dark { border-color: var(--lime); }
.nv-start-intro { display: flex; flex-direction: column; gap: 12px; }
.nv-start-intro h1 { font-weight: 900; font-size: 44px; line-height: .95; letter-spacing: var(--nv-track); word-spacing: var(--nv-word); }
.nv-start-intro p { font-size: 16px; line-height: 1.5; color: var(--nv-night-text); }
.nv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nv-steprow { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; }
.nv-steprow.is-cur { background: #1D1D24; outline: 2px solid var(--lime); }
.nv-stepnum { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; background: #26262E; color: #C4C4CE; }
.nv-steprow.is-cur .nv-stepnum { background: #fff; color: var(--ink); }
.nv-steprow.is-done .nv-stepnum { background: var(--lime); color: var(--ink); }
.nv-steptext { display: flex; flex-direction: column; gap: 2px; }
.nv-stept { font-size: 17px; font-weight: 800; }
.nv-stepd { font-size: 13px; color: #C4C4CE; }
.nv-start-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #C4C4CE; }
.nv-skip { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--lime); font-weight: 800; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-align: left; }
.nv-skip--quiet { color: #fff; font-weight: 600; font-size: 14px; }
.nv-start-main, .nv-boot-start-main { padding: 48px 64px 72px; min-width: 0; }
.nv-start-step { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.nv-start-step h2 { font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: var(--nv-track); word-spacing: var(--nv-word); outline-offset: 6px; }
.nv-start-lead { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.nv-label { font-size: 13px; font-weight: 800; margin-bottom: -8px !important; }
.nv-brief-text { font-size: 15px; line-height: 1.55; padding: 14px 16px; border-radius: 14px; resize: vertical; }
.nv-start-step > .nv-btn { align-self: flex-start; }
.nv-facts-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.nv-facts-head h3 { font-size: 15px; font-weight: 800; outline-offset: 4px; }
.nv-facts-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nv-count { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.nv-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nv-fact { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px 10px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); min-height: 64px; box-sizing: border-box; }
.nv-fact.is-done { border: 2px solid var(--ink); padding: 9px 11px 9px 15px; }
.nv-fact.is-rejected { opacity: .8; }
.nv-fact-k { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.nv-fact-v { font-size: 15px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.nv-fact-note { font-weight: 500; color: var(--muted); font-size: 13px; }
.nv-fact-editrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nv-fact-editrow .nv-field { min-height: 44px; font-size: 15px; font-weight: 600; flex: 1 1 160px; min-width: 0; }
.nv-fact-act { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.nv-rel { font-weight: 700; }
.nv-done { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--lime); font-weight: 800; font-size: 14px; white-space: nowrap; }
.nv-rejected { font-size: 13px; color: var(--muted); }
.nv-reject { font-weight: 600; font-size: 13px; }
.nv-post-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.nv-post-grid--where { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nv-post-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv-drop { flex-grow: 1; min-height: 140px; border-radius: 14px; border: 2px dashed var(--nv-line-strong); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 15px; cursor: pointer; }
.nv-drop span { font-size: 13px; color: var(--muted); }
.nv-drop.is-over { border-color: var(--ink); background: var(--nv-quiet); }
.nv-added { list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 700; }
.nv-btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.nv-found-h { font-size: 16px; font-weight: 800; margin-top: 6px !important; }
.nv-found { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.nv-found-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.nv-found-item.is-issue { border: 2px solid var(--ink); padding: 15px 17px; }
.nv-watch { background: var(--nv-night); color: #fff; border-radius: 18px; padding: 20px 22px; max-width: 760px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.nv-watch p:last-child { color: var(--nv-night-text); }
.nv-watch-h { font-size: 16px; font-weight: 800; }
.nv-pilot-line { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.nv-pilot-line a { color: var(--nv-ink); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 1024px) {
  .nv-start, .nv-boot-start { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .nv-start-side, .nv-boot-start-side { padding: 32px 28px; }
  .nv-start-intro h1 { font-size: 34px; }
  .nv-start-main, .nv-boot-start-main { padding: 40px 32px 64px; }
  .nv-fact { grid-template-columns: minmax(0, 1fr) auto; }
  .nv-fact-k { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nv-start, .nv-boot-start { grid-template-columns: minmax(0, 1fr); }
  .nv-start-side, .nv-boot-start-side { position: static; height: auto; padding: 20px 16px; gap: 16px; }
  .nv-start-intro h1 { font-size: 28px; }
  .nv-steps { flex-direction: row; gap: 6px; }
  .nv-steprow { grid-template-columns: 32px; padding: 6px; gap: 0; }
  .nv-stepnum { width: 32px; height: 32px; font-size: 14px; }
  .nv-steptext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nv-start-foot { margin-top: 0; }
  .nv-start-main, .nv-boot-start-main { padding: 24px 16px 56px; }
  .nv-start-step h2 { font-size: 32px; }
  .nv-post-grid, .nv-post-grid--where { grid-template-columns: minmax(0, 1fr); }
  .nv-fact { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .nv-fact-act { justify-content: flex-start; }
  .nv-start-step > .nv-btn, .nv-btnrow .nv-btn { width: 100%; }
}
.nv-runmode--dark { padding: 12px 0 0; margin-top: 8px !important; border-top: 1px solid #2A2A33; }
.nv-runmode--dark .nv-runmode-dot { background: var(--lime); }
.nv-runmode--dark .nv-runmode-line { color: #fff; }
.nv-runmode--dark .nv-runmode-note { color: var(--nv-night-text); }
.nv-category-again { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 16px 18px; border: 2px dashed var(--nv-line-dash); border-radius: var(--nv-radius-card); }
.nv-category-again .nv-btnrow { align-items: center; }
.nv-category-again select { min-height: 44px; max-width: 100%; }
.nv-cat-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-cat-pick { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--nv-line-strong); background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.nv-cat-pick:hover { border-color: var(--ink); }
.nv-cat-pick:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Phase 21c: the brief's facts as one simple form (app/brief-form.js) — first run and Brief & facts */
.nv-bf { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.nv-bf-lead { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 680px; }
.nv-bf-offer { margin: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; min-width: 0; }
.nv-bf-legend { padding: 0 6px; margin-left: -6px; font-size: 15px; font-weight: 800; }
.nv-bf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.nv-bf-grid--one { grid-template-columns: minmax(0, 1fr); max-width: 300px; }
.nv-bf-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-bf-offer .nv-bf-f[data-field="scope"] { grid-column: span 2; }
.nv-bf-label { font-size: 13px; font-weight: 800; }
.nv-bf-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.nv-bf-input { font-size: 15px; }
textarea.nv-bf-input { resize: vertical; line-height: 1.5; }
.nv-bf-sugg { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.nv-bf-sugg.is-used { opacity: .7; }
.nv-bf-use { min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ink); background: var(--nv-quiet, #fff); color: var(--ink); font: 700 13px/1.3 var(--nv-font); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.nv-bf-why { color: var(--muted); }
.nv-bf-saving { margin: 12px 0 0; font-size: 14px; font-weight: 700; }
.nv-bf-err { margin: 0; font-size: 13px; font-weight: 700; color: var(--nv-void-ink, #B0103F); }
.nv-bf-input[aria-invalid="true"] { border-color: var(--nv-void-ink, #B0103F); border-width: 2px; }
.nv-bf-errors { border: 2px solid var(--nv-void-ink, #B0103F); border-radius: 14px; padding: 12px 16px; background: #fff; font-size: 14px; line-height: 1.5; }
.nv-bf-errors p { font-weight: 800; }
.nv-bf-errors ul { margin: 4px 0 0; padding-left: 20px; }
.nv-bf-notread { border: 2px dashed var(--nv-line-strong); border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.nv-bf-notread h4 { margin: 0; font-size: 15px; font-weight: 800; }
.nv-bf-nrlist { margin: 4px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.nv-bf-nrlist q { font-weight: 700; }
.nv-btnrow--start { align-items: center; gap: 20px; }
dialog .nv-bf { gap: 14px; }
dialog .nv-bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
dialog .nv-bf-offer .nv-bf-f[data-field="scope"] { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .nv-bf-grid, dialog .nv-bf-grid { grid-template-columns: minmax(0, 1fr); }
  .nv-bf-offer .nv-bf-f[data-field="scope"] { grid-column: auto; }
  .nv-bf-grid--one { max-width: none; }
  .nv-bf-offer { padding: 12px 12px 14px; }
}
/* Phase 21d (QA item 10): remove an offer from the brief */
.nv-bf-remove { margin-top: 10px; }
.nv-bf-removed { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--nv-text-2, var(--muted)); }

/* NOVERINT styles — the creator's checklist (Phase 10 F, spec §5.5).
   Phone first, one-handed at 320 px. Used twice: bundled in the Studio (the
   agency's preview) and inlined by production/passport-html.js on the page
   behind the creator link. Only --nv-* tokens and .cc-* classes. */

.cc-page { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; background: var(--nv-bg); color: var(--nv-ink); font: 400 16px/1.5 var(--nv-font); }
.cc-page h1, .cc-page h2, .cc-page h3, .cc-page p, .cc-page ul { margin: 0; }
.cc-page :focus-visible { outline: 3px solid var(--nv-focus); outline-offset: 2px; border-radius: 6px; }
.cc-head { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 14px; background: var(--nv-night); color: #fff; }
.cc-head-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cc-campaign { font-size: 13px; color: var(--nv-night-text); min-width: 0; overflow-wrap: anywhere; }
.cc-done { flex: none; font-family: var(--nv-mono); font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--nv-lime); color: var(--nv-ink); white-space: nowrap; }
.cc-h1 { font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: var(--nv-track); word-spacing: var(--nv-word); }
.cc-bar { height: 6px; border-radius: 999px; background: #2A2A33; overflow: hidden; }
.cc-bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--nv-lime); transition: width .4s ease; }
.cc-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; flex-grow: 1; }
.cc-post { display: flex; flex-direction: column; gap: 12px; }
.cc-for { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--nv-muted); }
.cc-for b { color: var(--nv-ink); }
.cc-items { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cc-item { border-radius: 16px; border: 1px solid #CED7E4; background: #fff; transition: background-color .25s ease, border-color .25s ease; }
.cc-item.is-done { border: 2px solid var(--nv-ink); background: var(--nv-lime); }
.cc-label { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; min-height: 44px; cursor: pointer; }
.cc-item.is-done .cc-label { padding: 13px; }
.cc-box { width: 26px; height: 26px; margin: 0; accent-color: var(--nv-ink); cursor: pointer; }
.cc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-title { font-size: 17px; font-weight: 800; line-height: 1.25; }
.cc-item.is-done .cc-title { text-decoration: line-through; text-decoration-thickness: 2px; }
.cc-why { font-size: 14px; line-height: 1.45; color: var(--nv-muted); }
.cc-item.is-done .cc-why { color: #2B2B31; }
.cc-caption { background: #fff; border: 2px solid var(--nv-ink); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cc-caption-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cc-caption-head h3 { font-size: 14px; font-weight: 800; }
.cc-mono { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .06em; color: var(--nv-muted); }
.cc-caption-text { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; user-select: all; }
.cc-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.cc-btn--line { border: 1.5px solid var(--nv-ink); background: transparent; color: var(--nv-ink); }
.cc-btn--line.is-done { border-color: var(--nv-lime); background: var(--nv-lime); }
.cc-btn--send { min-height: 56px; border: 0; background: var(--nv-ink); color: #fff; font-size: 17px; }
.cc-btn--send[disabled] { background: #CED7E4; color: var(--nv-muted); cursor: not-allowed; }
.cc-btn[hidden], .cc-sendnote[hidden] { display: none; }
.cc-foot { position: sticky; bottom: 0; padding: 14px 20px 20px; border-top: 1px solid var(--nv-line); background: var(--nv-bg); display: flex; flex-direction: column; gap: 8px; }
.cc-sendnote { background: var(--nv-lime); border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.5; outline-offset: 3px; }
.cc-sendnote ul { padding-left: 20px; margin-top: 6px; }
.cc-questions { font-size: 12px; text-align: center; color: var(--nv-muted); }
.cc-empty { font-size: 16px; line-height: 1.5; padding: 24px 0; }
@media (prefers-reduced-motion: reduce) { .cc-item, .cc-bar-fill { transition: none; } }
@media (max-width: 340px) { .cc-h1 { font-size: 30px; } .cc-main, .cc-head, .cc-foot { padding-left: 16px; padding-right: 16px; } }

/* ---------- Phase 11 — the seal on the creator's page (spec §5.6) ---------- */
.cc-page { background: var(--nv-bg); }
.cc-done { background: var(--nv-void-strong); color: #fff; }
.cc-done.is-all { background: var(--nv-sealed); color: var(--nv-ink); }
.cc-bar { background: var(--nv-ink-line); }
.cc-item { border-color: var(--nv-line); }
.cc-item.is-done { background: var(--nv-sealed); }
.cc-item.is-done .cc-why { color: var(--nv-text-2); }
.cc-seal { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border: 2px dashed var(--nv-line-dash); border-radius: 16px; font-size: 14px; line-height: 1.5; color: var(--nv-text-2); }
.cc-btn--send[disabled] { background: var(--nv-quiet); color: var(--nv-muted); }
.cc-btn--send.is-done { background: var(--nv-sealed); color: var(--nv-ink); }
.cc-reply { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--nv-line-strong); font: italic 400 17px/1.45 var(--nv-serif); user-select: all; }
.cc-reply[hidden] { display: none; }
.cc-sendnote { background: var(--nv-quiet); }

/* NOVERINT styles — Phase 10 Channels page (v3, spec §5.6). Scoped to .nv-channels. */

.nv-lead { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 680px; }
.nv-ch-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.nv-ch-facts { background: var(--nv-night); color: #fff; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.nv-ch-facts-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nv-ch-facts-head h2 { font-size: 16px; font-weight: 800; }
.nv-ch-edit { min-height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: none; color: var(--lime) !important; font-weight: 800; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.nv-ch-facts-sub { font-size: 13px; line-height: 1.45; color: var(--nv-night-text); }
.nv-ch-fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--nv-night-2); }
.nv-ch-fact-k { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .12em; color: #B5B5C0; }
.nv-ch-fact-v { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.nv-ch-mid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv-ch-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-ch-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #CED7E4; background: transparent; font-size: 14px; cursor: pointer; white-space: nowrap; }
.nv-ch-tab.is-on { border: 2px solid var(--ink); background: #fff; font-weight: 800; padding: 0 13px; }
.nv-ch-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: var(--ink); white-space: nowrap; }
.nv-ch-badge--lime { background: var(--lime); } .nv-ch-badge--pink { background: var(--pink); } .nv-ch-badge--cyan { background: var(--cyan); }
.nv-ch-panel { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-content: start; }
.nv-ch-tile { width: 170px; height: 300px; border-radius: 22px; border: 1px solid #C7D2DF; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; box-sizing: border-box; }
.nv-ch-tile--pink { background: #FFE1EE; } .nv-ch-tile--cyan { background: #DDF6FB; } .nv-ch-tile--sun { background: #F3F5F8; } .nv-ch-tile--lime { background: #EEFFC2; }
.nv-ch-tile-fmt { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .1em; }
.nv-ch-tile-over { font-weight: 900; font-size: 20px; line-height: 1.05; overflow-wrap: anywhere; }
.nv-ch-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nv-ch-cap-h { font-size: 15px; font-weight: 800; }
.nv-ch-count { font-family: var(--nv-mono); font-size: 11px; color: var(--muted); }
.nv-ch-cap { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.nv-ch-state { font-size: 13px; color: var(--muted); }
.nv-ch-btns { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.nv-ch-where h3 { font-size: 14px; font-weight: 800; margin-bottom: 10px !important; }
.nv-ch-where-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 13px; }
.nv-ch-where-list li { padding: 10px 12px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; }
.nv-ch-where-list span { color: var(--muted); }
.nv-ch-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nv-ch-checks, .nv-ch-live { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.nv-ch-checks h2, .nv-ch-live h2 { font-size: 16px; font-weight: 800; }
.nv-ch-checks > .nv-btn, .nv-ch-live > .nv-btn { align-self: flex-start; }
.nv-ch-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nv-ch-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.nv-ch-mark { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: var(--ink); box-sizing: border-box; }
.nv-ch-mark--lime { background: var(--lime); } .nv-ch-mark--pink { background: var(--pink); } .nv-ch-mark--sun { background: var(--sun); border: 1px solid var(--ink); } .nv-ch-mark--plain { background: var(--nv-quiet); }
.nv-ch-row-t { font-size: 14px; font-weight: 700; line-height: 1.35; }
.nv-ch-row-d { font-size: 13px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.nv-ch-note { font-size: 12px; line-height: 1.45; color: var(--muted); }
.nv-ch-nobody { font-size: 12px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.nv-ch-live { border-style: dashed; border-color: var(--nv-line-strong); }
.nv-ch-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nv-ch-num { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.nv-ch-num .nv-field { font-size: 15px; }
.nv-ch-tools { margin-top: 6px; }
.nv-ch-tools .app-body { min-height: 0; }

@media (max-width: 1320px) {
  .nv-ch-grid { grid-template-columns: 250px minmax(0, 1fr); }
  .nv-ch-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 1024px) {
  .nv-ch-grid { grid-template-columns: minmax(0, 1fr); }
  .nv-ch-right { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .nv-ch-panel { grid-template-columns: minmax(0, 1fr); }
  .nv-ch-tile { width: 100%; height: 150px; }
  .nv-ch-where-list { grid-template-columns: minmax(0, 1fr); }
  .nv-ch-btns .nv-btn { flex: 1 1 auto; }
}

/* ---------- Phase 11 — Sealed facts and state chips (spec §5.8) ---------- */
.nv-ch-facts { background: var(--nv-ink); }
.nv-ch-facts-h { display: inline-flex; align-items: center; gap: 10px; }
.nv-ch-edit { color: var(--nv-sealed) !important; }
.nv-ch-badge { font: 600 11px/1.3 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; }
.nv-ch-badge--lime { background: var(--nv-sealed); color: var(--nv-ink); }
.nv-ch-badge--pink { background: var(--nv-void-strong); color: #fff; }
.nv-ch-badge--cyan { background: var(--nv-quiet); color: var(--nv-text-2); }

/* NOVERINT styles — Proof for client (Phase 10 H, spec §5.7). The client's
   page (.pr-*) is used twice: in the Studio under the agency's black bar,
   and inlined by production/passport-html.js behind a share link. Print
   (Download PDF) keeps the client page and drops everything else. */

.nv-studio[data-page="proof"] { grid-template-columns: minmax(0, 1fr); }
.nv-studio[data-page="proof"] > .nv-side, .nv-studio[data-page="proof"] > .nv-phonebar { display: none; }
.nv-studio[data-page="proof"] > .nv-main { padding: 0 0 64px; }
.nv-proofpage { gap: 0; }
.pr-bar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 48px; background: var(--nv-night); color: #fff; }
.pr-bar-left, .pr-bar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-bar-back { min-height: 44px; padding: 0; border: 0; background: none; color: #fff !important; font-weight: 700; font-size: 14px; cursor: pointer; }
.pr-bar-note { color: #B5B5C0; font-size: 14px; }
.pr-bar-hint { flex: 1 0 100%; margin: 0; color: #C4C4CE; font-size: 13px; }
.pr-bar-hint:empty { display: none; }
.pr-bar-mode { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nv-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #C4C4CE; }
.pr-bar-mode .nv-runmode-dot { background: var(--nv-lime); }
.pr-bar-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #5A5A66; background: transparent; color: #fff !important; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.pr-bar-btn--lime { border: 0; background: var(--nv-lime); color: var(--nv-ink) !important; font-weight: 800; }
.pr-record { margin: 28px 48px 0; }

.pr-page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; padding: 36px 48px; font-family: var(--nv-font); color: var(--nv-ink); }
.pr-page h1, .pr-page h2, .pr-page p { margin: 0; }
.pr-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pr-head { display: flex; flex-direction: column; gap: 10px; }
.pr-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--nv-mono); font-size: 12px; letter-spacing: .14em; color: var(--nv-muted); }
.pr-mark { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--nv-lime); border: 2px solid var(--nv-ink); }
.pr-head h1 { font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: var(--nv-track); word-spacing: var(--nv-word); max-width: 860px; outline-offset: 6px; }
.pr-sub { font-size: 15px; color: var(--nv-muted); }
/* the campaign line (D45): has every post arrived? Apart from the seals — never lime, never pink */
.pr-campaign { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: #fff; border: 1px solid var(--nv-line); border-left: 6px solid var(--nv-line-strong); border-radius: 18px; }
.pr-campaign[data-state="incomplete"] { border-left-color: var(--nv-ink); }
.pr-campaign[data-state="unknown"], .pr-campaign[data-state="unavailable"] { border-style: dashed; border-width: 2px 2px 2px 6px; }
.pr-campaign-text { font-size: 16px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.pr-campaign-note { font-size: 14px; line-height: 1.5; color: var(--nv-muted); overflow-wrap: anywhere; }
.pr-tablewrap { background: #fff; border: 1px solid var(--nv-line); border-radius: 20px; overflow: hidden; }
.pr-table { width: 100%; border-collapse: collapse; }
.pr-table th { text-align: left; padding: 12px 20px; background: #E7EBF1; font-family: var(--nv-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--nv-muted); }
.pr-table td { padding: 16px 20px; border-top: 1px solid #E4E9F0; vertical-align: middle; font-size: 14px; line-height: 1.45; }
.pr-table td:first-child { width: 30%; } .pr-table td:last-child { width: 210px; }
.pr-post { display: block; font-size: 16px; font-weight: 800; }
.pr-meta { display: block; font-size: 13px; color: var(--nv-muted); }
.pr-status { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--nv-ink); white-space: nowrap; }
.pr-status--lime { background: var(--nv-lime); } .pr-status--sun { background: var(--nv-sun); } .pr-status--pink { background: var(--nv-pink); } .pr-status--cyan { background: var(--nv-cyan); }
.pr-status--ink { background: var(--nv-ink); color: #fff; } .pr-status--plain { background: #E7EBF1; }
.pr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pr-card { background: #fff; border: 1px solid var(--nv-line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.pr-card--dashed { border: 2px dashed #CFC8B8; }
.pr-card h2 { font-size: 15px; font-weight: 800; }
.pr-card p { font-size: 14px; line-height: 1.5; color: var(--nv-muted); }
.pr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pr-check { background: var(--nv-night); color: #fff; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.pr-check h2 { font-size: 18px; font-weight: 900; }
.pr-check p { font-size: 14px; line-height: 1.5; color: #C4C4CE; }
.pr-fp { padding: 12px 14px; border-radius: 12px; background: #17171D; font-family: var(--nv-mono); font-size: 12px; color: #D6D6DE !important; overflow-wrap: anywhere; }
.pr-check .pr-verify { color: var(--nv-ink); }
.pr-verify { min-height: 50px; border-radius: 999px; border: 0; background: #fff; color: var(--nv-ink); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.pr-verify[data-state="ok"] { background: var(--nv-lime); }
.pr-verify[data-state="bad"] { background: var(--nv-pink); }
.pr-check .pr-verify[disabled] { background: #2A2A33; color: #C4C4CE; cursor: progress; }
.pr-verify-out { font-size: 12px !important; overflow-wrap: anywhere; }
.pr-verify-out:empty { display: none; }
.pr-numbers { background: #fff; border: 1px solid var(--nv-line); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pr-numbers h2 { font-size: 15px; font-weight: 800; }
.pr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pr-tile { padding: 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.pr-tile--lime { background: var(--nv-lime); } .pr-tile--sun { background: var(--nv-sun); } .pr-tile--plain { background: #E7EBF1; }
.pr-tile-n { font-size: 32px; font-weight: 900; line-height: 1; }
.pr-tile-l { font-size: 13px; font-weight: 600; line-height: 1.3; }
.pr-disclaimer { font-size: 12px; line-height: 1.5; color: var(--nv-muted); }

@media (max-width: 1180px) { .pr-page { grid-template-columns: minmax(0, 1fr) 320px; padding: 32px; } .pr-bar { padding: 12px 32px; } .pr-record { margin: 24px 32px 0; } }
@media (max-width: 1024px) { .pr-page { grid-template-columns: minmax(0, 1fr); } .pr-head h1 { font-size: 38px; } }
@media (max-width: 700px) {
  .pr-bar { padding: 8px 16px; }
  .pr-bar-note { display: none; }
  .pr-bar-right { width: 100%; }
  .pr-bar-mode { width: 100%; }
  .pr-bar-btn { flex: 1 1 auto; }
  .pr-page { padding: 24px 16px; }
  .pr-record { margin: 20px 16px 0; }
  .pr-head h1 { font-size: 30px; }
  .pr-two { grid-template-columns: minmax(0, 1fr); }
  .pr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pr-table, .pr-table tbody, .pr-table tr, .pr-table td { display: block; width: auto !important; }
  .pr-table tr { padding: 14px 16px; border-top: 1px solid #E4E9F0; }
  .pr-table tr:first-child { border-top: 0; }
  .pr-table td { padding: 4px 0; border: 0; }
}

@media print {
  body { background: #fff !important; }
  .nv-studio > .nv-side, .nv-studio > .nv-phonebar, .pr-bar, .pr-bar-hint, .pr-record, .pr-verify, .pr-verify-out, .toast-wrap, .skip-link { display: none !important; }
  .nv-studio, .nv-studio[data-page="proof"] > .nv-main { display: block; padding: 0 !important; background: #fff; }
  .pr-page { display: block; padding: 0; }
  .pr-side { margin-top: 18px; }
  .pr-check { background: #fff; color: #000; border: 1px solid #000; }
  .pr-check p, .pr-fp { color: #000 !important; background: #fff; }
  .pr-tablewrap, .pr-card, .pr-numbers, .pr-tile, .pr-status { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Phase 11 — seals on Proof for client (spec §5.7) ---------- */
.pr-page { color: var(--nv-ink); }
.pr-card--dashed { border: 2px dashed var(--nv-line-dash); background: transparent; }
.pr-mark { background: var(--nv-sealed); }
.pr-head h1 { font-size: 46px; }
.pr-h1-1 { display: block; }
.pr-h1-2 { display: block; color: var(--nv-muted); }
.pr-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pr-post-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: 20px; min-width: 0; }
.pr-post-card[data-seal="broken"] { border: 2px solid var(--nv-void); padding: 17px; }
.pr-post-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-post-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-post-card .pr-post { display: inline; font-size: 18px; font-weight: 800; }
.pr-post-card .pr-meta { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-muted); }
.pr-found { font-size: 14px; line-height: 1.5; color: var(--nv-text-2); overflow-wrap: anywhere; }
.pr-checked { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--nv-text-2); overflow-wrap: anywhere; }
.pr-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.3 var(--nv-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pr-chip--sealed { background: var(--nv-sealed); color: var(--nv-ink); }
.pr-chip--fixing { background: var(--nv-void-tint); color: var(--nv-void-ink); }
.pr-chip--broken { background: var(--nv-void-strong); color: #fff; }
.pr-chip--ink { background: var(--nv-ink); color: #fff; }
.pr-chip--quiet { background: var(--nv-quiet); color: var(--nv-text-2); }
.pr-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; } /* 1–3 tiles share the row (review fix 7) */
.pr-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 20px; border-radius: 20px; min-width: 0; }
.pr-stat--plain { background: var(--nv-surface); border: 1px solid var(--nv-line); }
.pr-stat--ink { background: var(--nv-ink); color: #fff; }
.pr-stat--tint { background: var(--nv-void-tint); color: var(--nv-ink); }
.pr-stat-n { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: var(--nv-track); }
.pr-stat-l { font-size: 15px; font-weight: 800; line-height: 1.3; }
.pr-check { background: var(--nv-ink); }
.pr-check p { color: var(--nv-night-text); }
.pr-fp { position: relative; overflow: hidden; background: var(--nv-ink-2); color: var(--nv-night-text) !important; }
.pr-fp.is-scanning::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; background: linear-gradient(90deg, transparent, rgba(200, 255, 0, .35), transparent); animation: pr-scan .9s linear 1 both; }
@keyframes pr-scan { from { left: -40%; } to { left: 100%; } }
.pr-verify-out { font-size: 13px !important; line-height: 1.45; }
.pr-verify-out[data-state="ok"], .pr-verify-out.ok { padding: 12px 14px; border-radius: 14px; background: var(--nv-sealed); color: var(--nv-ink) !important; font-weight: 800; }
.pr-verify-out[data-state="bad"], .pr-verify-out.bad { padding: 12px 14px; border-radius: 14px; background: var(--nv-void-strong); color: #fff !important; font-weight: 800; }
.pr-check .pr-check-more { font-size: 12px; }
.pr-check-more .ok { color: var(--nv-sealed); } .pr-check-more .bad { color: #FF9CB6; }
.pr-check label.pr-check-more { display: block; color: var(--nv-night-text); }
.pr-log { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pr-log-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pr-log-head h2 { font-size: 18px; font-weight: 800; }
.pr-log-k { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .12em; color: var(--nv-muted); }
.pr-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pr-log-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; }
.pr-log-item::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: -12px; width: 1px; background: var(--nv-line); }
.pr-log-item:last-child::before { display: none; }
.pr-log-dot { grid-row: 1 / span 2; position: relative; z-index: 1; display: inline-flex; background: var(--nv-surface); border-radius: 50%; align-self: start; }
.pr-log-time { font: 600 11px/1.3 var(--nv-mono); letter-spacing: .08em; color: var(--nv-muted); }
.pr-log-text { font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.pr-log-empty, .pr-log-note { font-size: 13px; line-height: 1.5; color: var(--nv-muted); }
@media (max-width: 1180px) { .pr-posts { grid-template-columns: minmax(0, 1fr); } .pr-stats { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; } }
@media (max-width: 700px) { .pr-head h1 { font-size: 30px; } .pr-post-card { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; } .pr-post-seal.nvs { --nvs: 48px !important; } .pr-stat-n { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) { .pr-fp.is-scanning::after { animation: none; display: none; } }
@media print {
  .pr-log, .pr-post-card, .pr-stat { break-inside: avoid; }
  .pr-fp.is-scanning::after { display: none; }
  .pr-stat--ink { background: #fff; color: #000; border: 2px solid #000; }
}
.pr-post-card[data-seal="broken"] { grid-template-columns: 84px minmax(0, 1fr); }
.pr-post-card[data-seal="broken"] .pr-post-seal { margin: 0 10px; }
@media (max-width: 700px) { .pr-post-card[data-seal="broken"] { grid-template-columns: 64px minmax(0, 1fr); } .pr-post-card[data-seal="broken"] .pr-post-seal { margin: 0 8px; } }

/* NOVERINT — Phase 13 similar rulings: the line under a finding in Review
   and the "UK rulings" library page (app/rulings.js, ws-review3.js,
   ws-rulings.js). Outcome chips: pink fill only for "Upheld" (small white
   text on --nv-void-strong), the rest quiet; never lime (lime means sealed). */

/* under a finding */
.nv-similar { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--nv-line-strong); background: var(--nv-bg); border-radius: 0 12px 12px 0; display: flex; flex-direction: column; gap: 6px; }
.nv-similar-k { font-family: var(--nv-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--nv-muted); }
.nv-ruling { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nv-ruling + .nv-ruling { border-top: 1px solid var(--nv-line); padding-top: 10px; margin-top: 6px; }
.nv-ruling-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nv-ruling-meta { font-size: 13px; color: var(--nv-muted); }
.nv-ruling-t { font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--nv-ink); overflow-wrap: anywhere; }
.nv-ruling-x { font-size: 14px; line-height: 1.5; color: var(--nv-ink); overflow-wrap: anywhere; }
.nv-ruling-go a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 800; color: var(--nv-ink); text-decoration: underline; text-underline-offset: 4px; }
.nv-ruling-boundary { font-size: 12px; line-height: 1.45; color: var(--nv-muted); }
.nv-ruling-more { display: flex; flex-direction: column; }
.nv-more-rulings { font-size: 14px; }

.nv-rchip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.3; white-space: nowrap; color: var(--nv-ink); border: 1px solid transparent; }
.nv-rchip--upheld { background: var(--nv-void-strong); color: #fff; }
.nv-rchip--upheld_in_part { background: var(--nv-void-tint); color: var(--nv-ink); border-color: var(--nv-void-ink); }
.nv-rchip--not_upheld { background: #fff; color: var(--nv-ink); border-color: var(--nv-line-strong); }
.nv-rchip--cma { background: var(--nv-ink); color: #fff; }

/* the library page */
.nv-rl-boundary { font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--nv-ink); max-width: 720px; }
.nv-rl-checked { font-size: 14px; line-height: 1.5; color: var(--nv-muted); max-width: 720px; }
.nv-rl-tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.nv-rl-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-rl-label { font-size: 13px; font-weight: 800; color: var(--nv-ink); }
.nv-rl-count { font-size: 14px; color: var(--nv-muted); }
.nv-rl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nv-rl-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-rl-title { font-size: 17px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.nv-rl-topics { font-size: 13px; color: var(--nv-muted); }
.nv-rl-none { font-size: 15px; color: var(--nv-muted); }

@media (max-width: 1024px) {
  .nv-rl-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nv-rl-search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nv-rl-tools { grid-template-columns: minmax(0, 1fr); }
  .nv-similar { padding: 10px 12px; }
}

/* NOVERINT styles — the site's other pages in the site's design (Phase 16, "one look"):
   /start/, /legal/, /how-it-works/ (the 48-second film, dark, no nav) and the 404 page
   (app/not-found.html; the public build's 404.html). They share
   the landing's nav, footer, buttons, type and tokens (styles-site.css: .sl-page, .sl-nav,
   .sl-foot, .sl-btn, .sl-mono); this file only lays out their own content. Cool paper, ink,
   the seal's lime as a fill with ink text only; no old purple or orange. */

.pg-page .sl-root { min-height: 100vh; display: flex; flex-direction: column; }
.pg-page main { flex: 1 0 auto; }
.pg-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.pg-h1 { font-weight: 900; font-size: 56px; line-height: .98; letter-spacing: var(--nv-track-display); word-spacing: var(--nv-word); }
.pg-lead { font-size: 18px; line-height: 1.5; color: var(--nv-text-2); max-width: 640px; }
.pg-note { font-size: 14px; line-height: 1.5; color: var(--nv-muted); }
.pg-note b { color: var(--nv-ink); }
.pg-note--rule { padding-top: 14px; border-top: 1px solid var(--nv-line); }
.pg-page .pg-note a { display: inline-flex; align-items: center; min-height: 32px; color: var(--nv-ink); text-underline-offset: 4px; }
/* guilloché: concentric hairlines, decoration only */
.pg-guilloche { position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 100% 0, transparent 0 26px, var(--nv-guilloche) 26px 27px); opacity: .7; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }

/* ---------- /start/ ---------- */
.pg-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 32px; align-items: start; width: 100%; max-width: 1320px; margin: 0 auto; padding: 16px 56px 96px; box-sizing: border-box; }
.pg-start-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; min-height: 560px; padding: 48px; border-radius: 32px; background: var(--nv-ink); color: #fff; box-sizing: border-box; }
.pg-start-visual > :not(.pg-guilloche) { position: relative; }
.pg-start-visual .pg-guilloche { background: repeating-radial-gradient(circle at 100% 0, transparent 0 26px, rgba(255, 255, 255, .09) 26px 27px); opacity: 1; }
.pg-signal { display: inline-flex; align-items: center; gap: 8px; color: var(--nv-night-muted); font-size: 12px; }
.pg-signal span { width: 9px; height: 9px; border-radius: 50%; background: var(--nv-sealed); }
.pg-page .access-headline { margin: 0; font-weight: 900; font-size: 64px; line-height: .95; letter-spacing: var(--nv-track-display); word-spacing: var(--nv-word); color: #fff; }
.pg-page .access-headline em { font-family: var(--nv-serif); font-style: italic; font-weight: 400; letter-spacing: 0; word-spacing: 0; color: #fff; }
.pg-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 11px/1 var(--nv-mono); letter-spacing: .12em; }
.pg-flow span { padding: 8px 12px; border: 1px solid var(--nv-ink-line); border-radius: 999px; color: #fff; }
.pg-flow span.hot { border-color: var(--nv-sealed); background: var(--nv-sealed); color: var(--nv-ink); }
.pg-flow i { font-style: normal; color: var(--nv-night-muted); }
.pg-aside-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--nv-night-text); }

.pg-card { display: flex; flex-direction: column; gap: 14px; padding: 40px; border-radius: 28px; background: var(--nv-surface); box-shadow: 0 24px 60px rgba(11, 13, 18, .1), 0 0 0 1px var(--nv-line); box-sizing: border-box; min-width: 0; }
.pg-card .pg-h1 { font-size: 48px; }
.pg-primary { width: 100%; margin-top: 8px; }
.pg-divider { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font: 600 11px/1 var(--nv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--nv-muted); }
.pg-divider::before, .pg-divider::after { content: ""; flex: 1; height: 1px; background: var(--nv-line); }
.pg-page .file-row { position: relative; }
.pg-page .file-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pg-choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 16px; border: 1.5px solid var(--nv-line); border-radius: 18px; background: var(--nv-surface); color: var(--nv-ink); font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; transition: border-color .15s ease; }
.pg-choice:hover, .pg-page .file-row input:focus-visible + .pg-choice { border-color: var(--nv-ink); }
.pg-page .file-row input:focus-visible + .pg-choice { outline: 3px solid var(--nv-focus); outline-offset: 3px; }
.pg-choice-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--nv-ink); color: #fff; font-weight: 800; }
.pg-choice-ico--lime { background: var(--nv-sealed); color: var(--nv-ink); }
.pg-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-choice-text b { font-size: 16px; font-weight: 800; }
.pg-choice-text small { font-size: 13px; color: var(--nv-muted); }
.pg-pilot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border: 2px dashed var(--nv-line-strong); border-radius: 18px; }
.pg-pilot strong { font-size: 16px; }
.pg-pilot p { font-size: 14px; line-height: 1.5; color: var(--nv-text-2); }

/* ---------- /legal/ ---------- */
.legal-wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 24px 24px 96px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.legal-wrap .pg-h1 { margin-bottom: 6px; }
.legal-wrap h2 { margin: 36px 0 2px; padding-top: 28px; border-top: 1px solid var(--nv-line); font-weight: 900; font-size: 30px; line-height: 1.05; letter-spacing: var(--nv-track); }
.legal-wrap p, .legal-wrap li { font-size: 16px; line-height: 1.65; color: var(--nv-text-2); }
.legal-wrap b { color: var(--nv-ink); }
.legal-wrap ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 8px; }
.legal-wrap a { color: var(--nv-ink); text-underline-offset: 3px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.pg-page .legal-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--nv-ink); border-radius: 999px; font: 600 12px/1 var(--nv-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.pg-page .legal-nav a:hover { background: var(--nv-sealed); }
.legal-wrap .legal-gate { margin: 4px 0 0; padding: 14px 16px; border: 2px dashed var(--nv-line-strong); border-radius: 16px; background: var(--nv-quiet); color: var(--nv-ink); font-weight: 600; }
.pg-page .legal-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; margin-top: 32px; padding: 0 22px; border: 2px solid var(--nv-ink); border-radius: 999px; font-weight: 800; text-decoration: none; }
.pg-page .legal-back:hover { background: var(--nv-sealed); }

/* ---------- 404 ---------- */
.pg-404 { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; width: 100%; max-width: 1320px; min-height: 62vh; margin: 0 auto; padding: 64px 56px 120px; box-sizing: border-box; }
.pg-404 > :not(.pg-guilloche) { position: relative; }
.pg-404 .pg-h1 { font-size: 72px; max-width: 900px; }

/* ---------- /how-it-works/ (the 48-second film; dark, the video in the middle, no autoplay) ---------- */
body.pg-watch-page { background: var(--nv-ink); color: #fff; }
.pg-watch { display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 100vh; padding: 20px 24px 28px; box-sizing: border-box; text-align: center; }
.pg-watch-h { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nv-night-muted); }
.pg-watch-video { display: block; height: 85vh; width: auto; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; background: #000; box-shadow: 0 0 0 1px var(--nv-ink-line); }
.pg-watch-note { margin: 0; font-size: 13px; color: var(--nv-night-text); }
.pg-watch-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.pg-page .pg-watch-try { border: 0; background: var(--nv-sealed); color: var(--nv-ink); }
.pg-page .pg-watch-pilot { border: 2px solid #fff; background: transparent; color: #fff; }
.pg-watch .pg-watch-founder { margin: 4px 0 0; }
.pg-page .pg-watch-back { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: #fff; font-weight: 700; text-underline-offset: 4px; }

@media (max-width: 1024px) {
  .pg-start { grid-template-columns: minmax(0, 1fr); padding: 16px 32px 72px; }
  .pg-start-visual { min-height: 0; padding: 40px; }
  .pg-404 { padding: 48px 32px 96px; }
}
@media (max-width: 760px) {
  .pg-page .sl-navcta { margin-right: 0; } /* no Pause motion toggle on these pages */
  .pg-h1, .pg-card .pg-h1 { font-size: 40px; letter-spacing: var(--nv-track); }
  .pg-404 .pg-h1 { font-size: 44px; }
  .pg-start { padding: 8px 16px 56px; gap: 16px; }
  .pg-start-visual { padding: 28px 22px; border-radius: 24px; gap: 16px; }
  .pg-page .access-headline { font-size: 40px; letter-spacing: var(--nv-track); }
  .pg-card { padding: 24px 20px; border-radius: 24px; }
  .legal-wrap { padding: 16px 16px 72px; }
  .legal-wrap h2 { font-size: 26px; }
  .pg-404 { padding: 40px 16px 80px; min-height: 52vh; }
  .pg-404 .sl-ctas .sl-btn { flex: 1 1 100%; }
  .pg-watch { padding: 16px 0 32px; gap: 14px; }
  .pg-watch-h, .pg-watch-note, .pg-watch-links { padding: 0 16px; }
  .pg-watch-video { width: 100%; height: auto; border-radius: 0; box-shadow: none; }
  .pg-watch-links { flex-direction: column; align-self: stretch; }
  .pg-watch-try, .pg-watch-pilot { width: 100%; }
  .pg-watch .pg-watch-founder { padding: 0 16px; }
}