/* ExecFlow component system.
 *
 * Mobile first: the no media query state IS the phone state. Widen upward.
 * Reads tokens.css. Nothing here hardcodes a colour or a spacing value.
 *
 * ⚠️ NEVER put overflow-x: hidden on html or body. It makes body a scroll
 * container, which silently kills position: sticky for every descendant. That
 * defect shipped live in the house render engine and killed every pin in its
 * scroll archetype before anyone noticed. Fix overflow at the offending
 * element instead.
 */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-doc);
}

.skip {
  position: absolute; left: var(--s-4); top: -100px;
  z-index: 100; padding: var(--s-3) var(--s-5);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-pill); text-decoration: none; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s-4); }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ====================================================================
   TYPE
   The display face carries ONE line per section. Its real italic is the
   accent word: the last word of a display line, set in cobalt italic. That
   mechanic is the typographic signature and it repeats on every section.
   ==================================================================== */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--tr-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
  /* Every display line here ends on an accent word followed by a full stop,
     and the splitter treats that stop as its own word. Without balancing, a
     line can break between them and leave the punctuation stranded on a line
     of its own, where it reads as a stray bullet. */
  text-wrap: balance;
}

h1 { font-size: var(--t-display); line-height: var(--lh-display); }
h2 { font-size: var(--t-h2);      line-height: var(--lh-head); }
h3 {
  font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.018em;
}

/* The accent word. <em> inside a heading is never emphasis here, it is the
   signature. */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
}

p { margin: 0 0 var(--s-5); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--t-lead);
  line-height: 1.48;
  color: var(--ink-soft);
  max-width: 54ch;
}

.eyebrow {
  font-family: var(--body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* The document numeral. A brief numbers its items; so does this. */
.eyebrow .num {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0;
  color: var(--accent);
  padding-right: var(--s-3);
  border-right: 1px solid var(--rule-strong);
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
.band-dark a:hover { color: #fff; }

/* ====================================================================
   LAYOUT
   ==================================================================== */

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 780px; }

.band { padding: var(--band) 0; position: relative; }
.band-lg { padding: var(--band-lg) 0; }
.band-2 { background: var(--paper-2); }

.band-dark {
  background: var(--rev-a);
  color: var(--ink-on-dark);
}
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--ink-on-dark); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.head { margin-bottom: var(--s-7); }
.head h2 { margin-bottom: var(--s-5); }

/* ====================================================================
   CONTROLS — pills, deliberately against the square document surfaces
   ==================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 48px;                 /* never below the 44px tap target */
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.band-dark .btn-primary:hover { background: #fff; color: var(--rev-a); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* A link that reads as a next step without competing with the primary CTA. */
.onward {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--accent-ring);
  padding-bottom: 2px;
}
.onward:hover { border-bottom-color: var(--accent); }
.onward .arrow { transition: transform .2s var(--ease); }
.onward:hover .arrow { transform: translateX(3px); }

/* ====================================================================
   MASTHEAD — a brief has a masthead and a rule under it
   ==================================================================== */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--paper); } }

/* fx-theme-invert broadcasts html.fx-theme-dark while a dark band owns the
   viewport, so the masthead travels with the page instead of sitting in a
   light slab over a dark section. */
html.fx-theme-dark .masthead {
  background: color-mix(in srgb, var(--rev-a) 90%, transparent);
  border-bottom-color: var(--rule-on-dark);
}
html.fx-theme-dark .masthead .wordmark,
html.fx-theme-dark .masthead .nav a { color: var(--ink-on-dark); }
html.fx-theme-dark .masthead .btn-ghost { border-color: rgba(238,242,249,.3); color: var(--ink-on-dark); }

.masthead .wrap {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 68px;
  position: relative;          /* the mobile menu panel anchors to this */
}
@media (min-width: 420px) { .masthead .wrap { gap: var(--s-5); } }

.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-decoration: none; color: var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -.03em;
  font-variation-settings: 'opsz' 20;
  white-space: nowrap;
}
@media (min-width: 420px) {
  .wordmark { font-size: 1.35rem; gap: var(--s-3); }
}
.wordmark:hover { color: var(--ink); }
.wordmark .mark { width: 28px; height: 28px; flex: none; }

/* NAVIGATION
 *
 * A <details> disclosure, not a scripted hamburger. It opens and closes with
 * no JavaScript, it is keyboard operable and announced correctly for free, and
 * a reader with scripts off still has every page on the site. A scripted menu
 * hidden behind display:none is how a site ends up with no navigation at all
 * below the breakpoint.
 *
 * Above 900px the summary is removed and the list is laid out as a row. The
 * open state stops mattering because author CSS overrides the UA rule that
 * hides a closed details' children.
 */
/* The parent company line, the same shape the sibling brands carry: the product
   wordmark, then "by", then Electric Software, linking out to the parent. Set
   in type rather than shipped as an image so it stays sharp and weighs nothing.
   Hidden on the narrowest screens, where the colophon still carries it. */
/* nojs-ok: hidden only on the narrowest screens, where the masthead cannot
   carry it. The colophon states the parent company on every page regardless. */
.byline {
  display: none;
  align-items: baseline; gap: 6px;
  text-decoration: none;
  padding-left: var(--s-4);
  margin-left: calc(var(--s-1) * -1);
  border-left: 1px solid var(--rule);
  white-space: nowrap;
}
.byline .by {
  font-family: var(--display); font-style: italic;
  font-size: .8rem; color: var(--muted);
}
.byline .es {
  font-family: var(--body);
  font-size: .9rem; font-weight: 300; letter-spacing: -.01em;
  color: var(--ink-soft);
}
.byline .es b { font-weight: 700; }
.byline:hover .es { color: var(--accent); }
html.fx-theme-dark .byline { border-left-color: var(--rule-on-dark); }

@media (min-width: 620px) { .byline { display: inline-flex; } }

.nav { margin-left: auto; }

.nav summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-3);
  cursor: pointer;
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
  border-radius: var(--r-pill);
}
/* nojs-ok: hides the browser's own disclosure triangle, not any content. */
.nav summary::-webkit-details-marker { display: none; }
/* nojs-ok: below this width the trigger is icon only and the summary keeps its
   aria-label, so the control is still named for assistive tech. Three items
   plus a word do not fit a 320px masthead. */
.nav-label { display: none; }
@media (min-width: 420px) { .nav-label { display: inline; } }
.nav summary:hover { color: var(--accent); }
.nav summary .bars { display: block; }
/* nojs-ok: the two outer bars of a decorative aria-hidden icon, dropping away
   so the glyph reads as a close. The menu itself is unaffected. */
.nav[open] summary .bars rect:nth-child(1),
.nav[open] summary .bars rect:nth-child(3) { opacity: 0; }

.nav ul {
  list-style: none; margin: 0; padding: var(--s-3) 0 var(--s-4);
  display: grid; gap: var(--s-1);
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--lift-1);
  padding-left: var(--gutter); padding-right: var(--gutter);
}
html.fx-theme-dark .nav ul { background: var(--rev-a); border-bottom-color: var(--rule-on-dark); }

.nav a {
  display: block; padding: var(--s-3) 0;
  color: var(--ink-soft); text-decoration: none;
  font-size: 1.0625rem; font-weight: 500;
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.masthead-cta { margin-left: var(--s-2); }
.masthead .btn { min-height: 42px; padding: var(--s-2) var(--s-5); font-size: var(--t-small); }

@media (min-width: 900px) {
  /* nojs-ok: at this width the list below is laid out as a visible row, so the
     disclosure control is redundant rather than concealing anything. */
  .nav summary { display: none; }

  /* A CLOSED <details> hides its own content, and which mechanism the browser
     uses has changed: older engines set display:none on the non-summary
     children, current ones hide the ::details-content part with
     content-visibility. Override BOTH, or the desktop nav silently vanishes.
     It did exactly that here before this rule existed. */
  .nav::details-content { content-visibility: visible; block-size: auto; }
  .nav ul {
    position: static; display: flex; gap: var(--s-6); align-items: center;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  .nav a { padding: 0; font-size: var(--t-small); }
  .masthead-cta { margin-left: 0; }
}

/* ====================================================================
   HERO
   ==================================================================== */

/* The fold is the whole job here: a stranger has to see what this is, the
   inversion, and the primary action without scrolling. Keep the hero tight. */
.hero { padding: var(--s-7) 0 var(--band); }
.hero .tagline {
  font-family: var(--display);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0;
  margin: 0 0 var(--s-5);
}
.hero h1 { margin-bottom: var(--s-5); max-width: 17ch; }
.hero .lede { margin-bottom: var(--s-6); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.hero .btn-row { margin-bottom: var(--s-5); }

.hero-note {
  font-size: var(--t-micro);
  color: var(--muted);
  display: flex; align-items: center; gap: var(--s-2);
}

.hero-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: var(--s-8); }
}

/* ====================================================================
   THE BRIEF — the signature moment.
   A document, not a card: square corners, a masthead rule, a dateline.
   ==================================================================== */

.brief {
  background: var(--card);
  border-radius: var(--r-doc);
  box-shadow: var(--lift-2);
  overflow: hidden;
  font-family: var(--app);          /* recreated product surface keeps Inter */
  max-width: 560px;
  width: 100%;
}
.hero-grid .brief { margin-inline: auto; }

.brief-bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.brief-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); flex: none; }
.brief-bar .who {
  margin-left: var(--s-3); font-size: var(--t-micro); font-weight: 600; color: var(--muted);
  letter-spacing: .01em;
}

.brief-body { padding: var(--s-5); }

.brief-dateline {
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-2);
}
.brief-greet {
  font-family: var(--app);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  margin: 0 0 var(--s-5);
}

/* state one: the empty box every other tool opens with */
.brief-empty {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-doc);
  color: var(--muted);
  font-size: .95rem;
}
.brief-empty .spark { color: var(--rule-strong); flex: none; }
.brief-caret {
  display: inline-block; width: 1px; height: 1.05em; background: var(--accent);
  vertical-align: text-bottom;
}
html.pf-motion:not(.fx-reduced) .brief-caret { animation: caret 1.05s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.brief-label {
  font-size: var(--t-micro); font-weight: 600; color: var(--muted); margin-bottom: var(--s-3);
}

/* state two: the question, already asked */
.brief-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-doc);
  padding: var(--s-4);
  background: var(--card);
}
.brief-from {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3);
}
.brief-avatar {
  width: 30px; height: 30px; border-radius: 7px; flex: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
}
.brief-from .name { font-size: .9rem; font-weight: 700; color: var(--ink); }
.brief-tag {
  margin-left: auto;
  font-size: .68rem; font-weight: 600;
  padding: 3px var(--s-3); border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent);
}
.brief-q {
  font-size: 1.0625rem; line-height: 1.45; color: var(--ink); margin: 0 0 var(--s-4);
  max-width: none;
}
.brief-actions { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; }
.brief-skip {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: .9rem; font-weight: 600; color: var(--muted); padding: var(--s-2) var(--s-3);
}
.brief-send {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-doc);
}

/* The chip. Every synthetic figure on this site sits under one, exactly as
   the films do. It is not an app feature; it is a disclosure. */
.sample-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body);
  font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  padding: 4px var(--s-3); border-radius: var(--r-pill);
  background: var(--paper-3); color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.brief-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-5);
}

/* ====================================================================
   THE SPINE — four ledger rows against a drawn rail
   ==================================================================== */

.spine { position: relative; display: grid; gap: 0; }

.spine .fx-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--rule); transform-origin: top;
}

.spine-row {
  display: grid; gap: var(--s-3);
  padding: var(--s-6) 0 var(--s-6) var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.spine-row:last-child { border-bottom: 0; }
.spine-row h3 { margin: 0; }
.spine-row p { color: var(--ink-soft); margin: 0; }

@media (min-width: 820px) {
  .spine-row {
    grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: baseline;
    padding-left: var(--s-7);
  }
}

/* ====================================================================
   FRAMES — a product still, presented as a document not a floating card
   ==================================================================== */

.frame {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-doc);
  overflow: hidden;
  box-shadow: var(--lift-1);
}
.band-dark .frame { border-color: var(--rule-on-dark); box-shadow: var(--lift-dark); }
.frame img { width: 100%; display: block; }

.frame-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-micro); color: var(--muted);
}
.band-dark .frame-cap { border-top-color: var(--rule-on-dark); }

.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .split-wide-right { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

/* ====================================================================
   VIDEO
   ==================================================================== */

/* SCROLL PIN
 * The video holds its place while the page keeps moving under it, so it stays
 * on screen long enough to actually get played rather than sliding past. Same
 * idea as the sibling site's player, done in CSS instead of JavaScript.
 *
 * ⚠️ This is the thing that dies if anyone ever puts overflow-x: hidden on html
 * or body: that makes body a scroll container and kills position: sticky for
 * every descendant. It silently broke every pin in the house render engine.
 */
.band:has(> .wrap > .video-doc) { padding-bottom: calc(var(--band) + 40vh); }
@media (max-width: 760px) {
  .band:has(> .wrap > .video-doc) { padding-bottom: calc(var(--band) + 22vh); }
}
.video-doc { position: sticky; top: calc(68px + var(--s-4)); }
@media (prefers-reduced-motion: reduce) {
  .band:has(> .wrap > .video-doc) { padding-bottom: var(--band); }
  .video-doc { position: static; }
}

.video-doc { background: var(--rev-a); border-radius: var(--r-doc); overflow: hidden; }
.video-doc video { width: 100%; aspect-ratio: 16 / 9; display: block; background: var(--rev-a); }

.video-btn {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: #fff;
}
.video-btn .disc {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.video-btn:hover .disc { transform: scale(1.06); background: var(--accent-deep); }
/* nojs-ok: is-playing is only ever added once a real click has started the
   video, so with scripts off the play control is always present. */
.video-doc.is-playing .video-btn { display: none; }

/* ====================================================================
   CARDS — used for the team grid and "what this is not"
   ==================================================================== */

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Border, not shadow. Never both on one surface. */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-5);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-soft); font-size: var(--t-small); margin: 0; }
.band-dark .card { background: var(--card); border-color: var(--rule-on-dark); }

/* The claim rows in the trust section: a hairline ledger, not a card grid. */
.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
  display: grid; gap: var(--s-2);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}
.ledger-row h3 { font-size: var(--t-h3); }
.ledger-row p { color: var(--ink-soft); margin: 0; }
@media (min-width: 820px) {
  .ledger-row { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr); gap: var(--s-7); align-items: baseline; }
}
.band-dark .ledger, .band-dark .ledger-row { border-color: var(--rule-on-dark); }

/* The run trace strip: told, saw, called, did. */
.trace { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.trace span {
  font-family: var(--mono); font-size: var(--t-micro);
  padding: 5px var(--s-3); border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); color: var(--ink-soft);
}

/* ====================================================================
   FAQ — real <button>/<div> pairs so fx-accordion wires the ARIA itself,
   and so a no JS reader gets every answer open.
   ==================================================================== */

.faq { border-top: 1px solid var(--rule); max-width: 820px; }
.faq > button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; text-align: left;
  padding: var(--s-5) 0;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  cursor: pointer;
  font-family: var(--display); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: -.018em; color: var(--ink);
}
.faq > button:hover { color: var(--accent); }
.faq > div { color: var(--ink-soft); }
.faq > div p { padding: var(--s-4) 0 var(--s-5); margin: 0; max-width: 68ch; }

/* ====================================================================
   COLOPHON
   ==================================================================== */

.colophon { background: var(--rev-a); color: var(--ink-on-dark); padding: var(--s-8) 0 var(--s-6); }
.colophon a { color: var(--ink-on-dark); text-decoration: none; }
.colophon a:hover { color: #fff; text-decoration: underline; }
.colophon .wordmark { color: var(--ink-on-dark); }
.colophon p { color: var(--muted-on-dark); font-size: var(--t-small); }

.colophon-grid { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); }
@media (min-width: 820px) { .colophon-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-8); } }

.colophon h4 {
  font-family: var(--body); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--muted-on-dark); margin: 0 0 var(--s-4);
}
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.colophon li { font-size: var(--t-small); }

.colophon-foot {
  border-top: 1px solid var(--rule-on-dark);
  padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  font-size: var(--t-micro); color: var(--muted-on-dark);
}
.colophon-foot .sig { font-family: var(--display); font-style: italic; }

/* ====================================================================
   STEPS — three numbered cells in one ruled strip, the whole setup at a
   glance. One document split by hairlines, not three floating cards.
   ==================================================================== */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}
.step { padding: var(--s-6) var(--s-5); border-top: 1px solid var(--rule); }
.step:first-child { border-top: 0; }
.step-num {
  display: block; margin-bottom: var(--s-5);
  font-family: var(--mono); font-size: var(--t-micro); color: var(--accent);
}
.step h3 { margin-bottom: var(--s-3); }
.step p { color: var(--ink-soft); font-size: var(--t-small); margin: 0; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { border-top: 0; border-left: 1px solid var(--rule); padding: var(--s-7) var(--s-6); }
  .step:first-child { border-left: 0; }
}

/* ====================================================================
   TILES — the six things, a ruled grid. The one pixel gap over a rule
   coloured ground draws every internal hairline at any column count.
   ==================================================================== */

.tiles {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tile { background: var(--card); padding: var(--s-6) var(--s-5); }
@media (min-width: 980px) { .tile { padding: var(--s-7) var(--s-6); } }
.tile-icon { color: var(--accent); margin-bottom: var(--s-5); }
.tile h3 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.tile p { color: var(--ink-soft); font-size: var(--t-small); margin: 0; }

/* A card that leads with a line icon. */
.card-icon svg { color: var(--accent); margin-bottom: var(--s-5); }

/* ====================================================================
   TICKS — a short list of plain statements, each on a pulse mark
   ==================================================================== */

.ticks { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-4); }
.ticks li {
  position: relative; padding-left: var(--s-6);
  color: var(--ink-soft); max-width: var(--measure);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 16px; height: 2px; border-radius: 2px; background: var(--accent);
}
.ticks-note { font-size: var(--t-small); color: var(--muted); }

/* ====================================================================
   ITEMS — icon, title, one line. The three facts beside a surface.
   ==================================================================== */

.items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.items li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.items svg {
  width: 36px; height: 36px; padding: 8px;
  border: 1px solid var(--rule); border-radius: var(--r-card);
  background: var(--card); color: var(--accent);
}
.items h3 { font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 2px; }
.items p { color: var(--ink-soft); font-size: var(--t-small); margin: 0; }

/* ====================================================================
   IN CHARGE — the argument on the left, the controls on the right
   ==================================================================== */

.charge { display: grid; gap: var(--s-7); align-items: start; }
.charge p { color: var(--ink-soft); }
@media (min-width: 940px) {
  .charge { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--s-9); }
  .verbs { padding-top: var(--s-10); }
}

.verbs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
  font-family: var(--mono);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.verbs li { padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.verbs li:last-child { color: var(--accent); border-bottom: 0; }

/* ====================================================================
   PRINT — a briefing should print like one
   ==================================================================== */
@media print {
  .masthead, .video-doc, .btn-row, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .band-lg { padding: var(--s-5) 0; }
  .band-dark, .colophon { background: #fff !important; color: #000 !important; }
  .band-dark h1, .band-dark h2, .band-dark h3 { color: #000 !important; }
  a { text-decoration: underline; }
}

/* ====================================================================
   ZIGZAG — alternate splits put the visual on the left on wide screens,
   so the page sweeps side to side instead of reading as one column.
   Phones keep reading order: text first, then the visual.
   ==================================================================== */

@media (min-width: 940px) {
  .split-flip > :first-child { order: 2; }
  .split-wide-right.split-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

  /* Each visual slides in from the side it sits on. The distance stays
     inside the page gutter, so the pre-reveal state never scrolls sideways. */
  .split > [data-fx~="fx-scroll-reveal"]      { --fx-sr-t: translateX(32px); }
  .split-flip > [data-fx~="fx-scroll-reveal"] { --fx-sr-t: translateX(-32px); }
  .charge > .verbs                            { --fx-sr-t: translateX(32px); }
}