/* ============================================================================
   p3
   The Cyber Empowerment Hub homepage, part 3. Built from p2a.

   THIS DIRECTION IS DELIBERATELY DARK ONLY, as p2a and v2 were.
   There is no prefers-color-scheme: light branch. Every colour is stated
   explicitly and `color-scheme: dark` is forced on the root, so native
   controls (inputs, checkboxes, number spinners, scrollbars, focus rings,
   autofill) render dark even when the OS is set to light.

   Palette is p2a's, unchanged: near-black hardware, bone text #ece8e0, one
   signal colour, amber #ffb02e, used as data and never as decoration, and one
   red #ff5343 held back for the single genuine alert (the untested-provider
   warning).

   WHAT CHANGED FROM p2a
   1. The hero is type only, laid out as p2c laid it out: the headline on the
      left, the sub and the two calls to action on the right. No artwork, no
      email, no diagram, no contents strip.
   2. The plate system is gone. There are no plate numbers, no mono catalogue
      captions and no framing box around a drawing. A drawing is artwork set
      beside the copy it illustrates, printed straight onto the ground.
   3. The email has moved out of the hero into its own section, and it is no
      longer a white sheet. See THE EMAIL below for the paper and the measured
      contrast of everything printed on it.

   THE DRAWINGS ARE RE-INKED, NOT PASTED. v4's paths are lifted intact, but
   every colour decision is remade for a dark surface:
     · strokes are bone #ece8e0 at 2px, secondary strokes at 1.55px and dimmer
     · v4's flat printer's colour is gone. The fills that used to carry terra,
       mustard and sage are now near-black occluders, doing structural work
       (an envelope front hiding the letter) and no colour work at all
     · the press-misregistration offset copy is inverted: it was a saturated
       warm ink, it is now the amber signal at 0.18 opacity, so the drawing
       reads as slightly out of register under a safelight
     · the wobble in the paths is untouched. That is the human part.
   Chalk on a blackboard, or a technical drawing under red light. Not a warm
   print pasted onto black.

   Type: Space Grotesk for display, UI and prose. JetBrains Mono for anything
   measured. Caveat for the annotations on the drawings, which carry commentary
   and never information.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* surfaces */
  --base:    #0a0b0d;
  --base-2:  #0d0f12;
  --panel:   #121418;
  --panel-2: #171a1f;
  --panel-3: #1d2127;

  /* hairlines */
  --line:      rgba(236, 232, 224, 0.09);
  --line-mid:  rgba(236, 232, 224, 0.16);
  --line-hot:  rgba(255, 176, 46, 0.34);
  --tick:      rgba(236, 232, 224, 0.26);

  /* text, warm off-white, never pure white */
  --text:   #ece8e0;   /* 16.5:1 on --base */
  --text-2: #b0aaa0;   /*  8.7:1 on --base */
  --text-3: #8d877d;   /*  5.6:1 on --base */

  /* the one signal colour */
  --signal:      #ffb02e;   /* 10.5:1 on --base */
  --signal-soft: rgba(255, 176, 46, 0.13);
  --signal-ink:  #14100a;

  /* reserved exclusively for genuine alert states */
  --alert:      #ff7a68;   /*  7.1:1 on --base */
  --alert-edge: #ff5343;
  --alert-bg:   rgba(255, 83, 67, 0.07);

  /* the drawn line */
  --bone:   #ece8e0;
  --bone-2: #d5d0c6;

  /* ── THE EMAIL ─────────────────────────────────────────────────────
     The sheet is warm paper under low light, not a lightbox. Every ink
     below was measured against the paper it is printed on, not guessed.
       paper   #e5e0d6  relative luminance 0.748
       paper-2 #d8d2c6  the client chrome strip, 0.648

     ink        #16191d  on paper 13.4:1   subject, sender name, emphasis
     body       #262b31  on paper 10.8:1   body copy
     mid        #4d545c  on paper  5.8:1   sender address
     dim        #5a616a  on paper  4.8:1   to line, timestamp, small print
     chrome     #454b53  on paper-2 5.9:1  inbox label and tool icons
     link       #3a5878  on paper  5.6:1   unsubscribe, privacy notice
     navy       #14304f  on paper 10.2:1   wordmark and the button ground
       white on navy 13.4:1
     focus      #8a5200  on paper  4.9:1   focus ring, above the 3:1 UI floor
     highlight  amber at 0.42 over paper composites to #f0cc8f;
       ink on that composite measures 11.5:1
     ─────────────────────────────────────────────────────────────────── */
  --paper:      #e5e0d6;
  --paper-2:    #d8d2c6;
  --paper-line: #cfc8ba;
  --paper-line-soft: #d9d3c7;
  --m-ink:    #16191d;
  --m-body:   #262b31;
  --m-mid:    #4d545c;
  --m-dim:    #5a616a;
  --m-chrome: #454b53;
  --m-link:   #3a5878;
  --m-navy:   #14304f;
  --m-navy-2: #4a5c72;
  --m-focus:  #8a5200;

  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --hand: 'Caveat', 'Space Grotesk', cursive;
  --mail-font: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap: 1280px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --r: 4px;                                /* hardware, not software */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);    /* mechanical. nothing overshoots */
}

/* ── reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--base);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
.defs { position: absolute; width: 0; height: 0; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

a { color: inherit; }

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

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

.skip {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--signal); color: var(--signal-ink);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  padding: 0.7rem 1.1rem; text-decoration: none;
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ── the mono label. the whole panel grammar hangs off this ─────────── */
.lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lbl-dim { color: var(--text-3); opacity: 0.7; letter-spacing: 0.1em; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
}
.eyebrow::before {
  content: ''; display: inline-block;
  width: 1.6rem; height: 1px; margin-right: 0.75rem;
  vertical-align: 0.28em; background: var(--line-hot);
}

/* ── panels: layered hardware with corner ticks ─────────────────────── */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.panel::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  border: 1px solid var(--tick); border-radius: var(--r);
  -webkit-mask:
    linear-gradient(#000 0 0) 0    0    / 13px 13px no-repeat,
    linear-gradient(#000 0 0) 100% 0    / 13px 13px no-repeat,
    linear-gradient(#000 0 0) 0    100% / 13px 13px no-repeat,
    linear-gradient(#000 0 0) 100% 100% / 13px 13px no-repeat;
  mask:
    linear-gradient(#000 0 0) 0    0    / 13px 13px no-repeat,
    linear-gradient(#000 0 0) 100% 0    / 13px 13px no-repeat,
    linear-gradient(#000 0 0) 0    100% / 13px 13px no-repeat,
    linear-gradient(#000 0 0) 100% 100% / 13px 13px no-repeat;
}

.panel-head {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1rem;
  align-items: baseline; justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--signal);
  border-radius: 2px;
  background: var(--signal); color: var(--signal-ink);
  cursor: pointer;
  transition: background 0.16s linear, color 0.16s linear, border-color 0.16s linear;
}
.btn:hover { background: #ffc25c; border-color: #ffc25c; }
.btn:active { background: #e69a1c; border-color: #e69a1c; }
.btn-lg { padding: 0.95rem 1.6rem; font-size: 0.8125rem; }
.btn-sm { padding: 0.55rem 0.95rem; font-size: 0.6875rem; }
.btn-full { width: 100%; }
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-mid);
}
.btn-ghost:hover { background: var(--panel-2); border-color: var(--tick); color: var(--text); }
.btn-ghost:active { background: var(--panel-3); border-color: var(--tick); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--panel-2); border-color: var(--line);
  color: var(--text-3); cursor: not-allowed;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { background: var(--panel-2); border-color: var(--line); }

.link-btn {
  background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line-mid);
  transition: color 0.15s linear, text-decoration-color 0.15s linear;
}
.link-btn:hover { color: var(--signal); text-decoration-color: var(--line-hot); }

/* ── header ─────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 11, 13, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar-in {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 0.75rem var(--pad);
  display: flex; align-items: center; gap: 1.25rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--text);
  margin-right: auto;
}
.brand-mark { width: 26px; height: 26px; color: var(--signal); flex: none; }
.brand-name {
  font-family: var(--mono);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}

.nav { display: flex; gap: 1.4rem; }
.nav a {
  font-family: var(--mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-3); text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s linear, border-color 0.15s linear;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--line-hot); }

/* hamburger: hidden on desktop, shown below the nav breakpoint */
.nav-toggle { display: none; }

.bar-right { display: flex; align-items: center; gap: 1rem; }
.bar-div { width: 1px; height: 20px; background: var(--line); flex: none; }
.rig {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); flex: none;
  animation: pulse 3.4s linear infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.28; box-shadow: 0 0 0 0 rgba(255, 176, 46, 0); }
  45%      { opacity: 1;    box-shadow: 0 0 0 3px rgba(255, 176, 46, 0.12); }
}

.progress { position: absolute; inset: auto 0 -1px 0; height: 1px; background: transparent; }
.progress i {
  display: block; height: 100%; background: var(--signal);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
@supports (animation-timeline: scroll()) {
  .progress i {
    animation-name: prog;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }
  @keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ══ HERO ════════════════════════════════════════════════════════════
   Type and space. There is no artwork here and there is nothing to look
   at except the sentence, so the sentence is set as large as the column
   will carry and given room on every side. The only thing moving is the
   safelight passing over the darkroom, well behind the reading. */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
}
.hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--line); pointer-events: none;
}
.scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(236,232,224,0.028) 0 1px, transparent 1px 3px);
  opacity: 0.7;
}
.sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 42%;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(255,176,46,0.035) 45%, rgba(255,176,46,0.06) 62%, transparent 100%);
  animation: sweep 13s linear infinite;
  will-change: transform;
}
@keyframes sweep {
  from { transform: translate3d(0, -110%, 0); }
  to   { transform: translate3d(0, 260%, 0); }
}

.hero-in {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
.hero .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  letter-spacing: -0.04em;
  max-width: 15ch;
}
.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--text-2);
  max-width: 54ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

@media (min-width: 900px) {
  .hero-in { grid-template-columns: 1.15fr 1fr; align-items: end; }
  .hero-side { padding-bottom: 0.35rem; }
}

/* ── bands and section labels ───────────────────────────────────────── */
.band { padding: clamp(2.75rem, 5vw, 4.25rem) 0; }
.band-last { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

.strip {
  display: flex; align-items: center; gap: 1.1rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.strip .rule { flex: 1; height: 1px; background: var(--line); }
.strip .lbl { white-space: nowrap; }


@media (min-width: 880px) {


}
@media (max-width: 879px) {


}

/* ══ THE EMAIL ═══════════════════════════════════════════════════════
   No longer the hero. It sits in its own section, below the fold, and it
   is printed on warm paper rather than lit like a lightbox. Every ink on
   it is listed with its measured ratio at the top of this file. */

.specimen { background: var(--base-2); }

.score { display: flex; align-items: center; gap: 0.8rem; }
.score-n {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
}
.score-n b {
  color: var(--signal); font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.ticks { display: inline-flex; gap: 4px; }
.ticks i {
  width: 16px; height: 3px; background: rgba(236,232,224,0.14);
  transform-origin: left center;
  transition: background-color 0.3s linear, transform 0.34s var(--ease);
}
.ticks i.on { background: var(--signal); transform: scaleY(1.8); }

.prompt {
  padding: 1.1rem 1.15rem 0;
  font-size: 0.9375rem; color: var(--text-2);
}
.prompt-do { color: var(--signal); font-weight: 500; }

.spec-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1.4rem;
  padding: 1.1rem 1.15rem;
}
/* The sheet is capped so the measure stays readable, and the leftover width
   becomes the gap the connector is drawn across. */
@media (min-width: 1240px) {
  .spec-grid {
    grid-template-columns: minmax(0, 660px) 340px;
    justify-content: space-between;
    gap: 3.25rem;
  }
}

/* the sheet itself. A printed page under low light: warm, matte, and set
   in a system face so it reads as foreign to the site around it. */
.mail {
  position: relative;
  background: var(--paper);
  color: var(--m-body);
  border-radius: 5px;
  box-shadow: 0 28px 66px -26px rgba(0,0,0,0.92);
  font-family: var(--mail-font);
  font-size: 14.5px;
  line-height: 1.55;
  overflow: hidden;
}

.mail-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px;
  background: var(--paper-2); border-bottom: 1px solid var(--paper-line);
  color: var(--m-chrome); font-size: 12px;
}
.mail-box { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.mail-box svg { width: 15px; height: 15px; }
.mail-tools { display: inline-flex; gap: 13px; color: var(--m-chrome); }
.mail-tools svg { width: 16px; height: 16px; }

.mail-head { padding: 16px 18px 13px; border-bottom: 1px solid var(--paper-line-soft); }
.mail-subject {
  font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  margin: 0 0 12px; color: var(--m-ink);
}
.mail-from { display: flex; align-items: flex-start; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--m-navy); color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 600;
}
.from-lines { flex: 1 1 auto; min-width: 0; }
.from-name { font-weight: 600; color: var(--m-ink); }
.from-addr { color: var(--m-mid); font-size: 12.5px; word-break: break-word; }
.from-to { display: block; color: var(--m-dim); font-size: 12.5px; margin-top: 1px; }
.mail-time { color: var(--m-dim); font-size: 12px; flex: none; padding-top: 2px; }

.mail-body { padding: 18px 18px 20px; }
.mail-body p { margin: 0 0 14px; }
.mail-body strong { color: var(--m-ink); font-weight: 700; }

.mail-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 18px !important; }
.mail-logo svg { width: 28px; height: 28px; }
.mail-logo span { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--m-navy); }
.mail-logo em { font-style: normal; font-weight: 400; color: var(--m-navy-2); }

.mail-cta-row { margin: 18px 0 16px !important; }
.mail-cta {
  display: inline-block !important;
  background-color: var(--m-navy); color: #fff; padding: 10px 19px; border-radius: 4px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
}

.mail-foot {
  margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--paper-line-soft);
  color: var(--m-dim); font-size: 11.5px; line-height: 1.6;
}
.mail-foot p { margin: 0 0 4px; }
.mail-link { color: var(--m-link); text-decoration: underline; }

.statusbar {
  position: absolute; left: 0; bottom: 0; max-width: 100%;
  margin: 0; padding: 5px 12px;
  background: #22262b; color: #e8ebee;   /* 12.7:1 */
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.01em;
  border-top-right-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(101%);
  transition: transform 0.3s var(--ease);
}
.mail.show-url .statusbar { transform: translateY(0); }

/* ── the four tells ─────────────────────────────────────────────────── */
.flag {
  display: inline;            /* so a flagged sentence wraps like body text */
  font: inherit; color: inherit; text-align: left;
  border: 0; margin: 0 -5px; padding: 2px 5px; cursor: pointer;
  border-radius: 3px;
  background-color: transparent;
  background-image:
    linear-gradient(rgba(255,176,46,.42), rgba(255,176,46,.42)),
    linear-gradient(#ffb02e, #ffb02e);
  background-repeat: no-repeat;
  background-position: left center, left bottom;
  background-size: 0% 100%, 0% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .42s var(--ease), color .2s linear;
}
.flag[aria-expanded="true"] { background-size: 100% 100%, 0% 2px; color: var(--m-ink); }
.flag[aria-expanded="true"] .from-addr { color: #33383e; }
.flag.found { background-size: 0% 100%, 100% 2px; }
.flag.found[aria-expanded="true"] { background-size: 100% 100%, 100% 2px; }

.mail:not(.show-hint) .flag:hover { background-size: 14% 100%, 0% 2px; }
.mail:not(.show-hint) .flag.found:hover { background-size: 14% 100%, 100% 2px; }
.flag[aria-expanded="true"]:hover { background-size: 100% 100%, 0% 2px; }
.flag.found[aria-expanded="true"]:hover { background-size: 100% 100%, 100% 2px; }

/* the nudge: three quiet pulses if nobody has touched anything, then it stops.
   Deliberately not a permanent affordance, because the email has to look like
   a message rather than a quiz. */
.mail.show-hint .flag:not(.found) { animation: nudge 1.7s var(--ease) 3; }
@keyframes nudge {
  0%, 55%, 100% { box-shadow: inset 0 0 0 0 rgba(176,110,0,0); }
  20%           { box-shadow: inset 0 -2px 0 0 rgba(138,82,0,.65); }
}
@keyframes nudgeRing {
  0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(255,176,46,0); }
  20%           { box-shadow: 0 0 0 3px rgba(255,176,46,.5); }
}

/* The button is dark, so it takes a ring rather than a highlighter wipe.
   Every combination is listed because .flag.found[aria-expanded] outranks a
   two-class selector and would otherwise paint amber under the white label. */
.mail-cta.flag,
.mail-cta.flag:hover,
.mail-cta.flag.found,
.mail-cta.flag[aria-expanded="true"],
.mail-cta.flag.found[aria-expanded="true"],
.mail-cta.flag.found[aria-expanded="true"]:hover {
  background-size: 0% 100%, 0% 2px;
  background-color: var(--m-navy);
  color: #fff;
}
.mail-cta.flag { transition: box-shadow .34s var(--ease), background-color .2s linear; }
.mail-cta.flag.found { box-shadow: 0 0 0 2px #b06b00; }
.mail-cta.flag[aria-expanded="true"],
.mail-cta.flag.found[aria-expanded="true"] { box-shadow: 0 0 0 3px #8a5200; background-color: #0e243c; }
.mail.show-hint .mail-cta.flag:not(.found) { animation: nudgeRing 1.7s var(--ease) 3; }

.flag:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 3px; }

/* ── the annotation rail beside the sheet ───────────────────────────── */
.notes { display: flex; flex-direction: column; }

.note { border-top: 1px solid var(--line); padding: 0.7rem 0 0.75rem; }
.note:first-of-type { border-top: 0; padding-top: 0; }

.note-h {
  display: flex; gap: 0.65rem; align-items: baseline;
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.015em;
  line-height: 1.34; color: var(--text-3);
  transition: color .25s linear;
}
.note-i {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  color: var(--text-3); flex: none; width: 14px;
  transition: color .25s linear;
}
.note.found .note-h { color: var(--text-2); }
.note.found .note-i { color: var(--signal); }
.note.open .note-h { color: var(--text); }
.note.open .note-i { color: var(--signal); }

.note-in {
  padding: 0.6rem 0 0.15rem 1.3rem;
  font-size: 0.8125rem; line-height: 1.62; color: var(--text-2);
}
.note-in p { margin-bottom: 0; }
.note-in code {
  font-family: var(--mono); font-size: 0.9em;
  color: var(--signal); word-break: break-word;
}

/* collapsed only when there is script to expand it again */
.js .note-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .36s var(--ease);
}
.js .note-in { overflow: hidden; }
.js .note.open .note-body { grid-template-rows: 1fr; }

/* the connector from a tell out to its note */
.wire {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; opacity: 0;
  transition: opacity .2s linear;
}
.wire.on { opacity: 1; }
#wire-path { stroke: var(--signal); transition: stroke-dashoffset .5s var(--ease); }
@media (max-width: 1239px) { .wire { display: none; } }

/* completion */
.done {
  margin: 0 1.15rem 1.1rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  background: var(--signal-soft);
  font-size: 0.9375rem; line-height: 1.6; color: var(--text-2);
  display: grid; gap: 0.75rem;
  max-width: 62ch;
}
/* a sentence, not a label, so it is set as one */
.done-h {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 500;
  letter-spacing: -0.03em; color: var(--signal);
  line-height: 1.15;
}
.done-mark { width: 22px; height: 22px; color: var(--signal); flex: none; }
.done .btn { justify-self: start; margin-top: 0.25rem; }

.spec-foot {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
  align-items: baseline;
  padding: 0.9rem 1.15rem;
  border-top: 1px solid var(--line);
}

/* ── scale readouts ─────────────────────────────────────────────────── */
.scale-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1080px) { .scale-grid { grid-template-columns: minmax(0, 1fr) 280px; } }

.readouts { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .readouts { grid-template-columns: repeat(3, 1fr); } }

.readout { padding: 1.5rem 1.3rem 1.3rem; display: flex; flex-direction: column; }
.fig {
  font-family: var(--mono);
  font-size: clamp(2.4rem, 5vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.fig .pct { font-size: 0.62em; }
.fig-rank { letter-spacing: -0.05em; }
.fig-unit {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3); margin-top: 0.7rem;
}
.readout-txt { margin-top: 1rem; font-size: 0.9375rem; color: var(--text-2); flex: 1; }
.src {
  margin-top: 1.2rem;
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.meter { height: 2px; background: rgba(236,232,224,0.07); margin-top: 0.9rem; overflow: hidden; }
.meter i {
  display: block; height: 100%; background: var(--signal);
  transform: scaleX(var(--fill)); transform-origin: left;
  transition: transform 1.4s var(--ease);
}
.js .meter i { transform: scaleX(0); }
.js .is-live .meter i { transform: scaleX(var(--fill)); }

/* ── mission ────────────────────────────────────────────────────────── */
.mission-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .mission-grid { grid-template-columns: minmax(0, 1fr) 340px; } }

.manifesto {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  border-left: 1px solid var(--line-hot);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
}
@media (min-width: 700px) and (max-width: 999px) { .manifesto { grid-template-columns: 1.05fr 1fr; } }
.statement {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.statement-sm { font-size: clamp(1.45rem, 2.6vw, 2rem); max-width: 16ch; }
.manifesto-body { display: grid; gap: 1.1rem; max-width: 58ch; }
.manifesto-body p { font-size: 1.0625rem; }

/* ── rack ───────────────────────────────────────────────────────────── */
.rack { border-top: 1px solid var(--line); }
.rack-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s linear;
}
.rack-row:hover { background: rgba(236, 232, 224, 0.016); }
@media (min-width: 800px) {
  .rack-row {
    grid-template-columns: 8.5rem 176px minmax(0, 1fr);
    align-items: center;
    gap: 0 2.5rem;
    padding: 2.4rem 0;
  }
  .rack-tag { align-self: start; }
}
.rack-tag {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
  padding-top: 0.35rem;
}
.rack-body h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); margin-bottom: 0.5rem; }
.rack-body p { max-width: 58ch; font-size: 1rem; }

/* ── steps ──────────────────────────────────────────────────────────── */
.steps {
  list-style: none; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.step { padding: 1.8rem 1.6rem; }
.step-n {
  display: inline-block;
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.02em; line-height: 1; color: var(--signal);
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.55rem; margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line-hot);
}
.step h3 { font-size: 1.1875rem; margin-bottom: 0.55rem; }
.step p { font-size: 0.9375rem; max-width: 46ch; }

/* ══ PRICING CONSOLE ═════════════════════════════════════════════════
   The layout, card treatment, toggles, stepper and spacing are p2b's: one
   card, everything stacked down it in the order you actually decide things,
   and the price sitting inside the card so it answers the toggles directly
   above it. The palette stays p3's, so amber is still the only signal and
   red is still spent on nothing but the untested-provider warning. */

.band-price { border-top: 1px solid var(--line); }
.console { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .console { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
/* a grid item's automatic minimum is min-content, and one long email address
   would otherwise push the whole column past the viewport */
.console > * { min-width: 0; }
.console-lead > p { margin-top: 1.1rem; max-width: 42ch; }

.signup { background: var(--panel); }
.signup-in { padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.field { margin-bottom: 1.2rem; min-width: 0; }
.field .lbl { margin-bottom: 0.6rem; }

.seg { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.seg-b {
  flex: 1 1 auto;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0.7rem 0.75rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  transition: background-color 0.16s linear, border-color 0.16s linear, color 0.16s linear;
}
.seg-b:hover { border-color: var(--tick); color: var(--text); }
/* a lit switch, not a filled block: the amber stays spent on the price and
   the one button that matters */
.seg-b[aria-selected="true"] {
  background: var(--signal-soft); color: var(--signal); border-color: var(--signal);
}
.seg-flag { font-size: 0.625rem; letter-spacing: 0.12em; color: var(--text-3); }
.seg-b[aria-selected="true"] .seg-flag { color: var(--signal); opacity: 0.85; }

.stepper {
  display: flex; align-items: center; width: fit-content;
  border: 1px solid var(--line); border-radius: 2px;
}
.stepper button {
  width: 2.5rem; height: 2.5rem; border: 0;
  background: var(--panel-2); color: var(--text);
  font-family: var(--mono); font-size: 1rem; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background-color 0.16s linear, color 0.16s linear;
}
.stepper button:hover { background: var(--panel-3); color: var(--signal); }
.stepper input {
  width: 3.4rem; height: 2.5rem; border: 0; text-align: center;
  font-family: var(--mono); font-size: 0.9375rem; font-weight: 700;
  background: var(--panel); color: var(--text);
  -moz-appearance: textfield; appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hint { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--text-3); max-width: 46ch; }

.price-out {
  border-block: 1px solid var(--line);
  padding-block: 1.1rem; margin-bottom: 1.2rem;
}
.price-fig {
  display: flex; align-items: baseline; gap: 0.1rem;
  font-family: var(--mono); font-size: clamp(2.4rem, 6vw, 3rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.05em; color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.price-fig .cur { font-size: 0.58em; font-weight: 500; letter-spacing: 0; }
.price-unit { margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.price-foot { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--text-3); max-width: 44ch; }

#email, #emails, .namerow input {
  width: 100%;
  font-family: var(--sans); font-size: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-mid); border-radius: 2px;
  background: var(--base-2); color: var(--text);
  transition: border-color 0.16s linear;
}
#email::placeholder, #emails::placeholder, .namerow input::placeholder { color: var(--text-3); }
#email:hover, .namerow input:hover { border-color: var(--tick); }
#email:focus, .namerow input:focus { border-color: var(--line-hot); }

/* first and last side by side, stacking on a narrow phone rather than
   squeezing both into half a screen each */
.namerow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 26rem) { .namerow { grid-template-columns: 1fr; } }

.provider {
  margin-top: -0.5rem; margin-bottom: 1.2rem; min-height: 1.2em;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.05em; color: var(--text-3);
}
/* the pull-up above tucks the note under the email box, but the business note
   lives inside the system picker, where it would climb over the buttons */
.picker .provider { margin-top: 0.6rem; margin-bottom: 0; }
.provider.ok { color: var(--signal); }
.provider.ok::before { content: '✓ '; }
/* named hm, not warn: .warn is the alert block below and would otherwise
   draw its red box around this one line */
.provider.hm { color: var(--alert); }

/* ── the seat list ──────────────────────────────────────────────────
   The box is the field. Each seat is a row inside it, the address heading
   its own two name boxes, and the input to add the next one sits under the
   lot. Every remove control is a real button named after the address it
   removes. Rows rather than inline pills because a seat is now a person
   with a name, not just a string. */
.chipbox {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem;
  max-width: 100%; padding: 0.4rem;
  border: 1px solid var(--line-mid); border-radius: 2px;
  background: var(--base-2);
  transition: border-color 0.16s linear;
  cursor: text;
}
.chipbox:hover { border-color: var(--tick); }
.chipbox:focus-within { border-color: var(--line-hot); }
.chipbox.is-full { border-color: var(--line); background: var(--base); }

.chiplist {
  display: flex; flex-direction: column; gap: 0.4rem;
  min-width: 0; max-width: 100%;
  list-style: none; margin: 0; padding: 0;
}
.chiplist:empty { display: none; }
.chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 1.6rem;
  grid-template-areas:
    "addr  addr  x"
    "first last  x";
  align-items: center; gap: 0.35rem 0.4rem;
  padding: 0.4rem 0.35rem 0.4rem 0.5rem;
  border: 1px solid var(--line-mid); border-radius: 2px;
  background: var(--panel-2);
  font-family: var(--mono); font-size: 0.8125rem; color: var(--text);
}
/* a long address ellipsises inside its row rather than widening the page */
.chip-addr {
  grid-area: addr; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the buyer's row takes its name from the field at the top of the form, so it
   says so rather than asking for the same thing twice */
.chip-you {
  grid-column: 1 / 3; grid-row: 2;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--sans); font-size: 0.875rem; color: var(--text-3);
}
.chip-name { min-width: 0; }
.chip-name.first { grid-area: first; }
.chip-name.last { grid-area: last; }
.chip input.chip-name {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line-mid); border-radius: 2px;
  background: var(--base-2); color: var(--text);
  font-family: var(--sans); font-size: 0.875rem;
  transition: border-color 0.16s linear;
}
.chip input.chip-name::placeholder { color: var(--text-3); }
.chip input.chip-name:hover { border-color: var(--tick); }
.chip input.chip-name:focus { border-color: var(--line-hot); }
/* the seats still waiting to be named, marked where the gap actually is */
.chip input.chip-name.is-missing { border-color: var(--signal); }
.chip-x {
  grid-area: x; align-self: center;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border: 0; border-radius: 2px; background: transparent;
  color: var(--text-3); font-family: var(--sans); font-size: 0.9rem; line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s linear, color 0.15s linear;
}
.chip-x:hover { background: var(--panel-3); color: var(--text); }
.chip-x:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
/* the addresses the honest warning is about, marked where they actually are */
.chip.is-untested { border-color: var(--alert-edge); background: var(--alert-bg); }
.chip.is-untested .chip-addr { color: var(--alert); }

#emails {
  width: 100%; min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 0; background: transparent;
  font-family: var(--mono); font-size: 0.875rem;
}
/* the input keeps its own focus ring: the box border alone is too quiet to
   count as a focus state */
#emails:focus-visible { outline: 2px solid var(--signal); outline-offset: 0; }

/* amber, because red on this page means one thing only */
.chip-err, .seat-block {
  margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.5;
  color: var(--signal); max-width: 52ch; overflow-wrap: anywhere;
}
.chip-err:empty, .seat-block:empty { margin-top: 0; }
.seat-state {
  margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.5;
  color: var(--text-3); max-width: 52ch; overflow-wrap: anywhere;
}
.seat-state.is-warn { color: var(--signal); }
.seat-state.is-full { color: var(--text-2); }

/* ── the seat rows (business) ───────────────────────────────────────
   One row per seat, generated from the seat count. Row one is the buyer,
   named from the field at the top of the form, so it asks only for an email. */
.seatrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.seatrow {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "n email email"
    "n first last";
  align-items: center; gap: 0.35rem 0.4rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--line-mid); border-radius: 2px;
  background: var(--panel-2);
}
.seatrow-n {
  grid-area: n; align-self: start; margin-top: 0.55rem;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  color: var(--text-3); text-align: center;
}
.seatrow input {
  width: 100%; min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line-mid); border-radius: 2px;
  background: var(--base-2); color: var(--text);
  transition: border-color 0.16s linear;
}
.seatrow-email { grid-area: email; font-family: var(--mono); font-size: 0.8125rem; }
.seatrow-name { font-family: var(--sans); font-size: 0.875rem; }
.seatrow-name.first { grid-area: first; }
.seatrow-name.last { grid-area: last; }
.seatrow input::placeholder { color: var(--text-3); }
.seatrow input:hover { border-color: var(--tick); }
.seatrow input:focus { border-color: var(--line-hot); }
.seatrow input:focus-visible { outline: 2px solid var(--signal); outline-offset: 0; }
.seatrow input.is-missing { border-color: var(--signal); }
/* the buyer's row takes its name from the field above, so it says so rather
   than asking twice */
.seatrow-you {
  grid-area: 2 / 2 / 3 / 4; align-self: center;
  font-family: var(--sans); font-size: 0.875rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* the no-JS fallback: a plain comma-separated box, shown only without script */
.team-fallback { display: none; }
html:not(.js) .team-fallback { display: block; }
html:not(.js) label.team-fallback { margin: 0.6rem 0 0.3rem; }
html:not(.js) #seatRows { display: none; }

.picker { margin-bottom: 1.2rem; }
.picker fieldset { border: 0; padding: 0; margin: 0; }
.picker legend { padding: 0; margin-bottom: 0.6rem; }
.picks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.picks label { position: relative; cursor: pointer; }
.picks input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.picks span {
  display: block;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--text-2); background: var(--panel-2);
  transition: border-color 0.16s linear, color 0.16s linear, background-color 0.16s linear;
}
.picks input:hover + span { border-color: var(--tick); color: var(--text); }
.picks input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 3px; }
.picks input:checked + span { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }

/* the one genuine alert on the page, and the only red on it */
.warn {
  border: 1px solid var(--alert-edge); border-radius: 2px;
  background: var(--alert-bg);
  padding: 1rem 1.05rem; margin-bottom: 1.2rem;
}
.warn p { font-size: 0.9375rem; line-height: 1.55; color: var(--text); margin-bottom: 0.9rem; max-width: 58ch; }
.warn p.warn-h { font-size: 1rem; font-weight: 600; color: var(--alert); margin-bottom: 0.55rem; letter-spacing: -0.01em; }
.warn p.warn-who { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; color: var(--alert); word-break: break-word; }
.warn-ok { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9375rem; color: var(--text); cursor: pointer; }
.warn-ok input { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.15rem; accent-color: var(--alert-edge); cursor: pointer; }

/* An invitation, not an alert, so it takes the signal amber rather than the
   reserved alert red. An opt-in for people who want the hard scenarios only. */
.confident {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border: 1px solid var(--line-hot); border-radius: 2px;
  background: var(--signal-soft);
  padding: 0.95rem 1.05rem; margin-bottom: 1.2rem; cursor: pointer;
}
.confident input { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.2rem; accent-color: var(--signal); cursor: pointer; }
.confident-body { display: block; }
.confident-h { display: block; font-size: 1rem; font-weight: 600; color: var(--signal); margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.confident-p { display: block; font-size: 0.9375rem; line-height: 1.55; color: var(--text); max-width: 58ch; }

.go-note {
  margin-top: 0.8rem; min-height: 1.2em;
  font-size: 0.875rem; font-weight: 500; color: var(--signal); line-height: 1.5;
}
.fine { margin-top: 0.8rem; font-size: 0.75rem; color: var(--text-3); }

/* ── footer ─────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 2.25rem 0; }
.foot-in {
  display: flex; flex-wrap: wrap; gap: 0.85rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.foot-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.foot-brand .brand-mark { width: 22px; height: 22px; color: var(--signal); }
.foot-legal { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); letter-spacing: 0.05em; }
.foot-link { text-decoration: none; transition: color 0.15s linear; }
.foot-link:hover { color: var(--signal); }
.foot-links { display: inline-flex; flex-wrap: wrap; gap: 0.85rem 1.5rem; }
.foot-fine { padding-bottom: 0.25rem; }
.foot-fine p { font-size: 0.75rem; color: var(--text-3); max-width: 72ch; line-height: 1.6; }
.foot-fine a { color: inherit; text-underline-offset: 2px; }
.foot-fine a:hover { color: var(--signal); }
.fine a { color: inherit; text-underline-offset: 2px; }

/* ============================================================================
   THE DRAWINGS
   v4's paths, re-inked. See the note at the top of this file. There is no
   frame, no caption and no catalogue number: a drawing is set beside the copy
   it illustrates and nothing else marks it out.
   ========================================================================= */

.art { margin: 0; position: relative; }
.art svg { overflow: visible; }
.art > svg:not(.arrow) { width: 100%; height: auto; }

.art-hook { max-width: 300px; justify-self: center; padding-bottom: 3rem; }
.art-kitchen { max-width: 360px; justify-self: center; }
.art-rack { max-width: 176px; }
.art-step { max-width: 260px; margin-bottom: 1.7rem; }
.art-mug { max-width: 210px; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: 2.4rem; }

@media (max-width: 799px) {
  .art-rack { max-width: 150px; }
}

/* the line itself: bone, thin, slightly irregular because the paths are */
.ink {
  fill: none;
  stroke: var(--bone);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ink.t { stroke-width: 1.55; stroke: var(--bone-2); opacity: 0.86; }
.ink.sig { stroke: var(--signal); opacity: 1; }

/* the washes. No printer's colour survives on a dark ground: the aligned
   fills become occluders, and the offset copy becomes the amber ghost. */
.wash { stroke: none; }
.w-ghost { fill: var(--signal); opacity: 0.18; }   /* misregistration, inverted */
.w-body  { fill: #0f1114; }                        /* structural occluder */
.w-panel { fill: #15181d; }                        /* head, phone screen */
.w-lit   { fill: #1e232a; }                        /* the lit sheet inside */
.w-leaf  { fill: var(--bone); opacity: 0.07; }
.w-lens  { fill: var(--signal); opacity: 0.09; }
.w-shade { fill: var(--bone); opacity: 0.045; }

/* the pointing arrow beside an annotation */
.arrow { position: absolute; pointer-events: none; overflow: visible; }
.arrow .ink { stroke: var(--signal); stroke-width: 1.6; opacity: 0.7; }
.arrow-hook { left: 26%; bottom: 2.5rem; width: 62px; height: 100px; }

/* Caveat. Commentary only, never information. */
.hand {
  font-family: var(--hand);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.15;
  font-weight: 600;
  color: var(--signal);
  opacity: 0.92;
}
.hand-hook { position: absolute; left: 0; bottom: 0.5rem; max-width: 13ch; transform: rotate(-1.5deg); }
.hand-price { position: absolute; left: 0; bottom: 0.2rem; max-width: 18ch; transform: rotate(-2deg); }
.hand-inline { margin-top: 0.9rem; transform: rotate(-1.2deg); max-width: 32ch; }

/* ============================================================================
   MOTION
   One authored moment: a panel boots on a 1px amber rule, and the drawing
   inside the section draws itself stroke by stroke as it arrives. Everything
   below is switched off at the bottom of this file for reduced motion, and
   nothing here is required to read the page.
   ========================================================================= */

.js .reveal { position: relative; }
.js .reveal > * { opacity: 0; transition: opacity 0.55s linear 0.22s; }
.js .reveal::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--signal); opacity: 0.55;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease), opacity 0.5s linear 0.5s;
  pointer-events: none; z-index: 2;
}
.js .reveal.is-live > * { opacity: 1; }
.js .reveal.is-live::after { transform: scaleX(1); opacity: 0; }
/* the connector is not part of the boot: it comes and goes with the tells */
.js .reveal.is-live > .wire { opacity: 0; }
.js .reveal.is-live > .wire.on { opacity: 1; }

/* every stroke draws in turn, the way a hand would build it */
.js [data-drawing] .ink { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js [data-drawing].drawn .ink { animation: draw var(--dur, 820ms) var(--ease) var(--d, 0s) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* the washes arrive after the outline, the way colour follows the key plate */
.js [data-drawing] .wash { opacity: 0; }
.js [data-drawing].drawn .wash { animation: wash-in 620ms var(--ease) var(--wd, 0.6s) forwards; }
@keyframes wash-in { from { opacity: 0; } to { opacity: 1; } }
/* each wash restates its own resting opacity so wash-in lands on the right value */
.js [data-drawing].drawn .w-ghost { animation-name: wash-ghost; }
.js [data-drawing].drawn .w-leaf  { animation-name: wash-leaf; }
.js [data-drawing].drawn .w-lens  { animation-name: wash-lens; }
.js [data-drawing].drawn .w-shade { animation-name: wash-shade; }
@keyframes wash-ghost { from { opacity: 0; } to { opacity: 0.18; } }
@keyframes wash-leaf  { from { opacity: 0; } to { opacity: 0.07; } }
@keyframes wash-lens  { from { opacity: 0; } to { opacity: 0.09; } }
@keyframes wash-shade { from { opacity: 0; } to { opacity: 0.045; } }

/* the annotation is written, left to right */
.js .hand { clip-path: inset(-40% 100% -45% -8%); }
.js [data-drawing].drawn .hand,
.js .reveal.is-live .hand,
.js .hand.written { animation: write 0.95s cubic-bezier(.42,.06,.3,1) var(--hd, 0.9s) forwards; }
@keyframes write { to { clip-path: inset(-40% -25% -45% -8%); } }

/* ambient, and kept well behind the reading */
.sway { transform-box: fill-box; transform-origin: 100% 0%; animation: sway 9s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-0.7deg); } to { transform: rotate(0.7deg); } }

.steam { transform-box: fill-box; transform-origin: 50% 100%; }
[data-drawing].drawn .steam { animation: steam 5.5s ease-in-out infinite; }
@keyframes steam {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.8; }
  50%      { transform: translateY(-3px) scaleY(1.08); opacity: 0.35; }
}


html:not(.js) .spec-foot { display: none; }
html:not(.js) .statusbar { position: static; transform: none; border-radius: 0; }
html:not(.js) .flag { cursor: default; }

/* The chip input is an enhancement over a real labelled text box. With no
   script the plan cannot be switched at all, so the single email field is
   what everyone gets. If the multiple-address field is ever rendered without
   script, it falls back to exactly that: one plain box you type a list into. */
html:not(.js) .chipbox { display: block; padding: 0; border: 0; background: none; }
html:not(.js) .chiplist { display: none; }
html:not(.js) #emails {
  width: 100%; flex: none;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-mid); border-radius: 2px;
  background: var(--base-2);
  font-family: var(--sans); font-size: 1rem;
}
html:not(.js) .seat-state, html:not(.js) .chip-err { display: none; }

/* ── contact toast ──────────────────────────────────────────────────────
   A mail link opens a mail client; a visitor without one sees nothing. So a
   click also copies the address and confirms it here, which means the button
   always produces a visible result. */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 200;
  max-width: min(92vw, 32rem);
  padding: 0.8rem 1.1rem;
  background: var(--panel-3); color: var(--text);
  border: 1px solid var(--signal); border-radius: 3px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translate(-50%, 1rem); pointer-events: none;
  transition: opacity 0.2s linear, transform 0.2s ease;
}
.toast.is-up { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1079px) {
  /* the toggle appears and the nav collapses into a sheet under the bar */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none; padding: 0;
    border: 1px solid var(--line-mid); border-radius: 2px;
    background: var(--panel-2); color: var(--text); cursor: pointer;
    transition: border-color 0.15s linear, background 0.15s linear;
  }
  .nav-toggle:hover { border-color: var(--tick); }
  .nav-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .nav-toggle-box { position: relative; display: block; width: 18px; height: 12px; }
  .nav-toggle-box i {
    position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor; border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.12s linear, top 0.2s ease;
  }
  .nav-toggle-box i:nth-child(1) { top: 0; }
  .nav-toggle-box i:nth-child(2) { top: 5.25px; }
  .nav-toggle-box i:nth-child(3) { top: 10.5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(1) { top: 5.25px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(3) { top: 5.25px; transform: rotate(-45deg); }

  .nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 0.25rem var(--pad) 1rem;
    background: rgba(10, 11, 13, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.18s linear, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .bar.nav-open .nav {
    visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
    transition: opacity 0.18s linear, transform 0.18s ease;
  }
  .nav a {
    padding: 0.9rem 0.25rem; font-size: 0.75rem;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a:hover { color: var(--signal); border-bottom-color: var(--line); }
}
@media (max-width: 760px) { .rig-txt { display: none; } }
@media (max-width: 560px) {
  .bar-in { gap: 0.75rem; }
  .brand { gap: 0.5rem; }
  .brand-mark { width: 22px; height: 22px; }
  .brand-name { font-size: 0.625rem; line-height: 1.35; white-space: normal; }
  .seg-b { padding-inline: 0.5rem; }
  .hero-cta { display: grid; grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .panel-head { gap: 0.7rem; }
  .score { width: 100%; justify-content: space-between; }
  .spec-grid, .prompt, .spec-foot { padding-inline: 0.85rem; }
  .done { margin-inline: 0.85rem; }
  .rack-row { gap: 1.1rem; }
}
@media (max-width: 420px) {
  .mail-subject { font-size: 15.5px; }
  .mail-head, .mail-body { padding-inline: 14px; }
  .mail-tools { display: none; }
}

/* ============================================================================
   REDUCED MOTION
   Everything stops. Nothing disappears, and the email stays fully usable.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .sweep { display: none; }
  .progress { display: none; }   /* scroll-linked, and the rule above breaks it */
  .dot { animation: none; opacity: 1; }

  .js .reveal > * { opacity: 1; }
  .js .reveal::after { display: none; }
  .js .meter i { transform: scaleX(var(--fill)); }

  .js [data-drawing] .ink { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .js [data-drawing] .wash { opacity: 1 !important; animation: none !important; }
  .js [data-drawing] .w-ghost { opacity: 0.18 !important; }
  .js [data-drawing] .w-leaf  { opacity: 0.07 !important; }
  .js [data-drawing] .w-lens  { opacity: 0.09 !important; }
  .js [data-drawing] .w-shade { opacity: 0.045 !important; }
  .js .hand { clip-path: none !important; animation: none !important; }


  .sway, .steam, [data-drawing].drawn .steam { animation: none !important; }
  .mail.show-hint .flag:not(.found),
  .mail.show-hint .mail-cta.flag:not(.found) { animation: none !important; }
}

/* The one-line reassurance under a confirmation. The icon had no size of its
   own, so it fell back to the SVG default and pushed the text most of a screen
   down the page. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.consent svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  stroke: var(--amber, #ffb02e);
}