/* Screenboard Studio storefront — governed by STORE_DESIGN_SYSTEM.md.
   Amber is a signal (two per page + the active stage rule), Courier carries
   machine data, square corners, no gradients except the hero scrim, every
   animation behind prefers-reduced-motion. */

:root {
  --bg: #0b0c0e;
  --bg2: #101215;
  --panel: #15181b;
  --panel2: #21252a;
  --field: #0f1114;
  --line: #2b3037;
  --line-soft: #23272c;
  --ink: #eceef0;
  --ink-dim: #9aa1a8;
  --ink-faint: #6b7278;
  --accent: #e0a33f;
  --accent-ink: #0b0c0e;
  --ok: #6fae7a;
  /* --hold was USED by the engine band's condition row (.eb-hold, ruled
     by STORE_PRICING_PLAN K1) and never defined — the row rendered in
     inherited ink, so the designer's ruling silently wasn't happening.
     Value inherited unchanged from the app system. --warn is gone for
     the same reason the app deleted it (R3): it aliased the accent, and
     --hold IS the warning color. */
  --hold: #7d8fd0;
  --bad: #cd6155;
  --sans: 'Archivo', sans-serif;
  --mono: 'Courier New', Courier, monospace;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--mono); }

/* header */
/* Pinned header (user request 2026-08-03) — mirrors the app's sticky
   chrome; z sits above content, below the edit-mode chip (99). */
.site-head { background: var(--bg2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 45; }
.head-row { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--accent); }
.kicker-dim { font-size: 10px; letter-spacing: 2px; color: var(--ink-faint); }
.wordmark { font-weight: 700; font-size: 19px; letter-spacing: .3px; }
.brand-link .kicker { color: var(--ink-faint); }
.head-links-nav { display: flex; gap: 22px; }
.head-links-nav a { color: var(--ink-dim); font-size: 13px; text-decoration: none; }
.head-links-nav a:hover { color: var(--ink); }

/* buttons */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 10px 22px; font-family: var(--sans);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border: none; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--ink-faint); }
.btn-disabled { background: #1c1f23; color: #4a4d52; border: 1px solid #23272c; cursor: default; }

/* ============================== landing (STORE_HOMEPAGE_PLAN 2026-08-01) */

/* S2 — The Wall: copy on a scrim over three drifting columns. */
.wall { position: relative; height: 600px; overflow: hidden; background: var(--bg); }
.wall-cols {
  position: absolute; inset: -70px 0; display: grid;
  grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.wall-col { display: flex; flex-direction: column; gap: 10px; }
.wall-col img { width: 100%; height: auto; display: block; }
.wall-a { animation: wall-drift 21s ease-in-out infinite alternate; }
.wall-b { animation: wall-drift-rev 14s ease-in-out infinite alternate; transform: translateY(-60px); }
.wall-c { animation: wall-drift 26s ease-in-out infinite alternate; }
@keyframes wall-drift { from { transform: translateY(0); } to { transform: translateY(-120px); } }
@keyframes wall-drift-rev { from { transform: translateY(-120px); } to { transform: translateY(0); } }
.wall-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(97deg, rgba(11,12,14,.96) 34%, rgba(11,12,14,.34) 72%);
}
.wall-copy { position: relative; z-index: 2; padding-top: 64px; max-width: 1180px; }
.wall-copy h1 { font-size: 60px; font-weight: 700; letter-spacing: -.035em; line-height: 1.04; max-width: 12ch; margin: 14px 0 12px; }
.wall-sub { font-size: 11px; letter-spacing: .12em; color: var(--ink-dim); margin-bottom: 18px; }
.wall-para { max-width: 46ch; color: var(--ink-dim); font-size: 16px; margin-bottom: 26px; }
.provenance { margin-top: 22px; font-size: 10px; letter-spacing: .1em; color: var(--ink-faint); }

/* figure band */
.figband {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.fig { padding: 22px 26px; border-left: 1px solid var(--line-soft); }
.fig:first-child { border-left: none; }
.fig-num { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.fig-lbl { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .1em; color: var(--ink-faint); }

/* S3 — pricing editions */
.editions-wrap { padding: 72px 28px 8px; }
.editions-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 26px; flex-wrap: wrap; }
.editions-title { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.editions-note { max-width: 34ch; color: var(--ink-dim); font-size: 13px; text-align: right; }
/* K1 — engine band (STORE_PRICING_PLAN, designer-ruled): amber budget is
   the kicker role only; marks are status colors reporting state. */
.engine-band { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); border: 1px solid var(--line); margin-bottom: 18px; }
.eb-left { padding: 26px 30px; }
.eb-right { padding: 26px 30px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.eb-eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--accent); margin-bottom: 8px; }
.eb-left h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.eb-para { font-size: 13px; color: var(--ink-dim); max-width: 52ch; }
.eb-row { display: flex; gap: 10px; }
.eb-mark { font-size: 10px; line-height: 1.9; flex: none; }
.eb-ok { color: var(--ok); }
.eb-hold { color: var(--hold); }
.eb-line { font-size: 13px; font-weight: 600; }
.eb-sub { font-size: 12px; color: var(--ink-faint); }

.editions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.edition { background: var(--panel); border: 1px solid var(--line); padding: 26px 28px; display: flex; flex-direction: column; }
.edition-lead { border-top: 2px solid var(--accent); }
.edition-kind { font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 12px; }
.edition-lead .ek-name { color: var(--accent); }
.ek-name { color: var(--ink-dim); margin-right: 8px; }
.edition h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.edition-para { font-size: 13.5px; color: var(--ink-dim); margin-bottom: 20px; }
.traits { list-style: none; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 14px 0; margin-bottom: 18px; }
.traits li { font-size: 11px; letter-spacing: .05em; padding: 4px 0; }
.t-yes { color: var(--ink-dim); }
.t-yes::before { content: "■ "; color: var(--ok); }
.t-no { color: var(--ink-faint); }
.t-no::before { content: "□ "; }
.sku { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.sku:first-of-type { border-top: none; }
.sku-id { flex: 1; min-width: 0; }
.sku-name { display: block; font-weight: 600; font-size: 15px; }
.sku-sub { display: block; font-size: 9.5px; letter-spacing: .08em; color: var(--ink-faint); }
.sku-price { font-size: 17px; font-weight: 700; }
.sku-price .per { font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.sku-btn { flex: none; padding: 8px 20px; }
.gate-line { margin-top: 12px; font-size: 10px; letter-spacing: .08em; color: var(--ink-faint); }
.editions-foot { margin: 20px 0 0; font-size: 10px; letter-spacing: .08em; color: var(--ink-faint); text-align: center; }

/* setup notice — the stated gate (--hold, per the store system) */
.notice {
  border: 1px solid var(--line); border-left: 2px solid var(--hold, #7d8fd0);
  background: var(--panel); padding: 12px 16px; margin-bottom: 24px;
  font-size: 13px; color: var(--ink-dim);
}
.notice-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  border: 1px solid #7d8fd0; color: #7d8fd0;
  padding: 1px 6px; margin-right: 10px;
}

/* S4 — filmstrip marquee */
.stripband { padding: 64px 0 72px; overflow: hidden; }
.strip-label { font-size: 10px; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 16px; }
.strip { overflow: hidden; }
.strip-row { display: flex; gap: 10px; width: 200%; animation: sb-strip 52s linear infinite; }
.strip-row img { height: 150px; width: auto; display: block; }
@keyframes sb-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* S5 — the pipeline dissolve */
.dissolve { padding: 24px 28px 72px; }
.dis-title { font-size: 34px; font-weight: 700; letter-spacing: -.02em; max-width: 22ch; margin: 12px 0 10px; }
.dis-sub { color: var(--ink-dim); font-size: 14px; margin-bottom: 34px; }
.dis-grid { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; }
.dis-stage {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-left: 2px solid var(--line-soft); padding: 12px 0 12px 16px;
  cursor: pointer; transition: border-color .45s;
}
.dis-k { display: block; font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); transition: color .45s; }
.dis-d { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; transition: color .45s; }
.dis-stage.on { border-left-color: var(--accent); }
.dis-stage.on .dis-k { color: var(--accent); }
.dis-stage.on .dis-d { color: var(--ink-dim); }
.dis-stage-box { position: relative; height: 396px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.dis-pane { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.dis-pane.on { opacity: 1; pointer-events: auto; }
.dis-ticks { display: flex; gap: 6px; margin-top: 12px; }
.tick { flex: 1; height: 3px; background: var(--line-soft); cursor: pointer; transition: background .45s; }
.tick.on { background: var(--accent); }
.dis-caption { margin-top: 8px; font-size: 10px; letter-spacing: .1em; color: var(--ink-faint); text-align: right; }
.dis-foot { margin-top: 30px; font-size: 10px; letter-spacing: .12em; color: var(--ink-faint); }

/* artifact panes */
.doc { height: 100%; display: flex; flex-direction: column; font-size: 12px; }
.doc-head {
  display: flex; justify-content: space-between; padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft); font-size: 9.5px;
  letter-spacing: .08em; color: var(--ink-faint);
}
.doc-body { padding: 20px 26px; overflow: hidden; }
.scr-slug { color: var(--ink); margin-bottom: 14px; }
.scr-act { color: var(--ink-dim); margin-bottom: 14px; }
.scr-char { color: var(--ink); margin: 4px 0 2px 96px; }
.scr-dlg { color: var(--ink-dim); margin-left: 56px; max-width: 34ch; }
.juris { font-size: 11px; letter-spacing: .05em; color: var(--ink-dim); margin-bottom: 6px; }
.j-ok { color: var(--ok); margin-right: 8px; }
.j-bad { color: var(--bad); margin-right: 8px; }
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.plates img { width: 100%; height: 130px; object-fit: cover; display: block; border: 1px solid var(--line-soft); }
.plates figcaption { font-size: 9.5px; letter-spacing: .06em; color: var(--ink-faint); margin-top: 5px; }
.inuse { border: 1px solid var(--ok); color: var(--ok); padding: 0 4px; font-size: 8.5px; margin-left: 4px; }
.doc-foot { font-size: 9.5px; letter-spacing: .06em; color: var(--ink-faint); border-top: 1px solid var(--line-soft); padding-top: 10px; }
.bd-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0; height: 100%; }
.bd-script { padding: 18px 20px; border-right: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-dim); }
.bd-script mark { background: none; color: var(--accent); }
.bd-sheet { padding: 14px 18px; }
.bd-row { display: grid; grid-template-columns: 64px 1fr 110px 52px; gap: 8px; font-size: 10px; padding: 5px 0; border-top: 1px solid var(--line-soft); color: var(--ink-dim); }
.bd-row.bd-head { border-top: none; color: var(--ink-faint); letter-spacing: .08em; font-size: 9px; }
.ev-pass { color: var(--ok); }
.ev-hold { color: #7d8fd0; }
.bd-forbidden { margin-top: 12px; font-size: 9.5px; letter-spacing: .06em; color: var(--bad); }
.pane-img { width: 100%; height: calc(100% - 34px); object-fit: cover; display: block; background: var(--bg); }
.pane-img.contain { object-fit: contain; }
.pane-facts {
  height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  font-size: 10px; letter-spacing: .06em; color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
}

/* ============================== /pipeline (STORE_PIPELINE_PLAN 2026-08-01)
   Amber per §8 — fill: the CTA band's See pricing; kicker: THE METHOD,
   CASE FILE, the case-row labels, and the amber concept-note labels;
   highlight: the breakdown excerpt only; state: the active rail item and
   the header's active tool. */

.pl-hero { background: var(--bg2); border-bottom: 1px solid var(--line); }
.pl-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: 56px; padding-bottom: 44px; flex-wrap: wrap; }
.pl-hero h1 { font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1.06; margin: 12px 0 16px; }
.pl-hero-sub { max-width: 52ch; color: var(--ink-dim); font-size: 15px; }
.pl-hero-sub em { color: var(--ink); font-style: italic; }
.pl-hero-figs { font-size: 10.5px; letter-spacing: .1em; color: var(--ink-faint); text-align: right; line-height: 2; }

/* the long walk: sticky rail + stage column */
.pl-walk { display: grid; grid-template-columns: 196px 1fr; gap: 0; padding-left: 0; padding-right: 0; }
.pl-rail { background: #0d0f12; border-right: 1px solid var(--line); }
.pl-rail-inner { position: sticky; top: 86px; padding: 28px 0 28px 28px; } /* clears the pinned header */
.pl-rail-head { font-size: 9px; letter-spacing: .18em; color: var(--ink-faint); margin-bottom: 14px; }
.pl-rail-item {
  display: block; font-size: 10.5px; letter-spacing: .1em; color: var(--ink-faint);
  text-decoration: none; padding: 9px 12px 9px 14px;
  border-left: 2px solid transparent;
}
.pl-rail-item:hover { color: var(--ink-dim); }
.pl-rail-item.on { border-left-color: var(--accent); color: var(--accent); background: var(--panel); }
.pl-rail-div { border-top: 1px solid var(--line-soft); margin: 16px 14px 16px 0; }

.pl-stages { min-width: 0; }
.pl-stage { padding: 48px 0 44px 48px; border-top: 1px solid var(--line-soft); max-width: 936px; padding-right: 28px; }
.pl-stage:first-child { border-top: none; }
.pl-head { display: grid; grid-template-columns: 64px 1fr; gap: 0; margin-bottom: 26px; }
.pl-num { font-size: 34px; color: var(--line); letter-spacing: .02em; line-height: 1; padding-top: 4px; }
.pl-stage h2 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.pl-para { color: var(--ink-dim); font-size: 14.5px; max-width: 62ch; }

.pl-art { border: 1px solid var(--line); background: var(--panel); }
.pl-art-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
  font-size: 9.5px; letter-spacing: .1em; color: var(--ink-faint);
}
.pl-badge { border: 1px solid var(--line); color: var(--ink-faint); padding: 1px 8px; font-size: 9px; letter-spacing: .08em; }
.pl-badge.b-ok { border-color: var(--ok); color: var(--ok); }

/* stage 1 — screenplay beside THE READ FOUND */
.pl-split { display: grid; grid-template-columns: 1fr 1.1fr; background: none; border: none; gap: 16px; }
.pl-doc { border: 1px solid var(--line); background: var(--bg2); padding: 24px 26px; font-size: 12px; line-height: 1.75; }
.pl-found { border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--bg2); padding: 20px 24px; display: flex; flex-direction: column; }
.pl-found-head { font-size: 10px; letter-spacing: .18em; color: var(--accent); margin-bottom: 14px; }
.pl-found-line { font-size: 11.5px; letter-spacing: .04em; color: var(--ink-dim); padding: 3px 0; }
.pl-found-line strong { color: var(--ink); font-weight: 400; }
.c-hold { color: #7d8fd0; }
.c-ok { color: var(--ok); }
.c-faint { color: var(--ink-faint); }
.pl-found-note { margin-top: auto; padding-top: 18px; font-size: 12.5px; color: var(--ink-dim); }

/* footnotes — the argument of the page */
.pl-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.pl-note { border-left: 2px solid var(--line); padding-left: 16px; }
.pl-note p { font-size: 12.5px; color: var(--ink-dim); }
.pl-note-k { font-size: 10px; letter-spacing: .16em; margin-bottom: 6px; }
.n-gate { border-left-color: var(--ok); }
.n-gate .pl-note-k { color: var(--ok); }
.n-hold { border-left-color: #7d8fd0; }
.n-hold .pl-note-k { color: #7d8fd0; }
.n-amber { border-left-color: var(--accent); }
.n-amber .pl-note-k { color: var(--accent); }
.n-bad { border-left-color: var(--bad); }
.n-bad .pl-note-k { color: var(--bad); }

/* stage 2 — the bible card */
.pl-bible-body { padding: 20px 26px; }
.pl-bible-body h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.pl-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 20px; }
.pl-plates img { width: 100%; height: 128px; object-fit: cover; display: block; border: 1px solid var(--line-soft); }
.pl-plates figcaption { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .06em; color: var(--ink-faint); margin-top: 5px; }
.pl-langs-head { font-size: 9.5px; letter-spacing: .14em; color: var(--ink-faint); border-top: 1px solid var(--line-soft); padding-top: 16px; margin-bottom: 10px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chip { border: 1px solid var(--line); color: var(--ink-dim); font-size: 10px; letter-spacing: .06em; padding: 3px 10px; }

/* stage 3 — the sheet */
.pl-sheet-cols { display: grid; grid-template-columns: 1fr 1.9fr; }
.pl-excerpt { padding: 20px 22px; border-right: 1px solid var(--line-soft); font-size: 11.5px; line-height: 1.9; color: var(--ink-dim); }
.pl-excerpt mark { background: rgba(224, 163, 63, .16); color: var(--accent); padding: 0 2px; }
.pl-table { padding: 12px 20px 16px; }
.pl-row { display: grid; grid-template-columns: 62px 1.6fr 1fr .9fr; gap: 10px; font-size: 10.5px; padding: 8px 0; border-top: 1px solid var(--line-soft); color: var(--ink-faint); align-items: baseline; }
.pl-row:first-child { border-top: none; }
.pl-row strong { color: var(--ink); font-weight: 400; letter-spacing: .02em; }
.pl-row-head { font-size: 9px; letter-spacing: .1em; }
.pl-forbidden { border-top: 1px solid var(--line-soft); padding: 10px 20px; font-size: 9.5px; letter-spacing: .06em; color: var(--ink-faint); }

/* stage 4 — panel + provenance rail */
.pl-panelart { display: grid; grid-template-columns: 1fr 262px; background: none; border: none; gap: 0; border: 1px solid var(--line); }
.pl-panel-main { min-width: 0; background: var(--panel); }
.pl-panel-main > img { width: 100%; display: block; }
.pl-facts { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: 10px; letter-spacing: .06em; color: var(--ink-faint); flex-wrap: wrap; }
.pl-facts strong { color: var(--ink); font-weight: 400; }
.pl-facts-badge { margin-left: auto; }
.pl-facts-right { margin-left: auto; }
.pl-takes { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.pl-takes-k { font-size: 9.5px; letter-spacing: .12em; color: var(--ink-faint); }
.take { width: 86px; height: auto; display: block; opacity: .45; border: 1px solid var(--line-soft); }
.take-ok { opacity: 1; border-color: var(--ok); }
.pl-takes-note { font-size: 9px; letter-spacing: .08em; color: var(--ink-faint); max-width: 24ch; line-height: 1.6; }
.pl-prov { border-left: 1px solid var(--line); padding: 20px 20px; font-size: 10px; letter-spacing: .05em; color: var(--ink-dim); line-height: 1.9; background: var(--bg2); }
.pl-prov-h { color: var(--ink-faint); letter-spacing: .14em; font-size: 9px; margin-top: 16px; }
.pl-prov-h:first-child { margin-top: 0; }
.pl-prov-q { color: var(--ink-faint); line-height: 1.7; margin-top: 4px; }

/* stage 5 — the board */
.pl-boardart > img { width: 100%; display: block; }

/* the case file — a separate chapter on darker ground */
.pl-case { background: #0d0f12; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 64px 0 56px; }
.pl-case-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; flex-wrap: wrap; }
.pl-case h2 { font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 12px 0 14px; }
.pl-case-row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 30px 0; border-top: 1px solid var(--line-soft); }
.pl-case-k { font-size: 10px; letter-spacing: .14em; color: var(--accent); margin-bottom: 8px; }
.pl-case-label p:not(.pl-case-k):not(.pl-case-sub) { font-size: 13px; color: var(--ink-dim); }
.pl-case-sub { margin-top: 12px; font-size: 9.5px; letter-spacing: .08em; color: var(--ink-faint); line-height: 1.9; }
.pl-case-doc { font-size: 12px; }
.pl-case-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pl-case-plates img { width: 100%; height: 128px; object-fit: cover; display: block; border: 1px solid var(--line-soft); }
.pl-case-plates figcaption { font-size: 9.5px; letter-spacing: .08em; color: var(--ink-faint); margin-top: 6px; }
.pl-case-table { border: 1px solid var(--line); background: var(--panel); }
.pl-case-img img { width: 100%; display: block; border: 1px solid var(--line); }

/* closing CTA band */
.pl-cta { background: var(--bg2); border-bottom: 1px solid var(--line); }
.pl-cta-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 34px; padding-bottom: 34px; flex-wrap: wrap; }
.pl-cta-row > p { font-size: 16px; color: var(--ink-dim); }

/* header: the active tool (state role) */
.head-links-nav a.on { color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 3px; }

@media (max-width: 900px) {
  .pl-walk { grid-template-columns: 1fr; }
  .pl-rail { display: none; }
  .pl-stage { padding-left: 28px; }
  .pl-split, .pl-sheet-cols, .pl-panelart, .pl-case-row { grid-template-columns: 1fr; }
  .pl-excerpt { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .pl-prov { border-left: none; border-top: 1px solid var(--line); }
  .pl-notes { grid-template-columns: 1fr; }
  .pl-hero h1 { font-size: 36px; }
  .pl-hero-figs { text-align: left; }
}

/* reduced motion: stills stand still, panes hard-cut */
@media (prefers-reduced-motion: reduce) {
  .wall-a, .wall-b, .wall-c, .strip-row { animation: none; }
  .wall-b { transform: none; }
  .dis-pane { transition: none; }
  .dis-stage, .dis-k, .dis-d, .tick { transition: none; }
}

/* responsive */
@media (max-width: 900px) {
  .wall-copy h1 { font-size: 42px; }
  .editions, .figband { grid-template-columns: 1fr 1fr; }
  .dis-grid { grid-template-columns: 1fr; }
  .dis-stage-box { height: 340px; }
}
@media (max-width: 640px) {
  .editions, .figband { grid-template-columns: 1fr; }
  .engine-band { grid-template-columns: 1fr; }
  .eb-right { border-left: none; border-top: 1px solid var(--line); }
  .fig { border-left: none; border-top: 1px solid var(--line-soft); }
  .wall-cols { grid-template-columns: 1fr 1fr; }
  .wall-c { display: none; }
  .head-links-nav { display: none; }
}

/* ===================================== shared: order, auth, legal, header */

/* order / success */
.order { padding: 72px 0; max-width: 640px; }
.order h1 { font-size: 30px; font-weight: 700; margin-bottom: 14px; }
.hero-sub { margin-top: 16px; color: var(--ink-dim); font-size: 16px; }
.price-kind { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--ink-faint); margin-bottom: 10px; }
.license-box { background: var(--field); border: 1px solid var(--line); padding: 18px 20px; margin: 26px 0; }
.license-label { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--ink-faint); margin-bottom: 6px; }
.license-token { font-family: var(--mono); font-size: 16px; color: var(--ink); word-break: break-all; }

/* footer */
.site-foot { border-top: 1px solid var(--line); background: var(--bg2); }
.foot-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--ink-faint); padding: 16px 0; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-links { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; align-self: center; }
.foot-links a { color: var(--ink-dim); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* License recovery + legal pages (tier A, 2026-08-01) */
.recover-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.recover-form input {
  flex: 1 1 280px; max-width: 380px; padding: 12px 14px;
  background: var(--field); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: 14px;
}
.recover-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.legal h2 { margin: 30px 0 8px; font-size: 17px; }
.legal p { color: var(--ink-dim); max-width: 74ch; line-height: 1.55; }
.legal a { color: var(--ink); }
.legal-date { color: var(--ink-faint); font-size: 11px; letter-spacing: .08em; margin-top: 34px; }

/* Header sign-in + session widget (2026-08-01) */
.head-side { display: flex; align-items: center; gap: 22px; }
.head-signin { padding: 8px 16px; font-size: 13px; white-space: nowrap; }
.head-logout { display: inline; margin: 0; }
.head-account { color: var(--ink-dim); font-size: 12px; text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 9px; }
.head-account:hover { color: var(--ink); }
.head-avatar { width: 28px; height: 28px; border: 1px solid var(--line); display: block; object-fit: cover; background: var(--panel); }
.head-email { color: var(--ink-dim); font-size: 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-account:hover .head-email { color: var(--ink); }

/* Brand links home (2026-08-01) */
.brand-link { text-decoration: none; color: inherit; display: block; }
.brand-link:hover .wordmark { color: var(--accent); }

/* Token disclosure (2026-08-01): the happy path never shows a credential. */
.token-reveal { margin-top: 22px; }
.token-reveal summary { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-faint); cursor: pointer; }
.token-reveal summary:hover { color: var(--ink-dim); }
.token-reveal[open] { border: 1px solid var(--line-soft); padding: 12px 16px; }

/* Studio-name live preview (2026-08-01): the corrected address forms as
   you type — format can never be a submit error. */
.name-preview { margin-top: 8px; font-size: 10px; letter-spacing: .08em; color: var(--ink-faint); min-height: 14px; }
.name-preview.bad { color: var(--bad); }

/* Studio naming terms (2026-08-01): what a rename does and does not do,
   stated at the form — never discovered after the fact. */
.name-terms { margin-top: 10px; font-size: 12px; color: var(--ink-faint); max-width: 52ch; }

/* router pages (STORE_ROUTER_PLAN 2026-08-01) */
.router-page { max-width: 720px; }
.router-addr { font-family: var(--mono); font-size: 30px; font-weight: 700; word-break: break-all; letter-spacing: .01em; margin-bottom: 16px; }
.router-rule { border-top: 1px solid var(--line); margin: 34px 0 18px; }
.hold-kicker { color: var(--hold, #7d8fd0); }
.status-block { border: 1px solid var(--line); border-left: 2px solid var(--hold, #7d8fd0); background: var(--field); padding: 16px 20px; margin-top: 22px; }
.status-row { display: flex; gap: 24px; font-size: 11px; letter-spacing: .06em; padding: 4px 0; color: var(--ink-faint); }
.status-row span { width: 130px; flex: none; }
.status-row b { color: var(--ink); font-weight: 400; word-break: break-all; }
.status-row b.ok { color: var(--ok); }
.recheck-note { font-size: 10px; letter-spacing: .08em; color: var(--ink-faint); }
.mail-link { color: var(--accent); }

/* T3 — the workspace door's stated gate + live chip (mock 11c) */
.prov-block {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--field); border: 1px solid var(--line);
  border-left: 2px solid var(--hold, #7d8fd0);
  padding: 14px 16px; margin: 22px 0 0;
  font-size: 10.5px; letter-spacing: .06em; color: var(--ink-dim);
  line-height: 1.7;
}
.prov-chip {
  flex: none; border: 1px solid var(--hold, #7d8fd0); color: var(--hold, #7d8fd0);
  padding: 1px 8px; font-size: 9.5px; letter-spacing: .1em;
}
.live-chip {
  border: 1px solid var(--ok); color: var(--ok);
  padding: 0 6px; font-size: 9px; letter-spacing: .1em; margin-left: 8px;
}
.figs-from { color: var(--ink-dim); }

/* Naming-first workspace door (user ruling 2026-08-03): a new studio
   leads with its name, never with infrastructure hostnames. */
.name-box { border-left: 2px solid var(--accent); }
.name-form .name-row { display: flex; gap: 10px; margin-top: 6px; }
.name-input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); padding: 10px 12px; font-size: 15px; }
.name-input:focus { outline: none; border-color: var(--accent); }
.name-preview { margin-top: 8px; font-size: 11px; letter-spacing: .06em; color: var(--ink-dim); }
.name-err { margin-top: 8px; font-size: 10px; letter-spacing: .06em; color: var(--bad); }
.name-terms { margin-top: 10px; font-size: 11.5px; color: var(--ink-faint); }

/* Operator console (/admin, 2026-08-06) — internal surface: store chrome,
   Courier tables, no amber beyond the one Mint fill. NON-CANON, logged in
   STORE_DESIGN_SYSTEM.md for the storefront design batch. */
/* X1 (ADMIN_CONSOLE_FIX, mock 12a) — a header link is a header link.
   Mono + uppercase + tracking + amber were four signals saying "this one
   is special", and the only special thing about it is who can see it,
   which not rendering it for anyone else already handles. Identical to
   .head-links-nav a — not one ink tier down, which is just a quieter
   mismatch. A hairline does the separating. */
.head-admin { color: var(--ink-dim); font-size: 13px; text-decoration: none;
  border-left: 1px solid var(--line); padding-left: 16px; }
.head-admin:hover { color: var(--ink); }
/* X2 — the console's own voice: one Courier title, and operational
   facts as Courier lines instead of paragraphs. */
.admin-kicker { font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--ink); margin-bottom: 8px; }
.admin-note { font-size: 10px; letter-spacing: .06em; color: var(--ink-faint);
  line-height: 1.7; margin-top: 12px; }
.admin-field { font-size: 10px; letter-spacing: .1em; color: var(--ink-faint);
  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* X3 — one baseline for every field and the button; tracks fixed so the
   form does not reflow as a note grows. */
.mint-form { display: grid; gap: 14px; align-items: end; margin-top: 14px;
  grid-template-columns: 120px 160px 130px 150px auto minmax(0,1fr) auto; }
/* Explicit placement, not auto-flow: the custom-expiry field occupies its
   own auto track, which collapses to nothing while the field is hidden.
   Auto-flow would have shuffled every later field one track left when it
   appeared and wrapped Mint onto a second row. */
.mint-form > :nth-child(2) { grid-column: 1; }   /* DAYS (1 is the hidden token) */
.mint-form > :nth-child(3) { grid-column: 2; }   /* EDITION */
.mint-form > :nth-child(4) { grid-column: 3; }   /* REDEMPTIONS */
.mint-form > :nth-child(5) { grid-column: 4; }   /* CODE EXPIRES */
.mint-form > :nth-child(6) { grid-column: 5; }   /* EXPIRES IN (DAYS) */
.mint-form > :nth-child(7) { grid-column: 6; }   /* WHO / WHY */
.mint-form > :nth-child(8) { grid-column: 7; }   /* Mint */
.mint-form input, .mint-form select { width: 100%; background: var(--field);
  border: 1px solid var(--line); color: var(--ink); padding: 8px 10px;
  font-family: var(--sans); font-size: 13px; }
.mint-form select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
  linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 28px; }
.mint-form input:focus, .mint-form select:focus { outline: 2px solid var(--accent);
  outline-offset: -1px; }
@media (max-width: 900px) {
  .mint-form { grid-template-columns: 1fr 1fr; }
  .mint-form > * { grid-column: auto !important; }
}
/* X4 — fixed tracks so CODE/STATE do not reflow as notes change length;
   act buttons are verbs, so Archivo, not the table's Courier. */
.admin-table { width: 100%; border-collapse: collapse; font-size: 11.5px;
  table-layout: fixed; }
.admin-table th { text-align: left; color: var(--ink-faint); font-weight: 400;
  padding: 6px 10px 6px 0; }
.admin-table td { padding: 7px 10px 7px 0; border-top: 1px solid var(--line-soft);
  color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.admin-table .st-live { color: var(--ok); }
.admin-table .st-spent { color: var(--ink-faint); }
.admin-table .st-held { color: var(--hold); }
.codes-table col.c-code { width: 150px; }
.codes-table col.c-state { width: 84px; }
.codes-table col.c-days { width: 64px; }
.codes-table col.c-tier { width: 104px; }
.codes-table col.c-used { width: 78px; }
.codes-table col.c-stale { width: 108px; }
.codes-table col.c-act { width: 110px; }
.people-table col.p-acct { width: 240px; }
.people-table col.p-kind { width: 72px; }
.people-table col.p-status { width: 88px; }
.people-table col.p-left { width: 62px; }
.people-table col.p-ends { width: 104px; }
.people-table col.p-studio { width: 170px; }
.people-table col.p-act { width: 104px; }
.admin-act { padding: 3px 10px; font-size: 10.5px; font-family: var(--sans); }

/* S2 — the code door is an escape hatch, not a second front door. One
   line that expands in place; no box, no weight of its own. */
.code-hatch { margin-top: 22px; border-top: 1px solid var(--line-soft);
  padding-top: 18px; }
.code-hatch > summary { cursor: pointer; color: var(--ink-dim); font-size: 14px;
  list-style: none; }
.code-hatch > summary::-webkit-details-marker { display: none; }
.code-hatch > summary::before { content: "+ "; color: var(--ink-faint); }
.code-hatch[open] > summary::before { content: "− "; }
.code-hatch > summary:hover { color: var(--ink); }
.hatch-act { color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; }
.hatch-note { font-size: 10px; letter-spacing: .06em; color: var(--ink-faint);
  line-height: 1.7; margin-top: 10px; }

/* Two trial acts, one fill: Personal is the common path and takes the
   amber, Business sits beside it as a ghost (§8 — never two fills side
   by side). */
.trial-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* A hiding utility must always win — the app's stylesheet learned this
   the hard way when an equal-specificity component rule out-ordered it
   (2026-08-06). */
.hidden { display: none !important; }

/* The empty-image surface (HATCH_RULE H3, 2026-08-06). MIRRORED from
   app/static/styles.css with identical values — the store is a separate
   stylesheet but not a separate pattern. Do not edit one without the
   other: storefront/tests/test_store_tokens.py compares them and fails
   the build if they diverge. Never re-declare the gradient inline. */
.hatch { background: repeating-linear-gradient(135deg, var(--panel2) 0 7px, #1c1f23 7px 14px); }
.hatch-fine { background: repeating-linear-gradient(135deg, var(--panel2) 0 5px, #1c1f23 5px 10px); }
.hatch-bad { background: repeating-linear-gradient(135deg, #211b1b 0 7px, #1b1717 7px 14px); }
/* A hatch block never renders bare: it states its condition. */
.hatch-chip { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: var(--panel);
  border: 1px solid var(--line); color: var(--ink-dim);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  padding: 6px 12px; white-space: nowrap; max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis; }

/* G1 (SIGNIN_BRANDING) — GOOGLE_SIGNIN_SNIPPET.html, transliterated.
   THE BRANDING VALUES ARE NOT OURS TO TUNE: Google's guidelines fix
   them, and an approved button that has been "adjusted to fit" is no
   longer an approved button. Do not convert these hexes to tokens.

   THE RADIUS EXCEPTION, STATED: this product is square-cornered
   (--radius: 0). Google's mark specifies 4px and the third-party brand
   wins inside its own button, because a modified sign-in button reads
   as a phishing affordance to exactly the users trained to trust the
   real one. Nothing else on the page borrows this radius. */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  background: #131314;
  border: 1px solid #8E918F;
  border-radius: 4px;              /* Google's spec — see note above */
  font-family: 'Roboto', 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #E3E3E3;
  cursor: pointer;
  text-decoration: none;
}
.btn-google:hover  { background: #1c1c1e; }
.btn-google:active { background: #26262a; }
.btn-google:focus-visible { outline: 2px solid #8E918F; outline-offset: 2px; }
.btn-google img { display: block; width: 18px; height: 18px; flex: none; }
/* The snippet's button is width:100%; the mock shows it at the width of
   the form beside it, so its wrapper — not the button — carries that. */
.google-slot { max-width: 420px; margin-top: 26px; }
/* The OR divider: two hairlines and a Courier word. */
.or-rule { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  max-width: 420px; }
.or-rule::before, .or-rule::after { content: ""; flex: 1;
  border-top: 1px solid var(--line); }
.or-rule span { font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; color: var(--ink-faint); }

/* Inline links in prose. Without this they inherit the browser's blue,
   which is glaring on a dark page — it was being patched per-element
   with style="color:var(--ink)" on four templates, which is the
   re-declaration problem HATCH_RULE names, one layer up. */
.order a, .order .hero-sub a, .hatch-note a { color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line); }
.order a:hover, .hatch-note a:hover { text-decoration-color: var(--ink-faint); }
/* Buttons are not prose links. */
.order a.btn, .order a.btn-google { text-decoration: none; }
.order a.btn-primary { color: var(--accent-ink); }
.order a.btn-secondary { color: var(--ink); }

/* S1/S2 — the workspace door. The studio NAME is the card's headline:
   it is what the user chose, what they rename, and how they refer to the
   place. The URL demotes to a Courier line beneath it. */
.door-box { padding: 0; overflow: hidden; }
.door-preview { position: relative; height: 180px; }
.door-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.door-prov { position: absolute; right: 10px; bottom: 10px;
  background: rgba(11, 12, 14, .82); border: 1px solid var(--line);
  color: var(--ink-dim); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .06em; padding: 4px 8px; }
.door-name { font-size: 22px; font-weight: 600; color: var(--ink);
  padding: 16px 20px 0; display: flex; align-items: center; gap: 10px; }
.door-url { padding: 4px 20px 18px; font-size: 11.5px; }
.door-url a { color: var(--ink-faint); text-decoration: none; }
.door-url a:hover { color: var(--ink-dim); }

/* E1 (RULE_PASS 2026-08-16): the fleet's worst state in a sentence, above
   the table. The table stays whole beneath it — collapsing a healthy
   fleet to one line optimises for the day nothing is wrong, which is the
   day nobody opens this page. */
.fleet-headline {
  margin: 10px 0 14px;
  font-size: 15px;
  color: var(--ink, #eceef0);
}
.fleet-headline:empty { display: none; }