/* Dossier design system. Loaded after site.css by index.html and results.html; every rule
   is scoped to body.dossier or a .d- class so no other page changes. Tokens come
   from site.css — reuse them rather than inventing values. */

.d-mono {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase;
}

body.dossier { background: #fbfcfe; }

/* The mockup's final CTA: soft red/gold glows over the diagonal navy gradient —
   not the old page's hatch treatment. */
body.dossier .final-cta {
  background:
    radial-gradient(900px 380px at 74% 0%, rgba(228, 55, 46, .26), transparent 60%),
    radial-gradient(700px 420px at -6% 100%, rgba(245, 181, 46, .13), transparent 60%),
    linear-gradient(160deg, var(--navy-950), var(--navy-900) 70%, var(--navy-800));
}
body.dossier .guarantee-strip { max-width: 1080px; margin: 40px auto 0; }

/* The evidence button carries a shorter label on phones. */
.btn .d-short { display: none; }
@media (max-width: 640px) {
  .btn .d-long { display: none; }
  .btn .d-short { display: inline; }
}

/* ---------- Section headers ---------- */
/* One header treatment everywhere: centered kicker + heading over a short rule.
   Centered headers sit in balance with centered content below them. */
.d-sechead {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: 26px;
}
.d-sechead::after { content: ""; width: 76px; height: 2px; background: var(--navy-900); margin-top: 18px; }
.d-sechead .d-kicker {
  display: block; margin-bottom: 12px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-600);
}
.d-sechead h2 {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 900; letter-spacing: -.015em; line-height: 1.1;
  color: var(--navy-900); max-width: 900px;
}
.d-sechead-dark::after { background: var(--gold-500); }
.d-sechead-dark .d-kicker { color: var(--gold-500); }
.d-sechead-dark h2 { color: #fff; }
.d-lede { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 720px; margin: 0 auto 40px; text-align: center; }

/* ---------- Corner brackets ---------- */
.d-bracket { position: relative; }
.d-bracket::before, .d-bracket::after { content: ""; position: absolute; width: 22px; height: 22px; }
.d-bracket::before { top: -1px; left: -1px; border-top: 2px solid var(--red-600); border-left: 2px solid var(--red-600); }
.d-bracket::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--red-600); border-right: 2px solid var(--red-600); }
.d-bracket-gold::before { border-color: var(--gold-500); }
.d-bracket-gold::after { border-color: var(--gold-500); }

/* ---------- Hero ---------- */
/* A cool wash falling out of the navy masthead, with faint glows — red behind
   the product, navy low-left — so the opening isn't a flat white field. */
.d-hero {
  padding: 72px 0 60px;
  background:
    radial-gradient(900px 420px at 85% 10%, rgba(228, 55, 46, .07), transparent 60%),
    radial-gradient(800px 420px at 0% 100%, rgba(16, 34, 92, .08), transparent 60%),
    linear-gradient(180deg, var(--navy-100) 0%, #e9eefa 55%, #f4f7fc 100%);
}
.d-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
/* The production hero's qualifier pill, in daylight: gold border, faint gold
   tint, navy text — a badge without a dark box. */
.d-eyebrow {
  display: inline-flex; align-items: center; margin-bottom: 22px;
  background: rgba(245, 181, 46, .1); border: 1px solid rgba(222, 160, 24, .65); border-radius: var(--radius-tag);
  padding: 9px 16px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-900);
}
.d-hero h1 {
  font-size: clamp(36px, 4.6vw, 62px); font-weight: 900; line-height: 1.05; letter-spacing: -.018em;
  color: var(--navy-900); margin-bottom: 22px;
}
.d-hilite { background: var(--red-600); color: #fff; padding: 0 12px; display: inline-block; line-height: 1.14; }
.d-hero .sub { font-size: 18.5px; line-height: 1.65; color: var(--muted); max-width: 620px; margin-bottom: 24px; }
.d-hero .sub strong { color: var(--ink); }
body.dossier .check-list li { font-weight: 600; }
body.dossier .check-list .tick { color: var(--red-600); }
.d-cta-note {
  display: block; margin-top: 12px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* The hero visual is the product itself — oversized past its column (the art
   has transparent margins) so it spans the headline's height instead of
   leaving an empty corner above or below. */
.d-hero-product { align-self: center; }
.d-hero-product img {
  /* 4% bleed each side: stays inside the 56px column gap on the left and the
     wrap's 24px gutter on the right at every width. */
  display: block; width: 108%; max-width: none; margin-left: -4%; height: auto;
  filter: drop-shadow(0 24px 48px rgba(6, 15, 42, .22));
}

/* ---------- Metadata strip ---------- */
.d-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card);
}
.d-meta > div { padding: 24px 32px; text-align: center; }
.d-meta > div + div { border-left: 1px solid var(--line); }
.d-meta b { display: block; font-size: 24px; font-weight: 900; color: var(--navy-900); margin-bottom: 5px; }
.d-meta span {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Evidence (the page's one dark band) ---------- */
.d-evidence { background: linear-gradient(150deg, var(--navy-900), var(--navy-800)); }
.d-evidence .d-lede { color: #b9c4e4; }
.d-proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.d-proof {
  background: var(--navy-900); border: 1px solid rgba(227, 232, 242, .14); border-radius: 0;
  padding: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.d-proof img { display: block; width: 100%; border: 1px solid rgba(227, 232, 242, .12); border-radius: 0; }
.d-proof figcaption {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 13px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #aab6d8;
}
.d-proof .amount { font-family: var(--font); font-size: 16px; font-weight: 900; letter-spacing: 0; color: var(--gold-500); }
.d-evidence-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 38px; }
.btn-outline-gold { background: transparent; border: 2px solid var(--gold-500); color: var(--gold-500); }
.btn-outline-gold:hover { background: rgba(245, 181, 46, .1); transform: translateY(-2px); color: var(--gold-500); }
.d-evidence-cta span {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #aab6d8; text-align: center;
}

/* ---------- SOP (tinted) ---------- */
.d-tint { background: #eef2f9; }
.d-sop { display: flex; flex-direction: column; }
.d-sop-row {
  display: grid; grid-template-columns: 110px 250px minmax(0, 1fr); gap: 30px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid #d3dcec;
}
.d-sop-row .d-step {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red-600);
}
.d-sop-row h3 { font-size: 21px; font-weight: 900; color: var(--navy-900); }
.d-sop-row p { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- Tracks: three equal cards ---------- */
/* Symmetry by construction: identical cards, each opening with a media pane of
   the same fixed shape. Track 03's pane is typographic — a designed statement
   instead of footage — so no card is the odd one out. */
.d-tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
.d-tcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.d-tcard-featured { border-color: var(--red-600); }
.d-track-media { height: 190px; background: var(--navy-900); flex: 0 0 auto; }
.d-track-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-track-media-type {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800)); text-align: center; padding: 0 20px;
}
.d-track-media-type span {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-500);
}
.d-track-media-type b { font-size: 26px; font-weight: 900; letter-spacing: -.01em; color: #fff; }
/* Harmonization inside the cards, all widths: headings and labels center,
   the description justifies (hyphenated), the fit line centers. */
.d-tcard-body { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; text-align: center; }
.d-tcard-no {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.d-tcard-no-red { color: var(--red-600); }
.d-tcard-body h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--navy-900); }
.d-tcard-for { font-size: 15px; font-weight: 800; color: var(--ink); }
.d-tcard-desc { font-size: 14.5px; line-height: 1.6; color: var(--muted); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.d-tcard-fit {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.7;
}
.d-tcard-fit b { color: var(--navy-900); font-weight: 600; }
.d-tracks-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 32px; text-align: center; }
.d-tracks-cta span {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Declassified downloads (hatched security paper) ---------- */
.d-hatch {
  background-color: #f0f3fa;
  background-image:
    repeating-linear-gradient(45deg, rgba(16, 34, 92, .035) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #e9eefa 0%, #f7f9fd 100%);
}
/* One full-width card per playbook — the magnets keep the presence the old
   full-band layout gave them; the covers alternate sides. */
.d-downloads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 1080px; margin: 0 auto; }
.d-download {
  display: flex; gap: 64px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 44px 48px; box-shadow: var(--shadow);
}
.d-download-flip { flex-direction: row-reverse; }
.d-download img {
  width: 270px; height: auto; flex: 0 0 270px; border-radius: 0; box-shadow: var(--shadow-lg);
  transition: transform .35s ease, box-shadow .35s ease;
}
.d-download img:hover { transform: translateY(-6px); box-shadow: 0 32px 70px rgba(6, 15, 42, .28); }
.d-download .d-free-tag {
  display: inline-flex; align-self: flex-start; margin-bottom: 14px;
  background: linear-gradient(180deg, #ffc94a, var(--gold-500)); color: var(--navy-950);
  border-radius: var(--radius-tag); padding: 7px 14px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.d-download h3 { font-size: 30px; font-weight: 900; line-height: 1.12; color: var(--navy-900); margin-bottom: 12px; }
.d-download p { font-size: 16px; line-height: 1.65; color: var(--muted); margin-bottom: 20px; max-width: 620px; text-align: justify; }
.d-download p b { color: var(--ink); }
.d-download .btn { font-size: 16px; padding: 15px 30px; }

/* ---------- Subject profile ---------- */
.d-subject { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 52px; align-items: center; }
.d-filecard {
  background: #fbfcfe; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  box-shadow: var(--shadow); transition: transform .35s ease, box-shadow .35s ease;
}
.d-filecard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.d-filecard img { display: block; width: 100%; height: auto; border-radius: 0; }
.d-filecard figcaption {
  padding: 11px 4px 2px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.d-dossier-table { display: grid; grid-template-columns: 150px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 20px 0; }
.d-dossier-table > span {
  padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--ink);
}
.d-dossier-table > span.d-cell-label {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: #fbfcfe;
}
.d-dossier-table > span:nth-last-child(-n+2) { border-bottom: 0; }
.d-subject .d-bio { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin-bottom: 20px; }

/* ---------- FAQ (list styles come from site.css; header is the standard one) ---------- */
body.dossier .faq-list { margin-top: 34px; }

/* ---------- Final CTA notice card ---------- */
/* The closing panel on both dossier pages: the last document in the file.
   Every piece of proof on these pages is a white page on navy, so the closing
   call is one more of them — the one still blank.

   It was a 35%-opacity wash, which is why the closing call had no presence on
   either page: with nothing solid in the middle, the section had to borrow its
   definition from the band behind it, and a background can only separate two
   things by drawing a horizon between them. Light also does what a darker
   panel cannot here — the ground it sits on is already near --navy-950, so a
   deeper navy composites to within a few points of the wash and reads as
   nothing at all.

   Square, for the same reason nothing in the proof gallery takes a radius: the
   brackets are right angles, so a rounded frame behind them never lines up and
   the curve pulls away leaving a gap at every corner that carries one. */
.d-notice {
  position: relative; max-width: 860px; margin: 0 auto;
  border: 1px solid rgba(6, 15, 42, .14); border-radius: 0;
  background-color: #f4f6fb; padding: 52px 48px 46px; text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  /* All four corners, not the exhibits' diagonal pair. An exhibit is one of
     thirty in a run, where two marks imply the frame and a full box would be
     noise thirty times over. This panel is alone and much wider than it is
     tall, so the same two marks read as an accident of one corner instead of a
     frame. Four corners need eight bars and an element has two
     pseudo-elements, so they are drawn as background layers. */
  --bkt: 26px;
  --bkt-w: 2px;
  background-image:
    linear-gradient(var(--gold-500) 0 0), linear-gradient(var(--gold-500) 0 0),
    linear-gradient(var(--gold-500) 0 0), linear-gradient(var(--gold-500) 0 0),
    linear-gradient(var(--gold-500) 0 0), linear-gradient(var(--gold-500) 0 0),
    linear-gradient(var(--gold-500) 0 0), linear-gradient(var(--gold-500) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--bkt) var(--bkt-w), var(--bkt-w) var(--bkt),
    var(--bkt) var(--bkt-w), var(--bkt-w) var(--bkt),
    var(--bkt) var(--bkt-w), var(--bkt-w) var(--bkt),
    var(--bkt) var(--bkt-w), var(--bkt-w) var(--bkt);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}
/* Everything inside takes light-ground colours explicitly. The shared band rule
   sets `color: #fff` on the section around this panel, so anything left to
   inherit arrives white on near-white. */
.d-notice h2 { color: var(--navy-900); }
.d-notice p { color: #4d5670; }
.d-notice .btn-sub { color: #6b7590; }
.d-notice-rule { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.d-notice-rule::before, .d-notice-rule::after { content: ""; flex: 1; height: 1px; background: rgba(10, 23, 64, .4); }
/* Gold marks the panel's edge; navy carries anything inside it that has to be
   read. Gold is tuned for the navy ground the exhibits sit on and falls to
   about 1.7:1 here, which a corner bracket survives and a word does not. The
   hairlines take the same navy at 40% so the rule frames the label instead of
   competing with it. The label carries 600, the heaviest weight the mono face
   ships — anything above that is faked, not bolder. */
.d-notice-rule span {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--navy-900); white-space: nowrap;
}

/* ---------- End-of-file footer ---------- */
body.dossier .footer-legal { justify-content: center; text-align: center; }
body.dossier .disclaimer { text-align: center; margin-inline: auto; }
.d-eof { display: flex; align-items: center; gap: 22px; margin-bottom: 40px; }
.d-eof::before, .d-eof::after { content: ""; flex: 1; height: 1px; background: var(--navy-700); }
.d-eof span {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-500); white-space: nowrap;
}
/* The centered footer composition (.d-footer-stack, .d-footer-links, tagline)
   is shared and lives in the base stylesheet. Only the end-of-file rule above
   is homepage-only. */

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .d-hero { padding: 48px 0 44px; }
  /* The copy column dissolves so the exhibits can interleave: headline first,
     evidence second, the pitch and CTA after — one story, top to bottom. */
  .d-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .d-hero-grid > div:first-child { display: contents; }
  .d-eyebrow { order: 1; text-align: center; margin-bottom: 0; justify-self: center; }
  .d-hero h1 { order: 2; text-align: center; margin-bottom: 0; }
  .d-hero-product { order: 3; margin: 6px auto 0; max-width: 460px; width: 100%; }
  .d-hero-product img { width: 100%; margin-left: 0; }
  .d-hero .sub { order: 4; text-align: justify; margin-bottom: 0; max-width: none; }
  body.dossier .check-list { order: 5; justify-self: center; margin-bottom: 0; }
  .hero-cta-row { order: 6; justify-content: center; }
  .d-cta-note { order: 7; text-align: center; margin-top: 0; }
  .d-subject { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .d-filecard { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 880px) {
  /* Mobile reads centered: headings and labels center, long paragraph blocks
     justify — hyphenated, or narrow justified columns open rivers of space. */
  .d-sechead { text-align: center; }
  .d-lede, .d-sop-row p, .d-download p, .d-subject .d-bio, .d-hero .sub,
  body.dossier .faq-body { hyphens: auto; -webkit-hyphens: auto; }
  .d-lede { text-align: justify; margin-inline: auto; }
  .d-meta { grid-template-columns: minmax(0, 1fr); }
  .d-meta > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .d-proofs { grid-template-columns: minmax(0, 1fr); }
  .d-sop-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; text-align: center; }
  .d-sop-row p { text-align: justify; }
  .d-tcards { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin: 0 auto; }
  .d-tcard { text-align: center; }
  .d-tcard-fit { text-align: center; }
  .d-downloads { grid-template-columns: minmax(0, 1fr); }
  /* One clean hierarchy on phones: tag, heading, cover, copy, button. */
  .d-download { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 24px; }
  .d-download-flip { flex-direction: column; }
  .d-download > div { display: contents; }
  .d-download .d-free-tag { order: 1; align-self: center; margin-bottom: 0; }
  .d-download h3 { order: 2; margin-bottom: 0; }
  .d-download img { order: 3; flex-basis: auto; margin: 6px 0 8px; }
  .d-download p { order: 4; text-align: justify; margin-bottom: 4px; }
  .d-download .btn { order: 5; }
  .d-download .btn { align-self: center; }
  .d-subject { text-align: center; }
  .d-subject .d-bio { text-align: justify; }
  /* The file table restates the bio on a small screen — bio alone carries it. */
  .d-dossier-table { display: none; }
  .d-dossier-table > span { text-align: center; }
  body.dossier .faq-body { text-align: justify; }
  .d-notice { padding: 40px 24px 38px; }
}
@media (max-width: 640px) {
  .d-eof span { white-space: normal; font-size: 11px; letter-spacing: .2em; }
  .d-download img { width: 180px; }
  .d-dossier-table { grid-template-columns: minmax(0, 1fr); }
  .d-dossier-table > span.d-cell-label { border-bottom: 0; padding-bottom: 2px; }
}