/* Copied verbatim from nd-site-build/sources/landing-page.html. */
/* ============ tokens.css ============ */

/* ND Agency — generated from tokens.json */
:root, [data-theme="light"] {
  --nda-canvas-primary: #f4f7fa; /* Canvas layer (Off-white). The default page ground, under the pegboard. Also the inside of cards that sit on Navy (.theme-dark). Takes Ink-Primary text (16.19), Ink-Secondary labels (4.98), Identity-Primary (4.95) and Semantic-Error (5.06). */
  --nda-canvas-secondary: #2a3869; /* Canvas layer (Navy). A background only: breakout sections, dark card frames, breakout blocks, a Directive sign fill, a stamp fill. Never in the motif, never an eye fill, never text, never an edge on Ink (1.55). Takes white text (11.24), UI-Lines (7.95) and Identity-Secondary (5.34); never Ink. */
  --nda-canvas-container: #ffffff; /* Canvas layer (White). The inside of cards and plates: the quiet stage. Also the white words on Ink (17.40), Navy (11.24), Semantic-Error (5.44), Identity-Primary (5.33), Action-Hover (4.99), and on Action-Primary as large text only (3.46). */
  --nda-ink-primary: #1a1a1a; /* Ink layer. All reading text, every structural edge (3px) and every hard shadow. Never pure black. Text on White (17.40), Off-white (16.19), Identity-Secondary (8.26) and Action-Primary (5.04). Never on Navy (1.55) or Semantic-Error (3.20), and never small text on Identity-Primary (3.27). */
  --nda-ink-secondary: #5c6b89; /* Ink layer (Grey-blue). Labels and captions only; sentences (intros, leads, body) are always Ink-Primary. On White (5.36) and Off-white (4.98). The label of a disabled button. */
  --nda-ui-lines: #d3d9e8; /* Ink layer. Diagonal hatching, pegboard holes, layout-guide frames (a named ink-edge exception). As text: on Navy (7.95), for the labels in a breakout block. */
  --nda-ui-lines-dark: #3a4a7d; /* Ink layer. Hatching on Navy, such as the dead zone of a breakout block. Texture only, like all hatching. */
  --nda-identity-primary: #1c7a4e; /* Identity layer (Green), the dominant brand identifier: loud outer frames, signs, stamps, icon cards, the motif's frame, the eye. Also does the job of success. White words on it (5.33). As text, small labels on White (5.33) or Off-white (4.95). Never placed against Navy without Ink between them (2.11). */
  --nda-identity-secondary: #f2a223; /* Identity layer (Yellow): loud outer frames, signs, stamps, the motif's door, the eye's default fill. Also does the job of warning. Ink words on it (8.26). As text only on Navy (5.34) and on Ink (8.26); never text or an edge on White or Off-white (2.11 / 1.96). */
  --nda-action-primary: #dc6919; /* Action layer (Orange), the Catalyst: the primary button and the keyboard focus ring (3px, 4px offset; 3.46 on White passes the 3:1 bar for a ring). Also free for outer frames and stamps. Ink words at any size (5.04); white words only as large text (3.46), which is why button labels are 19px bold. Never text on a light canvas. */
  --nda-action-hover: #b55312; /* Action layer. The primary button under the pointer, fill and edge together. White label on it: 4.99. */
  --nda-action-disabled: rgba(42, 56, 105, 0.4); /* Action layer. The faded edge of a disabled button, a named ink-edge exception. A disabled button is exempt from the legibility bar. */
  --nda-semantic-error: #c6302a; /* Status layer (Red). Errors, violations and Don't specimens; the only status colour with its own token (success is Identity-Primary, warning is Identity-Secondary). White words on it (5.44); as text on White (5.44) or Off-white (5.06). Never decoration in the interface. */
  --nda-shadow-sm: 4px 4px 0px #1a1a1a; /* Buttons, stamps, Directive signs, code blocks, thumbnails and other small parts. A pressed button lands on it (translate 4px, shadow to 0). */
  --nda-shadow-md: 6px 6px 0px #1a1a1a; /* Cards, colour swatches, type specimens, tables, content boxes, figures, icon cards. */
  --nda-shadow-lg: 8px 8px 0px #1a1a1a; /* Hero blocks, NameBoxes, title blocks, hero figures. */
}
:root {
  --nda-sp-1: 10px; /* The half-step: small gaps, the space under a label or heading. */
  --nda-sp-2: 20px; /* The pitch: a card frame's padding, grid gaps, paragraph spacing, page side padding. Also the padding inside cards and plates below the 900px switch. */
  --nda-sp-3: 40px; /* Padding inside an inner card and inside a title block's plate. */
  --nda-sp-4: 60px; /* Top and bottom padding of NameBoxes and title blocks; the gap in a two-column section; the page's top and bottom padding. */
  --nda-sp-5: 80px; /* The dead zone's height; the gap between sections in a reference doc. */
  --nda-sp-6: 120px; /* The gap between sections on a product page. */
  --nda-page-max: 1100px; /* The widest a page's content gets (.container). There is one small-screen switch, at 900px (not a token: media queries cannot read one): below it, columns stack, a NameBox bleeds off both edges, and the padding inside cards and plates halves to 20px. */
  --nda-radius-none: 0; /* Every spatial element: containers, buttons, form fields, stamps, signs, tables, image frames, avatars. Enforced on * in the core CSS. */
  --nda-radius-full: 50%; /* The Witness Eye, its pupil and plain discs only. Wire-icon bends and the motif's corners are drawn inside their SVGs, as a share of their own size, so they need no token. */
  --nda-stroke-base: 3px; /* Every structural edge, in Ink (seven named exceptions), and the focus ring's width. */
  --nda-stroke-heavy: 6px; /* Section lines, the spine of a type specimen, the code block's bar. */
  --nda-text-h1: clamp(2rem, 5vw, 4rem); /* Page title and hero. Fluid: it grows with the window up to 4rem. */
  --nda-text-h2: clamp(1.75rem, 3vw, 2.5rem); /* Section heading; NameBox heading. */
  --nda-text-h3: 1.25rem; /* Component heading (H3 and H4). */
  --nda-text-lead: 1.25rem; /* Intros and leads: a step above body, in the same Ink. */
  --nda-text-body: 1.125rem; /* Body prose, everywhere (18px). */
  --nda-text-small: 0.9375rem; /* Table text, notes beside a specimen (15px). */
  --nda-text-label: 0.75rem; /* Labels, stamps, captions, code, capitals buttons (12px). */
  --nda-text-button: 1.1875rem; /* Button labels (19px). At 19px bold the label counts as large text, so white on Action-Primary meets the 3:1 bar. */
  --nda-measure: 65ch; /* Body prose reading cap (p, lists). */
  --nda-measure-wide: 75ch; /* Intros and header paragraphs (.lead, a title block's paragraph). */
  --nda-measure-tight: 45ch; /* NameBox heading cap. */
  --font-header: 'Jost', 'Futura', sans-serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --text-nda-h1: 700 4rem/1.1 var(--font-header); /* Page title and hero (h1). Capitals. Fluid in use: --nda-text-h1 is clamp(2rem, 5vw, 4rem), shown here at its 4rem cap. The hero is the one place a long sentence is set in capitals. */
  --text-nda-h2: 700 2.5rem/1.1 var(--font-header); /* Section heading (h2). Capitals. Fluid in use: --nda-text-h2 is clamp(1.75rem, 3vw, 2.5rem), shown at its cap. */
  --text-nda-h3: 700 1.25rem/1.1 var(--font-header); /* Component heading (h3 and h4). Capitals. */
  --text-nda-namebox-heading: 700 2.5rem/1.1 var(--font-header); /* NameBox heading (.name-box-heading): H2 size and weight, but sentence case, capped at --nda-measure-tight (45ch). */
  --text-nda-button: 700 1.1875rem/1.2 var(--font-header); /* Button labels (.btn), as typed, in sentence case. 19px bold counts as large text, so white on Action-Primary meets the 3:1 bar. */
  --text-nda-button-caps: 700 0.75rem/1.2 var(--font-header); /* .btn-caps: capitals at label size, for secondary and ghost buttons only. Never on the primary button, where a small white label on orange would miss the bar. */
  --text-nda-table-heading: 700 0.9375rem/1.6 var(--font-header); /* Table headings (th): Jost capitals, white on an Ink row. */
  --text-nda-directive: 900 4rem/0.95 var(--font-header); /* Directive signs only, the one place 900 is used. The size follows the sign's own width: line 1 clamp(1.25rem, 12.4cqw, 4rem), line 2 clamp(1.4rem, 13.95cqw, 4.5rem); shown at the line-1 cap. */
  --text-nda-lead: 400 1.25rem/1.6 var(--font-body); /* Intros and leads (.lead), a step above body in the same Ink. Measure: --nda-measure-wide (75ch). */
  --text-nda-body: 400 1.125rem/1.6 var(--font-body); /* Body prose everywhere (p, lists). Measure: --nda-measure (65ch). */
  --text-nda-small: 400 0.9375rem/1.6 var(--font-body); /* Table text and notes beside a specimen (.small). */
  --text-nda-label: 400 0.75rem/1.6 var(--font-mono); /* Labels and captions (.nano-label, caption tabs): capitals in Ink-Secondary. Labels never tilt. Every doc opens with // ACTIVE DOC : NAME. */
  --text-nda-stamp: 700 0.75rem/1.6 var(--font-mono); /* Stamp text (.ref-stamp): 700 capitals. A stamp carries a name, never a number. */
  --text-nda-code: 400 0.75rem/1.5 var(--font-mono); /* Code blocks (.code-block): white on Ink. */
}
.nda-h1 {
  font-family: var(--font-header);
  font-size: 4rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nda-h2 {
  font-family: var(--font-header);
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nda-h3 {
  font-family: var(--font-header);
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
.nda-namebox-heading {
  font-family: var(--font-header);
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nda-button {
  font-family: var(--font-header);
  font-size: 1.1875rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}
.nda-button-caps {
  font-family: var(--font-header);
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.nda-table-heading {
  font-family: var(--font-header);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.nda-directive {
  font-family: var(--font-header);
  font-size: 4rem;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.nda-lead {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.nda-body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.nda-small {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.nda-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.nda-stamp {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.nda-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}

/* ============ bundle.css (core block) ============ */

/* =====================================================================
   ND AGENCY : CORE (shared parts)
   The core block from every ND Agency doc, after its token list.
   The tokens themselves come from tokens.css (tokens.json), under their
   core-block names (--nda-*). Load tokens.css first, then this file.
   ===================================================================== */
/* The three font tokens under their core-block names.
   tokens.css names the families --font-header, --font-body and --font-mono. */
:root {
    --nda-font-header: var(--font-header);
    --nda-font-body: var(--font-body);
    --nda-font-mono: var(--font-mono);
}

/* Geometry Doctrine Rule 1: every spatial element is sharp. */
*, *::before, *::after {
    border-radius: var(--nda-radius-none) !important;
    text-shadow: none !important;
    box-sizing: border-box;
}
/* The hidden attribute always wins over a component's own display (flex, grid). */
[hidden] { display: none !important; }
/* Geometry Doctrine Rule 3: the closed round list (in CSS: the eye and plain discs). */
.witness-eye, .pupil, .nda-disc { border-radius: var(--nda-radius-full) !important; }

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
section[id], div[id] {
    scroll-margin-top: 5rem;
}

/* Accessible screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    background-color: var(--nda-canvas-primary);
    color: var(--nda-ink-primary);
    /* The pegboard: 20px pitch, round holes of 2px radius, sensory comfort tuned (0.06 opacity) */
    background-image: radial-gradient(circle, rgba(42, 56, 105, 0.06) 2px, transparent 2px);
    background-size: 20px 20px;
    background-position: 0 0;
    font-family: var(--nda-font-body);
    font-size: var(--nda-text-body);
    line-height: 1.6;
    margin: 0;
    padding: var(--nda-sp-4) var(--nda-sp-2);
    overflow-x: clip;                   /* a bleeding NameBox runs past the window edge; this stops a sideways scrollbar */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
    body, .bg-grid-dots {
        background-image: none !important;
    }
}

.container {
    max-width: var(--nda-page-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--nda-sp-5);
}

/* ---------- Type ---------- */
h1, h2, h3, h4 {
    font-family: var(--nda-font-header);
    font-weight: 700;
    color: var(--nda-ink-primary);
    margin-top: 0;
    line-height: 1.1;
    text-transform: uppercase;
    overflow-wrap: break-word;
}
h1 { font-size: var(--nda-text-h1); letter-spacing: -0.02em; margin-bottom: var(--nda-sp-2); }
h2 { font-size: var(--nda-text-h2); letter-spacing: -0.02em; margin-bottom: var(--nda-sp-1); }
h3, h4 { font-size: var(--nda-text-h3); margin-bottom: var(--nda-sp-1); }

p { margin-top: 0; margin-bottom: var(--nda-sp-2); font-size: var(--nda-text-body); max-width: var(--nda-measure); }
.lead { font-size: var(--nda-text-lead); max-width: var(--nda-measure-wide); }
.small { font-size: var(--nda-text-small); }
.mono { font-family: var(--nda-font-mono); }
code { font-family: var(--nda-font-mono); font-size: 0.85em; }
ul, ol { font-size: var(--nda-text-body); max-width: var(--nda-measure); padding-left: var(--nda-sp-2); margin-top: 0; margin-bottom: var(--nda-sp-2); }
li { margin-bottom: var(--nda-sp-1); }
.flush-bottom { margin-bottom: 0 !important; }

/* Small label. Ink-secondary is for labels and captions only. Labels never tilt. */
.nano-label {
    font-family: var(--nda-font-mono);
    font-size: var(--nda-text-label);
    text-transform: uppercase;
    color: var(--nda-ink-secondary);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: var(--nda-sp-1);
}

/* ---------- Stamp (controlled friction). Its colour is decoration; any verdict is in its words. ---------- */
.ref-stamp {
    display: inline-block;
    font-family: var(--nda-font-mono);
    font-size: var(--nda-text-label);
    font-weight: 700;
    background-color: var(--nda-ink-primary);
    color: var(--nda-canvas-container);
    padding: 4px 12px;
    margin-bottom: var(--nda-sp-2);
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transform: rotate(-2.5deg);
    box-shadow: var(--nda-shadow-sm);
    z-index: 10;
}
.ref-stamp.is-identity { background-color: var(--nda-identity-primary); color: var(--nda-canvas-container); }
.ref-stamp.is-identity-secondary { background-color: var(--nda-identity-secondary); color: var(--nda-ink-primary); }
.ref-stamp.is-canvas-secondary { background-color: var(--nda-canvas-secondary); color: var(--nda-canvas-container); }
.ref-stamp.is-action { background-color: var(--nda-action-primary); color: var(--nda-ink-primary); }
.ref-stamp.is-error { background-color: var(--nda-semantic-error); color: var(--nda-canvas-container); }

/* ---------- Title block: the document header plate. Words sit in a white inner plate, never on the hatching. ---------- */
.title-block {
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    padding: var(--nda-sp-4) var(--nda-sp-3);
    background-color: var(--nda-canvas-container);
    background-image: repeating-linear-gradient(-45deg, var(--nda-ui-lines), var(--nda-ui-lines) 2px, transparent 2px, transparent 20px);
    box-shadow: var(--nda-shadow-lg);
    position: relative;
    transform: rotate(1deg);            /* the block may tilt ... */
}
.title-block-inner {
    background-color: var(--nda-canvas-container);
    padding: var(--nda-sp-3);
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    display: inline-block;
    transform: rotate(-1deg);           /* ... and the words end up level */
}
.title-block-inner h1 { margin-bottom: var(--nda-sp-1); }
.title-block-inner p { max-width: var(--nda-measure-wide); margin-bottom: 0; }

/* ---------- NameBox: the product-page title plate. Words sit on the hatching; it bleeds off the page edge; it never tilts. ---------- */
.name-box {
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    padding: var(--nda-sp-4) var(--nda-sp-3);
    position: relative;
    background-color: var(--nda-canvas-container);
    background-image: repeating-linear-gradient(-45deg, var(--nda-ui-lines), var(--nda-ui-lines) 2px, transparent 2px, transparent 20px);
    box-shadow: var(--nda-shadow-lg);
}
/* The bleed: on the named side the box runs to the window edge and drops its border. Its words stay on the column. */
@media (min-width: 900px) {
    .name-box.edge-left { border-left-width: 0; margin-left: calc(50% - 50vw); padding-left: calc(50vw - 50% + var(--nda-sp-3)); }
    .name-box.edge-right { border-right-width: 0; margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50% + var(--nda-sp-3)); }
}
@media (max-width: 899.98px) {
    .name-box { border-left-width: 0; border-right-width: 0; margin-left: calc(var(--nda-sp-2) * -1); margin-right: calc(var(--nda-sp-2) * -1); }
}
.name-box-eyebrow { font-family: var(--nda-font-mono); font-size: var(--nda-text-label); color: var(--nda-ink-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--nda-sp-2) 0; }
.name-box-heading { font-family: var(--nda-font-header); font-size: var(--nda-text-h2); line-height: 1.1; margin-bottom: var(--nda-sp-2); max-width: var(--nda-measure-tight); color: var(--nda-ink-primary); text-transform: none; }
.name-box-lead { font-size: var(--nda-text-lead); color: var(--nda-ink-primary); margin: 0 0 var(--nda-sp-3) 0; max-width: var(--nda-measure); }

/* ---------- Section line (6px). Reference docs: below the heading. Product pages: above the heading block. ---------- */
.section-divider { border-bottom: var(--nda-stroke-heavy) solid var(--nda-ink-primary); padding-bottom: var(--nda-sp-1); margin-bottom: var(--nda-sp-3); }
.section-header { border-top: var(--nda-stroke-heavy) solid var(--nda-ink-primary); padding-top: var(--nda-sp-2); margin-bottom: var(--nda-sp-3); }
.section-header p { font-size: var(--nda-text-lead); max-width: var(--nda-measure-wide); }

/* ---------- Two-column section ---------- */
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nda-sp-4); align-items: center; }
@media (max-width: 899.98px) { .split-section { grid-template-columns: 1fr; gap: var(--nda-sp-3); } }
.split-section > * { min-width: 0; }   /* lets a long conveyor clip inside its column instead of widening the page */

/* ---------- Box within a box: loud frame, quiet stage ---------- */
.ui-card-outer {
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    padding: var(--nda-sp-2);
    background-color: var(--nda-canvas-primary);
    box-shadow: var(--nda-shadow-md);
}
.ui-card-inner {
    position: relative;
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    /* 40px all round, plus the 80px dead zone at the foot */
    padding: var(--nda-sp-3) var(--nda-sp-3) calc(var(--nda-sp-5) + var(--nda-sp-3)) var(--nda-sp-3);
    background-color: var(--nda-canvas-container);
}
/* The dead zone: 80px of hatching at the foot of cards that hold reading text. Texture only; it means nothing. */
.ui-card-inner::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: var(--nda-sp-5);
    background-image: repeating-linear-gradient(-45deg, var(--nda-ui-lines), var(--nda-ui-lines) 3px, transparent 3px, transparent 12px);
    border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); pointer-events: none; z-index: 0;
}
.ui-card-inner > * { position: relative; z-index: 1; }
/* Compact and demo cards skip the dead zone. */
.ui-card-inner.is-compact { padding: var(--nda-sp-3); }
.ui-card-inner.is-compact::after { content: none; }

/* Frames (the loud part) */
.ui-card-outer.theme-identity { background-color: var(--nda-identity-primary); }
.ui-card-outer.theme-identity-secondary { background-color: var(--nda-identity-secondary); }
.ui-card-outer.theme-action { background-color: var(--nda-action-primary); }
.ui-card-outer.theme-error { background-color: var(--nda-semantic-error); }
.ui-card-outer.theme-error > .ui-card-inner { border-color: var(--nda-semantic-error); }            /* named ink-edge exception */
/* Dark card: a navy frame. Navy edges are a named ink-edge exception. On navy, the inside is canvas-primary. */
.ui-card-outer.theme-dark { background-color: var(--nda-canvas-secondary); border-color: var(--nda-canvas-secondary); }
.ui-card-outer.theme-dark > .ui-card-inner { background-color: var(--nda-canvas-primary); border-color: var(--nda-canvas-secondary); }
/* Breakout block: navy all the way through. Hero and breakout sections only. */
.ui-card-outer.theme-breakout { background-color: var(--nda-canvas-secondary); border-color: var(--nda-canvas-secondary); }
.ui-card-outer.theme-breakout > .ui-card-inner { background-color: var(--nda-canvas-secondary); border-color: var(--nda-canvas-secondary); color: var(--nda-canvas-container); }
.ui-card-outer.theme-breakout > .ui-card-inner::after {
    background-image: repeating-linear-gradient(-45deg, var(--nda-ui-lines-dark), var(--nda-ui-lines-dark) 3px, transparent 3px, transparent 12px);
    border-top-color: var(--nda-canvas-secondary);
}
.theme-breakout h1, .theme-breakout h2, .theme-breakout h3, .theme-breakout p { color: var(--nda-canvas-container); }
.theme-breakout .nano-label { color: var(--nda-ui-lines); }

/* ---------- Buttons. Zero-second state changes. Labels are as typed; capitals only through .btn-caps. ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--nda-sp-1);
    font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-button); line-height: 1.2;
    padding: 10px 24px; text-decoration: none; cursor: pointer; text-align: center;
    color: var(--nda-ink-primary); background-color: transparent;
    border: var(--nda-stroke-base) solid transparent;
    transition: all 0s step-end;
}
:focus-visible { outline: var(--nda-stroke-base) solid var(--nda-action-primary); outline-offset: 4px; }   /* the focus ring, on anything that takes keyboard focus */
.btn:focus-visible { outline: var(--nda-stroke-base) solid var(--nda-action-primary); outline-offset: 4px; }
input:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid var(--nda-action-primary);
    outline-offset: 2px;
}
.btn svg { display: block; width: 16px; height: 16px; }
/* Capitals at label size: for secondary and ghost buttons. Never on the primary button, where a small white label on orange would miss the legibility bar. */
.btn-caps { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--nda-text-label); padding: 12px 24px; }

.btn-primary { background-color: var(--nda-action-primary); color: var(--nda-canvas-container); border-color: var(--nda-action-primary); box-shadow: var(--nda-shadow-sm); }   /* orange edge: named ink-edge exception */
.btn-primary:hover:not(:disabled) { background-color: var(--nda-action-hover); border-color: var(--nda-action-hover); }
.btn-secondary { background-color: var(--nda-canvas-container); color: var(--nda-ink-primary); border-color: var(--nda-ink-primary); box-shadow: var(--nda-shadow-sm); }
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0px 0px 0px transparent; }
/* Hatching on hover is texture, not a signal. */
.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
    background-color: var(--nda-canvas-container);
    background-image: repeating-linear-gradient(-45deg, rgba(26, 26, 26, 0.08), rgba(26, 26, 26, 0.08) 3px, transparent 3px, transparent 12px);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--nda-ink-primary); }
.btn:disabled, .state-disabled {
    position: relative; background-color: transparent !important; border-color: var(--nda-action-disabled) !important;   /* faded edge: named ink-edge exception */
    color: var(--nda-ink-secondary) !important; box-shadow: none !important; transform: none !important; pointer-events: none; z-index: 1;   /* the label fades to Ink-Secondary */
}
.btn:disabled::after, .state-disabled::after {
    content: ""; position: absolute; inset: -3px;
    background: repeating-linear-gradient(-45deg, rgba(42, 56, 105, 0.22), rgba(42, 56, 105, 0.22) var(--nda-stroke-base), transparent var(--nda-stroke-base), transparent 12px);
    z-index: -1;
}

/* ---------- The Witness Eye: a perfect circle. Never navy. Pupil is 47% of the eye's outer width and rests at the bottom. No shading. ---------- */
.witness-eye {
    --eye: 60px;
    display: block; position: relative; flex: none;
    width: var(--eye); height: var(--eye);
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    background-color: var(--nda-identity-secondary);
    overflow: hidden;
}
.witness-eye .pupil {
    position: absolute; bottom: 2px; left: 50%;
    width: calc(var(--eye) * 0.47); height: calc(var(--eye) * 0.47);
    background-color: var(--nda-ink-primary);
    transform: translateX(-50%);
    will-change: transform;
}
.witness-eye.eye-identity-primary { background-color: var(--nda-identity-primary); }
.witness-eye.eye-identity-secondary { background-color: var(--nda-identity-secondary); }
.witness-eye.eye-container { background-color: var(--nda-canvas-container); }
.nda-disc { display: inline-block; border: var(--nda-stroke-base) solid var(--nda-ink-primary); background-color: var(--nda-identity-secondary); }

/* ---------- The motif: a tapered door in a 90-degree frame. Geometry Doctrine Rule 4.
   Soft corners come from a thick stroke in the shape's own colour (half the stroke = 10 units = a tenth of the box).
   No ink edge: a named exception. Navy is never in the motif. ---------- */
.motif { display: block; width: 100%; height: 100%; overflow: visible; }
.motif-frame { fill: var(--nda-identity-primary); stroke: var(--nda-identity-primary); stroke-width: 20; stroke-linejoin: round; }
.motif-door { fill: var(--nda-identity-secondary); stroke: var(--nda-identity-secondary); stroke-width: 20; stroke-linejoin: round; }

/* ---------- Directive sign ---------- */
.directive-sign {
    width: 100%; padding: 24px 32px;
    color: var(--nda-canvas-container);
    font-family: var(--nda-font-header); font-weight: 900; text-transform: uppercase; line-height: 0.95;
    display: flex; flex-direction: column; justify-content: center;
    margin-bottom: var(--nda-sp-2);
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    box-shadow: var(--nda-shadow-sm);
}
.ds-identity { background-color: var(--nda-identity-primary); }                                      /* green, white words */
.ds-secondary { background-color: var(--nda-identity-secondary); color: var(--nda-ink-primary); }     /* yellow, ink words */
.ds-dark { background-color: var(--nda-canvas-secondary); }                                           /* navy, white words */
/* The type scales with the sign's own width (container units), up to 4rem and 4.5rem, so the two-line lockup holds in any column. */
.directive-sign { container-type: inline-size; }
.ds-line-1 { font-size: clamp(2rem, 5vw, 4rem); font-size: clamp(1.25rem, 12.4cqw, 4rem); letter-spacing: -0.02em; display: block; white-space: nowrap; }
.ds-line-2 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-size: clamp(1.4rem, 13.95cqw, 4.5rem); letter-spacing: -0.02em; display: flex; align-items: center; gap: 15px; white-space: nowrap; overflow: hidden; }
.ds-chevrons { font-family: var(--nda-font-header); font-weight: 900; letter-spacing: -0.1em; display: inline-flex; }   /* chevrons take the colour of the words */
.ticker-wrap { flex: 1; min-width: 0; overflow: hidden; display: flex; }
.ticker-move { display: inline-flex; white-space: nowrap; animation: nda-ticker 4s infinite linear; }   /* the one thing allowed to run by itself */
.directive-sign:hover .ticker-move, .directive-sign:focus-within .ticker-move { animation-play-state: paused; }   /* the visitor can stop it */
@keyframes nda-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Code block: ink block, yellow bar kept inside the ink edge ---------- */
.code-block {
    background-color: var(--nda-ink-primary); color: var(--nda-canvas-container);
    padding: var(--nda-sp-2) var(--nda-sp-2) var(--nda-sp-2) calc(var(--nda-sp-2) + var(--nda-stroke-heavy));
    font-family: var(--nda-font-mono); font-size: var(--nda-text-label); line-height: 1.5;
    overflow-x: auto; white-space: pre; margin: var(--nda-sp-2) 0;
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    box-shadow: var(--nda-shadow-sm), inset var(--nda-stroke-heavy) 0 0 0 var(--nda-identity-secondary);
}

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; margin-bottom: var(--nda-sp-2); background-color: var(--nda-canvas-container); font-size: var(--nda-text-small); box-shadow: var(--nda-shadow-md); }
th, td { border: var(--nda-stroke-base) solid var(--nda-ink-primary); padding: 10px; vertical-align: top; text-align: left; }
th { background-color: var(--nda-ink-primary); color: var(--nda-canvas-container); font-family: var(--nda-font-header); font-size: var(--nda-text-small); letter-spacing: 0.05em; text-transform: uppercase; }
td code { background-color: var(--nda-canvas-primary); padding: 2px 4px; }
.table-scroll { overflow-x: auto; padding: 0 var(--nda-sp-1) var(--nda-sp-1) 0; }

/* ---------- Figure: how an image sits in the system (see the Image Usage doc) ---------- */
.nda-figure { position: relative; margin: 0; border: var(--nda-stroke-base) solid var(--nda-ink-primary); background-color: var(--nda-canvas-container); box-shadow: var(--nda-shadow-md); }
.nda-figure > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.nda-figure > .nda-image { width: 100%; aspect-ratio: 3 / 2; }
.nda-figure.is-wide > img, .nda-figure.is-wide > .nda-image { aspect-ratio: 2 / 1; }
.nda-figure.is-landscape > img, .nda-figure.is-landscape > .nda-image { aspect-ratio: 3 / 2; }
.nda-figure.is-square > img, .nda-figure.is-square > .nda-image { aspect-ratio: 1 / 1; }
.nda-figure.is-portrait > img, .nda-figure.is-portrait > .nda-image { aspect-ratio: 4 / 5; }
.nda-figure.is-thumb { box-shadow: var(--nda-shadow-sm); }
.nda-figure.is-hero { box-shadow: var(--nda-shadow-lg); }
.nda-figure-caption {
    position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 100%;
    font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nda-ink-primary); background-color: var(--nda-canvas-container);
    padding: 4px 10px;
    border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); border-right: var(--nda-stroke-base) solid var(--nda-ink-primary);
}
/* Stand-in for an image in these docs (and the look of an empty frame): canvas ground, crossed guide lines */
.nda-image {
    display: flex; align-items: center; justify-content: center;
    background-color: var(--nda-canvas-primary);
    background-image:
        linear-gradient(to top right, transparent calc(50% - 1.5px), var(--nda-ui-lines) calc(50% - 1.5px), var(--nda-ui-lines) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
        linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--nda-ui-lines) calc(50% - 1.5px), var(--nda-ui-lines) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.nda-image > span { display: inline-block; font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--nda-ink-secondary); background-color: var(--nda-canvas-primary); padding: 2px 10px; }

/* ---------- Small screens (below 900px): columns stack, and the padding inside cards and plates halves to 20px ---------- */
@media (max-width: 899.98px) {
    .title-block { padding: var(--nda-sp-3) var(--nda-sp-2); }
    .title-block-inner { padding: var(--nda-sp-2); display: block; }
    .name-box { padding: var(--nda-sp-3) var(--nda-sp-2); }
    .ui-card-inner { padding: var(--nda-sp-2) var(--nda-sp-2) calc(var(--nda-sp-5) + var(--nda-sp-2)) var(--nda-sp-2); }
    .ui-card-inner.is-compact { padding: var(--nda-sp-2); }
    .table-scroll > table { min-width: 640px; }   /* a wide table scrolls inside its wrapper instead of squeezing */
}

/* ---------- Motion: everything holds still when the visitor's device asks for reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
    body { background-image: none; padding: 0; }
    .ui-card-outer, .title-block, .name-box, table, .code-block, .nda-figure { break-inside: avoid; }
    *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============ SecondaryNavBar (not in the core block; from its guidelines). One nav bar per page: this one replaces NavBar here. ============ */

/* The secondary nav bar: a Navy band docked to the top of the window. No plate of its own: the Navy is its ground. */
.secondary-nav {
    margin: calc(var(--nda-sp-4) * -1) calc(var(--nda-sp-2) * -1) var(--nda-sp-4);   /* flush with the window's top and sides: cancels the body's padding */
    background-color: var(--nda-canvas-secondary);                                      /* docked, not raised: no edge, no shadow */
    color: var(--nda-canvas-container);
}
.secondary-nav-inner {
    display: flex; align-items: center; gap: var(--nda-sp-2);
    max-width: calc(var(--nda-page-max) + var(--nda-sp-2) * 2); margin: 0 auto;         /* the contents stay on the page's column */
    padding: var(--nda-sp-2);
}
.secondary-nav-home { display: block; flex: none; }
.secondary-nav-home img { display: block; height: 48px; width: auto; }                 /* the button's height */
.secondary-nav-links { margin: 0 auto; }                                                /* centred between the logo and the button */
.secondary-nav ul { display: flex; gap: var(--nda-sp-3); list-style: none; margin: 0; padding: 0; max-width: none; }   /* 40px apart, for legibility */
.secondary-nav li { margin: 0; }
.secondary-nav ul a {                                                                   /* text links, set like a table heading */
    display: block; padding: 12px 0;
    font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-small); line-height: 1.2;
    letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
    color: var(--nda-canvas-container);                                                 /* white on Navy: 11.24 */
    border-bottom: var(--nda-stroke-base) solid transparent;
    transition: all 0s step-end;
}
.secondary-nav ul a:hover { border-bottom-color: var(--nda-canvas-container); }        /* a 3px white line under the pointer */
.secondary-nav ul a.nav-active,
.secondary-nav ul a[aria-current="page"] {
    border-bottom-color: var(--nda-identity-secondary);
}
.nav-acronym {
    display: inline-block;
    font-family: var(--nda-font-mono);
    font-size: 0.85em;
    letter-spacing: 0.08em;
    white-space: nowrap;
    margin-left: 0.25em;
}
.secondary-nav-action { flex: none; }
.secondary-nav-menu { display: none; }
/* Below 900px: the mark and a Menu button share the bar. The links and the button fold into the menu, which opens at once and pushes the page down. */
@media (max-width: 899.98px) {
    .secondary-nav-inner { position: relative; flex-wrap: wrap; gap: 0; }
    .secondary-nav-links, .secondary-nav-action { display: none; }
    .secondary-nav-menu { display: block; flex: 0 0 100%; }
    .secondary-nav-menu > summary {
        position: absolute; top: var(--nda-sp-2); right: var(--nda-sp-2); min-height: 48px;
        list-style: none; color: var(--nda-canvas-container); border-color: var(--nda-canvas-container);   /* a box on Navy may take a white edge */
    }
    .secondary-nav-menu > summary::-webkit-details-marker { display: none; }
    .secondary-nav-menu > summary:hover { background-image: repeating-linear-gradient(-45deg, var(--nda-ui-lines-dark), var(--nda-ui-lines-dark) 3px, transparent 3px, transparent 12px); }
    .secondary-nav-menu[open] > summary { background-color: var(--nda-canvas-container); background-image: none; color: var(--nda-ink-primary); }   /* open: Ink on white, 17.40 */
    .secondary-nav-panel { padding-top: var(--nda-sp-2); }
    .secondary-nav-panel ul { flex-direction: column; gap: 0; margin-bottom: var(--nda-sp-2); }
    .secondary-nav-panel .btn { width: 100%; }
}

/* ============ Hero (not in the core block; from its guidelines) ============ */

/* The hero: the opening block of a page. A Navy breakout block, tilted like the door in the logo; the words end up level. */
.hero {
    position: relative; z-index: 10;                                   /* the tilted corners sit above their neighbours */
    margin-top: var(--nda-sp-2);                                       /* room for the corner the tilt lifts */
    background-color: var(--nda-canvas-secondary);
    border: var(--nda-stroke-base) solid var(--nda-canvas-secondary);  /* Navy edge: a named ink-edge exception */
    box-shadow: var(--nda-shadow-lg);
    color: var(--nda-canvas-container);
    transform: rotate(1.5deg);                                         /* the block tilts ... */
}
.hero-stage {
    position: relative; z-index: 1;
    padding: var(--nda-sp-4) var(--nda-sp-4) calc(var(--nda-sp-4) + var(--nda-sp-5));   /* 60px all round, plus the 80px dead zone at the foot */
    transform: rotate(-1.5deg);                                        /* ... and the words end up level */
}
/* The dead zone: 80px of the hatch on Navy across the foot, edge to edge. It tilts with the block. Texture only; it means nothing. */
.hero::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: calc(var(--nda-stroke-base) * -1); right: calc(var(--nda-stroke-base) * -1); bottom: calc(var(--nda-stroke-base) * -1);
    height: calc(var(--nda-sp-5) + var(--nda-stroke-base));
    background-image: repeating-linear-gradient(-45deg, var(--nda-ui-lines-dark), var(--nda-ui-lines-dark) 3px, transparent 3px, transparent 12px);
}
.hero h1, .hero p { color: var(--nda-canvas-container); }             /* white on Navy: 11.24 */
.hero .lead { margin-bottom: var(--nda-sp-4); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nda-sp-2); }
/* Below 900px: 40px top and bottom, 20px at the sides; the heading shrinks with the window. The tilt also eases back, so the shadow at the right edge keeps clear of the screen edge instead of crowding it. */
@media (max-width: 899.98px) {
    .hero { transform: rotate(0.75deg); margin-right: var(--nda-sp-1); }
    .hero-stage { padding: var(--nda-sp-3) var(--nda-sp-2) calc(var(--nda-sp-3) + var(--nda-sp-5)); transform: rotate(-0.75deg); }
    .hero .lead { margin-bottom: var(--nda-sp-3); }
}
/* Below 640px: zero out rotation and skew on small viewports to prevent overflow and text clipping */
@media (max-width: 639.98px) {
    .hero,
    .hero-stage,
    .wings-their-page,
    .wings-their-page > .ui-card-inner,
    .wings-door,
    .name-box.is-tilted,
    .name-box.is-tilted > .name-box-stage {
        transform: rotate(0deg) !important;
        margin-right: 0 !important;
    }
}
@media print { .hero { break-inside: avoid; } }

/* ============ Hero: anti-pitch ============ */

/* Neo-Brutalist Acronym Badge (.badge-sus) */
.badge-sus {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-family: var(--nda-font-mono, 'Space Mono', monospace);
    font-weight: 700;
    font-size: var(--nda-text-label);
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: var(--nda-action-primary, #dc6919);
    border: 2px solid var(--nda-ink-primary);
    box-shadow: 2px 2px 0px var(--nda-ink-primary);
    white-space: nowrap;
}
.badge-sus.is-light {
    color: var(--nda-ink-primary);
    background-color: #ffffff;
}

.hero-signal-tagline {
    grid-area: signal;
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nda-sp-1) var(--nda-sp-2);
    margin-bottom: var(--nda-sp-2);
    max-width: 65ch;
}
.hero-signal-title {
    font-family: var(--nda-font-header);
    font-weight: 700;
    font-size: var(--nda-text-h3);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nda-canvas-container);
}
.hero-signal-desc {
    flex: 0 0 100%;
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: var(--nda-text-body);
    line-height: 1.5;
    color: var(--nda-ui-lines);
    max-width: 65ch;
}

.hero-location-badge {
    grid-area: badge;
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: var(--nda-sp-1);
    margin-bottom: var(--nda-sp-2);
    padding: 6px 14px;
    font-family: var(--nda-font-mono);
    font-size: var(--nda-text-label);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--nda-ink-primary);
    background-color: var(--nda-identity-secondary);
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    box-shadow: var(--nda-shadow-sm);
    width: fit-content;
    max-width: 100%;
}

/* The anti-pitch: the headline on the left, the rest of the copy on the right, and the room in a wide (2:1) image across the block underneath. */
.hero.is-anti-pitch .hero-stage {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);   /* the headline takes three parts, the copy two */
    grid-template-areas: "badge badge" "signal signal" "headline copy" "figure figure";
    column-gap: var(--nda-sp-4); row-gap: var(--nda-sp-3); align-items: start;
}
.hero.is-anti-pitch .hero-headline { grid-area: headline; margin-bottom: 0; }
.hero.is-anti-pitch .hero-copy { grid-area: copy; }
.hero.is-anti-pitch .nano-label { margin-bottom: var(--nda-sp-2); color: var(--nda-ui-lines); }   /* the status line: UI-Lines on Navy, 7.95 */
.hero.is-anti-pitch .lead { margin-bottom: var(--nda-sp-2); }
.hero-exclusion {                                                           /* what it is not: Jost capitals at the component-heading size, white on Navy (11.24) */
    margin-bottom: var(--nda-sp-3);
    font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-h3); line-height: 1.1; text-transform: uppercase;
}
.hero.is-anti-pitch .nda-figure { grid-area: figure; width: 100%; margin: var(--nda-sp-2) 0 0; border-color: var(--nda-canvas-container); }   /* the whole room, edge to edge of the copy; a white edge on Navy: a named ink-edge exception */
/* Below 900px: one column, headline, copy, then the room. The crop stays wide so all four people stay in. */
@media (max-width: 899.98px) {
    .hero.is-anti-pitch .hero-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "badge" "signal" "headline" "copy" "figure"; row-gap: var(--nda-sp-3); }
}

/* ============ Email capture, used in the hero's anti-pitch action row ============ */

/* The email capture in the anti-pitch's action row, from its guidelines (it is not in the core block) */
  .email-capture { width: 100%; max-width: 560px; }
  .email-capture-label {                                                      /* a visible label, never a placeholder: Space Mono capitals */
      display: block; margin-bottom: var(--nda-sp-1);
      font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--nda-ink-secondary);                                        /* on White or Off-white: 5.36 / 4.98 */
  }
  .email-capture-row { display: flex; align-items: stretch; gap: var(--nda-sp-2); }
  .email-capture-input {                                                      /* a sharp field as tall as the button beside it */
      flex: 1 1 auto; min-width: 0; min-height: 48px; margin: 0; padding: 0 var(--nda-sp-2);
      font-family: var(--nda-font-body); font-size: var(--nda-text-body); color: var(--nda-ink-primary);   /* 18px: phones do not zoom in on it */
      background-color: var(--nda-canvas-container);
      border: var(--nda-stroke-base) solid var(--nda-ink-primary);
  }
  .email-capture-row .btn { flex: none; }
  /* On a dark ground (Navy in the hero, Ink in the footer): the label in UI-Lines, a white edge on the field. */
  .email-capture.on-dark .email-capture-label { color: var(--nda-ui-lines); }   /* 7.95 on Navy, 12.2 on Ink */
  .email-capture.on-dark .email-capture-input { border-color: var(--nda-canvas-container); }
  /* Below 900px: the button goes under the field, both full width. */
  @media (max-width: 899.98px) {
      .email-capture-row { flex-direction: column; gap: var(--nda-sp-1); }
  }


/* ============ Page composition: a product page widens the section gap ============ */
.container { gap: var(--nda-sp-6); }
.booking-intro { max-width: 65ch; line-height: 1.65; }

/* ============ PainPointTrio (not in the core block; from its guidelines) ============ */
/* The pain point trio: three typographic cards, one struggle each. The words carry it: no icons, no images. */
.pain-trio {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nda-sp-2);
    list-style: none; margin: 0; padding: 0; max-width: none;
}
.pain-trio > li { margin: 0; }
.pain-card {
    display: flex; flex-direction: column; min-height: 380px;
    padding: var(--nda-sp-3);
    background-color: var(--nda-canvas-container);
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    box-shadow: var(--nda-shadow-md);
}
.pain-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nda-sp-2); margin: 0 0 var(--nda-sp-4); }
.pain-card-heading-col { container-type: inline-size; flex: 1 1 auto; min-width: 0; }  /* a wrapper, not the heading itself: a container can't size-query its own font-size */
.pain-card-heading {                                                     /* oversized: the words stack and fill its own column */
    font-size: clamp(1.5rem, 24cqw, 4rem); line-height: 0.95; letter-spacing: -0.02em;
    font-weight: 700; text-transform: none;
    margin: 0;
}
/* The card's illustration: a full-width embedded graphic, not a small icon. Pushed to the foot and bled to the card's own frame on three sides, flush like the dead zone on a reference card. Matches the site's own figure ratio (3:2), so the artwork fills the frame with no cropping. */
.pain-card-media {
    width: calc(100% + var(--nda-sp-3) * 2); aspect-ratio: 3 / 2;
    margin: auto calc(var(--nda-sp-3) * -1) calc(var(--nda-sp-3) * -1);
    overflow: hidden;
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    background-color: var(--nda-canvas-primary);
}
.pain-card-media img { display: block; width: 100%; height: 100%; }
.pain-card-text { margin: 0; max-width: 65ch; line-height: 1.65; }
/* Below 900px: one column, and the cards give up their fixed height. */
@media (max-width: 899.98px) {
    .pain-trio { grid-template-columns: 1fr; }
    .pain-card { min-height: 0; padding: var(--nda-sp-2); }
    .pain-card-top { margin-bottom: var(--nda-sp-3); }
    .pain-card-media { width: calc(100% + var(--nda-sp-2) * 2); margin: auto calc(var(--nda-sp-2) * -1) calc(var(--nda-sp-2) * -1); }
}


/* ============ BookingCards (not in the core block; from its guidelines) ============ */
/* The booking cards: two lengths of commitment side by side, the same card twice. Neither is the better one. */
.booking-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nda-sp-2); align-items: stretch; }
.booking-cards > .ui-card-outer { display: flex; }                         /* matched heights: the frames stretch, the stages fill them */
.booking-cards .ui-card-inner { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
/* Title row: heading + price on the left, a placeholder image top-right (the pain-trio's own placeholder pattern, reused). */
.booking-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nda-sp-2); width: 100%; margin: 0 0 var(--nda-sp-2); }
.booking-card-heading-col { flex: 1 1 auto; min-width: 0; }
.booking-card-heading-col .booking-card-title { margin-bottom: var(--nda-sp-1); }
.booking-card-heading-col .booking-card-price { margin-bottom: 0; }
.booking-card-media {
    flex: none; width: 38%; max-width: 140px; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    background-color: var(--nda-canvas-primary);
    background-image:
        linear-gradient(to top right, transparent calc(50% - 1.5px), var(--nda-ui-lines) calc(50% - 1.5px), var(--nda-ui-lines) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
        linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--nda-ui-lines) calc(50% - 1.5px), var(--nda-ui-lines) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.booking-card-media span { display: inline-block; font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--nda-ink-secondary); background-color: var(--nda-canvas-primary); padding: 2px 8px; }
.booking-card-title { margin-bottom: var(--nda-sp-2); }
.booking-card-price {                                                       /* prices are metadata: Space Mono */
    margin: 0 0 var(--nda-sp-2);
    font-family: var(--nda-font-mono); font-weight: 700; font-size: var(--nda-text-h2); line-height: 1.1;
}
.booking-card-text { margin-bottom: var(--nda-sp-3); max-width: 65ch; line-height: 1.65; }
.booking-card-badge { margin-bottom: var(--nda-sp-2); }
.pricing-chip {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--nda-font-mono, 'Space Mono', monospace);
    font-weight: 700;
    font-size: var(--nda-text-label);
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--nda-ink-primary);
    background-color: var(--nda-canvas-primary);
    border: 2px solid var(--nda-ink-primary);
    box-shadow: 2px 2px 0px var(--nda-ink-primary);
    max-width: 100%;
}
.booking-card-included {
    width: 100%; margin-bottom: var(--nda-sp-3); padding-bottom: var(--nda-sp-2);
    border-bottom: 1px dashed var(--nda-ui-lines);
}
.booking-card-included .nano-label { display: block; margin-bottom: var(--nda-sp-1); }
.booking-card-included ul { list-style: none; margin: 0; padding: 0; max-width: 65ch; }
.booking-card-included li {
    position: relative; margin: 0 0 var(--nda-sp-1); padding-left: 20px;
    font-size: var(--nda-text-body); line-height: 1.5;
}
.booking-card-included li::before {
    content: "—"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--nda-identity-primary);
}
.booking-card-cta { width: 100%; margin-top: var(--nda-sp-3); }
.booking-card-cta .booking-btn { display: block; width: 100%; text-align: center; }
/* The fit block: who each card is for. Pushed to the card's foot (margin-top: auto) so both lists line up across the pair. */
.booking-card-fit { margin-top: auto; width: 100%; padding-top: var(--nda-sp-2); border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); }
.booking-card-fit .nano-label { margin-bottom: var(--nda-sp-1); }
.booking-card-fit ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.booking-card-fit li { position: relative; margin: 0 0 var(--nda-sp-1); padding-left: 22px; font-size: var(--nda-text-body); }
.booking-card-fit li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--nda-identity-primary); border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-sizing: content-box; }
.booking-card-fit li:last-child { margin-bottom: 0; }
.booking-cards-action {                                                     /* one action for both cards, under the pair: neither card gets its own */
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--nda-sp-2);
    margin: var(--nda-sp-3) 0 0; max-width: none; text-align: center;
}
.booking-cards-note { margin: var(--nda-sp-3) 0 0; max-width: none; text-align: center; font-weight: 700; }   /* the free first morning, said once under both cards */
/* Below 900px: one card above the other, single session first; the placeholder shrinks. */
@media (max-width: 899.98px) {
    .booking-cards { grid-template-columns: 1fr; }
    .booking-card-media { max-width: 100px; }
}

/* ============ HonestPromise (not in the core block; from its guidelines) ============ */
/* The honest promise: a full-width Yellow band that stops the page for one plain sentence about what the room can and cannot promise. */
.honest-promise {
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);        /* out of the column, edge to edge of the window */
    padding: var(--nda-sp-6) var(--nda-sp-2);                              /* 120px above and below: the pause */
    background-color: var(--nda-identity-secondary);
    border-top: var(--nda-stroke-heavy) solid var(--nda-ink-primary);      /* 6px Ink rules: Yellow never meets the light canvas without Ink */
    border-bottom: var(--nda-stroke-heavy) solid var(--nda-ink-primary);
}
.honest-promise-inner { max-width: var(--nda-page-max); margin: 0 auto; }
.honest-promise-statement {                                                /* oversized, in sentence case: only the hero sets a long sentence in capitals */
    max-width: 22ch; margin: 0 0 var(--nda-sp-3);
    font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-h1); line-height: 1.05; letter-spacing: -0.02em;
    color: var(--nda-ink-primary);
}
.honest-promise-detail { max-width: 65ch; line-height: 1.65; margin: 0; font-size: var(--nda-text-lead); color: var(--nda-ink-primary); }
/* Below 900px: a shorter pause. */
@media (max-width: 899.98px) {
    .honest-promise { padding: var(--nda-sp-4) var(--nda-sp-2); }
}

/* ============ FounderProfile (not in the core block; from its guidelines) ============ */
/* The founder profile: a portrait on one side, the person on the other, and role chips that keep each person's jobs apart. */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nda-sp-2); align-items: stretch; }
.founder {
    display: grid; grid-template-columns: 160px 1fr; gap: var(--nda-sp-3); align-items: start;
    padding: var(--nda-sp-3);
    background-color: var(--nda-canvas-container);
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
    box-shadow: var(--nda-shadow-md);
}
.founder .nda-figure { width: 160px; }                                      /* the core figure: Portrait 4:5, 3px Ink edge, the 4px thumbnail shadow */
.founder-name { margin-bottom: var(--nda-sp-1); }
.founder-title {                                                            /* the title is a label: Space Mono capitals in Ink-Secondary */
    margin: 0 0 var(--nda-sp-2);
    font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nda-ink-secondary);
}
.founder-roles { display: flex; flex-wrap: wrap; gap: var(--nda-sp-1); list-style: none; margin: 0 0 var(--nda-sp-2); padding: 0; max-width: none; }
.founder-roles li { margin: 0; }
.role-chip {                                                                /* a role is a label: level, never tilted; not a button, so no shadow */
    display: inline-block; padding: 4px 12px;
    font-family: var(--nda-font-mono); font-weight: 700; font-size: var(--nda-text-label); line-height: 1.6; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nda-ink-primary); background-color: var(--nda-canvas-container);
    border: var(--nda-stroke-base) solid var(--nda-ink-primary);
}
.role-chip.is-filled { color: var(--nda-canvas-container); background-color: var(--nda-ink-primary); }   /* filled: the role in the room; outlined: the roles behind it */
.founder-bio { margin: 0; max-width: 65ch; line-height: 1.65; }
/* Below 900px: one profile above the other, the portrait above the words. */
@media (max-width: 899.98px) {
    .founders { grid-template-columns: 1fr; }
    .founder { grid-template-columns: 1fr; gap: var(--nda-sp-2); padding: var(--nda-sp-2); }
}

/* ============ CaptureFooter (not in the core block; from its guidelines) ============ */
/* The capture footer: the page's last block, Ink from edge to edge, holding one statement, the email capture and the fine print, and nothing else. */
.capture-footer {
    margin: var(--nda-sp-5) calc(var(--nda-sp-2) * -1) calc(var(--nda-sp-4) * -1);   /* docked to the window's sides and bottom: cancels the body's padding */
    padding: var(--nda-sp-6) var(--nda-sp-2) var(--nda-sp-4);
    background-color: var(--nda-ink-primary);
    color: var(--nda-canvas-container);
}
.capture-footer-inner { max-width: var(--nda-page-max); margin: 0 auto; }
.capture-footer-eyebrow {                                                    /* Space Mono capitals in UI-Lines: 12.2 on Ink */
    margin: 0 0 var(--nda-sp-2);
    font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nda-ui-lines);
}
.capture-footer-heading { margin-bottom: var(--nda-sp-3); font-size: var(--nda-text-h2); color: var(--nda-canvas-container); }   /* white on Ink: 17.40 */
.capture-footer .email-capture { margin-bottom: var(--nda-sp-6); }
.capture-footer-fine {                                                       /* the fine print, in the metadata register, set as typed */
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--nda-sp-2) var(--nda-sp-4);
    padding-top: var(--nda-sp-3);
    border-top: var(--nda-stroke-base) solid var(--nda-canvas-container);     /* a white rule: on Ink, edges are white */
    font-family: var(--nda-font-mono); font-size: var(--nda-text-label); line-height: 1.6; letter-spacing: 0.05em;
    color: var(--nda-ui-lines);
}
.capture-footer-fine address { font-style: normal; }
.capture-footer-fine p { margin: 0; font-size: inherit; max-width: none; }
.capture-footer-legal { display: flex; flex-wrap: wrap; gap: 0 var(--nda-sp-2); list-style: none; margin: 0; padding: 0; font-size: inherit; max-width: none; }
.capture-footer-legal li { margin: 0; }
.capture-footer-legal a, .capture-footer-fine address a { display: inline-block; padding: 8px 0; }   /* a finger-sized tap area on 12px links */
.capture-footer a { color: var(--nda-canvas-container); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: all 0s step-end; }
.capture-footer a:hover { color: var(--nda-identity-secondary); }            /* Yellow on Ink under the pointer: 8.26 */
.capture-footer-fine .capture-footer-tagline {                              /* the tagline, once, exactly as written */
    flex-basis: 100%; margin-top: var(--nda-sp-3);
    font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-h3); line-height: 1.1; letter-spacing: 0; color: var(--nda-canvas-container);
}
/* Below 900px: a shorter run-in and the fine print in one column. */
@media (max-width: 899.98px) {
    .capture-footer { padding-top: var(--nda-sp-4); }
    .capture-footer .email-capture { margin-bottom: var(--nda-sp-4); }
    .capture-footer-fine { flex-direction: column; }
}

/* ============ Page layouts for /freelance-mentorship, /freelance-mentorship-for-you, /rage-room, /privacy ============
   Grids and spacing only, taken from nd-site-build/sources/*-wireframe.html.
   Every colour, edge and shadow is a landing-page token. Below 900px every grid stacks. */
.grid-2, .grid-3, .grid-4, .grid-2-3 { display: grid; gap: var(--nda-sp-2); align-items: start; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--nda-sp-4); }
.grid-2.is-wide-gap { gap: var(--nda-sp-3) var(--nda-sp-4); }
.grid-3.is-stretch, .grid-2.is-stretch { align-items: stretch; }
.grid-3.is-stretch > .ui-card-outer, .grid-2.is-stretch > .ui-card-outer { display: flex; }
.grid-3.is-stretch .ui-card-inner, .grid-2.is-stretch .ui-card-inner { flex: 1; }
.stack { display: flex; flex-direction: column; gap: var(--nda-sp-2); align-items: flex-start; }
.stack > * { margin-bottom: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.plain-list li { margin: 0; }
@media (max-width: 899.98px) {
    .grid-2, .grid-3, .grid-4, .grid-2-3 { grid-template-columns: minmax(0, 1fr); gap: var(--nda-sp-2); }
}

/* Contents row (Freelance Mentorship zone 01) */
.page-contents { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nda-sp-2) var(--nda-sp-3); padding-top: var(--nda-sp-2); border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase; }
.page-contents .nano-label { margin: 0; }
.page-contents a { color: var(--nda-ink-primary); }
.table-scroll .ref-stamp { margin: 0 0 0 var(--nda-sp-1); }

/* Ruled rows: one fact per row inside an ink-edged white box */
.ruled-box { background-color: var(--nda-canvas-container); border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-shadow: var(--nda-shadow-md); }
.ruled-box > * { margin: 0; padding: var(--nda-sp-2) var(--nda-sp-3); max-width: none; }
.ruled-box > * + * { border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); }
.ruled-box .qa-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--nda-sp-3); }
.ruled-box .qa-row > * { margin-bottom: 0; }
@media (max-width: 899.98px) {
    .ruled-box > * { padding: var(--nda-sp-2); }
    .ruled-box .qa-row { grid-template-columns: minmax(0, 1fr); gap: var(--nda-sp-1); }
}

/* Ink bar (Freelance Mentorship zone 03): the landing page's table-heading register, as one row */
.ink-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nda-sp-2); padding: var(--nda-sp-2) var(--nda-sp-3); background-color: var(--nda-ink-primary); color: var(--nda-canvas-container); border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-shadow: var(--nda-shadow-md); }
.ink-bar p { margin: 0; color: var(--nda-canvas-container); font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-h3); line-height: 1.1; text-transform: uppercase; }
.ink-bar .ref-stamp { margin: 0; }

/* Phase rows (Freelance Mentorship zone 03) */
.phase-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--nda-sp-2); align-items: center; }
.phase-row > * { margin: 0; }
@media (max-width: 899.98px) { .phase-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Time bar (Rage room zone 2): segment widths keep the minutes' proportions.
   A page with different proportions sets --nda-bar-cols on both the bar and its
   ticks; it must be a custom property, not an inline grid-template-columns, or it
   would outrank the small-screen rule below and keep the narrow columns. */
.time-bar { display: grid; grid-template-columns: var(--nda-bar-cols, 10fr 5fr 20fr 10fr); border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-shadow: var(--nda-shadow-sm); }
.time-bar > * { padding: var(--nda-sp-1) 12px; min-width: 0; }
.time-bar > * + * { border-left: var(--nda-stroke-base) solid var(--nda-ink-primary); }
.time-bar h3 { margin: 0; font-size: var(--nda-text-small); color: inherit; }
.time-bar .nano-label { margin: 0; color: inherit; }
.time-ticks { display: grid; grid-template-columns: var(--nda-bar-cols, 10fr 5fr 20fr 10fr); margin-top: 6px; }
.time-ticks > * { margin: 0; }
.time-ticks > :last-child { display: flex; justify-content: space-between; }
/* Below 900px the segments are too narrow for their own labels: a five-letter
   heading breaks one letter per line. The steps stack instead, in the same order,
   each keeping its time beside it, and the ticks read as one wrapped row so no
   word is lost. */
@media (max-width: 899.98px) {
    .time-bar { grid-template-columns: minmax(0, 1fr); }
    .time-bar > * { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--nda-sp-1); padding: var(--nda-sp-1) var(--nda-sp-2); }
    .time-bar > * + * { border-left: 0; border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); }
    .time-ticks { display: flex; flex-wrap: wrap; gap: 0 var(--nda-sp-2); }
    .time-ticks > :last-child { gap: var(--nda-sp-2); }
}
.fill-navy { background-color: var(--nda-canvas-secondary); color: var(--nda-canvas-container); }
.fill-mustard { background-color: var(--nda-identity-secondary); color: var(--nda-ink-primary); }
.fill-orange { background-color: var(--nda-action-primary); color: var(--nda-ink-primary); }
.fill-green { background-color: var(--nda-identity-primary); color: var(--nda-canvas-container); }

/* Jump cells (Rage room zone 1b) */
.jump-cell { display: block; text-decoration: none; color: var(--nda-ink-primary); background-color: var(--nda-canvas-container); border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-shadow: var(--nda-shadow-md); padding: var(--nda-sp-2); }
.jump-cell:hover { background-image: repeating-linear-gradient(-45deg, rgba(26, 26, 26, 0.08), rgba(26, 26, 26, 0.08) 3px, transparent 3px, transparent 12px); }
.jump-cell { align-self: stretch; }   /* every box in a row is as tall as the tallest */
.jump-cell .nda-h2 { display: block; font-size: min(1.5rem, calc(3vw - 10px)); font-weight: 700; text-transform: none; white-space: normal; }   /* 1.5rem on desktop; eases down to fit four across at 900px */
.jump-cell .nda-small { display: block; }
.metrics-grid,
.grid-4:has(> .jump-cell) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nda-sp-2);
}
@media (min-width: 900px) {
    .metrics-grid,
    .grid-4:has(> .jump-cell) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 899.98px) {
    .jump-cell .nda-h2 { font-size: 1.25rem; }
}

/* Plain grey placeholder where an image is called for and none exists */
.nda-figure > .nda-image.is-placeholder { background-color: var(--nda-ui-lines); background-image: none; }

/* Name box: a form row inside it */
.name-box .email-capture { margin-bottom: var(--nda-sp-2); }

/* Footer on pages without the capture section */
.capture-footer.is-fine-only { padding-top: var(--nda-sp-4); }
.capture-footer.is-fine-only .capture-footer-fine { padding-top: 0; border-top: 0; }

/* Form states */
.email-capture-done { margin: 0; font-weight: 700; }
.email-capture-input[aria-invalid="true"] { border-color: var(--nda-semantic-error); }
/* The failed-send line, under the field: words at body size, never colour alone. Ink words beside a Red bar on light grounds
   (Red text falls to 3.85 on a NameBox's hatching), Yellow words and bar on dark ones (8.26 on Ink, 5.34 on Navy). */
.email-capture-error {
    margin: var(--nda-sp-1) 0 0; padding-left: 12px; max-width: none;
    border-left: var(--nda-stroke-base) solid var(--nda-semantic-error);
    font-size: var(--nda-text-body); font-weight: 700; color: var(--nda-ink-primary);
}
.email-capture-error:empty { margin: 0; padding: 0; border: 0; }            /* empty until a send fails, but still in the page for screen readers */
.email-capture.on-dark .email-capture-error { border-left-color: var(--nda-identity-secondary); color: var(--nda-identity-secondary); }
.email-capture-error a { color: inherit; }
.capture-footer .email-capture-error a:hover { color: var(--nda-canvas-container); }

/* The contact line: the mailbox, labelled, at body size. In the footer above the fine print, and under the hero's form. */
.capture-footer-contact { margin: 0 0 var(--nda-sp-3); font-size: var(--nda-text-body); max-width: none; color: var(--nda-canvas-container); }   /* white on Ink: 17.40 */
.capture-footer-contact a { display: inline-block; padding: 8px 0; }       /* the tap area stays as tall as the fine-print link's was */
.capture-footer .email-capture:has(+ .capture-footer-contact) { margin-bottom: var(--nda-sp-2); }
.capture-footer .email-capture + .capture-footer-contact { margin-bottom: var(--nda-sp-6); }
.hero-contact { margin: 0; }
.hero-contact a { color: var(--nda-canvas-container); text-decoration-thickness: 2px; text-underline-offset: 3px; }   /* white on Navy: 11.24 */
@media (max-width: 899.98px) {
    .capture-footer .email-capture + .capture-footer-contact { margin-bottom: var(--nda-sp-4); }
}

/* ---------- Banner: the Salt River strip, 3:1 across the column ---------- */
.nda-figure.is-banner > img { aspect-ratio: 3 / 1; }
/* Below 900px the strip becomes a close-up of the sign and the two right-hand figures */
@media (max-width: 899.98px) {
    .nda-figure.is-banner > img { aspect-ratio: 5 / 4; object-position: 70% 50%; }
}

/* ============ EveryoneHitsAWall (handover block, fully scoped under .nda-wall; own tokens, own resets) ============ */
/* ==== Everyone hits a wall: an insertable block for ndagency.digital ====
   Follows the "Three ways working from home stops working" cards. Assumes the
   page already loads Jost, Source Sans 3 and Space Mono and sits on the site's
   off-white dot grid. Everything is scoped to .nda-wall. */
.nda-wall {
  --ink:#1A1A1A; --white:#FFFFFF; --off:#F4F7FA; --green:#1C7A4E; --yellow:#F2A223;
  --lines:#D3D9E8; --muted:#5C6B89;
  --display:'Jost','Futura','Century Gothic',sans-serif;
  --body:'Source Sans 3','Source Sans Pro','Helvetica Neue',Arial,sans-serif;
  --mono:'Space Mono','Courier New',monospace;
  font-family:var(--body); color:var(--ink); font-size:18px; line-height:1.6;
  padding:60px 0; box-sizing:border-box;
}
.nda-wall *, .nda-wall *::before, .nda-wall *::after { box-sizing:border-box; }
.nda-wall p, .nda-wall h2, .nda-wall h3, .nda-wall figure { margin:0; }
.wall-inner { max-width:1100px; margin:0 auto; }

.wall-rule { height:6px; background:var(--ink); }
.wall-h2 { font-family:var(--display); font-weight:700; font-size:40px; line-height:1.1; letter-spacing:-.02em; text-transform:none; }
.wall-h3 { font-family:var(--display); font-weight:700; font-size:32px; line-height:1.1; letter-spacing:-.02em; text-transform:none; }
.wall-door { display:none; font-size:18px; line-height:1.6; text-wrap:pretty; }
.wall-lead { font-size:22px; line-height:1.5; text-wrap:pretty; }
.wall-body { font-size:18px; line-height:1.65; max-width:65ch; text-wrap:pretty; }
.wall-small { font-size:16px; line-height:1.6; text-wrap:pretty; }

.wall-head { display:flex; flex-direction:column; gap:20px; }
.wall-head .wall-h2 { margin-top:-10px; }
.wall-head .wall-bridge { max-width:760px; }

.wall-figure { background:var(--white); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }
.wall-figure svg { display:block; width:100%; height:auto; }
.wall-figure--small { display:none; }

/* the when picture, then the two readers beneath their candles */
.wall-when { margin-top:48px; }
.wall-when .wall-when-note { margin-top:22px; font-size:15px; line-height:1.6; color:var(--muted); max-width:760px; text-wrap:pretty; }
.wall-lanes { display:grid; grid-template-columns:1fr 1fr; column-gap:140px; margin-top:36px; }
.wall-lane { display:flex; flex-direction:column; gap:12px; }
.wall-lane .wall-h3 { margin-bottom:2px; }
.wall-lane .wall-door { margin-bottom:10px; }
.wall-lane p { max-width:400px; }
/* desktop: the two lanes share rows, so headings, timelines and the closing lines line up side by side */
@media (min-width: 900px) {
  .wall-lanes { row-gap:12px; }
  .wall-lane { display:grid; grid-row:span 2; grid-template-rows:subgrid; align-items:start; }
}

/* the arcs: beats down a track that ends at the wall, each beat's tab beside its line */
.wall-arc { position:relative; display:grid; grid-template-columns:1fr; row-gap:18px; margin-top:16px; padding-bottom:10px; }
.wall-arc::before { content:""; position:absolute; left:11px; top:0; bottom:40px; width:6px; background:var(--ink); }
.wall-arc::after { content:""; position:absolute; left:5px; bottom:40px; width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:14px solid var(--ink); }
.wall-arc-start { display:none; }
.wall-beat { position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:start; }
.wall-beat p { font-size:16px; line-height:1.6; text-wrap:pretty; margin:0; padding-top:4px; }
.wall-tab { position:relative; z-index:1; justify-self:start; padding:4px 10px; background:var(--white); border:3px solid var(--ink); font-family:var(--mono); font-size:12px; line-height:1.6; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.wall-arc-end { position:relative; z-index:1; width:100%; height:30px; margin-top:8px; border:3px solid var(--ink); background-color:var(--white); background-image:repeating-linear-gradient(-45deg, var(--lines), var(--lines) 3px, transparent 3px, transparent 12px); }

/* where it ends: heading over its line, then the room, then the close, one column down */
.wall-same { margin-top:72px; display:flex; flex-direction:column; gap:12px; }
.wall-same .wall-body { max-width:65ch; line-height:1.65; }
.wall-room { margin-top:40px; }
.wall-close { margin-top:40px; }
.wall-close .wall-body { max-width:65ch; line-height:1.65; }

@media (max-width: 1160px) {
  .wall-lanes { column-gap:80px; }
}
@media (max-width: 899px) {
  .nda-wall { padding:40px 0; font-size:17px; }
  .wall-h2 { font-size:32px; }
  .wall-h3 { font-size:26px; }
  .wall-lead { font-size:19px; }
  .wall-body { font-size:17px; }
  .wall-figure--wide { display:none; }
  .wall-figure--small { display:block; }
  .wall-when { margin-top:32px; }
  .wall-lanes { grid-template-columns:1fr; row-gap:40px; margin-top:32px; }
  .wall-lane { padding-left:0; }
  .wall-door { display:block; }
  .wall-arc { row-gap:20px; }
  .wall-beat { grid-template-columns:1fr; row-gap:10px; }
  .wall-beat p { padding-left:40px; padding-top:0; }
  .wall-same { margin-top:56px; }
  .wall-room { margin-top:32px; }
  .wall-close { margin-top:24px; }
}


/* ---------- The navy passage (9 Oct 2026): the whole section as one Deep Space breakout ----------
   The five parts sat on the same dotted ground as everything around them and read as five stops.
   With .is-navy on the section the band runs edge to edge in Navy, the drawings and the two lanes
   sit in white-edged light boxes, and the turn, "The walls were never yours", stands bare on the navy.
   Remove the class and the section goes back to the dotted page. Every value is a site token. */
.nda-wall.is-navy {
  position:relative;
  background-color:var(--nda-canvas-secondary);
  color:var(--nda-canvas-container);
  margin-top:var(--nda-sp-4); margin-bottom:var(--nda-sp-4);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);   /* edge to edge, the way a NameBox bleeds; the body clips the overflow */
  padding:var(--nda-sp-4) var(--nda-sp-2) calc(var(--nda-sp-4) + var(--nda-sp-5));   /* the foot leaves room for the dead zone */
}
.nda-wall.is-navy .wall-inner { position:relative; z-index:1; }
/* The dead zone, as .hero::after does it: the hatch on Navy across the foot. Texture only. */
.nda-wall.is-navy::after {
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:0; right:0; bottom:0; height:var(--nda-sp-5);
  background-image:repeating-linear-gradient(-45deg, var(--nda-ui-lines-dark), var(--nda-ui-lines-dark) 3px, transparent 3px, transparent 12px);
}

/* The top rule, heading, subheading and bridge: white on Navy (11.24). An Ink rule would vanish (1.55). */
.nda-wall.is-navy .wall-rule { background:var(--nda-canvas-container); }
.nda-wall.is-navy .wall-h2,
.nda-wall.is-navy .wall-head .wall-h3,
.nda-wall.is-navy .wall-bridge { color:var(--nda-canvas-container); }

/* The drawings: a white edge sets the box apart on Navy; an Ink shadow would only muddy it. */
.nda-wall.is-navy .wall-figure { border:3px solid var(--nda-canvas-container); box-shadow:none; }

/* The note under the diagram: UI-Lines, the label colour on Navy (7.95). */
.nda-wall.is-navy .wall-when .wall-when-note { color:var(--nda-ui-lines); }

/* The two lanes: light boxes on the Navy, each with a yellow sign across its top (the Anchor pairing). Inside stays Ink on off-white (16.19). */
.nda-wall.is-navy .wall-lanes { column-gap:var(--nda-sp-3); }
.nda-wall.is-navy .wall-lane { background-color:var(--nda-canvas-primary); color:var(--nda-ink-primary); border:3px solid var(--nda-canvas-container); padding:0; gap:0; }   /* the box is light, so its words go back to Ink */
.nda-wall.is-navy .wall-lane .wall-h3 {
  background-color:var(--nda-identity-secondary); color:var(--nda-ink-primary);
  font-family:var(--mono); font-weight:700; font-size:12px; line-height:1.6; letter-spacing:.05em; text-transform:none;
  padding:var(--nda-sp-1) var(--nda-sp-2); margin:0; border-bottom:3px solid var(--nda-ink-primary);
}
.nda-wall.is-navy .wall-lane > :not(.wall-h3) { margin-left:var(--nda-sp-3); margin-right:var(--nda-sp-3); }
.nda-wall.is-navy .wall-lane > .wall-h3 + * { margin-top:var(--nda-sp-2); }   /* below 900px that is the door line */
.nda-wall.is-navy .wall-lane > :last-child { margin-bottom:var(--nda-sp-3); }
@media (min-width: 900px) {
  .nda-wall.is-navy .wall-lane > .wall-arc { margin-top:var(--nda-sp-2); }   /* the door line is hidden here, so the arc is first */
}

/* The turn: the one unboxed thing in the passage, set at heading size, white on Navy. */
.nda-wall.is-navy .wall-same { margin-top:var(--nda-sp-5); margin-bottom:var(--nda-sp-5); }
.nda-wall.is-navy .wall-same .wall-h3 { font-size:40px; font-weight:700; text-transform:none; color:var(--nda-canvas-container); }
.nda-wall.is-navy .wall-same .wall-body { font-size:22px; line-height:1.65; max-width:65ch; color:var(--nda-canvas-container); }

/* The caption under the room: white on Navy. */
.nda-wall.is-navy .wall-room .wall-body { color:var(--nda-canvas-container); max-width:65ch; line-height:1.65; }

@media (max-width: 1099px) {
  .nda-wall.is-navy .wall-lanes { column-gap:var(--nda-sp-2); }
}
@media (max-width: 899px) {
  .nda-wall.is-navy { padding:var(--nda-sp-4) var(--nda-sp-2) calc(var(--nda-sp-4) + var(--nda-sp-5)); }
  .nda-wall.is-navy .wall-lane > :not(.wall-h3) { margin-left:var(--nda-sp-2); margin-right:var(--nda-sp-2); }
  .nda-wall.is-navy .wall-lane > :last-child { margin-bottom:var(--nda-sp-2); }
  .nda-wall.is-navy .wall-same .wall-h3 { font-size:32px; }
}

/* ---------- The navy passage, tightened (9 Oct 2026): fewer, larger words; one headline ---------- */
/* The label and the one headline. "Everyone hits a wall" is a small label; "The only question is when." is the headline. */
.nda-wall.is-navy .wall-head .wall-h2 { font-family:var(--nda-font-mono); font-weight:700; font-size:15px; line-height:1.6; letter-spacing:.04em; text-transform:none; color:var(--nda-identity-secondary); }
.nda-wall.is-navy .wall-head .wall-h3 { font-size:40px; font-weight:700; text-transform:none; }

/* The intro: 20px, white, a readable measure. */
.nda-wall.is-navy .wall-head .wall-bridge { font-size:20px; line-height:1.65; max-width:65ch; color:var(--nda-canvas-container); }

/* The note under the bird's-eye picture: a mono label. */
.nda-wall.is-navy .wall-when .wall-when-note { font-family:var(--nda-font-mono); font-size:12px; line-height:1.6; letter-spacing:.05em; text-transform:uppercase; color:var(--nda-ui-lines); }

/* The lane cards: a plain yellow header, bigger beats, bold Ink tabs, and a white closing block. */
.nda-wall.is-navy .wall-lane .wall-h3 { font-family:var(--nda-font-header); font-size:20px; line-height:1.1; letter-spacing:0; font-weight:700; text-transform:none; }
.nda-wall.is-navy .wall-beat p { font-size:18px; line-height:1.5; }
.nda-wall.is-navy .wall-tab { color:var(--nda-ink-primary); font-weight:700; }
.nda-wall.is-navy .wall-lane > .wall-arc { margin-bottom:var(--nda-sp-2); }
.nda-wall.is-navy .wall-lanes .wall-lane > .wall-lane-close {
  align-self:stretch; max-width:none; margin:0;
  padding:var(--nda-sp-2); background-color:var(--nda-canvas-container); border-top:3px solid var(--nda-ink-primary);
  font-size:18px; line-height:1.5; color:var(--nda-ink-primary);
}
/* desktop: header, track and closing block are three shared rows, so the two closing blocks line up */
@media (min-width: 900px) {
  .nda-wall.is-navy .wall-lane { grid-row:span 3; grid-template-rows:subgrid; }
}

/* The turn: both paragraphs white on Navy. */
.nda-wall.is-navy .wall-same .wall-body { max-width:65ch; line-height:1.65; }

/* Under the room picture: three plates, then one line. */
.nda-wall.is-navy .wall-close { margin-top:var(--nda-sp-2); }
.nda-wall.is-navy .wall-plates { list-style:none; margin:0; padding:0; max-width:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--nda-sp-2); }
.nda-wall.is-navy .wall-plates li {
  margin:0; padding:var(--nda-sp-2);
  background-color:var(--nda-canvas-primary); color:var(--nda-ink-primary);
  border:3px solid var(--nda-canvas-container); box-shadow:var(--nda-shadow-sm);
  font-family:var(--nda-font-header); font-weight:700; font-size:20px; line-height:1.1; text-transform:none;
}
.nda-wall.is-navy .wall-room-close { margin-top:var(--nda-sp-3); font-size:20px; line-height:1.65; max-width:65ch; color:var(--nda-canvas-container); }
@media (max-width: 899px) {
  .nda-wall.is-navy .wall-head .wall-h3 { font-size:32px; }
  .nda-wall.is-navy .wall-plates { grid-template-columns:minmax(0, 1fr); }
}

/* ============ Freelance Mentorship handover (25 Sep 2026): pictures and bolder blocks for /freelance-mentorship ============
   Paste verbatim at the very end of /assets/site.css. Every colour, edge, shadow and size is a site token.
   Only classes that start with .wings- are new; everything else is already in site.css. */

/* ---------- C01 Opener: the title plate with a card to their page beside it ---------- */
.wings-opener { width: 100%; }
.wings-their-page { text-decoration: none; color: var(--nda-ink-primary); transform: rotate(2.5deg); }
.wings-their-page > .ui-card-inner { flex: 1; display: flex; flex-direction: column; gap: var(--nda-sp-1); transform: rotate(-2.5deg); }
.wings-their-page-media { display: block; margin: calc(var(--nda-sp-3) * -1) calc(var(--nda-sp-3) * -1) var(--nda-sp-2); border-bottom: var(--nda-stroke-base) solid var(--nda-ink-primary); line-height: 0; }
.wings-their-page-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.wings-their-page .nano-label { margin: 0; }
.wings-their-page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--nda-sp-2); font-family: var(--nda-font-header); font-weight: 700; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.wings-their-page-title svg { flex: none; width: 40px; height: 40px; }
.wings-their-page:hover > .ui-card-inner { background-image: repeating-linear-gradient(-45deg, rgba(26, 26, 26, 0.08), rgba(26, 26, 26, 0.08) 3px, transparent 3px, transparent 12px); }
@media (min-width: 900px) {
    .wings-opener { display: grid; grid-template-columns: minmax(0, 1fr) 412px; column-gap: var(--nda-sp-4); align-items: center; }
    /* The plate still bleeds to the window edge: the column is narrower than the page, so the bleed is worked out from the page width. */
    .wings-opener > .name-box.edge-left {
        margin-left: calc((100% + 412px + var(--nda-sp-4) - 100vw) / 2);
        padding-left: calc((100vw - 100% - 412px - var(--nda-sp-4)) / 2 + var(--nda-sp-3));
    }
}
@media (max-width: 899.98px) {
    .wings-their-page { margin-top: var(--nda-sp-3); }
    .wings-their-page-media { margin: calc(var(--nda-sp-2) * -1) calc(var(--nda-sp-2) * -1) var(--nda-sp-2); }
}

/* ---------- C02 + C06: a picture at the foot of a live card, the way the home page pain cards carry theirs ---------- */
.ui-card-inner.wings-has-media { display: flex; flex-direction: column; }
.ui-card-inner.wings-has-media > p { padding-bottom: var(--nda-sp-3); }
.ui-card-inner.wings-has-media > .pain-card-media { margin-top: auto; }

/* ---------- C03: the parent's words and the statement, set big on the Navy breakout ---------- */
.wings-quote { margin: 0; max-width: none; font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-h2); line-height: 1.1; letter-spacing: -0.02em; color: var(--nda-canvas-container); text-wrap: balance; }
.wings-statement { font-size: var(--nda-text-h2); letter-spacing: -0.02em; margin-bottom: var(--nda-sp-2); }
@media (min-width: 900px) {
    .wings-quote-block .wings-statement { margin-top: calc(var(--nda-text-label) * 1.6 + var(--nda-sp-1)); }
}

/* ---------- C04: the room, in four parts, with its key ---------- */
.wings-z03 > * { width: 100%; box-sizing: border-box; }
.wings-room { margin: 0; }
.wings-room-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); background-color: var(--nda-canvas-container); }
.wings-room-key > div { padding: var(--nda-sp-2); }
.wings-room-key > div + div { border-left: var(--nda-stroke-base) solid var(--nda-ink-primary); }
.wings-room-key h3 { margin: 0 0 var(--nda-sp-1); }
.wings-room-key p { margin: 0; font-size: var(--nda-text-small); }
@media (max-width: 899.98px) {
    .wings-room-key { grid-template-columns: minmax(0, 1fr); }
    .wings-room-key > div + div { border-left: 0; border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); }
}

/* ---------- C05: the twelve weeks as a ruler with an open end ---------- */
.wings-ruler { display: grid; grid-template-columns: repeat(3, minmax(0, 4fr)) minmax(0, 3fr); align-items: end; margin-top: var(--nda-sp-3); }
/* Each column takes its three rows (label, heading, cells) from the ruler itself, so the labels and headings line up across the three blocks even when one heading wraps and another does not. */
.wings-ruler > li { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: end; min-width: 0; }
.wings-ruler > .wings-ruler-open { grid-row: 3; grid-column: 4; }   /* named column: an item pinned to a row only is placed before the others and took column 1, ahead of week 1 */
.wings-ruler .nano-label { margin: 0 0 var(--nda-sp-1); }
.wings-ruler h3 { margin: 0 0 var(--nda-sp-2); padding-right: var(--nda-sp-2); }
.wings-ruler-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 76px; box-sizing: border-box; border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-shadow: var(--nda-shadow-md); }
.wings-ruler > li + li .wings-ruler-cells { margin-left: calc(var(--nda-stroke-base) * -1); }
.wings-ruler-cells > span { display: flex; align-items: center; justify-content: center; font-family: var(--nda-font-header); font-weight: 700; font-size: 1.75rem; line-height: 1; }
.wings-ruler-cells > span + span { border-left: var(--nda-stroke-base) solid var(--nda-ink-primary); }
.wings-ruler > .is-weeks-1 .wings-ruler-cells { background-color: var(--nda-identity-secondary); color: var(--nda-ink-primary); }
.wings-ruler > .is-weeks-2 .wings-ruler-cells { background-color: var(--nda-identity-primary); color: var(--nda-canvas-container); }
.wings-ruler > .is-weeks-3 .wings-ruler-cells { background-color: var(--nda-identity-primary); color: var(--nda-canvas-container); }
.wings-ruler > .wings-ruler-open { margin-left: var(--nda-sp-2); }
.wings-ruler-open > span { display: flex; align-items: center; height: 76px; box-sizing: border-box; padding: 0 var(--nda-sp-2); border: var(--nda-stroke-base) dashed var(--nda-ink-primary); font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--nda-ink-secondary); }
@media (max-width: 899.98px) {
    .wings-ruler { grid-template-columns: minmax(0, 1fr); gap: var(--nda-sp-3); }
    .wings-ruler > li { display: flex; flex-direction: column; grid-row: auto; }
    .wings-ruler > .wings-ruler-open { grid-row: auto; grid-column: auto; }   /* the wide layout pins this to row 3; stacked, that put it above weeks 9 to 12. It comes last. */
    .wings-ruler > li + li .wings-ruler-cells { margin-left: 0; }
    .wings-ruler > .wings-ruler-open { margin-left: 0; }
    .wings-ruler-cells, .wings-ruler-open > span { height: 60px; }
}

/* ---------- C07: two meetings with the empty middle, in place of the table ---------- */
.wings-meetings { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4.6fr) minmax(0, 3fr); gap: var(--nda-sp-2); align-items: stretch; padding-top: var(--nda-sp-3); }
.wings-meet { position: relative; display: flex; flex-direction: column; min-width: 0; }
.wings-meet.is-solid { background-color: var(--nda-canvas-container); border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-shadow: var(--nda-shadow-md); }
.wings-meet.is-empty { border: var(--nda-stroke-base) dashed var(--nda-ink-primary); }
.wings-meet-when { margin: 0; max-width: none; padding: var(--nda-sp-1) var(--nda-sp-2); font-family: var(--nda-font-mono); font-size: var(--nda-text-label); letter-spacing: 0.05em; text-transform: uppercase; }
.wings-meet.is-solid .wings-meet-when { background-color: var(--nda-canvas-secondary); color: var(--nda-canvas-container); }
.wings-meet.is-empty .wings-meet-when { color: var(--nda-ink-secondary); border-bottom: var(--nda-stroke-base) dashed var(--nda-ink-primary); }
.wings-meet-body { padding: var(--nda-sp-2); }
.wings-meet-what { font-size: var(--nda-text-h2); letter-spacing: -0.02em; margin: 0 0 var(--nda-sp-1); }
.wings-meet.is-empty .wings-meet-what { font-size: var(--nda-text-h2); }
.wings-meet-body p { margin: 0; }
.wings-meet-stamp { position: absolute; left: var(--nda-sp-2); top: calc(var(--nda-sp-2) * -1); margin: 0; }
.wings-meet-cost { display: block; margin: var(--nda-sp-3) 0 0; }
@media (max-width: 899.98px) {
    .wings-meetings { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- C09: the front door in the email section's picture slot ---------- */
.wings-door { max-width: 412px; transform: rotate(-2deg); }

/* ---------- C10: Pass this page on, as two plates ---------- */
.wings-pass-on { display: flex; flex-direction: column; margin-top: var(--nda-sp-4); }
.wings-plate { text-decoration: none; color: var(--nda-ink-primary); }
.wings-plate > .ui-card-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nda-sp-2); }
.wings-plate-text { font-family: var(--nda-font-header); font-weight: 700; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.wings-plate svg { flex: none; width: 40px; height: 40px; }
/* A plate with a picture: the picture, the words, the arrow. Below 900px the picture takes its own row above the words. */
.wings-plate.has-pic > .ui-card-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.wings-plate-pic { display: block; width: 80px; height: 80px; }
@media (max-width: 900px) {
  .wings-plate.has-pic > .ui-card-inner { grid-template-columns: 1fr auto; }
  .wings-plate.has-pic .wings-plate-pic { grid-column: 1 / -1; }
}
.wings-plate:hover > .ui-card-inner { background-image: repeating-linear-gradient(-45deg, rgba(26, 26, 26, 0.08), rgba(26, 26, 26, 0.08) 3px, transparent 3px, transparent 12px); }

/* ---------- Freelance Mentorship handover follow-up: two fixes found in the preview check ---------- */
/* C01: the card is an <a>. Below 900px it is not a grid item, so it stayed inline: no frame, no tilt, no gap. Card links elsewhere get display: flex from .grid-*.is-stretch. */
.wings-their-page { display: flex; }
/* C07: the stamp covered the top of "Before the first day". Sit it on the card's top edge instead. */
.wings-meet-stamp { top: auto; bottom: 100%; }

/* ============ Freelance Mentorship changes from Cheryl's feedback (9 Oct 2026) ============
   The eight pairs on /freelance-mentorship, the forty-two on /freelance-mentorship-for-you, and the layout around the new sections.
   Every colour, edge, shadow and size is a site token. Both lists are the core table, set larger and stacked below 900px. */

/* ---------- The match (/freelance-mentorship): figure, label, pairs, line and plate run the full column ---------- */
.wings-match > * { width: 100%; }
.wings-match > .nano-label { margin-top: var(--nda-sp-2); }

/* The pairs: what they do at home beside what a client pays for. The paid work is the stronger of the two, at H3 weight. */
.wings-pairs { margin: 0; font-size: var(--nda-text-body); }
.wings-pairs th { width: 50%; padding: var(--nda-sp-1) var(--nda-sp-2); }
.wings-pairs td { padding: var(--nda-sp-2); vertical-align: middle; }
.wings-pairs td + td { font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-h3); line-height: 1.1; text-transform: uppercase; }

/* ---------- The work (/freelance-mentorship-for-you): six groups that open and close, each a white box with its table ---------- */
.wings-work { display: flex; flex-direction: column; gap: var(--nda-sp-2); }
.wings-work-group { background-color: var(--nda-canvas-container); border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-shadow: var(--nda-shadow-md); }
.wings-work-group > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--nda-sp-2);
    padding: var(--nda-sp-2) var(--nda-sp-3); cursor: pointer; list-style: none;
    font-family: var(--nda-font-header); font-weight: 700; font-size: var(--nda-text-h3); line-height: 1.1; text-transform: uppercase;
}
.wings-work-group > summary::-webkit-details-marker { display: none; }
.wings-work-group > summary::after { content: "+"; content: "+" / ""; flex: none; font-size: 1.75rem; line-height: 1; }   /* the sign is decoration: the group's open state is already announced */
.wings-work-group[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.wings-work-group > summary:hover { background-image: repeating-linear-gradient(-45deg, rgba(26, 26, 26, 0.08), rgba(26, 26, 26, 0.08) 3px, transparent 3px, transparent 12px); }
.wings-work-group[open] > summary { border-bottom: var(--nda-stroke-base) solid var(--nda-ink-primary); }
.wings-work-table { margin: 0; box-shadow: none; border-style: hidden; }   /* the group's box is the outer edge: the table keeps only its inside lines */
.wings-work-table th:nth-child(-n+2) { width: 40%; }
.wings-work-table td:nth-child(2) { font-weight: 700; }

/* Below 900px each row stacks, and every cell carries its column's label. */
@media (max-width: 899.98px) {
    .wings-pairs, .wings-pairs tbody, .wings-pairs tr, .wings-pairs td,
    .wings-work-table, .wings-work-table tbody, .wings-work-table tr, .wings-work-table td { display: block; width: auto; }
    .wings-pairs thead, .wings-work-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .wings-pairs { border: var(--nda-stroke-base) solid var(--nda-ink-primary); }
    .wings-pairs td, .wings-work-table td { border: 0; padding: var(--nda-sp-1) var(--nda-sp-2) 0; }
    .wings-pairs td:first-child, .wings-work-table td:first-child { padding-top: var(--nda-sp-2); }
    .wings-pairs td:last-child, .wings-work-table td:last-child { padding-bottom: var(--nda-sp-2); }
    .wings-pairs tr + tr, .wings-work-table tr + tr { border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); }
    .wings-pairs td::before, .wings-work-table td::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-family: var(--nda-font-mono); font-weight: 400; font-size: var(--nda-text-label); line-height: 1.6; letter-spacing: 0.05em; text-transform: uppercase;
        color: var(--nda-ink-secondary);
    }
    .wings-work-group > summary { padding: var(--nda-sp-2); }
}
@media print {
    .wings-work-group > summary::after { content: none; }
    .wings-pairs tr, .wings-work-table tr { break-inside: avoid; }
}

/* ---------- The price (/freelance-mentorship): the up-front option in the ink bar, six plain cards under it ---------- */
.wings-price-cards { margin-top: var(--nda-sp-3); }

/* ============ Freelance Mentorship pictures (9 Oct 2026): one beside each paid-work pair, one spot at the top of each price card ============ */
/* The paid-work cell stays a table cell (flex on it would double the table's lines), so the picture and the words sit side by side as two centred inline blocks. */
.wings-pairs td + td > * { display: inline-block; vertical-align: middle; }
.wings-pairs td + td > span { width: calc(100% - 80px - var(--nda-sp-2)); margin-left: var(--nda-sp-2); }
@media (max-width: 899.98px) {
    .wings-pair-pic { width: 56px; height: 56px; }
    .wings-pairs td + td > span { width: calc(100% - 56px - var(--nda-sp-2)); }
}
.wings-spot { display: block; margin-bottom: var(--nda-sp-1); }

/* ---------- After (/freelance-mentorship-for-you): the picture beside the statement; below 900px it sits above it ---------- */
.wings-after { align-items: center; }

/* ============ Freelance Mentorship toolbar feedback (9 Oct 2026) ============ */
/* The picture at the foot of a Freelance Mentorship card met the card's own 3px edge with a 3px edge of its own, so the lines round it read 6px.
   It keeps only its top line, the divider; the card's edge does the rest. */
.ui-card-inner.wings-has-media > .pain-card-media { border-width: var(--nda-stroke-base) 0 0; }
/* /freelance-mentorship: a small plate fixed to the bottom-left corner that says the page is for parents, with the way to the young adult's page. */
.wings-audience {
    position: fixed; left: var(--nda-sp-2); bottom: var(--nda-sp-2); z-index: 50;
    display: flex; align-items: center; gap: var(--nda-sp-1);
    padding: 6px 12px 6px 6px; max-width: calc(100vw - var(--nda-sp-2) * 2);
    background-color: var(--nda-canvas-container); border: var(--nda-stroke-base) solid var(--nda-ink-primary); box-shadow: var(--nda-shadow-sm);
    font-family: var(--nda-font-mono); font-size: var(--nda-text-label); line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase;
}
.wings-audience-label { flex: none; padding: 4px 8px; font-weight: 700; color: var(--nda-canvas-container); background-color: var(--nda-identity-primary); }
.wings-audience a { color: var(--nda-ink-primary); }
@media print { .wings-audience { display: none; } }

/* ============ /freelance-mentorship-for-you: opener like the parent page, group icons, parents box (9 Oct 2026) ============ */
/* One icon at the left of each work-group heading; the +/− stays at the right. */
.wings-group-icon { flex: 0 0 auto; width: 48px; height: 48px; margin-right: var(--nda-sp-2); }
.wings-work-group > summary::after { margin-left: auto; }   /* space-between would centre the words between icon and sign; the sign takes the slack instead */
@media (max-width: 899.98px) {
    .wings-group-icon { width: 40px; height: 40px; }
}
/* One sentence in a wide box runs the width of the box instead of breaking at the prose measure. */
.wings-full-measure p { max-width: none; }

/* ---------- The photograph of the room (/freelance-mentorship): a plain note under it, ruled off like the key under the drawing ---------- */
.wings-photo { margin: 0; }
.wings-photo-note { padding: var(--nda-sp-2); border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); font-size: var(--nda-text-small); }

/* ============ Enquiry form (/freelance-mentorship and /freelance-mentorship-for-you, 12 Oct 2026) ============
   The form is built from the email capture's own label and field, one under the other, with the primary button last.
   Every colour, edge and size is a site token. */
.enquiry-stack { display: flex; flex-direction: column; gap: var(--nda-sp-3); min-width: 0; }
.enquiry-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nda-sp-2); width: 100%; max-width: 560px; }
.enquiry-field { width: 100%; }
.enquiry-field .email-capture-input { display: block; width: 100%; box-sizing: border-box; }
.enquiry-field textarea.email-capture-input { min-height: 120px; padding: 12px var(--nda-sp-2); line-height: 1.5; resize: vertical; }
.enquiry-hint { margin: var(--nda-sp-1) 0 0; max-width: none; }
.enquiry-form .email-capture-error { margin-top: 0; }
/* One box a person never sees and so leaves empty. It is off the screen, out of the tab order and hidden from screen readers. */
.enquiry-leave-blank { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* What happens next: under the form, above a ruled line, and still there after the form has been sent. */
.enquiry-next { margin-top: var(--nda-sp-3); padding-top: var(--nda-sp-2); border-top: var(--nda-stroke-base) solid var(--nda-ink-primary); }
.enquiry-next ul { margin-bottom: 0; max-width: none; }
/* On /freelance-mentorship-for-you the form sits straight on the name box, with its own heading and one line under it. */
.enquiry-block { margin-bottom: var(--nda-sp-3); }
.enquiry-block .enquiry-form { margin-bottom: var(--nda-sp-2); }
.enquiry-next li:last-child { margin-bottom: 0; }
@media (max-width: 899.98px) {
    .enquiry-form .btn { width: 100%; }
}

/* ============ FAQ Accordion ============ */
.faq-section { width: 100%; }
.faq-accordion {
    display: flex;
    flex-direction: column;
    margin-top: var(--nda-sp-3);
}
.faq-item {
    background: #ffffff;
    border: 2px solid #000000;
    box-shadow: 3px 3px 0px 0px #000000;
    margin-bottom: 1rem;
    transition: all 0.15s ease-in-out;
}
.faq-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem;
    font-family: var(--nda-font-header);
    font-weight: 700;
    font-size: 1.125rem;
    color: #000000;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.faq-trigger::-webkit-details-marker { display: none; }
.faq-trigger::marker { display: none; }
.faq-trigger:hover {
    background-color: var(--nda-canvas-primary);
}
.faq-trigger:focus-visible {
    outline: 2px solid #000000;
    outline-offset: -2px;
}
.faq-icon {
    font-family: var(--nda-font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    margin-left: 1rem;
    flex-shrink: 0;
}
details.faq-item:not([open]) .faq-icon::before { content: "+"; }
details.faq-item[open] .faq-icon::before { content: "\2212"; }
.faq-answer {
    padding: 0.5rem 1.25rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    font-family: var(--nda-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #1a1a1a;
    max-width: 65ch;
}
.faq-answer p {
    margin: 0;
    max-width: 65ch;
}