/* Homepage shell through the hero, kept small and byte-for-byte aligned with the
   matching rules in site.css.

   Until 2026-09-03 this file was the only render-blocking stylesheet on the
   landing: site.css was fetched with `media="print"` and enabled a frame later
   by style-loader.js. That saved blocking bytes and cost a cumulative layout
   shift of 0.31 on a desktop and 0.73 on an iPad, because the two sheets did not
   agree — the hero button row, the proof strip, the heading face, the home
   sections and the workspace all resolved differently before the complete sheet
   arrived, and the page visibly resettled on every visit. Copying the hero rules
   across removed the hero's share and left the sections below it still moving:
   making the two sheets agree means shipping site.css twice.

   So site.css is render-blocking now — 32 KB compressed on one page, against a
   layout shift a reader can see — and this file is simply the first paint's head
   start. Measured after the change: 0 on the landing at 1440, 834 and 390 px. */
:root {
  color-scheme: dark;
  --bg: #0d1015;
  --bg-deep: #05070a;
  --surface: #151a22;
  --surface-raised: #1b222d;
  --border: #2f3847;
  --text: #f2f4f8;
  --muted: #aeb6c5;
  --action: #d9a441;
  --measurement: #9fc2e8;
  --success: #7fb98a;
  --warning: #e2a04a;
  --danger: #e0736b;
  --ink: var(--text);
  --ink-soft: var(--muted);
  --paper: var(--bg);
  --card: var(--surface);
  --line: var(--border);
  --accent: var(--action);
  --accent-ink: #17120a;
  --warn: var(--warning);
  --bad: var(--danger);
  --radius: 10px;
  --star: var(--measurement);
  --void: var(--bg-deep);
  --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --data: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 36rem;
  /* ONE FRAME FOR EVERY ROUTE.
     ==========================
     A LAPTOP IS NOT THE ONLY DESK: at 2560 px the page was a 768 px column with
     1800 px of black either side. The answer to that was five separate opt-in
     widenings — `:has(.tool)`, `:has(.guide-list)`, `:has(.page-nav)`, and three
     stylesheets with a `--wrap` of their own — and by 2026-09-03 the site had
     seven different page widths. Clicking the navigation left to right walked
     the first heading 330 px across the screen, because the header, the brand
     and the footer all live inside this box.

     So: one frame for every route, and the reading measure is enforced inside it
     by `--measure` and by `.page-body`, never by moving the frame. */
  --wrap: 76rem;
}


html { scrollbar-gutter: stable; }
* { box-sizing: border-box; }
[hidden], .icon-sprite { display: none !important; }
img { display: block; max-inline-size: 100%; block-size: auto; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 var(--ui);
  -webkit-text-size-adjust: 100%;
}
.wrap { width: min(100%, var(--wrap)); margin: 0 auto; padding: 1.5rem 1.15rem 4rem; }
.mode-picker, .mode-controls { min-inline-size: 0; }
.control-field, .control-field select, .tool-columns > * { min-inline-size: 0; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.8rem; margin: 0 0 0.6rem; }
p, li { max-width: var(--measure); }
p { margin: 0 0 0.9rem; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

header.site-header {
  display: flex; align-items: center; gap: 0.25rem 0.9rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
header.site-header a.brand {
  font-weight: 600; text-decoration: none; color: var(--ink); font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
}
header.site-header nav {
  display: flex; gap: 0.9rem; font-size: 0.9rem;
  font-family: ui-sans-serif, system-ui, sans-serif; flex-wrap: wrap;
}
header.site-header nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}
header.site-header nav a[aria-current="page"] {
  color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}

.hero {
  position: relative;
  isolation: isolate;
  margin: 0 0 1.5rem;
  padding: 3.25rem 1.15rem 2.5rem;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 22%, rgba(159, 194, 232, 0.10), transparent 60%),
    linear-gradient(180deg, var(--void) 0%, #090d13 62%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) {
  .hero {
    margin-inline: 0;
    padding: 4.5rem 2.25rem 3.25rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    min-height: clamp(25rem, 46vh, 34rem);
    display: flex;
    align-items: center;
  }
}
.hero-copy { position: relative; max-width: 40rem; }
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -2.5rem -1.5rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 6, 10, 0.88) 0%, rgba(4, 6, 10, 0.80) 62%, rgba(4, 6, 10, 0.66) 100%);
}
@media (min-width: 46rem) {
  .hero-copy::before {
    inset: -3rem -6rem;
    background: linear-gradient(100deg, rgba(4, 6, 10, 0.93) 0%, rgba(4, 6, 10, 0.84) 44%, rgba(4, 6, 10, 0) 100%);
  }
}
.home-photo-hero {
  min-block-size: clamp(32rem, 68vh, 43rem);
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-deep);
}
.hero-photo, .hero-photo-scrim { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 38%; }
.hero-photo-scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 5, 8, 0.96) 0%, rgba(3, 5, 8, 0.8) 42%, rgba(3, 5, 8, 0.18) 76%),
    linear-gradient(0deg, rgba(3, 5, 8, 0.82) 0%, transparent 52%);
}
.home-photo-hero .hero-copy { max-inline-size: 48rem; }
.home-photo-hero .hero-copy::before { display: none; }
.home-photo-hero ~ section {
  /* site.css is intentionally non-blocking on the landing. Keep its large
     workspace and later sections out of layout until that full sheet becomes
     active; the later, equally specific rules replace this with `auto`. */
  content-visibility: hidden;
  contain-intrinsic-size: auto 900px;
}
.hero-credit {
  position: absolute; inset-inline-end: 1rem; inset-block-end: 0.85rem; margin: 0;
  max-inline-size: 16rem; color: rgba(242, 244, 248, 0.76);
  font: 0.72rem/1.35 var(--ui); text-align: end;
}
.hero h1 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(5, 7, 10, 0.85);
}
.hero .lede {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  color: var(--ink);
  max-width: 34rem;
  margin: 0 0 1.6rem;
  text-shadow: 0 1px 18px rgba(5, 7, 10, 0.9);
}
.hero-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  font-family: var(--ui);
  font-size: 0.88rem;
  color: var(--ink);
  max-width: none;
}
@media (min-width: 46rem) {
  .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.6rem; }
}
.hero-proof li {
  max-width: none;
  padding-left: 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.4;
  font-family: var(--ui);
}
.hero-proof li::before { display: none; content: none; }
.hero-ic {
  width: 1.3rem; height: 1.3rem; flex: none; color: var(--accent); margin-top: 0.1rem;
}
.hero-proof li span { min-width: 0; }
.action-row {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin: 1.9rem 0 1.6rem; max-width: none;
}


.cta, .cta-quiet {
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.cta { background: var(--accent); color: var(--accent-ink); }
.cta:hover { background: #e6b459; }
.cta-quiet { border-color: var(--line); color: var(--ink); background: rgba(13, 16, 21, 0.55); }
.cta-quiet:hover { border-color: var(--star); color: var(--star); }

/* The proof image sits below the tool, but it can still be measured before the
   deferred complete sheet arrives. Keep its intrinsic 1022 px width from
   widening a narrow document during that first-paint window. */
figure.evidence img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
}

/* The top of the workspace enters the desktop viewport. Its geometry must be
   present in the first paint too; otherwise the complete sheet turns native
   fieldsets and unsized SVGs into the two-column picker after paint, moving the
   whole tool by more than the fleet's CLS budget. These rules match site.css. */
.tool {
  margin: 1.75rem 0 2.5rem;
  padding: 1.4rem 1.1rem 1.6rem;
  overflow-x: clip;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
@media (min-width: 52rem) { .tool { padding: 1.9rem 1.9rem 2.1rem; } }
.step-mark {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-block: 1.6rem 0.6rem;
  max-width: none;
}
.step-number {
  flex: none;
  inline-size: 1.55rem;
  block-size: 1.55rem;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 0.85rem/1 var(--ui);
}
.step-words { font: 0.95rem/1.4 var(--ui); color: var(--ink); }
.step-words strong { font-weight: 600; }
.step-sub { color: var(--ink-soft); }
@media (max-width: 33rem) {
  .step-mark { align-items: flex-start; }
  .step-sub { display: block; }
}
.mode-picker, .mode-controls {
  min-inline-size: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}
.mode-picker legend, .mode-controls legend {
  margin: 0 0 0.55rem;
  padding: 0;
  font: 600 1.02rem/1.3 var(--ui);
  color: var(--ink);
}
.shell-lifecycle {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin: 0 0 0.7rem;
  color: var(--ink-soft); font: 0.78rem/1.35 var(--ui);
}
.shell-lifecycle span { display: inline-flex; align-items: center; gap: 0.5rem; }
.shell-lifecycle span:not(:last-child)::after { content: "\2192"; color: var(--line); }
.mode-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
@media (min-width: 42rem) { .mode-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mode-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-block-size: 64px;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #10141b;
  cursor: pointer;
  font: 0.92rem/1.35 var(--ui);
}
.mode-choice:has(input:checked) { border-color: var(--accent); background: #191a1c; }
.mode-choice:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.mode-choice input { flex: none; margin: 0.2rem 0 0; accent-color: var(--accent); }
.mode-choice span { min-inline-size: 0; }
.mode-choice strong, .mode-choice small { display: block; }
.mode-choice small { margin-top: 0.16rem; color: var(--ink-soft); font-size: 0.78rem; }
.mode-choice strong .icon { margin-inline-end: 0.4rem; }
.icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  vertical-align: -0.16em;
  flex: none;
  color: var(--accent, currentColor);
}

/* Native file controls have a platform-dependent intrinsic width (Linux's is
   four pixels wider than this panel after its padding is reserved). The full
   sheet turns all three into accessible label-backed pickers; do the identical
   hiding in the critical sheet so neither the first paint nor DOMContentLoaded
   briefly widens the document. */
.file-drop input[type="file"], .role-add input, .folder-row input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* FINAL HERO OVERRIDES. site.css acquired these compact-shell and photographic
   rules after critical.css was first cut. Keep the visible first screen
   byte-for-byte equivalent so activating the deferred sheet cannot move it. */
.hero :is(h1, h2, h3, p, li) { font-family: var(--ui); }
.compact-hero, .hero--compact {
  min-block-size: 0;
  padding-block: clamp(1.35rem, 4vw, 2.4rem);
}
.compact-hero .hero-copy, .hero--compact .hero-copy { max-inline-size: 48rem; }
.hero-actions, .compact-hero-actions, .hero--compact .action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-block: 1.15rem 0;
}
.hero-actions > *, .compact-hero-actions > * { min-block-size: 44px; }
.proof-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.6rem;
  margin-block: 1rem 1.4rem;
  padding: 0.7rem;
  border-block: 1px solid var(--border);
  color: var(--muted);
  font: 0.82rem/1.4 var(--ui);
}
.proof-strip > *, .proof-strip li { min-inline-size: 0; max-inline-size: none; margin: 0; }
.proof-strip strong { display: block; color: var(--text); font-size: 0.9rem; }
.hero .action-row { margin: 1.9rem 0 1.6rem; }
.section-lead {
  font-family: var(--ui);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 3rem 0 0.3rem;
  max-width: none;
}
/* This comes after the compact-shell rule just as the photographic redesign
   does in site.css; otherwise `.compact-hero` removes the reserved hero height
   during the critical-only paint. */
.home-photo-hero {
  min-block-size: clamp(32rem, 68vh, 43rem);
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-deep);
}
@media (max-width: 40rem) {
  .hero-actions > *, .compact-hero-actions > * { flex: 1 1 100%; }
  .proof-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 46rem) {
  .home-photo-hero { min-block-size: 39rem; padding: 2rem 1rem 3.4rem; }
  .hero-photo img { object-position: 54% center; }
  .hero-photo-scrim {
    background: linear-gradient(0deg, rgba(3, 5, 8, 0.96) 0%, rgba(3, 5, 8, 0.7) 72%, rgba(3, 5, 8, 0.35) 100%);
  }
  .hero-credit { inset-inline: 1rem; text-align: start; }
}