/* dialroom.ai landing page.
   Visual language ported from the prototype (handoff/source/private-desk.src.html): charcoal and ivory
   grounds, Cormorant Garamond display at light weights, Hanken Grotesk text, tracked uppercase kickers
   with a hairline rule, rose gold used sparingly.
   Source file: web/site.css. `npm run pin` copies it to public/assets/site.<hash>.css.
   Fonts: assets/fonts/, from @fontsource under the SIL Open Font License 1.1 (OFL-*.txt). */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-300-normal.8973d65ce7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-400-normal.8048ac209b.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-500-normal.8197bf5361.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-400-italic.e48e580270.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-grotesk-latin-400-normal.787b3fdd0b.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-grotesk-latin-500-normal.31f666af7b.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-grotesk-latin-600-normal.58f23b7ae3.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
/* One fixed design for light and dark OS modes: every colour is set explicitly. */
:root {
  --charcoal: #141312;
  --charcoal-deep: #0f0e0d;
  --ivory: #f3efe7;
  --paper: #fbf9f4;
  --ink: #262422;
  --ink-2: #4a4642;
  --muted: #7a746c;
  --hairline: #ded7ca;
  --hairline-2: #cfc6b6;
  --on-dark: #ede6d8;
  --on-dark-hi: #f3ede1;
  --on-dark-2: rgba(237, 230, 216, .7);
  --on-dark-3: rgba(237, 230, 216, .6);
  --dark-line: rgba(237, 230, 216, .16);
  --dark-line-soft: rgba(237, 230, 216, .1);
  --rose: #d3a882;
  --brass: #8a6142;
  --lux: linear-gradient(135deg, #f2dcc2 0%, #d6ad86 55%, #bc8e66 100%);
  --ver: #2f5b4e;
  --claim: #8a5e16;
  --claim-soft: #f5ead6;
  --est: #3c5672;
  --est-soft: #e3e9f0;

  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --max: 1400px;
  --gutter: clamp(20px, 5vw, 72px);
  /* The gutter, or more where a notch or a Dynamic Island cuts into the screen: index.html sets
     viewport-fit=cover, so on a phone held sideways the page runs under them. */
  --edge-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --edge-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --col-gap: clamp(20px, 2.6vw, 40px);
  --section-y: clamp(88px, 11vw, 168px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--charcoal);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* In-page links glide, but only once the page has loaded (site.js adds .smooth then): a visitor who
   opens a link to a section lands there at once, without passing the hero and starting its film. */
@media (prefers-reduced-motion: no-preference) {
  html.smooth { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; font-variant-numeric: lining-nums; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, dd, li { text-wrap: pretty; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.nb { white-space: nowrap; }
::selection { background: rgba(211, 168, 130, .34); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 1px; }
.tone-ivory :focus-visible, .tone-paper :focus-visible { outline-color: var(--brass); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--edge-l) + var(--edge-r));
  margin-inline: auto;
  padding-inline: var(--edge-l) var(--edge-r);
}

.skip {
  position: absolute;
  z-index: 100;
  top: 12px;
  left: max(12px, env(safe-area-inset-left, 0px));
  padding: 12px 18px;
  background: var(--on-dark-hi);
  color: var(--charcoal);
  font: 600 13px/1 var(--sans);
  letter-spacing: .04em;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Kicker: tracked uppercase with a hairline rule, as in the prototype's .fp-kick. */
.kick {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 11px/1.3 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rose);
}
.kick::before { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; }
.tone-ivory .kick, .tone-paper .kick { color: var(--brass); }

.tone-dark { background: var(--charcoal); color: var(--on-dark); }
.tone-ivory { background: var(--ivory); color: var(--ink); }
.tone-paper { background: var(--paper); color: var(--ink); }

.section-head h2 {
  margin-top: 24px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.012em;
  max-width: 17ch;
}
.tone-dark .section-head h2 { color: var(--on-dark-hi); }
.section-sub {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.65;
}
.tone-dark .section-sub { color: var(--on-dark-2); }
.tone-ivory .section-sub, .tone-paper .section-sub { color: var(--ink-2); }

/* ---------- masthead ---------- */
.masthead { position: absolute; z-index: 10; inset: 0 0 auto; color: var(--on-dark); }
/* Its box spans the page over the hero; only its contents take taps, so a tap on the film's
   button where the box overlaps it (as it can with WCAG 1.4.12 text spacing) reaches the button. */
.masthead { pointer-events: none; }
.masthead-in > * { pointer-events: auto; }
.masthead-in {
  display: flex;
  align-items: center;
  gap: 16px clamp(24px, 3vw, 48px);
  padding-block: clamp(18px, 2.4vw, 32px);
}
.brand { display: block; flex: none; line-height: 0; border-radius: 2px; }
/* The DialRoom wordmark from Nico's Canva kit (D-034). The kit's minimum width is 120px. */
.brand img { width: clamp(128px, 11.5vw, 168px); height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav a {
  display: inline-block;
  padding-block: 8px;
  font: 500 13px/1 var(--sans);
  letter-spacing: .05em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--on-dark-2);
  background: linear-gradient(var(--rose), var(--rose)) 0 100% / 0 1px no-repeat;
  transition: color .3s ease, background-size .45s var(--ease);
}
.nav a:hover { color: var(--on-dark-hi); background-size: 100% 1px; }
.status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rose);
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px rgba(211, 168, 130, .16);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(112px, 15vh, 200px);
  background: var(--charcoal);
  color: var(--on-dark);
  overflow: hidden;
}
.hero-media { position: absolute; z-index: -1; inset: 0; background: var(--charcoal); }
.hero-still, .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}
/* The still (hero.jpg) is a different shot from the film's first frame, so a hard switch from one
   to the other jumps. The film plays only once site.js starts it: until then it stays transparent
   over the still, then dissolves in. */
.hero-video { opacity: 0; }
.hero-video.is-playing { opacity: 1; transition: opacity 1.2s ease; }
/* The prototype's scrim, plus shade at the top for the masthead. It overhangs the media box
   slightly so that no unscrimmed pixel row shows when the box ends on a fractional pixel.
   The film pushes in, and the lug and the lit strap rise behind the links and the status label, so
   the top band stays dark down to the links' baseline and the corner above the right edge of the
   content is darker still. The masthead keeps its contrast on every frame of the loop. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: -1px 0 -2px;
  background:
    radial-gradient(max(560px, 38vw) 240px at calc(50% + min(50% - var(--edge-r), 700px)) 0, rgba(20, 19, 18, .86) 0, rgba(20, 19, 18, .72) 44%, rgba(20, 19, 18, 0) 100%),
    linear-gradient(180deg, rgba(20, 19, 18, .86) 0, rgba(20, 19, 18, .74) 72px, rgba(20, 19, 18, .3) 140px, rgba(20, 19, 18, 0) 220px),
    linear-gradient(90deg, rgba(20, 19, 18, .96) 0%, rgba(20, 19, 18, .82) 30%, rgba(20, 19, 18, .25) 62%, rgba(20, 19, 18, 0) 80%),
    linear-gradient(0deg, rgba(20, 19, 18, .92) 0%, rgba(20, 19, 18, 0) 38%);
}
/* The hero's text. site.js adds the film's button (.film-toggle): here it ends the links' row, and
   site.js puts it after the links; where the film has its own band and on phones held sideways
   (below), it ends the kicker's row, and site.js puts it after the kicker. site.js uses the same
   media queries as the two blocks below that set "kick toggle"; tests/static.test.mjs checks it. */
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kick kick" "title title" "lede lede" "actions toggle" "facts facts";
  column-gap: 16px;
  padding-bottom: clamp(28px, 5.5vh, 64px);
}
.hero-in > .kick { grid-area: kick; }
.hero-in > h1 { grid-area: title; }
.hero-in > .lede { grid-area: lede; }
.hero-in > .actions { grid-area: actions; }
.hero-in > .facts { grid-area: facts; }
.hero h1 {
  margin-top: 24px;
  max-width: 16ch;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(42px, 5vw, 84px);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--on-dark-hi);
}
.hero h1 span { display: block; color: rgba(243, 237, 225, .58); }
.lede {
  margin-top: 24px;
  max-width: 46ch;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
  color: rgba(237, 230, 216, .8);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font: 600 14px/1 var(--sans);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .3s ease, box-shadow .4s ease, color .3s ease;
}
.btn-lux {
  background: var(--lux);
  border-color: #d6ad86;
  color: #1c1610;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-lux:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 34px -16px rgba(214, 173, 134, .7); }
.btn-ghost { border-color: rgba(214, 173, 134, .45); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--rose); color: var(--on-dark-hi); }

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(32px, 5.5vh, 72px);
  border-top: 1px solid var(--dark-line);
}
.facts li {
  padding: 18px 24px 0 0;
  font-family: var(--display);
  font-size: clamp(19px, 1.55vw, 24px);
  line-height: 1.22;
  font-variant-numeric: lining-nums;
  color: var(--on-dark-hi);
}
.facts li + li { padding-left: 24px; border-left: 1px solid var(--dark-line-soft); }
.facts li:last-child { padding-right: 0; }
/* The lighter clause gets its own line, as the prototype's .fp-stats stacks value and note, so a
   line never breaks in the middle of it. */
.facts span { display: block; font-size: .86em; color: rgba(243, 237, 225, .62); text-wrap: balance; }

/* The film's pause button (spec 4.2): quiet, light on dark, on a dim ground of its own, so its label
   (4.5:1) and its edge (3:1) hold over every frame of the film. The edge's .8 leaves its lowest
   pixel at 3.75:1 (1440x900); at .7 it was 3.02:1. Centred on the 50px links. */
.hero-in > .film-toggle {
  grid-area: toggle;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  min-width: 8.6em; /* as wide for "Play film" as for "Pause film", so it never jumps */
  min-height: 36px;
  margin: 0 0 7px;
  padding: 0 15px 0 13px;
  border: 1px solid rgba(237, 230, 216, .8);
  border-radius: 2px;
  background: rgba(20, 19, 18, .7);
  color: var(--on-dark-hi);
  font: 500 13px/1 var(--sans);
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: pointer;
  animation: fade-in .8s ease .6s both;
  transition: border-color .3s ease;
}
.film-toggle:hover { border-color: var(--rose); }
/* Two bars while it plays, a triangle while it is stopped. */
.film-toggle::before { content: ""; flex: none; width: 8px; height: 10px; border-inline: 3px solid currentColor; }
.film-toggle.is-stopped::before { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* Forced colours (Windows High Contrast) repaint backgrounds, which would hide the triangle. */
@media (forced-colors: active) {
  .film-toggle.is-stopped::before { forced-color-adjust: none; background: ButtonText; }
}
@media (pointer: coarse) {
  .hero-in > .film-toggle { min-height: 44px; margin-bottom: 3px; }
}

/* Short desktop windows (the full-bleed hero below): scale the headline with the height and tighten
   the spacing, so the links and the facts strip stay above the fold on 13 to 15 inch laptops. */
@media (min-width: 1100px) and (min-aspect-ratio: 3/2) and (max-height: 899px) {
  .hero h1 { font-size: clamp(42px, min(5vw, 8vh), 84px); }
}
@media (min-width: 1100px) and (min-aspect-ratio: 3/2) and (max-height: 820px) {
  .hero h1 { margin-top: 18px; }
  .lede { margin-top: 18px; }
  .actions { margin-top: 24px; }
}
@media (min-width: 1100px) and (min-aspect-ratio: 3/2) and (max-height: 700px) {
  .hero h1 { font-size: clamp(40px, min(5vw, 7.2vh), 84px); }
  .lede { line-height: 1.55; }
  .hero-in { padding-bottom: 24px; }
}

/* Load-in motion for the hero (CSS only, so it needs no script). */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hero-media { animation: fade-in 1.6s ease both; }
.hero-in > * { animation: rise 1.2s var(--ease) both; }
.hero-in > h1 { animation-delay: .1s; }
.hero-in > .lede { animation-delay: .22s; }
.hero-in > .actions { animation-delay: .34s; }
.hero-in > .facts { animation-delay: .5s; }

/* ---------- principles ---------- */
.principles { padding-block: clamp(72px, 9vw, 128px) clamp(88px, 10vw, 150px); }
.principle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid var(--dark-line);
}
.principle-list li { padding: 34px 36px 0 0; }
.principle-list li + li { padding-left: 36px; border-left: 1px solid var(--dark-line-soft); }
.principle-list h3 {
  font-family: var(--display);
  font-size: clamp(27px, 2.3vw, 34px);
  line-height: 1.1;
  color: var(--on-dark-hi);
}
.principle-list p { margin-top: 16px; max-width: 42ch; font-size: 15.5px; line-height: 1.7; color: var(--on-dark-2); }
@media (min-width: 900px) {
  /* The titles share one grid row, so the three paragraphs start on the same line. */
  .principle-list { grid-template-rows: auto auto; }
  .principle-list li { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
}

/* ---------- how it works ---------- */
.how { padding-block: var(--section-y); }
.features { margin-top: clamp(64px, 8vw, 120px); display: grid; gap: clamp(80px, 10vw, 160px); counter-reset: feature; }
.feature {
  counter-increment: feature;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
}
.feature-media { grid-row: 1; }
.feature-text { grid-row: 1; }
.feature-media img { width: 100%; height: auto; object-fit: cover; background: #e6e0d5; }
.feature-media figcaption {
  margin-top: 14px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* "01 ——": the counter, then a short hairline drawn as a background. */
.feature-text::before {
  content: counter(feature, decimal-leading-zero);
  display: inline-block;
  padding-right: 60px;
  font: 300 22px/1 var(--display);
  font-variant-numeric: lining-nums;
  letter-spacing: .06em;
  color: var(--brass);
  background: linear-gradient(var(--brass), var(--brass)) right 55% / 40px 1px no-repeat;
}
.feature h3 {
  margin-top: 26px;
  font-family: var(--display);
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.04;
  letter-spacing: -.008em;
  color: var(--ink);
}
.feature p { margin-top: 20px; max-width: 44ch; font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.7; color: var(--ink-2); }

.feature-evaluate .feature-media { grid-column: 1 / span 6; }
.feature-evaluate .feature-media img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
.feature-evaluate .feature-text { grid-column: 8 / span 4; }
.feature-collection .feature-media { grid-column: 6 / span 7; }
.feature-collection .feature-media img { aspect-ratio: 3 / 2; object-position: 55% 50%; }
.feature-collection .feature-text { grid-column: 1 / span 4; }
.feature-scout .feature-media { grid-column: 1 / span 7; }
.feature-scout .feature-media img { aspect-ratio: 16 / 9; object-position: 60% 50%; }
.feature-scout .feature-text { grid-column: 9 / span 4; }
.feature-stationery .feature-media { grid-column: 6 / span 7; }
.feature-stationery .feature-media img { aspect-ratio: 3 / 2; object-position: 58% 50%; }
.feature-stationery .feature-text { grid-column: 1 / span 4; }
.feature-signals .feature-media { grid-column: 2 / span 5; }
.feature-signals .feature-media img { aspect-ratio: 4 / 5; object-position: 50% 45%; }
.feature-signals .feature-text { grid-column: 8 / span 4; }

/* ---------- sample dossier ---------- */
.sample { padding-block: var(--section-y); overflow: clip; }
.sample-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
}
.sample .section-head { grid-column: 1 / span 5; }
.dossier {
  grid-column: 7 / span 6;
  padding: clamp(22px, 3vw, 44px);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 60px 100px -60px rgba(0, 0, 0, .9);
}
.dossier-flag {
  display: inline-block;
  text-wrap: balance;
  padding: 7px 11px;
  border: 1px solid rgba(138, 94, 22, .4);
  border-radius: 2px;
  background: var(--claim-soft);
  color: var(--claim);
  font: 600 10.5px/1.35 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* minmax(0, 1fr): the text column may shrink below its longest line, so the heading and the price
   wrap inside the card instead of pushing past it (320px screens, user text spacing). */
.dossier-top {
  display: grid;
  grid-template-columns: clamp(88px, 28%, 220px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: end;
  margin-top: 26px;
}
.dossier-photo { aspect-ratio: 1; overflow: hidden; background: #1c1b19; border-radius: 1px; }
.dossier-photo img { width: 100%; height: 100%; object-fit: cover; }
.dossier-id h3 { font-family: var(--display); font-size: clamp(22px, 2vw, 30px); line-height: 1.12; color: var(--ink); }
.dossier-range-label {
  margin-top: 18px;
  font: 600 10.5px/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dossier-range {
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1;
  font-variant-numeric: lining-nums;
  letter-spacing: -.01em;
}
.range { position: relative; height: 56px; margin-top: 30px; }
.range::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--hairline-2); }
.range-band {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 6px;
  height: 17px;
  border: 1px solid var(--est);
  border-radius: 1px;
  background: rgba(60, 86, 114, .16);
}
.range-mid { position: absolute; left: 50%; top: 0; width: 2px; height: 29px; margin-left: -1px; background: var(--ink); }
.range-lo, .range-hi {
  position: absolute;
  top: 38px;
  transform: translateX(-50%);
  font: 500 12px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.range-lo { left: 18%; }
.range-hi { left: 82%; }
.dossier-basis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 14px; }
.conf { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1.2 var(--sans); color: var(--ver); }
.conf-bars { display: inline-flex; gap: 3px; }
.conf-bars i { width: 7px; height: 13px; border-radius: 1px; background: var(--ver); }
.basis { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.evidence { margin-top: 26px; border-top: 1px solid var(--hairline); }
.evidence > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
.evidence > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ev {
  justify-self: start;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  font: 600 11px/1 var(--sans);
  letter-spacing: .02em;
  white-space: nowrap;
}
.ev-verified { background: var(--ver); color: var(--paper); }
.ev-claim { border-color: var(--claim); background: var(--claim-soft); color: var(--claim); }
.ev-estimate { border-color: var(--est); border-style: dashed; background: var(--est-soft); color: var(--est); }
.ev-unknown {
  border-color: var(--hairline-2);
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(207, 198, 182, .5) 4px 5px);
  color: var(--ink-2);
}
.evidence dd { font-size: 15px; line-height: 1.5; color: var(--ink); }
.evidence dd::first-letter { text-transform: uppercase; }

/* ---------- promise ---------- */
.promise { padding-block: var(--section-y); }
.promise-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.promise .section-head { grid-column: 1 / span 5; position: sticky; top: clamp(40px, 8vh, 88px); }
.promise-list { grid-column: 7 / span 6; counter-reset: promise; border-top: 1px solid var(--hairline); }
.promise-list li {
  counter-increment: promise;
  display: grid;
  grid-template-columns: 64px 1fr;
  padding: 34px 0 36px;
  border-bottom: 1px solid var(--hairline);
}
.promise-list li::before {
  content: counter(promise);
  grid-row: 1 / span 2;
  font: 300 46px/.82 var(--display);
  font-variant-numeric: lining-nums;
  color: var(--brass);
}
.promise-list h3 { font-family: var(--display); font-size: clamp(27px, 2.3vw, 34px); line-height: 1.1; color: var(--ink); }
.promise-list p { margin-top: 14px; max-width: 52ch; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.7; color: var(--ink-2); }

/* ---------- makers ---------- */
.makers { padding-block: var(--section-y); }
.makers-head, .membership-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
  align-items: last baseline;
}
.makers-head > *, .membership-head > * { grid-column: 1 / span 7; }
.makers-head .section-sub, .membership-head .section-sub { grid-column: 8 / span 5; grid-row: 2; margin-top: 0; }
.register { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--dark-line); }
.group {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
  padding-block: clamp(22px, 2.4vw, 34px);
  border-bottom: 1px solid var(--dark-line-soft);
}
.group h3 {
  grid-column: 1 / span 3;
  font: 600 11px/1.5 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose);
}
/* Names flow inline, separated by small rose dots. Each dot sits in the gap before its name;
   the list is pulled left by one gap and clipped there, so no line starts or ends with a dot. */
.group ul {
  grid-column: 4 / span 9;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  margin-left: -1.3em;
  font-size: clamp(23px, 2.3vw, 34px);
  clip-path: inset(-.5em -.5em -.5em 1.3em);
}
.group li {
  position: relative;
  padding-left: 1.3em;
  font-family: var(--display);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--on-dark-hi);
}
.group li::before {
  content: "";
  position: absolute;
  left: .65em;
  top: .78em;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(211, 168, 130, .75);
}
.makers-note { margin-top: 30px; max-width: 64ch; font-size: 13.5px; line-height: 1.6; color: var(--on-dark-3); text-wrap: balance; }

/* ---------- membership ---------- */
.membership { padding-block: var(--section-y); }
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 96px);
  border-block: 1px solid var(--hairline);
}
.plan { display: flex; flex-direction: column; padding: 34px 28px 32px 0; }
.plan + .plan { padding-left: 28px; border-left: 1px solid var(--hairline); }
.plan-launch { box-shadow: inset 0 2px 0 var(--brass); }
.plan h3 { font-family: var(--display); font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05; color: var(--ink); }
.plan-for { margin-top: 14px; max-width: 26ch; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.plan-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 44px;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.plan-status::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.plan-launch .plan-status { color: var(--brass); }
.plans-note { margin-top: 28px; font-size: 15px; color: var(--ink-2); }

/* ---------- closing ---------- */
.closing { padding-block: clamp(104px, 14vw, 220px); }
.closing-in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
  align-items: last baseline;
}
.closing h2 {
  grid-column: 1 / span 8;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(52px, 7.6vw, 128px);
  line-height: .94;
  letter-spacing: -.02em;
  color: var(--on-dark-hi);
}
.closing p {
  grid-column: 9 / span 4;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  color: var(--rose);
}

/* ---------- footer ---------- */
.site-foot { background: var(--charcoal-deep); color: var(--on-dark-3); border-top: 1px solid var(--dark-line-soft); }
.foot-in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  padding-block: clamp(48px, 6vw, 80px) clamp(56px, 7vw, 96px);
}
.foot-logo { grid-column: 1 / span 3; width: 128px; height: auto; }
.foot-text { grid-column: 4 / span 8; }
.foot-org { font-size: 14px; color: var(--on-dark); }
.foot-disclaimer { margin-top: 12px; max-width: 72ch; font-size: 13px; line-height: 1.7; }
/* The quiet link to the Private Desk's own sign-in page (spec 4.10, D-030). */
.foot-desk { margin-top: 16px; font-size: 13px; line-height: 1.7; }
.foot-desk a {
  display: inline-block;
  padding-block: 4px;
  color: var(--on-dark);
  /* From currentColor, so the underline fades with the text and never counts as its background. */
  text-decoration: underline 1px color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: 4px;
  transition: color .3s ease;
}
.foot-desk a:hover { color: var(--on-dark-hi); }

/* ---------- 404 page ---------- */
.page-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page-404 .masthead { position: static; border-bottom: 1px solid var(--dark-line-soft); }
.page-404 .status { margin-left: auto; }
.notfound { flex: 1; display: flex; align-items: center; padding-block: clamp(72px, 14vh, 160px); }
.notfound h1 {
  margin-top: 24px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: .96;
  letter-spacing: -.015em;
  color: var(--on-dark-hi);
}
.notfound-text { margin-top: 24px; max-width: 46ch; font-size: clamp(16px, 1.25vw, 18px); color: var(--on-dark-2); }
.page-404 .foot-text { grid-column: 1 / -1; }

/* ---------- scroll reveal (only when site.js runs; see html.js) ---------- */
html.js .rv { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .principle-list .rv:nth-child(2), html.js .plans .rv:nth-child(2), html.js .feature-text.rv { transition-delay: .1s; }
html.js .principle-list .rv:nth-child(3), html.js .plans .rv:nth-child(3) { transition-delay: .2s; }
html.js .plans .rv:nth-child(4) { transition-delay: .3s; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(3) { padding-left: 0; border-left: 0; }
  .plan:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}

@media (max-width: 959px) {
  .masthead-in { flex-wrap: wrap; }
  .status { margin-left: auto; }
  .nav {
    order: 3;
    width: calc(100% + var(--edge-l) + var(--edge-r));
    margin: 0 calc(-1 * var(--edge-r)) 0 calc(-1 * var(--edge-l));
    /* overflow-x: auto clips vertically too; the bottom padding keeps the focus ring inside. */
    padding: 12px var(--edge-r) 8px var(--edge-l);
    border-top: 1px solid var(--dark-line-soft);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav ul { gap: 24px; }
}

/* Small phones: the four links share one row without scrolling. */
@media (max-width: 479px) {
  .nav ul { justify-content: space-between; gap: 12px; }
  .nav a { font-size: 12px; letter-spacing: .03em; }
}
/* Below 360px a shorter rule keeps the hero's kicker on one line beside the film's button. */
@media (max-width: 359px) {
  .hero .kick { gap: 10px; }
  .hero .kick::before { width: 24px; }
}

@media (max-width: 899px) {
  .principle-list { grid-template-columns: 1fr; }
  .principle-list li, .principle-list li + li { padding: 28px 0 30px; border-left: 0; }
  .principle-list li + li { border-top: 1px solid var(--dark-line-soft); }

  .feature { grid-template-columns: 1fr; row-gap: 30px; }
  .feature .feature-media, .feature .feature-text { grid-column: 1; grid-row: auto; }
  .feature-signals .feature-media { width: min(100%, 520px); }
  .feature-text { max-width: 600px; }

  .sample-grid, .promise-grid, .closing-in, .makers-head, .membership-head, .foot-in { grid-template-columns: 1fr; }
  .sample .section-head, .dossier, .promise .section-head, .promise-list, .closing h2, .closing p,
  .makers-head > *, .membership-head > *, .foot-logo, .foot-text { grid-column: 1; grid-row: auto; }
  .dossier { margin-top: 48px; }
  .promise .section-head { position: static; }
  .promise-list { margin-top: 48px; }
  .makers-head .section-sub, .membership-head .section-sub { grid-column: 1; grid-row: auto; margin-top: 22px; }
  .promise-list li { grid-template-columns: 48px 1fr; }
  .promise-list li::before { font-size: 40px; }
  .group { grid-template-columns: 1fr; row-gap: 12px; }
  .group h3, .group ul { grid-column: 1; }
  .closing p { margin-top: 28px; }
}

/* Phones, tablets, narrow windows and any window of 3:2 or squarer: the masthead sits on plain
   charcoal, the film gets its own band below it (faded in at the top, out at the bottom), and the
   copy starts over the band's lower edge. At these shapes a full-bleed film puts the dial behind the
   headline and the lede as the camera pushes in. Short, wide windows (phones held sideways) are the
   exception: there the band would push the copy below the fold (see below). */
@media (max-width: 1099px) and (min-height: 501px), (max-aspect-ratio: 3/2) {
  .masthead { position: relative; background: var(--charcoal); }
  .hero {
    --band: clamp(320px, 58svh, 640px);
    min-height: 0;
    justify-content: flex-start;
    padding-top: calc(var(--band) * .74);
  }
  .hero-media { bottom: auto; height: var(--band); }
  .hero-still, .hero-video { object-position: 86% 45%; }
  .hero-media::after {
    background:
      linear-gradient(180deg, #141312 0, rgba(20, 19, 18, .5) 36px, rgba(20, 19, 18, 0) 112px),
      linear-gradient(0deg, #141312 0%, rgba(20, 19, 18, .9) 20%, rgba(20, 19, 18, .35) 42%, rgba(20, 19, 18, 0) 60%);
  }
  .hero-in { grid-template-areas: "kick toggle" "title title" "lede lede" "actions actions" "facts facts"; padding-bottom: 8px; }
  /* Negative margins keep the kicker's row as tall as the kicker. */
  .hero-in > .film-toggle { align-self: center; margin-block: -11px; }
  @media (pointer: coarse) {
    .hero-in > .film-toggle { margin-block: -15px; }
  }
}
@media (max-width: 820px) {
  .hero h1 { font-size: clamp(42px, 7.4vw, 60px); }
}

/* Phones held sideways and other short, wide windows, such as 844x390 (spec section 5). The film
   fills the hero as on wide screens, under the same scrim, and the masthead sits over it. A smaller
   headline lets the kicker, the headline, the lede and the links share the first view, from 360px
   tall. (1501/1000: just wider than 3:2, where the band layout above stops.) */
@media (max-width: 1099px) and (max-height: 500px) and (min-aspect-ratio: 1501/1000) {
  .masthead-in { padding-block: 12px; }
  .brand img { width: 112px; }
  .nav a { font-size: 12px; letter-spacing: .03em; }
  .hero { padding-top: 80px; }
  /* From 640px wide the four links fit on one row between the logo and the status label, closer
     together below 667px. Narrower windows keep them on a row of their own, as phones held upright
     do. They never scroll under a fade, where a focused link would be cut off. */
  @media (min-width: 640px) {
    .masthead-in { flex-wrap: nowrap; }
    .nav { order: 0; flex: 0 1 auto; width: auto; min-width: 0; margin: 0 0 0 auto; padding: 6px; border-top: 0; }
    .nav ul { gap: 16px; }
    .status { margin-left: 0; }
  }
  @media (min-width: 640px) and (max-width: 666px) {
    .nav ul { gap: 8px; }
  }
  @media (max-width: 639px) {
    .masthead-in { row-gap: 8px; }
    .nav { padding-block: 8px 7px; }
    .hero { padding-top: 128px; }
  }
  /* 21ch, not 20ch: at 20ch the headline was under 3px from a fifth line, which pushed the links
     below the fold on GitHub's Linux runner. 21ch leaves about 16px and keeps the same four lines. */
  .hero h1 { margin-top: 12px; max-width: 21ch; font-size: clamp(30px, 8.5vh, 38px); }
  .lede { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .actions { margin-top: 16px; }
  .btn { min-height: 44px; }
  /* 360px tall: a little less headline and space, so the links still end in the first view. */
  @media (max-height: 380px) {
    .hero h1 { margin-top: 10px; font-size: clamp(28px, 8vh, 38px); }
    .actions { margin-top: 12px; }
  }
  /* The film's button ends the kicker's row, under the status label, where the scrim is darkest. */
  .hero-in { grid-template-areas: "kick toggle" "title title" "lede lede" "actions actions" "facts facts"; }
  .hero-in > .film-toggle { align-self: center; margin-block: -11px; }
  @media (pointer: coarse) {
    .hero-in > .film-toggle { margin-block: -15px; }
  }
  /* The copy covers more of the film than on wide screens, so the scrim follows the copy: dark across
     its width (the lede is at most 386px wide), then fading out over the watch. */
  .hero-media::after {
    background:
      radial-gradient(max(560px, 38vw) 240px at calc(50% + min(50% - var(--edge-r), 700px)) 0, rgba(20, 19, 18, .86) 0, rgba(20, 19, 18, .72) 44%, rgba(20, 19, 18, 0) 100%),
      linear-gradient(180deg, rgba(20, 19, 18, .86) 0, rgba(20, 19, 18, .74) 72px, rgba(20, 19, 18, .3) 140px, rgba(20, 19, 18, 0) 220px),
      linear-gradient(90deg, rgba(20, 19, 18, .96) 0, rgba(20, 19, 18, .88) calc(var(--edge-l) + 330px), rgba(20, 19, 18, .6) calc(var(--edge-l) + 460px), rgba(20, 19, 18, 0) calc(var(--edge-l) + 660px)),
      linear-gradient(0deg, rgba(20, 19, 18, .96) 0%, rgba(20, 19, 18, .9) 28%, rgba(20, 19, 18, 0) 52%);
  }
}

@media (max-width: 599px) {
  .facts { grid-template-columns: 1fr; row-gap: 0; }
  .facts li, .facts li + li { padding: 14px 0; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--dark-line-soft); }
  .facts li:last-child { padding-bottom: 0; }
  .actions .btn { flex: 1 1 auto; }
  .plans { grid-template-columns: 1fr; }
  .plan, .plan + .plan, .plan:nth-child(3) { padding: 26px 0 24px; border-left: 0; }
  .plan + .plan { border-top: 1px solid var(--hairline); }
  .plan-status { padding-top: 22px; }
  .evidence > div { grid-template-columns: 1fr; row-gap: 8px; }
  .dossier-top { align-items: center; }
}
@media (max-width: 399px) {
  .dossier-top { gap: 16px; }
  .dossier-range { font-size: 32px; }
}
/* 320px screens (and 1280px windows at 400% zoom): the photo sits above the name. */
@media (max-width: 359px) {
  .dossier-top { grid-template-columns: 1fr; }
  .dossier-photo { width: 112px; }
}

/* ---------- reduced motion: show the still, no load or scroll animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-video, .hero-in > .film-toggle { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .rv { opacity: 1; transform: none; }
}

/* Print and Save as PDF: every section, with its own colours, and no card split across pages. */
@media print {
  .hero-video, .hero-in > .film-toggle, .nav, .skip { display: none; }
  .hero { min-height: 0; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .rv { opacity: 1 !important; transform: none !important; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .feature, .dossier, .promise-list li, .group, .plan, .principle-list li { break-inside: avoid; }
  .section-head { break-after: avoid; }
  .promise .section-head { position: static; }
}