/* ==========================================================================
   Veritas Assembly — one-page site
   Tokens are transcribed from 07 Design System v2.0, Section 02. Do not extend.
   ========================================================================== */

:root {
  /* ---- BRAND ---- */
  --navy:       #192A4B;
  --logo-red:   #D01E25;
  --text-red:   #B51E27;
  --slate:      #5C6470;

  /* ---- NEUTRALS ---- */
  --white:      #FFFFFF;
  --mist:       #F2F4F6;
  --line:       #DDE1E6;
  --ink:        #101720;
  --ink-soft:   #3A4250;
  --mono-slate: #9AA3B2;

  /* ---- INDICATORS (product surfaces only, always with a text label) ---- */
  --ok:            #2E5E41;  --ok-on-dark:        #63A87E;
  --attention:     #8A6410;  --attention-on-dark: #D9A83E;
  --error:         #B51E27;  --error-on-dark:     #E8747A;

  /* ---- TYPE ---- */
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;

  /* ---- LAYOUT ---- */
  --radius: 0;
  --gutter: 44px;
  --maxw: 1300px;
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 40px; --space-6: 56px;
  --hairline: 1px solid var(--line);
  --hairline-on-dark: 1px solid rgba(255,255,255,.16);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font: 400 15px/1.60 var(--font-sans);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.on-dark :focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--navy);
  padding: 12px 18px; font: 700 15px/1 var(--font-sans);
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Type tokens
   -------------------------------------------------------------------------- */

.t-display     { font: 800 66px/1.00 var(--font-sans); letter-spacing: -.033em; }
.t-page-title  { font: 800 38px/1.08 var(--font-sans); letter-spacing: -.025em; }
.t-section     { font: 700 26px/1.20 var(--font-sans); letter-spacing: -.012em; }
.t-card        { font: 700 18px/1.30 var(--font-sans); }
.t-lede        { font: 400 18px/1.50 var(--font-sans); color: var(--ink-soft); }
.t-body        { font: 400 15px/1.60 var(--font-sans); }
.t-body-strong { font: 600 15px/1.60 var(--font-sans); }
.t-label       { font: 600 13px/1.40 var(--font-sans); }
.t-caption     { font: 400 12px/1.45 var(--font-sans); color: var(--slate); }
.t-kicker      { font: 700 11.5px/1.20 var(--font-sans); letter-spacing: .10em; text-transform: uppercase; }
.t-button      { font: 700 15px/1.00 var(--font-sans); }
.t-data        { font: 600 12px/1.40 var(--font-mono); }

.measure { max-width: 68ch; }
.measure-narrow { max-width: 58ch; }

/* Kicker, treatment one: white on a Logo Red block. */
.kicker-block {
  display: inline-block;
  background: var(--logo-red);
  color: var(--white);
  padding: 6px 12px;
}
/* Kicker, treatment two: Text Red on the ground. Set as mono rubric. */
.rubric {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-red);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

section { padding: 88px 0; }
section.tight { padding: 64px 0; }
.band-mist { background: var(--mist); }
.band-navy { background: var(--navy); color: var(--white); }
.band-ink  { background: var(--ink);  color: var(--white); }
.rule { border: 0; border-top: var(--hairline); }

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

.btn {
  display: inline-block;
  font: 700 15px/1 var(--font-sans);
  padding: 16px 24px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .12s linear, color .12s linear;
}
.btn-primary   { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primary:hover { background: #22375F; }
.btn-secondary { background: transparent; color: var(--navy); border: 2px solid var(--navy); padding: 15px 23px; }
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-on-dark   { background: var(--white); color: var(--navy); }
.btn-on-dark:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-4); }

a.inline-link { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
a.inline-link:hover { border-bottom-color: var(--navy); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy); color: var(--white);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.nav-logo img { height: 28px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font: 500 13.5px/1 var(--font-sans);
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.nav-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.nav-cta {
  background: var(--white); color: var(--navy);
  font: 700 13.5px/1 var(--font-sans);
  padding: 12px 18px; text-decoration: none; white-space: nowrap;
}
.nav-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-toggle {
  display: none;
  font: 600 13px/1 var(--font-sans);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.32);
  padding: 10px 14px; cursor: pointer;
}

/* The section under the reader, named in the bar. Set as mono so it reads as
   a positional readout rather than as another navigation link competing with
   the ones beside it. Phone only: on a wide screen every section link is
   already visible in the bar and the page is six screens rather than nine,
   so the readout would be answering a question nobody is asking. */
.nav-here { display: none; }

/* The way back. Square, navy, hairline, no shadow and no rounding: it is a
   control on the page, not a floating pill borrowed from somewhere else. */
.back-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: var(--white);
  border: 1px solid rgba(255,255,255,.28);
  font: 600 12px/1 var(--font-sans);
  padding: 12px 14px; text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 180ms linear, transform 180ms linear, visibility 0s linear 180ms;
}
.back-top[data-on="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 180ms linear, transform 180ms linear, visibility 0s linear 0s;
}
.back-top .arw {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); position: relative; top: 1px;
}
.back-top:hover { background: #22375F; }
@media (prefers-reduced-motion: reduce) {
  .back-top { transition: none; }
}

/* --------------------------------------------------------------------------
   01 Hero
   -------------------------------------------------------------------------- */

.hero { padding: 0 0 80px; }

/* The masthead runs edge to edge. The copy column keeps the page's left margin
   so the headline still lines up with every section below it; the vault fills
   the rest and bleeds off the top and right. A minimum height rather than a
   fixed one, so the copy sets the size and the artwork follows it. */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: stretch; min-height: 560px;
}
/* The headline is two sentences and it breaks where the sentence breaks, at
   every width. Not scoped to a breakpoint: at 1440 and 1100 the line length
   already put "More time" at the start of a line, so this changes nothing
   there, and between roughly 620 and 900 the natural wrap either ran the two
   claims together or left "More" alone on a line. */
.h1-l2 { display: block; }

.hero-copy { display: flex; align-items: center; padding: 72px 48px 72px 0; }
.hero-copy-in {
  width: 100%;
  max-width: calc(var(--maxw) * 0.46);
  margin-left: auto;
  padding-left: var(--gutter);
}
.hero h1 { margin-top: 20px; max-width: 15ch; }
.hero .t-lede { margin-top: 24px; max-width: 46ch; }

/* The artwork is decoration, and it is cropped hard on purpose: the bays should
   run out of the frame rather than sit inside it like a picture on a wall. The
   panel carries the photograph's own top-edge colour, so nothing flashes a
   different grey while the file arrives. */
.hero-art { position: relative; overflow: hidden; background: #989289; min-height: 360px; }
.hero-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* held left: the springing of the arch enters at the edge nearest the copy and
     carries over it, so the perspective leads back into the page rather than
     running off the outside edge */
  object-fit: cover; object-position: 22% 42%;
}

/* Kicker, treatment two from 07: Text Red on the ground rather than reversed
   out of a Logo Red block. Against a full-bleed image beside it, the block
   became a second red object competing with the one red moment the page allows. */
.kicker-rule { color: var(--text-red); }

/* The second action reads as navigation, not as a rival call to action. */
.btn-quiet {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 15px/1 var(--font-sans); color: var(--navy);
  text-decoration: none; padding: 16px 4px;
}
.btn-quiet .arw {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.btn-quiet:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The montage. A week of work, left to right, all of it on screen at once. */
/* One product surface per screen size, not two.

   The montage was added when the top of the page had no imagery. The vault
   photograph does that job now, so on anything wider than a phone the montage
   repeats what the five steps below already show, a section earlier than the
   argument that earns it: the reader met "Cut turf and assign it" before the
   page had told them what problem they have.

   Phones keep it, because .dwo-panel is hidden below 620px and the tabbed
   interaction is poor on a small screen. So a phone gets the montage and no
   step panels; everything else gets the step panels and no montage. */
@media (min-width: 621px) { .hero-montage { display: none; } }

.hero-montage { margin-top: 72px; }
.montage { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.montage-step { position: relative; min-width: 0; display: flex; flex-direction: column; }
.montage-step .ui { flex: 1 1 auto; display: flex; flex-direction: column; }
.montage-step + .montage-step::before {
  content: ""; position: absolute; top: 11px; left: -22px; width: 12px; height: 1px; background: var(--slate);
}
.montage-step + .montage-step::after {
  content: ""; position: absolute; top: 7.5px; left: -11px;
  border-left: 5px solid var(--slate); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.montage-note { margin-top: var(--space-3); }
/* the map still matches the other three panels so the row sits level */
@media (min-width: 1101px) {
  .montage .step-head { min-height: 48px; align-items: flex-start; }
  .hero-montage .montage-step .ui-clip { flex: 0 0 auto; height: 236px; min-height: 0; }
  .hero-montage .montage-step .viewfinder { flex: 0 0 auto; height: 236px; }
}
/* four narrow columns: the field pairs stack rather than squeeze */
.montage .extract { grid-template-columns: 1fr; }
.montage .extract div { padding: 7px 12px; }
.montage .extract div:nth-child(odd) { border-right: 0; border-bottom: 0; padding-bottom: 0; }
.montage .ui-table td { padding: 9px 12px; }
.montage .viewfinder { padding: 22px 18px; }
.montage .vf-doc { max-width: 190px; }

.step-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--space-2); }
.step-n { font: 600 12px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--text-red); }
.step-t { font: 700 18px/1.30 var(--font-sans); color: var(--ink); }
/* The product's own action bar. It reads as a toolbar inside the screen
   rather than as a card action on the page, which is the whole point: a navy
   rectangle alone in white space is the page's language for "click me," and
   these cannot be clicked. Mist fill, a rule above it, and the button sitting
   in chrome instead of in margin. The editorial caption that used to live in
   here now sits outside the frame, where the page's voice belongs. */
.step-foot {
  margin-top: auto; border-top: var(--hairline); background: var(--mist);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.step-foot .ui-hint { white-space: nowrap; font: 400 11.5px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--slate); }
/* Outside the frame. Page voice, page scale. */
.step-cap { display: block; margin-top: 12px; }
.rot-panel .ui { display: flex; flex-direction: column; }

/* Capture view. A dark field so the paper reads as the thing being framed. */
.viewfinder {
  position: relative; background: var(--ink);
  padding: 34px 30px; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
}
.vf-doc {
  background: var(--white); border: 1px solid var(--line);
  padding: 16px; width: 100%; max-width: 260px;
  display: grid; gap: 6px;
}
.vf-doc .ln { height: 4px; background: var(--line); }
.vf-doc .ln.short { width: 42%; }
.vf-doc .ln.mid { width: 66%; }
.vf-doc .ln.dark { background: var(--slate); }
.vf-doc .band { border-top: 1px solid var(--line); margin: 3px 0 1px; }
.vf-amt { font: 600 17px/1.2 var(--font-mono); color: var(--ink); margin-top: 4px; }
.vf-corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--white); }
.vf-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.vf-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.vf-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.vf-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.vf-hint {
  position: absolute; left: 12px; bottom: 12px;
  font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ok-on-dark); border: 1px solid currentColor; padding: 4px 8px;
}

/* --------------------------------------------------------------------------
   02 The problem
   -------------------------------------------------------------------------- */

.editorial-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.editorial-grid > * { min-width: 0; }
.section-head { margin-top: var(--space-3); max-width: 20ch; }
.prose p + p { margin-top: var(--space-3); }
.prose p { color: var(--ink-soft); }

.claim {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 2px solid var(--navy);
  font: 600 17px/1.5 var(--font-sans);
  color: var(--ink);
  max-width: 46ch;
}

/* The fragmented stack. Labelled cells, no logos, no icons. */

/* --------------------------------------------------------------------------
   03 The answer — diagram of work moving
   -------------------------------------------------------------------------- */

.flow { margin-top: var(--space-6); border-top: var(--hairline); border-bottom: var(--hairline); padding: 28px 0; }
.flow-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.flow-node { position: relative; padding-right: 28px; }
.flow-node:last-child { padding-right: 0; }
.flow-node .n { font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.flow-node .label { font: 700 18px/1.30 var(--font-sans); margin-top: 6px; }
.flow-node .desc { font: 400 13px/1.55 var(--font-sans); color: var(--slate); margin-top: 6px; max-width: 26ch; }
.flow-node::after {
  content: ""; position: absolute; top: 8px; right: 14px;
  width: 12px; height: 1px; background: var(--slate);
}
.flow-node:last-child::after { display: none; }
.flow-line { height: 1px; background: var(--line); margin: 22px 0 0; }

/* --------------------------------------------------------------------------
   03 The answer, and what the product does
   -------------------------------------------------------------------------- */

.answer-head { margin-bottom: var(--space-5); }
.answer-head .section-head { margin-top: var(--space-3); max-width: 26ch; }

.dwo-prompt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-2); }
.dwo-prompt .hint { font: 400 13px/1.45 var(--font-sans); color: var(--slate); max-width: 52ch; }
.dwo-list { list-style: none; }

.dwo-btn {
  display: block; width: 100%; text-align: left;
  padding: 26px 20px 28px 17px; cursor: pointer;
  border-left: 3px solid transparent;
  border-bottom: var(--hairline);
}
.dwo-btn .idx {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--slate);
}
.dwo-btn .mark {
  width: 0; height: 0; flex: 0 0 auto;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 11px solid var(--line);
}
.dwo-btn .ttl { display: block; font: 700 19px/1.30 var(--font-sans); margin-top: 6px; }
.dwo-btn .dsc { display: block; font: 400 13.5px/1.60 var(--font-sans); color: var(--slate); margin-top: 8px; max-width: 46ch; }
.dwo-btn:hover { background: var(--mist); }
.dwo-btn:hover .mark { border-left-color: var(--navy); }

/* The step you are looking at takes the navy, the way the nav bar does.
   Nothing subtle: it has to be obvious which one the product belongs to. */
.dwo-item[data-current="true"] .dwo-btn {
  background: var(--navy); border-left-color: var(--navy); color: var(--white);
}
.dwo-item[data-current="true"] .dwo-btn .idx { color: rgba(255,255,255,.72); }
.dwo-item[data-current="true"] .dwo-btn .ttl { color: var(--white); }
.dwo-item[data-current="true"] .dwo-btn .dsc { color: rgba(255,255,255,.82); }
.dwo-item[data-current="true"] .dwo-btn .mark { border-left-color: var(--white); }

.dwo-caption { margin-top: 14px; display: flex; gap: 10px; align-items: baseline; }
.dwo-caption .tag { font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }
.dwo-caption .txt { font: 400 12px/1.45 var(--font-sans); color: var(--slate); }

/* Wide screens: the list is a column of steps and the product sits beside it,
   held in place while you read. Scrolling moves you through the steps, so
   nothing is hidden behind a click. */
@media (min-width: 1101px) {
  .dwo-list {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    /* explicit rows, so the panel can span all of them and the steps keep
       their own heights rather than being stretched by it */
    grid-template-rows: repeat(5, auto);
    column-gap: 48px;
  }
  .dwo-item { display: contents; }
  .dwo-btn { grid-column: 1; }
  .dwo-panel {
    grid-column: 2; grid-row: 1 / -1;
    position: sticky; top: 92px; align-self: start;
    min-height: 520px;
  }
  .dwo-panel[hidden] { display: none; }
}

/* Narrow screens: the panel opens under the step you tapped. The list stays
   a list, so the five steps are readable as a set before any one of them is
   opened, and the sections after this one are still reachable by thumb. */
/* The menu lists the booking link for the phone, where the menu is the only way
   to reach it. On a wide screen the button in the bar is already there, and two
   of the same action in one bar reads as a mistake. */
@media (min-width: 861px) { .nav-links a.nav-link-cta { display: none; } }

/* Phone and small tablet: the split stacks. The vault becomes a band above the
   copy rather than a column beside it, short enough that it introduces the page
   instead of occupying the whole first screen. */
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { order: -1; min-height: 0; height: 200px; }
  /* The gutter moves from the inner block to the outer one when the split
     stacks. Zeroing it on .hero-copy-in without putting it back on .hero-copy
     ran the kicker, headline and lede flush against the left edge of the
     screen: this is the one section that does not sit inside .wrap, so
     nothing else was supplying it. */
  .hero-copy { padding: 40px var(--gutter) 8px; }
  .hero-copy-in { max-width: none; margin-left: 0; padding-left: 0; }
  .hero h1 { max-width: none; }
}
@media (max-width: 620px) {
  .hero-art { height: 158px; }
  .btn-quiet { width: 100%; justify-content: center; padding: 16px 0; }
}

@media (max-width: 1100px) {
  .dwo-item { display: block; border-bottom: var(--hairline); }
  .dwo-panel { display: block; margin: 0 0 var(--space-5); }
  .dwo-panel[hidden] { display: none; }
  .dwo-btn {
    cursor: pointer; width: 100%; padding: var(--space-3) 44px var(--space-3) var(--space-2);
    border-left: 0; border-bottom: 0; position: relative;
  }
  .dwo-btn .mark { display: none; }
  .dwo-prompt { display: none; }
  .dwo-caption .showing { display: none; }
  /* the only affordance a tap target gets, and it has to be unmistakable */
  .dwo-btn::after {
    content: ""; position: absolute; right: var(--space-3); top: 26px;
    width: 9px; height: 9px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
    transform: rotate(45deg); transition: transform 180ms ease;
  }
  .dwo-item[data-current="true"] .dwo-btn::after {
    border-color: var(--white); transform: rotate(-135deg); top: 30px;
  }
  .dwo-btn .dsc { max-width: none; }
}

/* The section closes on its claim, with the optional service beside it. */
.answer-foot {
  margin-top: var(--space-6);
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 48px;
  align-items: start;
}
.dwo-carry {
  padding-top: var(--space-3); border-top: 2px solid var(--navy);
  font: 700 22px/1.20 var(--font-sans); letter-spacing: -.012em; max-width: 22ch;
}
.service-note { padding-top: var(--space-3); border-top: var(--hairline); max-width: 62ch; }
.service-note .t-body { color: var(--ink-soft); margin-top: 6px; }
.service-note strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   05 Organizational value — numbered rail
   -------------------------------------------------------------------------- */

.value-heads { max-width: 46ch; }
.value-lead { font: 400 18px/1.50 var(--font-sans); color: var(--ink-soft); }
.value-heads h2 { margin-top: var(--space-2); max-width: 20ch; }

.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hairline); margin-top: var(--space-6); }
.rail-cell { padding: 26px 26px 34px; border-left: var(--hairline); border-bottom: var(--hairline); }
.rail-cell:first-child { border-left: 0; padding-left: 0; }
.rail-cell:last-child { padding-right: 0; }
/* Number is at reading size, so it takes Text Red, not Logo Red. */
.rail-cell .num { font: 600 12px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--text-red); }
.rail-cell h3.asks { font: 700 28px/1.20 var(--font-sans); letter-spacing: -.012em; margin-top: 10px; color: var(--ink); }
.rail-cell p { font: 400 14px/1.60 var(--font-sans); color: var(--slate); margin-top: 14px; }
.rail-cell p strong { font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   06 Voter data services — callout
   -------------------------------------------------------------------------- */

.callout { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 48px; align-items: center; }
.callout h2 { margin-top: var(--space-3); max-width: 18ch; }
.callout p { margin-top: var(--space-2); max-width: 52ch; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   08 Networks and affiliates
   -------------------------------------------------------------------------- */

.network-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.network-grid h2 { max-width: 16ch; }
.network-grid h2 { max-width: 14ch; }
.network-sub {
  font: 700 26px/1.20 var(--font-sans); letter-spacing: -.012em; color: var(--ink);
  margin-top: var(--space-3); max-width: 24ch;
}

/* One line, stations at different sizes. No arrowheads: nothing travels here. */
.line-map { margin-top: 72px; border-top: var(--hairline); padding-top: var(--space-5); }
.line-map-fig { position: relative; }
.line-map svg { width: 100%; height: auto; overflow: visible; }
.line-map-labels { list-style: none; }
.line-map-labels li {
  position: absolute; transform: translateX(-50%);
  font: 600 13px/1.40 var(--font-sans); color: var(--ink);
  text-align: center; width: 15ch;
}
.line-map-labels li.first { transform: none; text-align: left; }
.line-map-labels li.last  { transform: translateX(-100%); text-align: right; }
.line-map-note { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   11 Final CTA + footer
   -------------------------------------------------------------------------- */

.final { padding: 80px 0; }
.final-statement { font: 800 40px/1.06 var(--font-sans); letter-spacing: -.025em; max-width: 18ch; }
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.final-statement { max-width: 20ch; }

.foot { padding: 26px 0 40px; border-top: var(--hairline); }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-logo img { height: 22px; width: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; }
.foot-links a { font: 600 13px/1.40 var(--font-sans); color: var(--slate); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-note { font: 400 12px/1.45 var(--font-sans); color: var(--slate); }

/* Two tiers at every width. The section links are navigation and belong with
   the mark; the legal line, the entity and the attribution are a different kind
   of statement and get their own band under a rule. Crowding all of it onto one
   row worked at no width and made the attribution read as another link. */
.foot-legal {
  width: 100%; display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 20px; margin-top: 20px; padding-top: 16px; border-top: var(--hairline);
}
.foot-legal-links { display: flex; gap: 18px; list-style: none; }
.foot-legal-links a { font: 400 12px/1.45 var(--font-sans); color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--line); }
.foot-legal-links a:hover { border-bottom-color: var(--slate); }
/* Set as written. Quieter than the legal entity line, because it is an
   attribution rather than a claim, and it never carries a link. */
.foot-legal-links .here { font: 400 12px/1.45 var(--font-sans); color: var(--mono-slate); }
.foot-powered { font: 400 12px/1.45 var(--font-sans); color: var(--mono-slate); margin-right: auto; }

@media (max-width: 860px) {
  .foot-inner { align-items: flex-start; }
}

/* ==========================================================================
   PRODUCT SURFACES
   White workspace, Mist banding, Line borders, Ink content, Slate labels,
   Navy header and primary actions, indicators in labelled badges.
   No Display, no Kicker, no ceremonial red.
   ========================================================================== */

/* These are pictures of the product, and they have to read that way without a
   caption saying so. Nothing can be clicked here, so nothing should invite it.
   A mat does the work a drop shadow would do elsewhere: the surface sits in a
   Mist margin inside a hairline, which frames it as a figure on the page
   rather than as another panel of the page. 07 forbids shadows, and this is
   the flat equivalent. */
.dwo-panel .ui,
.montage-step .ui {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  border: 7px solid var(--mist);
  outline: 1px solid var(--line);
  outline-offset: -7px;
}

.ui {
  background: var(--white);
  border: var(--hairline);
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink);
  overflow: hidden;
}
.ui-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--navy); color: var(--white);
  padding: 10px 14px;
}
.ui-bar .org { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-bar .org-name { font: 600 13px/1.4 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-bar .org-role { font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.28); padding: 3px 7px; }
.ui-bar .who { font: 400 12px/1.4 var(--font-sans); color: rgba(255,255,255,.82); white-space: nowrap; }

.ui-tabs { display: flex; gap: 0; border-bottom: var(--hairline); background: var(--white); overflow: hidden; }
.ui-tab {
  font: 600 12px/1.4 var(--font-sans); color: var(--slate);
  padding: 11px 14px; border-right: var(--hairline); white-space: nowrap;
}
.ui-tab[data-on="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--navy); }

.ui-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px; border-bottom: var(--hairline); }
.ui-title { font: 700 15px/1.3 var(--font-sans); }
.ui-sub { font: 400 12px/1.45 var(--font-sans); color: var(--slate); }
.ui-stat { display: flex; gap: 18px; }
.ui-stat div { text-align: right; }
.ui-stat .k { font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.ui-stat .v { font: 600 15px/1.3 var(--font-mono); color: var(--ink); }

.ui-body { display: grid; }
.ui-pad { padding: 14px; }
.ui-split { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
.ui-side { border-right: var(--hairline); background: var(--white); min-width: 0; }
.ui-main { min-width: 0; display: flex; flex-direction: column; }
.ui-main > .map,
.ui-main > .ui-clip { flex: 1 1 auto; }

.ui-label { font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
/* Product scale, not page scale. The page's own CTA is 700/15px navy-filled;
   at 700/12px these were the same object at eighty percent, which is why they
   read as clickable. Product chrome is denser than marketing chrome, so this
   is what the real thing looks like anyway. */
/* Controls drawn inside a product screen.

   A solid navy fill is a control of THIS WEBSITE and it goes somewhere.
   An outline is a control inside a picture of the product, and it does not.
   These were solid navy, which is the same fill as .btn-primary at 80% of the
   size, so readers clicked them and nothing happened. The outline carries the
   same shape and the same word without promising a click. */
.ui-btn { display: inline-block; font: 600 11.5px/1 var(--font-sans); padding: 6px 10px;
          background: transparent; color: var(--navy); border: 1px solid var(--navy);
          white-space: nowrap; }
.ui-btn.ghost,
.ui-btn.quiet { color: var(--slate); border-color: var(--line); }
.ui-field { border: var(--hairline); padding: 8px 10px; font: 400 12.5px/1.4 var(--font-sans); color: var(--ink); background: var(--white); }
.ui-field .ph { color: var(--slate); }

/* Badges. Every state carries a text label. */
.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid currentColor;
}
.badge.ok        { color: var(--ok); }
.badge.attention { color: var(--attention); }
.badge.error     { color: var(--error); }
.badge.info      { color: var(--slate); }
.badge.solid-ok        { background: var(--ok); color: var(--white); border-color: var(--ok); }
.badge.solid-attention { background: var(--attention); color: var(--white); border-color: var(--attention); }
.badge.solid-error     { background: var(--error); color: var(--white); border-color: var(--error); }
.badge.solid-info      { background: var(--slate); color: var(--white); border-color: var(--slate); }

.meter { height: 4px; background: var(--line); margin-top: 8px; }
.meter span { display: block; height: 4px; background: var(--ok); }
.meter.pending span { background: var(--slate); }

/* Rows and tables */
.rows { border-top: var(--hairline); }
.row { padding: 11px 14px; border-bottom: var(--hairline); }
.row:nth-child(even) { background: var(--mist); }
.row-flex { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.row .nm { font: 600 13px/1.4 var(--font-sans); }
.row .mt { font: 400 11.5px/1.4 var(--font-mono); color: var(--slate); }

table.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th {
  text-align: left; font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); padding: 9px 12px; border-bottom: var(--hairline); white-space: nowrap;
}
.ui-table td { padding: 11px 12px; border-bottom: var(--hairline); font: 400 12.5px/1.45 var(--font-sans); vertical-align: middle; }
.ui-table tbody tr:nth-child(even) td { background: var(--mist); }
.ui-table td.num { font: 600 12.5px/1.45 var(--font-mono); text-align: right; white-space: nowrap; }
.ui-table td.who { font: 600 12.5px/1.45 var(--font-sans); }

/* --- Screen capture inside a product surface.
       No device frame, no tilt, no shadow, no rounded corner. --- */
.ui-clip { position: relative; flex: 1 1 auto; background: var(--mist); min-height: 100%; }
.ui-clip video,
.ui-clip img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ui-clip-fallback { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ui-clip video { display: none; }
  .ui-clip-fallback { display: block; }
}

/* --- Map surface.
       CARTOGRAPHY, NOT BRAND. The six values below are sampled directly from
       the product's own map tiles so this reproduction matches the real
       capture running beside it in panel 01. They describe terrain the way a
       map legend does: ground, street, park, water, building. They are not
       available to layouts and must not migrate out of this block. 07 has no
       rule for maps; this is flagged, not invented quietly.
       Everything drawn ON the map is brand: Navy boundaries, Slate and Navy
       positions, Line hairlines, white cards. --- */
.map {
  --map-ground:   #ECE5E3;
  --map-street:   #FDFDFD;
  --map-park:     #ACE1A4;
  --map-park-alt: #D1F1C0;
  --map-water:    #98DCFC;
  --map-building: #DED5CF;

  position: relative;
  overflow: hidden;
  min-height: 300px;
  background: var(--map-ground) url("map-base.svg") center / cover no-repeat;
}
.map-road { position: absolute; background: var(--map-street); }
.map-park { position: absolute; background: var(--map-park); }
.map-park.pale { background: var(--map-park-alt); }
.map-water { position: absolute; background: var(--map-water); }
.map-bldg { position: absolute; background: var(--map-building); width: 9px; height: 6px; }
.map-bldg.tall { width: 6px; height: 10px; }

.map-turf { position: absolute; border: 2px solid var(--navy); background: transparent; }
.map-turf.draft { border-style: dashed; }
.map-turf .tag {
  position: absolute; top: -2px; left: -2px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--navy); color: var(--white); padding: 4px 7px; white-space: nowrap;
}
.map-turf .handle { position: absolute; width: 7px; height: 7px; background: var(--white); border: 1px solid var(--navy); }

/* A position on the map. The walker wrapper carries the movement so the dot
   itself stays a plain square with a text-labelled legend beside it. */
.map-dot {
  position: absolute; width: 11px; height: 11px;
  background: var(--navy); border: 2px solid var(--white);
}
.map-dot.paid { background: var(--slate); }
.map-dot.stale { background: var(--white); border-color: var(--slate); }
.map-pin { position: absolute; width: 5px; height: 5px; background: var(--slate); }

.map-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: var(--white); border: var(--hairline); padding: 10px 12px;
}
.map-legend .ui-label { display: block; margin-bottom: 7px; }
.map-legend ul { list-style: none; display: grid; gap: 6px; }
.map-legend li { display: flex; align-items: center; gap: 8px; font: 400 11.5px/1.3 var(--font-sans); color: var(--ink); }
.map-legend .key { width: 10px; height: 10px; flex: 0 0 auto; }
.map-legend .key.live { background: var(--navy); }
.map-legend .key.paid { background: var(--slate); }
.map-legend .key.stale { background: var(--white); border: 1px solid var(--slate); }
.map-scale {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  font: 400 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
  background: var(--white); border: var(--hairline); padding: 5px 8px;
}

/* Walking. Percentages so the paths hold at any panel width. Slow enough to
   read as coverage rather than as an animation. */
@keyframes walk-a {
  0%   { left: 9%;  top: 10%; }
  18%  { left: 20%; top: 10%; }
  34%  { left: 30%; top: 12%; }
  52%  { left: 30%; top: 25%; }
  70%  { left: 18%; top: 27%; }
  86%  { left: 10%; top: 22%; }
  100% { left: 9%;  top: 10%; }
}
@keyframes walk-b {
  0%   { left: 58%; top: 13%; }
  16%  { left: 68%; top: 12%; }
  32%  { left: 79%; top: 13%; }
  48%  { left: 89%; top: 16%; }
  64%  { left: 84%; top: 26%; }
  82%  { left: 70%; top: 27%; }
  100% { left: 58%; top: 13%; }
}
@keyframes walk-c {
  0%   { left: 12%; top: 53%; }
  22%  { left: 22%; top: 53%; }
  42%  { left: 33%; top: 54%; }
  62%  { left: 38%; top: 62%; }
  82%  { left: 22%; top: 63%; }
  100% { left: 12%; top: 53%; }
}
@keyframes walk-d {
  0%   { left: 60%; top: 50%; }
  20%  { left: 60%; top: 62%; }
  38%  { left: 70%; top: 66%; }
  56%  { left: 80%; top: 70%; }
  74%  { left: 81%; top: 56%; }
  100% { left: 60%; top: 50%; }
}
.walker { position: absolute; }
.walker.a { animation: walk-a 46s linear infinite; }
.walker.b { animation: walk-b 58s linear infinite; }
.walker.c { animation: walk-c 52s linear infinite; }
.walker.d { animation: walk-d 64s linear infinite; }

/* --- Calendar surface --- */
.cal { display: grid; grid-template-columns: 44px repeat(4, minmax(0, 1fr)); }
.cal-h { padding: 9px 8px; border-bottom: var(--hairline); border-left: var(--hairline); }
.cal-h:first-child { border-left: 0; }
.cal-h .d { font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.cal-h .n { font: 700 15px/1.2 var(--font-sans); margin-top: 2px; }
.cal-h[data-today="true"] .n { background: var(--navy); color: var(--white); display: inline-block; padding: 1px 7px; }
.cal-t { border-left: 0; border-bottom: var(--hairline); padding: 6px 6px 0 0; text-align: right; font: 400 11px/1 var(--font-mono); color: var(--slate); height: 56px; }
.cal-c { border-left: var(--hairline); border-bottom: var(--hairline); padding: 4px; position: relative; }
.ev { border-left: 3px solid var(--navy); background: var(--mist); padding: 5px 6px; margin-bottom: 3px; }
.ev .t { font: 600 11.5px/1.3 var(--font-sans); }
.ev .m { font: 400 11px/1.3 var(--font-mono); color: var(--slate); margin-top: 2px; }
.ev.ok { border-left-color: var(--ok); }
.ev.attention { border-left-color: var(--attention); }
.ev.open { background: transparent; border: 1px dashed var(--line); border-left: 3px solid var(--slate); }

/* --- Task list surface --- */
.tasks { border-top: var(--hairline); }
.task-group { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--mist); border-bottom: var(--hairline); }
.task-group .g { font: 600 12px/1.4 var(--font-sans); }
.task { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: var(--hairline); }
.task .box { width: 13px; height: 13px; border: 1px solid var(--slate); flex: 0 0 auto; }
.task .tt { font: 400 12.5px/1.4 var(--font-sans); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Evidence pairing surface --- */
.evidence-ui { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
.doc {
  background: var(--mist); border-right: var(--hairline);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.doc-img { border: var(--hairline); background: var(--white); padding: 12px; }
.doc-img .paper { border: 1px solid var(--line); padding: 10px; }
.doc-img .paper { display: grid; gap: 5px; }
.doc-img .ln { height: 4px; background: var(--line); }
.doc-img .ln.short { width: 42%; }
.doc-img .ln.mid { width: 66%; }
.doc-img .ln.dark { background: var(--slate); }
.doc-img .band { border-top: 1px solid var(--line); margin: 4px 0 2px; }
.doc-img .amt { font: 600 15px/1.2 var(--font-mono); color: var(--ink); margin-top: 4px; }
.doc-meta { font: 400 11px/1.45 var(--font-mono); color: var(--slate); }
.tie { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--hairline); background: var(--white); }
.tie .arrow { width: 22px; height: 1px; background: var(--slate); position: relative; flex: 0 0 auto; }
.tie .arrow::after { content: ""; position: absolute; right: 0; top: -3px; border-left: 5px solid var(--slate); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }

/* --- Extract / read-back list --- */
.extract { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: var(--hairline); }
.extract div { padding: 9px 14px; border-bottom: var(--hairline); }
.extract div:nth-child(odd) { border-right: var(--hairline); font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.extract div:nth-child(even) { font: 400 12.5px/1.4 var(--font-sans); }

/* --- The turf preview, before and after the boundary closes --- */
.turf-state { font: 400 12.5px/1.5 var(--font-sans); color: var(--slate); margin-top: 8px; }
.turf-rail[data-settled="false"] .num { color: var(--slate); }
.turf-rail .flagbar.turf-drawing,
.turf-rail[data-settled="false"] .flagbar.turf-check,
.turf-rail[data-settled="true"] .s-drawing,
.turf-rail[data-settled="false"] .s-settled { display: none; }
.turf-rail[data-settled="false"] .flagbar.turf-drawing { display: flex; }

/* --- Panels 03 and 04 play once each time they are shown.
       03 fills the record field by field, which is the claim it makes.
       04 surfaces the flags one at a time, which is how the product behaves.
       Neither loops, and neither resolves anything on its own. --- */
@keyframes field-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

#panel-contribution .extract > div { animation: field-in 340ms ease-out both; }
#panel-contribution .extract > div:nth-child(-n+2)              { animation-delay: 240ms; }
#panel-contribution .extract > div:nth-child(n+3):nth-child(-n+4)  { animation-delay: 400ms; }
#panel-contribution .extract > div:nth-child(n+5):nth-child(-n+6)  { animation-delay: 560ms; }
#panel-contribution .extract > div:nth-child(n+7):nth-child(-n+8)  { animation-delay: 720ms; }
#panel-contribution .extract > div:nth-child(n+9):nth-child(-n+10) { animation-delay: 880ms; }
#panel-contribution .extract > div:nth-child(n+11)              { animation-delay: 1040ms; }
#panel-contribution .flagbar { animation: field-in 340ms ease-out both; animation-delay: 1240ms; }
#panel-contribution .flagbar + .flagbar { animation-delay: 1400ms; }

/* --- The question sits under the rows it is asking about.
       The platform surfaces a problem at the row and clears the flag in place,
       so the notice is part of the table rather than a banner above it. The
       rows it concerns are tinted with it, which is what makes it legible as
       a question about those two entries and not about the ledger. --- */
.ui-table tr.row-open > td { background: var(--mist); border-bottom: 0; }
/* the cell stays a table cell so colspan still spans; the flex row lives inside it */
.ui-table tr.row-note > td { background: var(--mist); padding: 2px 12px 12px; }
.note-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-table tr.row-note .txt { font: 400 12.5px/1.45 var(--font-sans); flex: 1 1 220px; min-width: 0; }
.ui-table tr.row-note.quiet-note > td { padding-top: 10px; }
#panel-review .row-note { animation: field-in 380ms ease-out both; animation-delay: 420ms; }
#panel-review .row-note.quiet-note { animation-delay: 760ms; }

/* --- Fixing a missing address at the row.
       The practitioner review called chasing addresses the last thing anyone
       finishes. This shows it fixed in the list, typed by a person, without
       opening the record. Plays once each time the panel is shown. --- */
.fixit { position: relative; display: inline-block; min-height: 24px; min-width: 148px; }
.fx { position: absolute; left: 0; top: 0; white-space: nowrap; }
.fx-field {
  display: inline-flex; align-items: center; gap: 1px;
  border: 1px solid var(--navy); background: var(--white); padding: 3px 7px;
  width: 132px;
}
.fx-type {
  display: inline-block; overflow: hidden; white-space: nowrap;
  font: 400 12px/1.4 var(--font-sans); color: var(--ink);
  width: 0;
}
.fx-caret { display: inline-block; width: 1px; height: 13px; background: var(--ink); }

@keyframes fx-out  { to { opacity: 0; visibility: hidden; } }
@keyframes fx-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-type { to { width: 88px; } }
@keyframes fx-caret{ 50% { opacity: 0; } }

.fx-flag  { animation: fx-out 200ms linear 2000ms both; }
.fx-field { opacity: 0; animation: fx-in 200ms linear 2100ms both, fx-out 200ms linear 5200ms both; }
.fx-type  { animation: fx-type 1900ms steps(14, end) 2400ms both; }
.fx-caret { animation: fx-caret 900ms steps(1, end) 2300ms 3, fx-out 1ms linear 5000ms both; }
.fx-done  { opacity: 0; animation: fx-in 220ms linear 5300ms both; }

/* --- A task dragged onto the week.
       Percentages, so the path holds at any panel width. Desktop only: the
       narrow layout shows every panel at once and this would be noise. --- */
#panel-coordinate .ui { position: relative; }
.drag-ghost, .drag-cursor { display: none; }

@media (min-width: 1101px) {
  .drag-ghost {
    display: block; position: absolute; z-index: 3;
    width: 168px; padding: 5px 7px;
    background: var(--white); border: 1px solid var(--navy); border-left: 3px solid var(--navy);
    opacity: 0;
    animation: ghost-path 1800ms cubic-bezier(.32,.72,.4,1) both;
  }
  .drag-ghost .t { display: block; font: 600 11.5px/1.3 var(--font-sans); color: var(--ink); }
  .drag-ghost .m { display: block; font: 400 11px/1.3 var(--font-mono); color: var(--slate); margin-top: 2px; }
  .drag-cursor {
    display: block; position: absolute; z-index: 4;
    width: 0; height: 0;
    border-left: 8px solid var(--ink); border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: rotate(35deg); opacity: 0;
    animation: cursor-path 1800ms cubic-bezier(.32,.72,.4,1) both;
  }
  .ev.landed { opacity: 0; animation: landed 1800ms linear both; }

  /* Picked up, moved, dropped. About the speed a person actually does it,
     then it stays put. No loop: a task that keeps rescheduling itself is a
     screensaver, not a demonstration. */
  @keyframes ghost-path {
    0%, 33%  { left: 4%;  top: 52%; opacity: 0; }
    38%      { left: 4%;  top: 52%; opacity: 1; }
    72%      { left: 30%; top: 36%; opacity: 1; }
    80%      { left: 39%; top: 29%; opacity: 1; }
    86%      { left: 39%; top: 29%; opacity: 0; }
    100%     { left: 39%; top: 29%; opacity: 0; }
  }
  @keyframes cursor-path {
    0%, 33%  { left: 6%;  top: 55%; opacity: 0; }
    38%      { left: 6%;  top: 55%; opacity: 1; }
    72%      { left: 32%; top: 39%; opacity: 1; }
    80%      { left: 41%; top: 32%; opacity: 1; }
    92%      { left: 41%; top: 32%; opacity: 0; }
    100%     { left: 41%; top: 32%; opacity: 0; }
  }
  @keyframes landed {
    0%, 80%  { opacity: 0; }
    86%, 100% { opacity: 1; }
  }
}

/* --- Review queue surface --- */
.flagbar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: var(--hairline); background: var(--mist); }
.flagbar .txt { font: 400 12.5px/1.45 var(--font-sans); flex: 1 1 auto; min-width: 0; }
/* the row wraps rather than pushing its buttons out past the card edge */
.flagbar { flex-wrap: wrap; }
.fix { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.fix .ui-btn { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Scroll reveal
   One gesture per block, not per element. Repeating sets stagger by three
   steps at most. Content is visible with no JavaScript and with reduced
   motion, because nothing here is decoration the reader can afford to miss.

   Pointer-and-mouse widths only. On a phone the reveal is a liability: a tall
   page holds dozens of pending elements at opacity 0, and a browser that
   throttles or drops those compositor layers shows blank screens instead of
   content. No animation is worth a page that reads as empty, so below the
   breakpoint nothing is ever hidden and the JS never starts. Note there is
   no will-change anywhere here — a promoted layer per revealed element is
   what makes mobile scrolling stutter, and the transition does not need it.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--reveal-dur, 520ms) cubic-bezier(.22, .61, .36, 1),
      transform var(--reveal-dur, 520ms) cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .t-display { font-size: 52px; }
  .t-page-title { font-size: 32px; }
  .final-statement { font-size: 34px; }
    .hero h1 { max-width: 18ch; }
  .montage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .montage-step:nth-child(odd) + .montage-step::before,
  .montage-step:nth-child(odd) + .montage-step::after { display: none; }
  .viewfinder { padding: 30px; }
  .answer-foot { grid-template-columns: 1fr; gap: 32px; }
  .dwo-carry { max-width: none; }
  .callout { grid-template-columns: 1fr; gap: 36px; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .rail-cell:nth-child(even) { padding-right: 0; }
  .ui-split { grid-template-columns: 1fr; }
  .ui-side { border-right: 0; border-bottom: var(--hairline); }
}

@media (max-width: 860px) {
  section { padding: 64px 0; }
    .nav-toggle { display: inline-block; }
  .nav-inner { flex-wrap: wrap; }
  .nav-links {
    display: none; order: 3; width: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-links li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.10); }
  .nav-links a { display: block; padding: 14px 0; font-size: 15px; }
  /* the last item is the action, and it should not read as another section */
  .nav-links a.nav-link-cta { font-weight: 700; }
  .nav-cta { font-size: 12.5px; padding: 11px 14px; }
  /* Its own row under the bar. The logo, Menu and the booking button already
     fill 390px, and squeezing a fourth thing between them would truncate all
     four. A full-width strip also lets the section name be read at a glance
     rather than deciphered. Collapses to nothing while the reader is in the
     hero, so the bar is unchanged at the top of the page. */
  .nav-here {
    display: block; order: 4; width: 100%;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.16);
    font: 400 11px/1 var(--font-mono);
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.70);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-here:empty { display: none; }
  .editorial-grid, .network-grid { grid-template-columns: 1fr; gap: 36px; }
  /* the masthead is a two-column relationship, and there is no second column
     at this width — the lede and the buttons follow the headline instead */
  .hero-masthead { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .hero .t-lede { max-width: none; }
  .hero-say { padding-bottom: 0; }
  .hero-montage { margin-top: 48px; }
  .montage { grid-template-columns: 1fr; gap: 40px; }
  .montage-step + .montage-step::before { top: -26px; left: 0; width: 1px; height: 14px; }
  .montage-step + .montage-step::after {
    top: -12px; left: -4px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--slate); border-bottom: 0;
  }
  .montage .ui-clip { height: auto; }
  /* Below the diagram's usable width there is no honest way to draw it, and
     the fallback list reads as a form. Nothing is lost: the copy carries it. */
  .line-map { display: none; }
  .line-map svg { display: none; }
  .line-map-fig { height: auto; }
  .line-map-labels { display: grid; gap: 0; }
  .line-map-labels li,
  .line-map-labels li.first,
  .line-map-labels li.last {
    position: static; transform: none; width: auto; text-align: left;
    padding: 11px 0; border-bottom: var(--hairline);
    display: flex; align-items: baseline; gap: 12px;
  }
  .line-map-labels li:first-child { border-top: var(--hairline); }
  .line-map-labels li::before {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px;
    border: 2px solid var(--navy); background: var(--white);
  }
  .line-map-labels li:nth-child(1)::before { width: 14px; height: 14px; }
  .line-map-labels li:nth-child(2)::before { width: 12px; height: 12px; }
  .flow-track { grid-template-columns: 1fr; }
  .flow-node { padding-right: 0; padding-bottom: 18px; }
  .flow-node::after { top: auto; bottom: 6px; left: 0; right: auto; width: 1px; height: 10px; }
  .flow-node .desc { max-width: none; }
      .final-grid { grid-template-columns: 1fr; gap: 28px; }
      }

@media (max-width: 620px) {
  /* ---- Phone: the five steps are a list, not a gallery ----------------
     The product surfaces in this section are tables, ledgers and a week
     calendar. At this width they only fit by having their columns removed,
     and a screenshot that has to be dismantled to fit is not showing anyone
     the product. The four panels in the hero already carry the picture; five
     more of the same, one tap at a time, is the same argument at four times
     the length. The step descriptions carry it here. The captions go with
     the panels: they annotate a picture that is no longer there. */
  .dwo-panel { display: none !important; }
  .dwo-caption { display: none; }
  .dwo-item { border-bottom: var(--hairline); }
  .dwo-btn { cursor: default; padding-right: var(--space-2); }
  .dwo-btn::after { display: none; }
  .dwo-btn:hover { background: transparent; }
  .dwo-item[data-current="true"] .dwo-btn { background: transparent; color: inherit; }
  .dwo-item[data-current="true"] .dwo-btn .idx { color: var(--slate); }
  .dwo-item[data-current="true"] .dwo-btn .ttl { color: var(--ink); }
  .dwo-item[data-current="true"] .dwo-btn .dsc { color: var(--slate); }

  :root { --gutter: 20px; }
  .t-display { font-size: 38px; letter-spacing: -.028em; }
  .t-page-title { font-size: 27px; letter-spacing: -.02em; }
  .final-statement { font-size: 29px; letter-spacing: -.02em; }
    .rail-cell h3.asks { font-size: 24px; }
  .t-section, .network-sub { font-size: 22px; }
  .t-lede { font-size: 17px; }
  .hero { padding: 44px 0 56px; }
  .hero h1 { max-width: none; }
  .rail { grid-template-columns: 1fr; }
  .rail-cell { border-left: 0; padding-left: 0; padding-right: 0; }
  .btn, .btn-secondary { width: 100%; text-align: center; }
  .ui-bar .who { display: none; }
  .ui-stat { gap: 12px; }
  .ui-head { flex-wrap: wrap; }
  .cal { grid-template-columns: 38px repeat(3, minmax(0, 1fr)); }
  .cal .wk4, .cal .wk5 { display: none; }
  .evidence-ui { grid-template-columns: 1fr; }
  .doc { border-right: 0; border-bottom: var(--hairline); flex-direction: row; align-items: flex-start; }
  .doc-img { flex: 1 1 auto; }
  .extract { grid-template-columns: 1fr; }
  .extract div:nth-child(odd) { border-right: 0; border-bottom: 0; padding-bottom: 0; }
  .ui-table thead { display: none; }
  .ui-table tr { display: grid; grid-template-columns: 1fr auto; border-bottom: var(--hairline); }
  .ui-table td { border-bottom: 0; padding: 5px 12px; }
  .ui-table td:first-child { padding-top: 11px; }
  .ui-table td:last-child { padding-bottom: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* the walkers stop where their paths start, so the map still reads as staffed */
  .walker.a { left: 9%;  top: 10%; }
  .walker.b { left: 58%; top: 13%; }
  .walker.c { left: 12%; top: 53%; }
  .walker.d { left: 60%; top: 50%; }
}

/* --------------------------------------------------------------------------
   Legal pages
   Set in the document pattern from 07 Section 05, not the marketing one.
   Brand standards govern customer-facing copy, not contracts, terms, privacy
   policies or legal notices, so the wording here is reproduced verbatim.
   -------------------------------------------------------------------------- */

.legal { padding: 64px 0 96px; }
.legal-head { max-width: 60ch; padding-bottom: var(--space-4); border-bottom: 2px solid var(--navy); }
.legal-head h1 { margin-top: var(--space-3); }
.legal-updated { font: 400 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-top: var(--space-3); }
.legal-body { max-width: 74ch; margin-top: var(--space-6); }
.legal-body p { font: 400 15px/1.70 var(--font-sans); color: var(--ink); margin-bottom: var(--space-3); }
.legal-h {
  font: 700 22px/1.20 var(--font-sans); letter-spacing: -.012em;
  margin: var(--space-6) 0 var(--space-3);
  padding-top: var(--space-3); border-top: var(--hairline);
}
.legal-body > .legal-h:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-sub { font: 700 17px/1.30 var(--font-sans); margin: var(--space-4) 0 var(--space-2); }
.legal-list { list-style: none; margin: 0 0 var(--space-3); }
.legal-list li {
  font: 400 15px/1.70 var(--font-sans); color: var(--ink);
  padding-left: 22px; margin-bottom: var(--space-2); position: relative;
}
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 1px; background: var(--slate);
}

@media (max-width: 620px) {
  .legal { padding: 44px 0 64px; }
  .legal-h { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   Contact form
   Read on a phone more often than not, so every field is full width below the
   name row, inputs never go under 16px (iOS zooms the page on focus at 15px
   and under), and the small label text has a 13px floor because 11px looks
   right on a desktop mock and is unreadable in the hand.
   -------------------------------------------------------------------------- */

.form-page .legal-head { max-width: 46ch; }
.form-lede { margin-top: var(--space-3); }
.cform { max-width: 52ch; margin-top: var(--space-6); }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.cf-field { margin-bottom: var(--space-3); min-width: 0; }
.cf-field label {
  display: block; font: 600 13px/1.4 var(--font-sans); color: var(--ink);
  margin-bottom: 7px;
}
.cf-field .req,
.cf-field .opt {
  font: 400 11.5px/1.4 var(--font-mono); letter-spacing: .04em;
  text-transform: uppercase; color: var(--slate); margin-left: 6px;
}
.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%; display: block;
  font: 400 16px/1.45 var(--font-sans); color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  padding: 12px 13px; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.cf-field textarea { resize: vertical; min-height: 96px; }
.cf-field select {
  /* the arrow is drawn rather than left to the platform, so the control keeps
     the square corners and hairline the rest of the page uses */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus { border-color: var(--navy); outline: 2px solid var(--navy); outline-offset: -2px; }

.cf-note {
  font: 400 13px/1.6 var(--font-sans); color: var(--slate);
  margin: var(--space-4) 0; padding-left: var(--space-3);
  border-left: 2px solid var(--line); max-width: 56ch;
}
.cf-note a { color: var(--navy); }

.cf-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cf-actions .btn[disabled] { opacity: .55; cursor: default; }
.cf-status { font: 400 13.5px/1.5 var(--font-sans); color: var(--text-red); }

/* No top rule. This panel only appears once the form is hidden, directly
   below the head's own bottom rule, and two rules of different widths
   stacked on top of each other read as a layout fault. Space does the
   separating instead. */
.cf-done { max-width: 52ch; margin-top: var(--space-5); }
.cf-done p { margin-top: var(--space-3); }

@media (max-width: 620px) {
  /* a half-width field is about 160px on a 360px phone, which is not a field */
  .cf-row { grid-template-columns: 1fr; }
  .cform, .cf-done { max-width: none; }
  .cf-actions .btn { width: 100%; }
}

/* 404 ------------------------------------------------------------------ */
/* The sentence under the two exits. Quieter than the lede, because it is
   the third-choice route out, not the first. Slate rather than mono-slate:
   mono-slate is 2.5:1 on white, which is fine for the footer's 12px legal
   line and fails AA for a sentence someone is meant to read. */
.foot-404 { margin-top: var(--space-4); color: var(--slate); max-width: 56ch; }