/* PRAE — /security/
   Black and white only, like the rest of NULL Ventures.
   The section is a walk through the inside of a working system: full-bleed
   photographs taken behind the show, set like plates in a monograph, and
   black rooms of type between them: small type, numbered rooms and a
   restrained navigation. The bottom E stroke echoes the parent brand’s terminal cursor.
   CSP-safe: no inline styles or scripts. */

@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  /* layout: one reading column inside full-bleed photographic plates */
  --ink: #000;
  --text: #f2f2f2;
  --body: #c8c8c8;
  --dim: #8c8c8c;
  --line: #2b2b2b;
  --paper: #efefef;
  --paper-ink: #161616;
  --paper-body: #3d3d3d;
  --paper-line: #cfcfcf;
  --display: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --frame: 1160px;
  --reader: 660px;
  --gutter: clamp(24px, 4vw, 52px);
  --page-width: min(var(--frame), calc(100% - 2 * var(--gutter)));
  --section-space: clamp(72px, 8.4vw, 124px);
  --column-gap: clamp(32px, 5.5vw, 84px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --blink: 1060ms; /* Match the Null Ventures terminal cursor. */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-synthesis: none; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: #6a6a6a; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }
p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font-family: var(--code); font-size: .86em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 14px; background: #fff; color: #000; text-decoration: none; }
.skip-link:focus { top: 10px; }
.frame { width: var(--page-width); margin-inline: auto; }
.reader { width: min(var(--reader), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ---------- Header ---------- */

.sec-header { position: relative; z-index: 10; display: flex; align-items: center; gap: 22px; padding: 12px 24px 12px 22px; }
.has-plate .sec-header { position: absolute; inset: 0 0 auto 0; }
.brand { flex: none; width: 76px; height: 76px; display: grid; place-items: center; background: #000; outline-offset: -4px; }
.wordmark { position: relative; display: block; width: 60px; aspect-ratio: 581 / 304; }
.wordmark img { width: 100%; height: 100%; object-fit: contain; }
.cursor { position: absolute; left: 63%; top: 51.1%; width: 35.3%; height: 10.2%; background: #fff; animation: blink 1060ms steps(1, end) infinite; }
@keyframes blink { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
.section-name { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--body); text-decoration: none; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.22); }
.section-name:hover { color: #fff; }

.sec-nav { margin-left: auto; }
.sec-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.sec-nav a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--body); text-decoration: none; }
.sec-nav a:hover, .sec-nav a[aria-current] { color: #fff; }
.sec-nav a[aria-current] { text-decoration: underline; text-underline-offset: .5em; }
.index { display: none; }
@media (max-width: 980px) { .sec-nav { display: none; } .index { display: block; } }

/* The menu on narrow screens: the whole section, behind one word */
.index { margin-left: auto; position: relative; }
.index summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--body); }
.index summary::-webkit-details-marker { display: none; }
.index summary::after { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transition: background-color .2s ease; }
.index summary:hover, .index[open] summary { color: #fff; }
.index[open] summary::after { background: currentColor; }
.index-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, calc(100vw - 28px));
  padding: 22px 24px 20px; background: #000; border: 1px solid #333;
}
.index-panel ol, .index-panel ul { list-style: none; margin: 0; padding: 0; }
.index-panel .rooms a { display: block; padding: 7px 0; font-family: var(--display); font-size: 19px; color: #e8e8e8; text-decoration: none; }
.index-panel .pages { margin-top: 16px; padding-top: 14px; border-top: 1px solid #2b2b2b; }
.index-panel .pages a { display: block; padding: 5px 0; font-size: 14px; color: var(--body); text-decoration: none; }
.index-panel a:hover, .index-panel a[aria-current] { color: #fff; }
.index-panel .pages a[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: #fff; vertical-align: middle; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 20px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid { background: #e6e6e6; color: #0b0b0b; }
.btn-solid:hover { background: #fff; }
.btn-line { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-line:hover { border-color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.quiet-links { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.quiet-links a { font-size: 15px; letter-spacing: .01em; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: rgba(255,255,255,.4); }
.quiet-links a:hover { text-decoration-color: #fff; }

/* ---------- Plates (full-bleed photographs) ---------- */

.plate { position: relative; isolation: isolate; overflow: hidden; background: #050505; }
.plate picture, .plate > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* The opening plate */
.hero { min-height: max(640px, 100svh); display: flex; align-items: stretch; }
.hero img { object-position: 62% 40%; }
.hero::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.9) 88%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
}
.hero-body {
  position: relative; z-index: 1; width: min(var(--frame), calc(100% - 2 * var(--gutter))); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 0 clamp(72px, 9vh, 120px);
}
.hero h1 {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(44px, 6.4vw, 104px); line-height: .94; letter-spacing: -.032em; color: #fff;
}
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ln > span { display: block; }
.hero .sub { margin-top: 18px; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.8vw, 26px); letter-spacing: -.01em; color: #dcdcdc; }
.hero .lede { margin-top: 22px; max-width: 32em; font-size: 16px; line-height: 1.6; color: var(--body); }
.hero .hero-actions { margin-top: 30px; }
.hero .quiet-links { margin-top: 22px; }

/* Interior plates */
.room { min-height: clamp(380px, 44vw, 600px); display: flex; align-items: flex-end; }
.room::after { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.35) 52%, rgba(0,0,0,.92) 86%, #000 100%); }
.room-body { position: relative; z-index: 2; width: min(var(--frame), calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 0 0 clamp(32px, 4vw, 56px); }
.room-body .title { max-width: 12.5em; }
.room-body .questions { margin-top: 30px; max-width: 26em; font-family: var(--display); font-weight: 400; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.35; color: #f0f0f0; }
.room-body .more { margin-top: 22px; max-width: 36em; color: var(--body); }
.strip { height: clamp(200px, 22vw, 320px); }
.strip::after { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.15) 70%, #000 100%); }
.strip img { object-position: 50% 40%; }

/* ---------- Rooms of type ---------- */

.band { padding: clamp(56px, 6.5vw, 96px) 0; }
.band + .band::before { content: ""; display: block; width: min(var(--frame), calc(100% - 2 * var(--gutter))); height: 1px; margin: calc(-1 * var(--section-space)) auto var(--section-space); background: var(--line); }
.hero + .band { padding-top: clamp(40px, 5vw, 72px); }
.room + .band { padding-top: clamp(24px, 3vw, 40px); }
.title {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -.022em; color: #fff; text-wrap: balance;
}
.band-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; margin-bottom: 48px; }
.band-head > p { padding-top: .5em; }
.band-head p { color: var(--body); max-width: 33em; }
.hint { font-size: 14px; color: var(--dim); }
.premise { margin-bottom: 0; }

/* The four gaps: one line, broken in four places. Each break carries its name. */
.gap-line { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items: center; margin: 0 0 48px; padding-bottom: 50px; }
.node { position: relative; width: 9px; height: 23px; display: flex; align-items: center; }
.node::before { content: ""; width: 9px; height: 9px; background: #fff; }
.node span { position: absolute; left: 0; top: 36px; white-space: nowrap; font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.3; color: #fff; }
.node:last-child span { left: auto; right: 0; text-align: right; }
.node small { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--dim); }
.run { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 0 2px; }
.run::before, .run::after { content: ""; flex: 1; height: 1px; background: #fff; }
.gap-tab { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--body); text-decoration: none; white-space: nowrap; }
.gap-tab:hover { color: #fff; text-decoration: underline; }
.gap-list { border-top: 1px solid var(--line); }
.gap-item { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: 48px; padding: 32px 0 34px; border-bottom: 1px solid var(--line); }
.gap-item h3,.gap-item h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(32px, 3.4vw, 46px); line-height: 1; letter-spacing: -.03em; color: #fff; }
.gap-item .between { margin-top: 14px; font-size: 15px; color: var(--dim); max-width: 22em; }
.gap-item .what { color: var(--body); }
.gap-item .ask { margin-top: 18px; font-family: var(--display); font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.32; color: #fff; }
.gap-item .keep { margin-top: 18px; font-size: 15px; color: var(--body); }
.gap-item .keep b { color: #fff; font-weight: 700; }
.gap-item:target h3,.gap-item:target h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.gaps-note { margin-top: 24px; font-size: 14px; color: var(--dim); max-width: 46em; }

@media (max-width: 860px) {
  .band-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
  .gap-line { grid-template-columns: 1fr; justify-items: start; padding-bottom: 0; }
  .node { width: auto; height: auto; gap: 16px; }
  .node span, .node:last-child span { position: static; text-align: left; }
  .run { flex-direction: column; align-items: flex-start; gap: 10px; height: 108px; width: auto; padding: 8px 0 8px 4px; }
  .run::before, .run::after { flex: 1; width: 1px; height: auto; }
  .gap-item { grid-template-columns: 1fr; gap: 14px; padding: 26px 0 28px; }
}

/* Launch profile: a white dossier on black */
.profile { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.profile-intro p { margin-top: 18px; color: var(--body); }
.profile-intro .assure { color: #fff; }
.dossier { background: var(--paper); color: var(--paper-ink); padding: 34px 36px 30px; }
.dossier :focus-visible { outline-color: #000; }
.pins { display: flex; gap: 6px; align-items: center; margin-bottom: 28px; }
.pins i { width: 26px; height: 3px; background: #c4c4c4; }
.pins i.on, .pins i.now { background: var(--paper-ink); }
.pins .count { margin-left: 12px; font-size: 13px; color: #5b5b5b; }
fieldset.profile-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.profile-step legend { padding: 0; font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -.015em; color: var(--paper-ink); }
.profile-step .help { margin: 8px 0 20px; font-size: 14px; color: #5b5b5b; }
.choice { display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; margin-top: 8px; border: 1px solid #c9c9c9; cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
.choice:hover { border-color: #7a7a7a; }
.choice input { appearance: none; flex: none; margin: 3px 0 0; width: 16px; height: 16px; border: 1px solid #6b6b6b; background: #fff; }
.choice input[type="radio"] { border-radius: 50%; }
.choice input:checked { background: var(--paper-ink); border-color: var(--paper-ink); box-shadow: inset 0 0 0 3px #fff; }
.choice:has(input:checked) { border-color: var(--paper-ink); background: #fff; }
.choice input:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.dossier .btn-solid { background: var(--paper-ink); color: #fff; }
.dossier .btn-solid:hover { background: #000; }
.dossier .btn-line { border-color: #8a8a8a; color: var(--paper-ink); }
.dossier .btn-line:hover { border-color: #000; }
.dossier .btn[disabled] { opacity: .35; cursor: default; }
.step-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; }
.form-error { min-height: 1.4em; margin-top: 12px; color: #8a1d12; font-size: 14px; }
.noscript-note { color: var(--paper-body); }
.result h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 30px; letter-spacing: -.015em; }
.result .context { margin-top: 10px; color: var(--paper-body); }
.result .caveat { margin-top: 10px; font-size: 14px; color: #5b5b5b; }
.plan { list-style: none; margin: 14px 0 0; padding: 0; }
.plan li { position: relative; padding: 18px 0 18px 44px; border-top: 1px solid var(--paper-line); }
.plan li::before { content: counter(list-item); position: absolute; left: 0; top: 16px; font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--paper-ink); }
.plan strong { font-family: var(--display); font-weight: 500; font-size: 19px; }
.plan p { margin-top: 6px; color: var(--paper-body); font-size: 15.5px; }
.plan .keep { color: var(--paper-ink); }
.plan .tags { margin-top: 8px; font-size: 13px; color: #5b5b5b; }
.result .actions { margin-top: 22px; }
.copy-view { margin-top: 18px; }
.copy-view summary { cursor: pointer; color: var(--paper-body); font-size: 15px; }
.copy-view textarea { margin-top: 10px; width: 100%; min-height: 220px; padding: 12px; background: #fff; border: 1px solid #c9c9c9; font-family: var(--code); font-size: 13px; color: var(--paper-ink); }
@media (max-width: 900px) { .profile { grid-template-columns: 1fr; gap: 30px; } .dossier { padding: 26px 20px 24px; } }

/* The bench: recorded runs of the Ship Kit alpha */
.bench { border: 1px solid #3a3a3a; background: #000; }
.bench-top { display: grid; grid-template-columns: auto 1fr 1fr; border-bottom: 1px solid #3a3a3a; }
.switch { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px 28px; border-right: 1px solid #3a3a3a; }
.switch-label { font-size: 13px; color: var(--dim); }
.switch-track { display: inline-flex; border: 1px solid #5a5a5a; }
.switch-track button { min-height: 42px; padding: 8px 16px; border: 0; background: none; color: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.switch-track button[aria-pressed="true"] { background: #fff; color: #000; }
.readout { padding: 22px 28px; border-right: 1px solid #3a3a3a; display: flex; flex-direction: column; justify-content: center; }
.readout:last-child { border-right: 0; }
.readout .num { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 6vw, 84px); line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.readout .lab { margin-top: 10px; font-size: 14px; color: var(--body); }
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: 20px minmax(140px, .28fr) minmax(0, 1fr); gap: 20px; padding: 22px 28px; border-top: 1px solid #202020; }
.row:first-child { border-top: 0; }
.led { width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; border: 1.5px solid #fff; }
.led[data-outcome="fail"] { background: #fff; }
.led[data-outcome="pass"] { background: transparent; }
.led[data-outcome="inconclusive"], .led[data-outcome="not_tested"] { background: linear-gradient(90deg, #fff 50%, transparent 50%); }
.row .aid { font-family: var(--code); font-size: 12.5px; color: var(--body); padding-top: 3px; }
.row .aid b { display: block; margin-top: 6px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.row h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 18px; color: #fff; }
.row p { margin-top: 6px; font-size: 15px; color: var(--body); }
.row .limit { color: var(--dim); font-size: 14px; }
.bench-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 28px; border-top: 1px solid #3a3a3a; }
.bench-foot p { max-width: 46em; color: var(--body); font-size: 15px; }
.bench-foot strong { color: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--dim); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend .led { margin: 0; }
@media (max-width: 860px) {
  .bench-top { grid-template-columns: 1fr 1fr; }
  .switch { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #3a3a3a; }
  .row { grid-template-columns: 16px minmax(0, 1fr); padding: 20px; gap: 14px; }
  .row .aid, .row > div:last-child { grid-column: 2; }
}

/* The guide */
.manual { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 72px; align-items: center; }
.booklet {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 8.5 / 11; padding: 28px 26px 26px;
  background: var(--paper); color: var(--paper-ink); text-decoration: none;
  box-shadow: 0 30px 60px rgba(255,255,255,.04), 0 0 0 1px #000;
}
.booklet:hover .bt { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; }
.booklet span { display: block; }
.booklet .ed { font-size: 12.5px; color: #5b5b5b; }
.booklet .bt { margin-top: auto; font-family: var(--display); font-weight: 500; font-size: clamp(44px, 4.6vw, 60px); line-height: .92; letter-spacing: -.04em; }
.booklet .bs { margin-top: 16px; padding-top: 14px; border-top: 1px solid #bdbdbd; font-size: 14px; color: var(--paper-body); }
.manual-copy p { margin-top: 18px; color: var(--body); max-width: 34em; }
.manual-copy .actions { margin-top: 28px; }
.manual-copy .license { font-size: 14px; color: var(--dim); }
@media (max-width: 860px) { .manual { grid-template-columns: 1fr; gap: 40px; } .booklet { max-width: 280px; } }

/* Failure Ledger */
.log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.log li { border-bottom: 1px solid var(--line); }
.log a { display: grid; grid-template-columns: 160px minmax(0, 1fr) 150px; gap: 28px; padding: 28px 0; text-decoration: none; }
.log a:hover h3,.log a:hover h2 { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.log .code { font-family: var(--code); font-size: 12.5px; color: #fff; }
.log .kind { display: block; margin-top: 6px; font-size: 13px; color: var(--dim); }
.log h3,.log h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 23px; line-height: 1.22; letter-spacing: -.01em; color: #fff; }
.log p { margin-top: 8px; color: var(--body); font-size: 15px; }
.log .meta { font-size: 13px; color: var(--dim); text-align: right; }
.log .meta b { display: block; color: #fff; font-weight: 700; font-size: 14px; }
.log-note { margin-top: 22px; font-size: 14px; color: var(--dim); }
@media (max-width: 760px) { .log a { grid-template-columns: 1fr; gap: 8px; } .log .meta { text-align: left; } }

/* Forms */
.field { margin-bottom: 18px; }
.field label, .field legend { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: #fff; }
.field .opt { font-weight: 400; color: var(--dim); }
.field input:not([type="radio"]):not([type="checkbox"]), .field textarea {
  width: 100%; padding: 12px 14px; background: #0a0a0a; border: 1px solid #444; border-radius: 0; color: #fff;
}
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field textarea:focus { outline: 2px solid #fff; outline-offset: 1px; border-color: #fff; }
.field fieldset { border: 0; margin: 0; padding: 0; }
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.field .choice { display: flex; margin: 0; border-color: #444; font-size: 15px; font-weight: 400; color: #fff; }
.field .choice:hover { border-color: #9a9a9a; }
.field .choice input { background: #000; border-color: #9a9a9a; }
.field .choice input:checked { background: #fff; border-color: #fff; box-shadow: inset 0 0 0 3px #000; }
.field .choice:has(input:checked) { border-color: #fff; background: #0d0d0d; }
.field .choice input:focus-visible { outline-color: #fff; }
.hp { position: absolute !important; left: -9999px; }
.form-status { margin-top: 14px; min-height: 1.5em; font-size: 15px; color: #fff; }
@media (max-width: 900px) { .topics { grid-template-columns: 1fr; } }

/* ---------- Products ---------- */

.anchor { position: relative; top: -20px; display: block; }
.status { display: inline-block; padding: 2px 9px; border: 1px solid #5a5a5a; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body); white-space: nowrap; }
.status[data-status="available"] { border-color: #fff; background: #fff; color: #000; }
.status[data-status="preview"] { border-color: #fff; color: #fff; }
.families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #3a3a3a; }
.family { display: flex; flex-direction: column; padding: 32px 30px 30px; }
.family + .family { border-left: 1px solid #3a3a3a; }
.family h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.025em; }
.family h3 a { color: #fff; text-decoration: none; }
.family h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.family .promise { margin-top: 14px; color: var(--body); }
.family-kind { margin-top: 14px; font-size: 13px; color: var(--dim); }
.family-items { list-style: none; margin: 18px 0 26px; padding: 0; border-top: 1px solid var(--line); }
.family-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fi-title { font-weight: 700; color: #fff; font-size: 15.5px; }
.fi-title small, .offer h3 small { font-weight: 400; font-size: 12.5px; color: var(--dim); }
.fi-price { grid-column: 1 / -1; font-size: 14px; color: var(--body); }
.family .actions { margin-top: auto; }
.availability { margin-top: 20px; max-width: 52em; font-size: 15px; color: var(--body); }
@media (max-width: 980px) { .families { grid-template-columns: 1fr; } .family + .family { border-left: 0; border-top: 1px solid #3a3a3a; } .family { padding: 28px 22px; } }

.offers { margin-block: 8px 12px; }
.offers-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .offers-pair { grid-template-columns: 1fr; } }
.offer { padding: 30px 32px 26px; border: 1px solid #3a3a3a; }
.offer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--dim); }
.offer h3 { margin: 14px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.025em; color: #fff; }
.offer-price { margin-top: 12px; font-family: var(--display); font-size: 24px; color: #fff; }
.offer-price small { font-family: var(--sans); font-size: 15px; color: var(--body); }
.offer-price .planned { margin-left: 12px; padding: 2px 8px; border: 1px dashed #8a8a8a; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body); vertical-align: middle; }
.offer-facts { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin: 20px 0 0; border-top: 1px solid var(--line); }
.offer-facts dt, .offer-facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.offer-facts dt { color: #fff; font-weight: 700; }
.offer-facts dd { color: var(--body); }
.offer .actions { margin-top: 22px; }
.offer .reviewed { margin-top: 14px; font-size: 13px; color: var(--dim); }
@media (max-width: 640px) { .offer { padding: 24px 20px; } .offer-facts { grid-template-columns: 1fr; } .offer-facts dt { padding-bottom: 0; border-bottom: 0; } }

.sub-title { margin: 56px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.015em; color: #fff; }
.sub-lede { margin-top: 10px; max-width: 46em; color: var(--body); }
.table-scroll { overflow-x: auto; margin-top: 22px; }
.table-scroll:focus-visible { outline-offset: 4px; }
.coverage { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.coverage th, .coverage td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); color: var(--body); }
.coverage thead th { color: #fff; font-size: 13px; font-weight: 700; border-bottom-color: #4a4a4a; }
.coverage tbody th { color: #fff; font-weight: 400; min-width: 190px; }
.coverage tbody th code { display: block; margin-bottom: 4px; font-size: 12px; color: var(--dim); }

/* Starting plan additions */
.noscript-note ol { margin: 12px 0; padding-left: 1.3em; color: var(--paper-body); }
.noscript-note li + li { margin-top: 6px; }
.noscript-note p + p { margin-top: 10px; }
.more-detail { margin-top: 18px; }
.more-detail summary, .plan-more summary { cursor: pointer; font-size: 15px; color: var(--paper-ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: #8a8a8a; }
.detail-fields { display: grid; gap: 6px; margin-top: 14px; }
.detail-fields label:not(.choice) { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--paper-ink); }
.detail-fields input[type="text"], .detail-fields select { width: 100%; min-height: 44px; padding: 10px 12px; background: #fff; border: 1px solid #9a9a9a; border-radius: 0; color: var(--paper-ink); }
.detail-fields input[type="text"]:focus, .detail-fields select:focus { outline: 2px solid #000; outline-offset: 1px; }
.detail-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.detail-pair > div { display: grid; gap: 6px; }
.detail-pair .opt { font-weight: 400; color: #5b5b5b; }
@media (max-width: 560px) { .detail-pair { grid-template-columns: 1fr; } }
.profile-step[aria-invalid="true"] .choice { border-color: #8a1d12; }
.result h4 { margin: 26px 0 0; font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--paper-ink); }
.result dl.context { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; margin: 14px 0 0; font-size: 15px; }
.result dl.context dt { font-weight: 700; color: var(--paper-ink); }
.result dl.context dd { margin: 0; color: var(--paper-body); overflow-wrap: anywhere; }
@media (max-width: 560px) { .result dl.context { grid-template-columns: 1fr; } .result dl.context dd { margin-bottom: 8px; } }
.plan .why { color: var(--paper-ink); }
.plan-more { margin-top: 8px; }
.result-block ul { margin: 10px 0 0; padding-left: 1.2em; color: var(--paper-body); font-size: 15.5px; }
.result-block li + li { margin-top: 6px; }
.result-block > p { margin-top: 10px; color: var(--paper-body); font-size: 15.5px; }
.resources { list-style: none; padding-left: 0 !important; }
.resources li { padding: 12px 0; border-top: 1px solid var(--paper-line); }
.resources a { font-weight: 700; color: var(--paper-ink); }
.res-meta { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 10px; font-size: 13px; color: #5b5b5b; vertical-align: middle; }
.dossier .status { border-color: #8a8a8a; color: var(--paper-body); }
.dossier .status[data-status="available"] { background: var(--paper-ink); border-color: var(--paper-ink); color: #fff; }
.dossier .status[data-status="preview"] { border-color: var(--paper-ink); color: var(--paper-ink); }
.resources p { margin-top: 4px; font-size: 14.5px; color: var(--paper-body); }
.copy-status { min-height: 1.4em; margin-top: 10px; font-size: 14px; color: var(--paper-body); }

/* FAQ, updates and contact */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font-family: var(--display); font-weight: 500; font-size: 20px; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--sans); color: var(--body); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 22px; max-width: 40em; color: var(--body); }
.updates h2, .updates h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 26px; color: #fff; }
.updates > p:not(.hp):not(.form-status):not(.hint) { margin: 10px 0 20px; color: var(--body); }
.updates .hint { margin-top: 12px; }
.topics-stack { grid-template-columns: 1fr; }
.contact-note { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--body); }
.contact-note a { color: #fff; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: 48px; } }
.band-tight { padding: clamp(56px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.contact-form { padding-bottom: 104px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 560px) { .field-pair { grid-template-columns: 1fr; } }
.consent { margin: 4px 0 20px; border-color: #444; font-size: 15px; color: var(--body); }
.consent input { background: #000; border-color: #9a9a9a; }
.consent input:checked { background: #fff; border-color: #fff; box-shadow: inset 0 0 0 3px #000; }
.consent:has(input:checked) { border-color: #fff; background: #0d0d0d; }
.consent input:focus-visible { outline-color: #fff; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff8a7a; }

/* ---------- Article pages ---------- */

.article-head { padding: clamp(64px, 9vw, 120px) 0 44px; border-bottom: 1px solid var(--line); }
.crumbs { font-size: 14px; color: var(--dim); }
.crumbs a { color: var(--body); }
.article-head h1 { margin: 16px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5.6vw, 76px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.article-head .dek { margin-top: 20px; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; color: var(--body); max-width: 36em; }
.article-head .actions { margin-top: 30px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag { padding: 3px 10px; border: 1px solid #4a4a4a; font-size: 13px; color: var(--body); }
.tag-strong { border-color: #fff; color: #fff; }
.prose { padding: 52px 0 104px; }
.prose h2 { margin: 56px 0 14px; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.prose h3 { margin: 34px 0 10px; font-family: var(--display); font-weight: 500; font-size: 22px; color: #fff; }
.prose p, .prose li { color: var(--body); }
.prose p + p { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose strong { color: #fff; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); }
.prose th { color: #fff; font-weight: 700; }
.prose td { color: var(--body); }
.prose .callout { margin: 26px 0; padding: 18px 20px; border: 1px solid #4a4a4a; color: #fff; }
.prose .sources li { font-size: 15px; }
.prose .small { font-size: 14px; color: var(--dim); }
.article-foot { padding-top: 30px; margin-top: 60px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; }

/* The guide reads on paper */
.paper-page { background: var(--paper); color: var(--paper-ink); }
.paper-page .sec-header, .paper-page .sec-footer { background: #000; color: var(--text); }
.paper-page .article-head { border-bottom-color: var(--paper-line); }
.paper-page .crumbs, .paper-page .crumbs a { color: #5b5b5b; }
.paper-page .article-head .dek, .paper-page .prose p, .paper-page .prose li, .paper-page .prose td { color: var(--paper-body); }
.paper-page .prose h2, .paper-page .prose h3, .paper-page .prose strong, .paper-page .prose th { color: var(--paper-ink); }
.paper-page .prose th, .paper-page .prose td { border-bottom-color: var(--paper-line); }
.paper-page .prose .callout { border-color: #9a9a9a; color: var(--paper-ink); }
.paper-page main a { text-decoration-color: #8a8a8a; }
.paper-page main :focus-visible { outline-color: #000; }
.paper-page main .btn-solid { background: var(--paper-ink); color: #fff; }
.paper-page main .btn-solid:hover { background: #000; }
.paper-page main .btn-line { border-color: #8a8a8a; color: var(--paper-ink); }
.paper-page main .btn-line:hover { border-color: #000; }
.paper-page .prose .small { color: #5b5b5b; }
.paper-page .tag { border-color: #9a9a9a; color: var(--paper-body); }
.paper-page .article-foot { border-top-color: var(--paper-line); }
.ws-q .line { display: block; margin-top: 8px; height: 30px; border-bottom: 1px solid #9a9a9a; }
.toc { margin: 30px 0 0; padding: 18px 20px; border: 1px solid var(--paper-line); }
.toc ol { margin: 8px 0 0; padding-left: 1.2em; }
.toc li { margin-top: 4px; }

/* Privacy: where each input goes */
.flows { list-style: none; margin: 18px 0 0; padding: 0; }
.flows li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.flows .from { font-family: var(--display); font-weight: 500; color: #fff; }
.flows .to { color: var(--body); }
.flows .to b { color: #fff; }
@media (max-width: 640px) { .flows li { grid-template-columns: 1fr; gap: 6px; } }

@media (max-width: 760px) {
  .sec-header { gap: 14px; padding: 8px 14px 8px 10px; }
  .brand { width: 60px; height: 60px; } .wordmark { width: 48px; }
  .index-panel { right: -4px; }
  .hero-body { padding-top: 130px; }
  .hero img { object-position: 64% 40%; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.92) 85%, #000 100%); }
}

/* Field guide gate: a black panel on the paper page */
.gate { background: #000; color: var(--text); padding: clamp(56px, 8vw, 96px) 0; }
.gate h2 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.02em; }
.gate .reader > p { margin-top: 14px; color: var(--body); }
.gate form, .gate-open { margin-top: 32px; }
.gate .hint { margin-top: 18px; }
.gate .hint a { color: var(--body); }
.paper-page .gate :focus-visible { outline-color: #fff; }
.paper-page .gate .btn-solid { background: #e6e6e6; color: #0b0b0b; }
.paper-page .gate .btn-solid:hover { background: #fff; }

/* Long reference URLs must wrap on narrow screens. */
p a[href^="http"] { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cursor { animation: none; } }

/* Editorial system — 2 November 2026. Shared identity, legible type and space. */
:root { --reader:680px; --text:#f4f3ee; --body:#bdbdb7; --ink:#080808; --paper:#efeee8; --paper-ink:#181818; }
body { font-size:18px; line-height:1.6; }
.sec-header { min-height:104px; padding:22px max(28px,calc((100vw - 1320px)/2)); gap:32px; background:var(--ink); }
.sec-header .brand { width:auto; height:auto; display:flex; gap:20px; background:transparent; text-decoration:none; text-align:left; }
.sec-header .wordmark { width:67px; flex:none; }
.practice-name { display:block; font:600 20px/1.2 var(--display); letter-spacing:.035em; color:#f4f3ee; }
.practice-name small { display:block; margin-top:7px; font:400 12px/1.4 var(--sans); letter-spacing:.065em; color:#bdbdb7; }
.sec-nav ul { gap:29px; }
.sec-nav a { font-size:13px; letter-spacing:.045em; text-transform:none; padding-block:14px; }
.index summary { font-size:13px; }
.index-panel { max-height:calc(100dvh - 110px); overflow-y:auto; overscroll-behavior:contain; }
.index-panel .pages { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.index-panel .pages a,.index-panel .rooms a { min-height:44px; display:flex; align-items:center; }
.cursor { animation-iteration-count:5; }
.band { padding-block:var(--section-space); border-top:0; }
.band-head { margin-bottom:60px; }
.band-head p,.prose p,.editorial-lede { max-width:60ch; }
.eyebrow { margin:0 0 24px; font:400 13px/1.5 var(--code); letter-spacing:.07em; text-transform:uppercase; color:var(--body); }
.editorial-band { padding-block:156px; }
.editorial-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:center; padding-block:76px 130px; }
.editorial-hero h1 { margin:0 0 32px; font:500 clamp(48px,5.3vw,78px)/1.02 var(--display); letter-spacing:-.048em; }
.hero-copy>p:not(.eyebrow):not(.text-actions) { max-width:49ch; color:var(--body); }
.hero-copy .editorial-lede { font-size:20px; color:var(--text)!important; margin-bottom:20px; }
.hero-architecture { margin:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.hero-architecture img { width:100%; height:455px; object-fit:cover; object-position:52% center; }
.hero-architecture figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-top:18px; font:12px/1.5 var(--code); letter-spacing:.03em; color:#b9b9b2; }
.text-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; margin-top:32px; }
.text-actions a:not(.btn) { display:inline-flex; gap:15px; align-items:center; min-height:44px; font-size:16px; text-decoration:none; border-bottom:1px solid #77776f; }
.text-actions a:not(.btn):hover { border-color:currentColor; }
.editorial-band h2,.editorial-split .title { margin:0 0 30px; font:500 clamp(38px,3.8vw,56px)/1.08 var(--display); letter-spacing:-.035em; }
.editorial-band h3 { font:500 27px/1.2 var(--display); letter-spacing:-.025em; margin:0 0 16px; }
.editorial-band p+p { margin-top:18px; }
.editorial-band p:not(.eyebrow) { max-width:60ch; }
.editorial-band:not(.paper) p { color:var(--body); }
.editorial-band a { color:var(--text); }
.editorial-split { display:grid; grid-template-columns:1fr 1.12fr; gap:100px; align-items:start; }
.paper { color:var(--paper-ink); background:var(--paper); }
.paper p,.paper .title,.paper h2,.paper h3,.paper a { color:var(--paper-ink); }
.paper .eyebrow,.paper .small,.paper .publication-terms { color:#55554e; }
.paper .btn-solid { background:#171717; color:#fff; }
.paper .text-actions a { border-color:#77776f; }
.publication-layout { display:grid; grid-template-columns:.82fr 1.18fr; gap:100px; align-items:center; }
.publication-cover { display:block; max-width:340px; width:100%; margin-inline:auto; box-shadow:10px 18px 32px #00000019; }
.publication-cover img { width:100%; }
.publication-copy .editorial-lede { font-size:21px; line-height:1.55; margin-bottom:22px; }
.publication-facts { display:flex; flex-wrap:wrap; gap:26px 34px; margin:32px 0; }
.publication-facts dt { font:500 20px/1.5 var(--display); }
.publication-facts dd { margin:4px 0 0; font-size:13px; color:#55554e; }
.publication-price { font-size:15px; }
.publication-terms { font-size:14px; }
.free-publication { display:flex; align-items:center; justify-content:space-between; gap:45px; margin-top:88px; padding-top:48px; border-top:1px solid #c4c3ba; }
.free-publication .eyebrow { margin-bottom:12px; }
.free-publication p { max-width:54ch; }
.free-publication>a { flex:none; font-size:16px; padding-block:12px; }
.method-list { margin:0; }
.method-list>div { padding:24px 0; border-bottom:1px solid #343434; }
.method-list>div:first-child { padding-top:0; }
.method-list dt { display:flex; gap:28px; align-items:baseline; font:500 28px/1.3 var(--display); }
.method-list dt span { font:13px/1.4 var(--code); color:#aaa; }
.method-list dd { margin:10px 0 0 46px; color:var(--body); font-size:18px; }
.tools-section,.about-section { background:#121212; }
.tool-index article+article { margin-top:40px; padding-top:36px; border-top:1px solid #363636; }
.tool-index .eyebrow { margin-bottom:15px; }
.tool-index h3 { font-size:25px; }
.tool-index h3 a { text-decoration:none; }
.tool-index h3 a:hover { text-decoration:underline; }
.tool-index h3 span { margin-left:10px; font-size:20px; }
.research-heading { margin-bottom:70px; }
.research-features { display:grid; grid-template-columns:1fr 1fr; gap:88px; }
.research-features article { border-top:1px solid #555; padding-top:32px; }
.research-features h3 { max-width:24ch; font-size:30px; }
.research-features h3 a { text-decoration:none; }
.research-features h3 a:hover { text-decoration:underline; }
.entry-meta { font:13px/1.75 var(--code); margin-top:28px!important; }
.editorial-head { padding-block:100px 62px; }
.editorial-head h1 { max-width:18ch; margin:0 0 30px; font:500 clamp(44px,5vw,74px)/1.05 var(--display); letter-spacing:-.04em; }
.editorial-head .editorial-lede { max-width:54ch; font-size:21px; color:var(--body); }
.editorial-page .editorial-head+.band { padding-top:80px; }
.editorial-prose { padding-block:20px 130px; }
.maturity-note { margin-block:30px!important; padding-left:24px; border-left:2px solid #aaa; }
.publication-record { margin-top:56px; padding-top:30px; border-top:1px solid var(--line); }
.publication-record h2 { font-size:24px; margin-top:0; }
.publication-record p { font-size:15px; }
.report-links { margin-top:28px; font-size:16px; }
.research-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin:clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 40px); }
.research-toolbar label { font-size:15px; }
.research-toolbar select { font:16px var(--sans); border:1px solid #666; padding:12px 36px 12px 16px; color:var(--text); background:#171717; border-radius:0; min-height:48px; }
.research-toolbar p { font:13px var(--code); color:var(--body); }
.research-directory { padding-bottom:var(--section-space); }
.empty-research { border-top:1px solid #444; padding-block:32px; }
.btn { letter-spacing:.015em; text-transform:none; font-size:16px; }
@media(max-width:1100px) { .sec-header { min-height:94px; padding:20px 26px; } .editorial-hero { gap:42px; } .editorial-split,.publication-layout { gap:60px; } .hero-architecture img { height:410px; } }
@media(max-width:760px) {
 .sec-header { padding:18px 22px; gap:14px; min-height:88px; } .sec-header .brand { gap:13px; } .sec-header .wordmark { width:48px; } .practice-name { font-size:17px; } .practice-name small { font-size:11px; letter-spacing:.03em; }
 .editorial-band,.band { padding-block:var(--section-space); } .editorial-hero { grid-template-columns:1fr; gap:48px; padding-block:58px 88px; } .editorial-hero h1 { font-size:clamp(42px,9.8vw,68px); } .hero-copy .editorial-lede { font-size:20px; } .hero-architecture img { height:260px; } .hero-architecture figcaption { font-size:11px; } .editorial-split,.publication-layout,.research-features { grid-template-columns:1fr; gap:44px; } .publication-cover { max-width:260px; } .publication-copy h2 { font-size:42px; } .publication-facts { gap:22px; } .publication-facts dt { font-size:18px; } .publication-facts dd { font-size:13px; } .free-publication { align-items:start; flex-direction:column; gap:20px; margin-top:64px; padding-top:36px; } .editorial-band h2,.editorial-split .title { font-size:38px; } .editorial-band h3 { font-size:26px; } .research-heading { margin-bottom:44px; } .method-list dt { font-size:27px; } .method-list dd { margin-left:44px; } .editorial-head { padding-block:66px 40px; } .editorial-head h1 { font-size:44px; } .editorial-head .editorial-lede { font-size:20px; } .editorial-prose { padding-bottom:88px; }  .text-actions { gap:18px 24px; } .band-head { margin-bottom:40px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .cursor { animation:none; } }
.library-preview{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;margin:32px 0 48px;text-decoration:none;font-size:18px}
.library-preview img{display:block;width:120px;height:auto;border:1px solid #464640}
.library-preview span{max-width:25ch;text-decoration:underline;text-underline-offset:6px}
@media(max-width:420px){.library-preview{grid-template-columns:94px 1fr;gap:20px}.library-preview img{width:94px}}

/* PRAE shared identity: one wordmark, with parent attribution kept separate. */
.sec-header{background:#111;min-height:88px;padding:20px max(24px,calc((100vw - 1160px)/2));border-bottom:1px solid #30302d;gap:30px}
.sec-header .brand{display:flex;align-items:center;gap:20px;min-height:44px;width:auto;height:auto;background:none;outline-offset:5px}
.prae-wordmark{display:block;width:119px;height:32px;object-fit:contain;flex:none}
.prae-parent{display:block;border-left:1px solid #55554f;padding-left:20px;font:11px/1.4 var(--sans);color:#b8b8b0;white-space:nowrap}
.sec-header .sec-nav ul{gap:24px;align-items:center}.sec-header .sec-nav a{font:12px/1.5 var(--sans);letter-spacing:0;text-transform:none;display:inline-flex;min-height:44px;align-items:center}
.index-panel{max-height:calc(100svh - 105px);overflow-y:auto;overscroll-behavior:contain;background:#111;box-shadow:0 12px 26px #0004}
.index-panel .rooms a{min-height:44px}.index-panel .pages a{min-height:40px}
.editorial-head{padding-top:64px;padding-bottom:38px}.editorial-head h1{font-size:clamp(40px,5vw,66px);line-height:1.08;max-width:17ch}.editorial-head .editorial-lede{font-size:21px;max-width:58ch}.editorial-prose{padding-bottom:80px}.editorial-page .band{padding-block:var(--section-space)}.editorial-page .band .title{font-size:clamp(34px,4vw,50px)}
@media(max-width:1100px){.sec-header{padding:18px 28px;gap:22px}.sec-header .sec-nav ul{gap:19px}.prae-parent{font-size:10px;padding-left:16px}.sec-header .brand{gap:16px}}
@media(max-width:980px){.sec-header{min-height:80px}.sec-nav{display:none}.index{display:block}}
@media(max-width:760px){.sec-header{padding:16px 20px;min-height:76px;gap:16px}.prae-wordmark{width:100px;height:27px}.prae-parent{font-size:10px;padding-left:14px}.sec-header .brand{gap:14px}.index summary{font-size:11px;letter-spacing:.06em}.editorial-head{padding-block:40px 30px}.editorial-head h1{font-size:42px}.editorial-head .editorial-lede{font-size:18px}}
@media(max-width:360px){.prae-parent{display:none}.sec-header{padding-inline:20px}}

/* Clear, conventional mobile menu indicator. */
.index summary::after { content:"+"; width:16px; height:20px; border:0; font:20px/20px var(--sans); text-align:center; }
.index[open] summary::after { content:"−"; background:none; }

/* Animate only the bottom E stroke; keep complete lettering without motion. */
.prae-cursor { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .prae-cursor { animation: blink var(--blink) steps(1, end) infinite; }
}
@media print { .prae-cursor { animation: none; } }

/* Shared masthead and publisher directory across the storefront, tools and reports. */
.sec-header { color: #f4f3ee; min-height: 74px; padding: 12px max(var(--gutter), calc((100% - var(--frame)) / 2)); }
.sec-header .sec-nav a { font-size: 14px; }
.header-product {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 42px; padding: 0 16px; background: #f3f2ed; border: 1px solid #f3f2ed;
  color: #171815; font: 600 14px/1.35 var(--sans); text-decoration: none;
}
.header-product:hover { background: #d6d6cf; }
.header-product[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.sec-footer { background: #0d0e0d; color: #f4f3ee; border-top: 1px solid #323330; padding: 0; }
.footer-wrap { width: var(--page-width); margin-inline: auto; }
.footer-directory { display: grid; grid-template-columns: minmax(170px, .95fr) minmax(0, 3.4fr); gap: clamp(32px, 5vw, 76px); padding-block: clamp(32px, 4vw, 52px) clamp(26px, 3vw, 40px); }
.footer-identity > a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-identity .prae-wordmark { width: 142px; height: auto; }
.footer-identity p { max-width: 26ch; margin: 14px 0 0; color: #bdbeb7; font: 14px/1.65 var(--sans); }
.footer-groups { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.sec-footer .footer-groups h2 { margin: 8px 0 15px; font: 600 15px/1.45 var(--display); letter-spacing: -.02em; color: #f4f3ee; }
.sec-footer ul { list-style: none; margin: 0; padding: 0; }
.sec-footer nav a { display: inline-flex; align-items: center; min-height: 35px; color: #bdbeb7; font: 14px/1.45 var(--sans); text-decoration: none; }
.sec-footer nav a:hover, .sec-footer nav a[aria-current="page"] { color: white; text-decoration: underline; text-underline-offset: 4px; }
.footer-base { display: flex; align-items: center; gap: 24px; border-top: 1px solid #353632; padding-block: 20px; }
.footer-base > p { font: 12px/1.6 var(--sans); color: #babbb4; }
.footer-base > p span { display: block; }
.footer-publisher { display: block; width: 80px; height: 44px; overflow: hidden; flex-shrink: 0; }
.footer-publisher img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.footer-base nav { margin-left: auto; }
.footer-base ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-base nav a { font-size: 13px; }
@media (max-width: 980px) {
  .sec-header .header-product { margin-left: auto; }
  .sec-header .index { margin-left: 0; }
  .footer-directory { grid-template-columns: 1fr; gap: 25px; }
  .footer-identity p { max-width: 48ch; }
}
@media (max-width: 700px) {
  .sec-header { gap: 16px; min-height: 64px; padding: 9px var(--gutter); }
  .prae-parent { display: none; }
  .header-product { min-height: 40px; padding-inline: 12px; gap: 9px; font-size: 13px; }
  .footer-directory { padding-block: 34px 28px; }
  .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .sec-footer .footer-groups h2 { margin-bottom: 8px; }
  .sec-footer nav a { min-height: 42px; }
  .footer-base { flex-wrap: wrap; gap: 10px 18px; padding-block: 18px; }
  .footer-base nav { width: 100%; margin: 0; }
  .footer-base ul { gap: 0 18px; }
}

/* Section openers pair a quiet reading area with the site's documentary photography. */
.photo-header {
  --photo-focus: 50% 50%;
  position: relative;
  isolation: isolate;
  background: #0c0c0c;
  color: #f5f4ef;
  border-bottom: 1px solid #343431;
}
.photo-columns { --photo: url("/assets/quote-1280.webp"); --photo-focus: 59% 50%; }
.photo-backstage { --photo: url("/security/assets/backstage-1200.webp"); --photo-focus: 61% 53%; }
.photo-switchboard { --photo: url("/security/assets/switchboard-1200.webp"); --photo-focus: 56% 56%; }
.photo-bridge { --photo: url("/security/assets/bridge-1200.webp"); --photo-focus: 52% 48%; }
.photo-convergence { --photo: url("/security/assets/convergence-1600.webp"); --photo-focus: 50% 32%; }
.photo-header::before {
  position: absolute; content: ""; inset: 0 0 0 38%; z-index: -1;
  background: linear-gradient(90deg, #0c0c0c, #0c0c0ce8 7%, #0c0c0c2b 46%, transparent 68%),
    var(--photo) var(--photo-focus) / cover no-repeat;
}
.photo-header > .frame { width: var(--page-width); }
.photo-intro {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  max-width: min(51%, 600px); min-height: clamp(350px, 32vw, 480px); padding-block: clamp(52px, 5.6vw, 84px);
}
.photo-header .photo-intro h1 {
  margin: 0; font: 500 clamp(42px, 4.9vw, 68px)/1.03 var(--display); letter-spacing: -.052em; color: #f5f4ef;
}
.photo-intro > :is(.eyebrow, .crumbs, .prae-label) { margin: 0 0 19px; color: #c9c9c2; }
.photo-intro > :is(.dek, .editorial-lede, .prae-lead) {
  max-width: 43ch; margin: 20px 0 0; font: 400 clamp(18px, 1.55vw, 22px)/1.48 var(--display); color: #e0e0da;
}
.photo-intro .prae-context { color: #c3c3bc; }
.photo-intro .actions { margin-top: 24px; }
@media (min-width: 1550px) {
  .photo-switchboard { --photo: url("/security/assets/switchboard-2000.webp"); }
  .photo-backstage { --photo: url("/security/assets/backstage-2000.webp"); }
  .photo-bridge { --photo: url("/security/assets/bridge-2000.webp"); }
  .photo-columns { --photo: url("/assets/quote-2400.webp"); }
}
@media (max-width: 700px) {
  .photo-header::before {
    display: block; position: static; height: clamp(116px, 33vw, 180px);
    background-image: linear-gradient(0deg, #0c0c0c, transparent 35%), var(--photo);
  }
  .photo-intro { min-height: 0; max-width: none; padding: 28px 0 54px; }
  .photo-header .photo-intro h1 { font-size: clamp(38px, 8vw, 54px); }
  .photo-intro > :is(.eyebrow, .crumbs, .prae-label) { margin-bottom: 12px; }
  .photo-convergence { --photo: url("/security/assets/convergence-720.webp"); }
}
@media print {
  .photo-header { background: white; color: black; border: 0; }
  .photo-header::before { display: none; }
  .photo-header .photo-intro { max-width: none; min-height: 0; }
  .photo-header .photo-intro :is(h1, p, a) { color: black; }
}

/* Develop the section photograph against a steady headline. */
@media screen and (prefers-reduced-motion: no-preference) {
  .photo-header::before { animation: develop-print 600ms var(--ease); }
}
@keyframes develop-print {
  from { opacity: .58; }
  to   { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .header-product span { transition: transform 160ms var(--ease); }
  .header-product:hover span { transform: translateX(3px); }
}

/* Set the reading rhythm inside a spread independently of the space between sections. */
.editorial-split { column-gap: var(--column-gap); }
.editorial-split > div > p { max-width: 52ch; }
.editorial-split > div > p + p { margin-block-start: 20px; }
.editorial-split > div > .actions, .photo-intro .actions {
  margin-block-start: 32px; gap: 16px 28px; align-items: center;
}
.editorial-split .actions a, .photo-intro .actions a { display: inline-flex; align-items: center; min-height: 44px; }
.editorial-split .title:last-child { margin-bottom: 0; }
.advisory-band .eyebrow { margin-bottom: 28px; }
.advisory-band .title { max-width: 12ch; }
.platform-steps > div + div { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line); }
.platform-steps h3 { margin: 0 0 12px; font: 500 clamp(21px, 2vw, 27px)/1.25 var(--display); }
.platform-steps p { max-width: 52ch; color: var(--body); }
.platform-record { margin: 32px 0 0; }
.platform-record > div { display: grid; grid-template-columns: minmax(100px, .65fr) 1.35fr; gap: 18px; border-top: 1px solid #c2c3b9; padding-block: 18px; }
.platform-record dt { color: #51534a; font-size: 14px; }
.platform-record dd { margin: 0; }
.platform-price { font: 500 36px/1.18 var(--display); }
.platform-price span { display: block; font-size: 16px; margin-top: 8px; }
@media (max-width: 760px) {
  .editorial-split { row-gap: 32px; }
  .platform-record > div { grid-template-columns: 1fr; gap: 6px; }
  .advisory-band .eyebrow { margin-bottom: 18px; }
}
@media (max-width: 360px) {
  .sec-header { padding-inline: 16px; gap: 12px; }
  .sec-header .prae-wordmark { width: 84px; height: auto; }
  .header-product span { display: none; }
}