/* ==========================================================================
   CADWiz — Phase 1 landing page
   Design plan: docs/design-plan-phase1.md
   Mobile-first. Navy hero, drafting-paper body. Flat: no shadows, no
   gradients, no scroll animation. Separation comes from rules, not depth.
   ========================================================================== */

:root {
  --blueprint-navy: #0A1020;
  --drafting-paper: #F7F5F0;
  --wireframe-cyan: #4CC3FF;   /* linework + focus on navy ONLY */
  /* CONFIRMED 2026-07-31. 6.4:1 on --drafting-paper, passes AA for body text.
     Brand cyan #4CC3FF on that paper is 1.82:1 — invisible in daylight on a
     phone, which is where the traffic lands. Do NOT "simplify" this back to
     cyan. Scope: links, body text, focus rings. Never marks or logos —
     cyan stays the identity color; this ink is for anything that is read. */
  --wireframe-ink:  #0B5F8A;
  --spark-amber:    #FFB454;   /* the single accent — CTA only */
  --wizard-indigo:  #5B4BD6;   /* Wizard tier marker only, never clickable */

  --rule:      rgba(10, 16, 32, 0.14);
  --rule-dark: rgba(76, 195, 255, 0.22);
  --ink-soft:  rgba(10, 16, 32, 0.72);
  --paper-soft: rgba(247, 245, 240, 0.74);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --wrap: 68rem;
  --pad: 1.25rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--drafting-paper);
  color: var(--blueprint-navy);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 48rem) { body { font-size: 1.0625rem; } }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: 2.125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: 1.5625rem; font-weight: 600; }
h3 { font-size: 1.1875rem; font-weight: 600; }

@media (min-width: 48rem) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.25rem; }
}

p { margin: 0 0 1rem; max-width: 66ch; }

a { color: var(--wireframe-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

.mono { font-family: var(--mono); font-size: 0.94em; }

/* --- accessibility ------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--wireframe-ink);
  outline-offset: 2px;
}
.hero :focus-visible,
.waitlist :focus-visible,
.site-head :focus-visible {
  outline-color: var(--wireframe-cyan);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--spark-amber); color: var(--blueprint-navy);
  padding: 0.75rem 1rem; font-weight: 600; z-index: 10;
}
.skip:focus { left: 0; top: 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- the mark ----------------------------------------------------------- */

.mark-logo {
  width: 3rem; height: 3rem; display: block; flex: none;
  object-fit: cover; border-radius: 50%;
}

/* --- placeholders ------------------------------------------------------- */

.ph {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Inline placeholder for a value that is BLOCKING, not decorative. Reads as
   obviously unfinished on purpose so it cannot ship unnoticed. */
.ph-inline {
  display: inline-flex; padding: 0.1em 0.5em; font-size: 0.7rem;
  border: 1px dashed var(--rule);
  border-radius: 2px;
  background: repeating-linear-gradient(
    135deg, transparent, transparent 7px,
    rgba(10, 16, 32, 0.045) 7px, rgba(10, 16, 32, 0.045) 8px);
}

/* The demo slot. Section 8 forbids faking a demo, so this stays a
   placeholder — but "honest" and "unfinished-looking" are not the same
   thing. Dashed hatching says the builder ran out of time. Registration
   marks on a ruled viewport say the frame is reserved and the drawing has
   not been issued yet, which is both true and deliberate.
   Corner ticks are the drafting convention for exactly that. */
.ph-demo {
  position: relative;
  width: 100%; aspect-ratio: 16 / 10;
  color: var(--paper-soft);
  border: 1px solid var(--rule-dark);
  background-color: rgba(76, 195, 255, 0.03);
  background-image:
    linear-gradient(rgba(76, 195, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 195, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.ph-demo::before,
.ph-demo::after {
  content: ""; position: absolute;
  width: 1.125rem; height: 1.125rem;
  border: 1px solid var(--wireframe-cyan);
  opacity: 0.55;
}
/* Top-RIGHT and bottom-LEFT, not the other diagonal: the "Early build" stamp
   occupies the top-left corner and was covering the mark entirely. */
.ph-demo::before { top: 0.5rem; right: 0.5rem; border-left: 0; border-bottom: 0; }
.ph-demo::after { bottom: 0.5rem; left: 0.5rem; border-right: 0; border-top: 0; }

/* --- header ------------------------------------------------------------- */

.site-head { background: var(--blueprint-navy); }
.head-inner { padding-block: 1rem 0; }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo-word {
  display:inline-flex;
  background:var(--drafting-paper);
  border-radius:.25rem;
  padding:.28rem .5rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.word-cad { color:#111318; }
.word-wiz { color:#2F7FF2; }

/* --- 1. hero ------------------------------------------------------------ */

.hero {
  background-color: var(--blueprint-navy);
  /* faint blueprint grid — flat, no gradient */
  background-image:
    linear-gradient(rgba(76, 195, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 195, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--drafting-paper);
  border-bottom: 1px solid var(--rule-dark);
  padding-block: 2.5rem 3rem;
}
.hero-inner { display: grid; gap: 2.25rem; }

@media (min-width: 56rem) {
  .hero { padding-block: 4.5rem 5rem; }
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
}

/* No max-width cap here. The grid column is already the measure, and a ch
   cap on top of it fights text-wrap:balance and orphans short words onto
   their own line. Let balance work inside the column. */
.hero h1 { color: var(--drafting-paper); text-wrap: balance; }
.hero .sub {
  font-size: 1.0625rem;
  color: var(--paper-soft);
  max-width: 46ch;
  margin-bottom: 1.75rem;
}
@media (min-width: 48rem) { .hero .sub { font-size: 1.25rem; } }

/* The outcome line carries the weight; the teacher clause sits under it,
   quieter but present. Dropping it would leave the hero selling speed alone. */
.hero .sub { margin-bottom: 0.6rem; }
.hero .sub-2 {
  font-size: 0.9375rem;
  color: var(--paper-soft);
  margin-bottom: 1.75rem;
}
@media (min-width: 48rem) { .hero .sub-2 { font-size: 1.0625rem; } }

.hero-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; }
.btn-link {
  display: inline-block;
  color: var(--spark-amber);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--spark-amber);
  padding-bottom: 2px;
}
.btn-link-secondary {
  color: var(--drafting-paper);
  border-bottom-color: rgba(247, 245, 240, 0.8);
}
.btn-link::before { content: "\25B8\00a0"; }
.btn-link:hover { border-bottom-width: 3px; }

/* --- workbench page ----------------------------------------------------- */

.workbench-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-top: 1.25rem;
}

.workbench-nav a {
  color: var(--drafting-paper);
  text-decoration: none;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(247, 245, 240, 0.35);
}

.workbench-hero {
  background-color: var(--blueprint-navy);
  color: var(--drafting-paper);
  border-bottom: 1px solid var(--rule-dark);
  padding-block: 2.5rem 3rem;
}

.workbench-hero .sub {
  font-size: 1.05rem;
  color: var(--paper-soft);
}

.workbench-wrap {
  max-width: 74rem;
}

.section-kicker {
  display: inline-block;
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wireframe-ink);
}

.submission-grid,
.role-grid,
.pipeline-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 56rem) {
  .submission-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.submission-card,
.role-card,
.pipeline-card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blueprint-navy);
  padding: 1.3rem;
  background: rgba(255, 255, 255, 0.2);
}

.submission-card.gemini { border-top-color: #1d5eff; }
.submission-card.openai { border-top-color: #e26d2d; }
.submission-card.anthropic { border-top-color: #5d7b73; }

.submission-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blueprint-navy);
  background: rgba(10, 16, 32, 0.06);
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.85rem;
}

.submission-card h3,
.role-card h3,
.pipeline-card h3 {
  margin-bottom: 0.6rem;
}

.feature-list,
.check-list {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
}

.feature-list li,
.check-list li {
  margin-bottom: 0.55rem;
}

.section-panel {
  margin-top: 2.5rem;
}

.signal-box {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--rule);
  background: rgba(76, 195, 255, 0.04);
}

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  margin-top: 1.5rem;
}

.action-bar a {
  font-weight: 600;
}

.metric-row {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .metric-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.metric {
  padding: 1rem;
  border: 1px solid var(--rule);
  background: rgba(247, 245, 240, 0.8);
}

.metric strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: var(--blueprint-navy);
}

.metric span {
  color: var(--ink-soft);
}

.workbench-surface {
  background: var(--drafting-paper);
}

@media (min-width: 48rem) {
  .primary-column {
    max-width: 70ch;
  }
}

.demo { margin: 0; }
.demo { position: relative; }
.stamp {
  position: absolute; top: 0; left: 0; z-index: 1;
  background: var(--wireframe-cyan);
  color: var(--blueprint-navy);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.55rem;
}
.demo figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--paper-soft);
  max-width: 46ch;
}

/* --- bands -------------------------------------------------------------- */

/* Section height rhythm — founder standard, 2026-08-15.
   Measured before it was set: the nine homepage sections ran 307px to 1859px at
   1440px wide, a 1552px spread, with no min-height anywhere. The founder asked
   for one rhythm sitting between S2 (528px) and S3 (518px), so the floor is
   32.75rem = 524px.
   It is a FLOOR, not a fixed height: sections with more content than that grow
   past it and keep the same padding, so the rhythm holds without ever clipping.
   New sections inherit both variables automatically. */
:root {
  --section-rhythm: 32.75rem; --section-pad: 3rem;
  /* Background alternation — founder item 14, 2026-08-16. Two families only, so
     the rhythm is legible rather than a gradient of near-shades. */
  --band-dark-bg:  #0A1020;
  --band-light-bg: #EAF3F8;
}
@media (min-width: 48rem) { :root { --section-pad: 4.5rem; } }
.band {
  padding-block: var(--section-pad);
  min-height: var(--section-rhythm);
  display: grid;
  align-content: center;
  border-bottom: 1px solid var(--rule);
}

.lede { color: var(--ink-soft); max-width: 58ch; margin-bottom: 2rem; }

/* --- 2. three levels ---------------------------------------------------- */

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blueprint-navy);
  border-radius: 2px;
  padding: 1.25rem;
  background: transparent;
}
.card h3 { margin-bottom: 0.5rem; }

/* Tier marks. Drawn as linework rather than emoji — the wand emoji is
   Unicode 13 and renders as tofu on older Windows, which is the worst
   possible glyph to lose on the one card that must look deliberate. */
.mark {
  width: 1.375rem; height: 1.375rem;
  vertical-align: -0.18em;
  margin-right: 0.4rem;
  fill: none;
  stroke: var(--blueprint-navy);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.card-wizard .mark { stroke: var(--wizard-indigo); }
.card p { margin-bottom: 0; }

/* Wizard is deliberately the least clickable object on the page. */
.card-wizard { border-top-color: var(--wizard-indigo); }
.chip {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wizard-indigo);
  border: 1px solid var(--wizard-indigo);
  border-radius: 2px;
  padding: 0.1rem 0.45rem;
  margin-bottom: 0.75rem;
}

.pull {
  margin-top: 2rem;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* --- 3. signature: the dimensioned remix -------------------------------- */

.remix { margin: 0 0 1.5rem; }
.drawing { width: 100%; height: auto; display: block; }

.drawing .part { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.drawing .hole { fill: rgba(11, 95, 138, 0.07); stroke: var(--wireframe-ink); stroke-width: 1.75; }
.drawing .ext  { stroke: var(--wireframe-ink); stroke-width: 1; opacity: 0.5; }
.drawing .lead { stroke: var(--wireframe-ink); stroke-width: 1; }
.drawing .flow { stroke: var(--blueprint-navy); stroke-width: 1.5; opacity: 0.45; }
.drawing .tick { fill: var(--wireframe-ink); }
.drawing .flow + .tick { fill: var(--blueprint-navy); opacity: 0.45; }
.drawing .num {
  fill: var(--blueprint-navy);
  font-family: var(--mono);
  font-size: 15px;
  text-anchor: middle;
}

.said { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.said-label {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.utterance {
  border-left: 3px solid var(--wireframe-ink);
  padding: 0.35rem 0 0.35rem 0.75rem;
  font-size: 1rem;
}
@media (min-width: 48rem) { .utterance { font-size: 1.0625rem; } }

.after-note { color: var(--ink-soft); }

/* --- 4. the loop -------------------------------------------------------- */

.loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 52rem) { .loop { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

.loop li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
}
@media (min-width: 52rem) {
  .loop li { grid-template-columns: 1fr; row-gap: 0.15rem; }
}
.step-n {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--wireframe-ink);
  grid-row: span 2;
}
@media (min-width: 52rem) { .step-n { grid-row: auto; } }
.loop strong { font-weight: 600; }
.loop span:last-child { color: var(--ink-soft); font-size: 0.9375rem; }

/* --- 5. how it works ---------------------------------------------------- */

.steps { margin: 0; padding: 0 0 0 1.5rem; display: grid; gap: 1.75rem; }
.steps li::marker { font-family: var(--mono); color: var(--wireframe-ink); }
.steps h3 { margin-bottom: 0.35rem; }
.steps p { margin-bottom: 0; color: var(--ink-soft); }

/* --- 6. trust ----------------------------------------------------------- */


/* --- 7. limits ---------------------------------------------------------- */

.band-limits { background: rgba(10, 16, 32, 0.03); }

/* --- 7b. tell me what to build ------------------------------------------ */

/* The question itself carries the section, so .lede runs at heading weight
   here rather than as a subtitle. No box, no accent — asking plainly is the
   point, and --spark-amber stays reserved for the one CTA below it. */
.band-ask .lede {
  color: var(--blueprint-navy);
  font-size: 1.1875rem;
  max-width: 46ch;
  margin-bottom: 1.25rem;
}
@media (min-width: 48rem) { .band-ask .lede { font-size: 1.375rem; } }
.ask-how { color: var(--ink-soft); font-size: 0.9375rem; }
.limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.limits li {
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
  max-width: 62ch;
  color: var(--ink-soft);
}
.limits strong { color: var(--blueprint-navy); }

/* --- 3b. why this exists -------------------------------------------------
   Main-body weight, not an aside. First paragraph carries the most size on
   the page after the hero — the personal admission is the argument. */

.maker-lead {
  max-width: 34ch;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blueprint-navy);
  margin-bottom: 1.25rem;
}
.maker { max-width: 58ch; color: var(--ink-soft); }

@media (min-width: 48rem) {
  .maker-lead { font-size: 1.75rem; max-width: 26ch; }
  .maker { font-size: 1.125rem; }
  .band-maker .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .band-maker h2 { grid-column: 1 / -1; }
  .maker-lead { grid-column: 1; margin-bottom: 0; }
  .band-maker .maker { grid-column: 2; }
  .band-maker .maker + .maker { grid-column: 2; margin-bottom: 0; }
}

/* --- 8. waitlist -------------------------------------------------------- */

.waitlist {
  background-color: var(--blueprint-navy);
  background-image:
    linear-gradient(rgba(76, 195, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 195, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--drafting-paper);
  padding-block: 3rem;
}
@media (min-width: 48rem) { .waitlist { padding-block: 4.5rem; } }

.waitlist h2 { color: var(--drafting-paper); }
.waitlist .sub { color: var(--paper-soft); margin-bottom: 1.5rem; }

.wl-form { display: grid; gap: 0.6rem; max-width: 30rem; margin-bottom: 1rem; }
@media (min-width: 34rem) { .wl-form { grid-template-columns: 1fr auto; } }

.wl-form input {
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-dark);
  border-radius: 2px;
  background: rgba(247, 245, 240, 0.06);
  color: var(--drafting-paper);
  min-width: 0;
}
.wl-form input::placeholder { color: rgba(247, 245, 240, 0.45); }

.wl-form button {
  font: inherit;
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: 2px;
  background: var(--spark-amber);
  color: var(--blueprint-navy);
  cursor: pointer;
}

.micro { font-size: 0.875rem; color: var(--paper-soft); max-width: 46ch; margin-bottom: 0.5rem; }

.wl-form button[disabled] { opacity: 0.65; cursor: default; }

/* Result states. Left rule rather than a tinted box — the page separates
   regions with rules, and a green/red panel would be the one piece of
   generic form chrome on an otherwise drafted page. */
.wl-msg {
  max-width: 46ch;
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 3px solid;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.wl-ok  { border-color: var(--spark-amber); color: var(--drafting-paper); }
.wl-err { border-color: var(--wireframe-cyan); color: var(--paper-soft); }

.wl-form input[aria-invalid="true"] { border-color: var(--wireframe-cyan); }

/* --- 9. footer title block ---------------------------------------------- */

.site-foot { padding-block: 2rem 2.5rem; }

.titleblock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-bottom: 1rem;
  max-width: 34rem;
}
@media (min-width: 40rem) { .titleblock { grid-template-columns: 2fr 1fr 1fr; } }

.tb-cell { padding: 0.6rem 0.85rem; border-right: 1px solid var(--rule); }
.tb-cell:last-child { border-right: 0; }
.tb-wide { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 40rem) {
  .tb-wide { grid-column: auto; border-right: 1px solid var(--rule); border-bottom: 0; }
}

.tb-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tb-val { display: block; font-family: var(--mono); font-size: 0.8125rem; }

.foot-links { font-size: 0.9375rem; color: var(--ink-soft); }
.foot-links a { margin-right: 0.35rem; }
.foot-links span { margin-right: 0.35rem; }

.form-wrap { max-width: 48rem; }
.intake-form { display:grid; gap:1rem; }
.intake-form label { display:grid; gap:.35rem; font-weight:600; }
.intake-form input,.intake-form select,.intake-form textarea,.dashboard-auth input { font:inherit; padding:.65rem; border:1px solid var(--rule); background:white; }
.intake-form textarea { min-height:6rem; resize:vertical; }
.intake-form .check { display:flex; align-items:flex-start; font-weight:400; }
.intake-form .check input { margin-top:.35rem; }
.intake-form button,.dashboard-auth button { font:inherit; font-weight:700; padding:.75rem 1.25rem; background:var(--spark-amber); border:0; cursor:pointer; }
.honeypot { position:absolute; left:-9999px; }
.dashboard-auth { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; }
.dashboard-auth label { display:grid; gap:.25rem; }
.dashboard-grid { display:grid; gap:2rem; margin-top:2rem; }
@media(min-width:56rem){.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.dashboard-grid section { border-top:3px solid var(--blueprint-navy); padding-top:1rem; }
.dashboard-grid table { width:100%; border-collapse:collapse; }
.dashboard-grid th,.dashboard-grid td { text-align:left; padding:.5rem; border-bottom:1px solid var(--rule); }
.dashboard-note { color:var(--ink-soft); margin-top:2rem; }
.source-status { margin-top:1.5rem; padding:1rem; border-left:3px solid var(--wireframe-ink); }
.source-status p { margin-bottom:.4rem; }

/* Minimal landing page revision. The sequence is signup -> vision -> honest workflow. */
.logo { text-decoration:none; }
.hero-minimal { padding-block:4rem 4.75rem; }
.hero-focus { max-width:58rem; }
.hero-focus h1 { max-width:14ch; font-size:clamp(2.6rem,7vw,5.25rem); }
.hero-focus .sub { max-width:52ch; }
.hero-focus .hero-outcome { font-size:clamp(1.35rem,2.7vw,2rem); font-weight:600; }
.hero-kicker { color:var(--wireframe-cyan); }
.early-signup { padding-block:2.5rem; background:var(--spark-amber); border-bottom:1px solid var(--rule); }
.signup-grid { display:grid; gap:1.5rem; align-items:center; }
.signup-grid p { margin-bottom:0; }
.quick-join { display:grid; gap:.4rem; }
.quick-join label { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.quick-join-row { display:grid; gap:.6rem; }
.quick-join input { font:inherit; min-width:0; padding:.75rem; border:1px solid var(--blueprint-navy); background:var(--drafting-paper); }
.quick-join button,.btn-paper { font:inherit; font-weight:700; padding:.75rem 1rem; border:1px solid var(--blueprint-navy); background:var(--blueprint-navy); color:var(--drafting-paper); text-decoration:none; cursor:pointer; }
.quick-join .micro { color:var(--blueprint-navy); }
@media(min-width:48rem){.signup-grid{grid-template-columns:1fr 1fr;gap:3rem}.quick-join-row{grid-template-columns:1fr auto}}
.narrow-copy { max-width:58rem; }
.vision-lead { font-size:clamp(1.25rem,2.5vw,1.8rem); line-height:1.4; max-width:44ch; }
.mode-strip { display:grid; gap:1rem; margin-top:2rem; }
.mode-strip p {
  display:flex; align-items:center; gap:1rem;
  border-top:2px solid var(--blueprint-navy); padding-top:.75rem; margin:0;
}
.mode-strip img { width:5.5rem; height:5.5rem; object-fit:contain; flex:none; }
.mode-strip img.mode-wizard { width:6.5rem; height:6.5rem; margin:-.5rem; }
.mode-strip strong,.mode-strip .mode-copy,.mode-strip .mode-copy span { display:block; }
.mode-strip span { color:var(--ink-soft); font-size:.95rem; }
.mode-strip small {
  display:inline-block; margin-top:.35rem; color:var(--wizard-indigo);
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
@media(min-width:48rem){.mode-strip{grid-template-columns:repeat(3,1fr)}}
.see-it { background:rgba(10,16,32,.03); }
.workflow-demo { position:relative; margin-top:2rem; padding-top:1rem; }
.workflow-progress { position:absolute; top:2.15rem; left:3%; right:3%; height:2px; background:var(--rule); overflow:hidden; }
.workflow-progress span { display:block; width:25%; height:100%; background:var(--wireframe-ink); animation:workflow-line 12s linear infinite; }
.workflow-steps { position:relative; list-style:none; display:grid; gap:1rem; margin:0; padding:0; }
.workflow-steps li { background:var(--drafting-paper); border:1px solid var(--rule); padding:1rem; animation:workflow-card 12s ease-in-out infinite; }
.workflow-steps li:nth-child(2){animation-delay:3s}.workflow-steps li:nth-child(3){animation-delay:6s}.workflow-steps li:nth-child(4){animation-delay:9s}
.workflow-number { display:grid; place-items:center; width:2rem; height:2rem; margin-bottom:.8rem; border-radius:50%; background:var(--blueprint-navy); color:white; font-family:var(--mono); }
.workflow-steps strong,.workflow-steps small { display:block; }
.workflow-steps small { margin-top:.35rem; color:var(--ink-soft); font-size:.9rem; }
@media(min-width:52rem){.workflow-steps{grid-template-columns:repeat(4,1fr)}}
@keyframes workflow-card { 0%,20%{border-color:var(--wireframe-ink);transform:translateY(-4px)} 25%,100%{border-color:var(--rule);transform:none} }
@keyframes workflow-line { from{transform:translateX(-100%)} to{transform:translateX(400%)} }
@media(prefers-reduced-motion:reduce){.workflow-progress span,.workflow-steps li{animation:none}.workflow-progress span{width:100%}}
.promise-grid,.compact-cta { display:grid; gap:1.5rem; align-items:start; }
@media(min-width:52rem){.promise-grid,.compact-cta{grid-template-columns:1fr 1.4fr;gap:3rem}}
.feedback-cta { background:var(--blueprint-navy); color:var(--drafting-paper); }
.feedback-cta h2 { color:var(--drafting-paper); }
.feedback-cta p { color:var(--paper-soft); }
.btn-paper { display:inline-block; background:var(--spark-amber); color:var(--blueprint-navy); border-color:var(--spark-amber); }
.footer-simple { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; }
.footer-simple p { margin:0; }
.footer-human-note {
  width: min(92%, 58rem);
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--blueprint-navy);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

/* Creation-first public site (approved 2026-08-05). */
.public-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
  padding-block: 0.85rem;
}
.public-nav { display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; }
.public-nav a { color: var(--drafting-paper); font-size: 0.9rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.public-nav a:hover,
.public-nav a[aria-current="page"] { border-bottom-color: var(--wireframe-cyan); }
.mark-logo-official { object-fit: contain; border-radius: 0; }

/* Founder ruling 2026-09-07: contain the 1024px horizontal overflow, scope
   exception for figure.hero-mark, without changing the logo's visual size or
   position.

   WHAT ACTUALLY OVERFLOWS, measured at 1024: the grid gives the figure a 256px
   column (664 + 64 gap + 256 + 40 padding = 1024 exactly), but .wiz-home-logo is
   min(19rem, 68vw) = 304px. It centres in the narrower column and hangs 24px off
   each side, putting its right edge at 1028. The pulse animation then scales the
   img to 312.4px, reaching 1032.2 -- which is the page's real scrollWidth.

   THE CLIP IS ON THE SECTION, NOT THE FIGURE, AND THAT IS THE WHOLE POINT.
   Clipping at .hero-mark would crop the pulse overshoot, which is visible art --
   a change to how the logo looks, which the ruling forbids. Clipping at the
   section boundary removes only what already sat past the viewport edge and was
   never visible without scrolling. The logo keeps its 304px, its centring and
   its pulse exactly.

   `clip`, not `hidden`: clip does not create a scroll container, so overflow-y
   stays visible and the share popover under the logo can still open downward
   past the hero. Verified after the change, not assumed. */
.creation-hero { padding-block: clamp(3rem, 8vw, 6.5rem); overflow-x: clip; }
.creation-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.creation-hero-copy { min-width: 0; }
.creation-hero h1 {
  max-width: 19ch;
  font-size: clamp(2.15rem, 5.2vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  overflow-wrap: anywhere;
}
/* Line 2 must hold ONE line on desktop (founder direction 2026-09-07), so the
   clamp ceiling comes down 2.35rem -> 2.1rem. Measured, not guessed: at
   1440 the copy column is 713.4px and the line wanted 760px at 37.6px, which
   wrapped it. At 33.6px it needs 679px and fits with room to spare. The vw
   term is untouched, so 1024 and below are unchanged -- 1024 already fitted
   on one line and mobile still wraps to two, which the direction allows. */
/* The brand and its trademark travel together and never break. The h1 sets
   overflow-wrap: anywhere, which would otherwise split "CADWiz" across lines. */
.h1-brand { white-space: nowrap; }
/* Partners line. Founder direction 2026-09-07 offered two options; this is
   "styled like the headline, one step smaller" -- same white, same 800 weight,
   at clamp(1.5rem, 3.6vw, 2.9rem).

   The other option, "like line 2 one step larger", was tried and rejected: it
   would have put a 2.4rem cyan line directly above a 2.1rem cyan line, two
   near-identical weights and the same colour, which reads as one wrapped
   sentence rather than two ranks. Keeping it white and heavy against the cyan
   line below separates them by colour as well as size, so the hierarchy is
   4.8 / 2.9 / 2.1rem at 1440 -- ratios of 1.66 and 1.38, both clearly visible.

   THE FLOOR IS 1.75rem, NOT 1.5rem, AND THAT MATTERS ONLY ON MOBILE. At 390 the
   vw term collapses and every clamp lands on its minimum; with 1.5rem this line
   and the FreeCAD line below it both rendered at exactly 24px, so the middle
   rank disappeared at the one width where the three lines stack most tightly.
   Measured, not assumed -- the ratio read 1.00x. At 1.75rem it is 28px against
   24px. */
.creation-partners {
  margin: 1.1rem 0 0;
  max-width: 26ch;
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--drafting-paper);
}
.creation-loop { margin: 1.4rem 0 0.6rem; max-width: none; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: var(--wireframe-cyan); }
/* Rotating subtitle. Founder direction 2026-09-07: one step up the scale from
   the supporting subtitle -- clamp(1.05,2vw,1.35) -> clamp(1.2,2.4vw,1.6) --
   noticeably larger than the subtitle, still far below the headline's
   clamp(2.15,6vw,4.8). Family, weight and colour are unchanged.

   WIDTH IS FIXED IN ch, AND THAT IS WHAT MAKES THE WRAP STABLE. A ch scales
   with font-size, and so does the text, so the ratio of box width to text width
   is identical at every viewport -- a given line breaks at the same word at
   1440, 1024 and 390. A px or % width would re-break the lines at every
   breakpoint.

   28ch, NOT 34ch, and the number is measured. The property only holds while the
   ch width is the thing setting the box; the moment `max-width: 100%` clamps it
   the wrap re-flows to the column instead. At 390 the copy column is 350px and
   a ch is 12.12px there, so anything above ~28.9ch gets clamped and mobile
   breaks at different words than desktop. 34ch did exactly that. 28ch is 339px
   at 390 -- under the clamp at every breakpoint -- and still holds the longest
   slot in two lines. */
.creation-rotator {
  margin: 0.9rem 0 0;
  width: 28ch;
  max-width: 100%;
  font-size: clamp(1.2rem, 2.8vw, 1.9rem);
  line-height: 1.35;
  color: var(--wireframe-cyan);
}
/* The box reserves TWO lines at every breakpoint, so a one-line slot and a
   two-line slot occupy identical space and nothing moves during rotation.
   2.7em = 2 x the 1.35 line-height, in the rotator's own font-size. */
/* THE MOBILE FLOOR OF 1.2rem IS A PHYSICAL LIMIT, NOT A PREFERENCE. The longest
   slot is 57 characters and the reserve is two lines, so at 390 it must fit ~29
   characters per line into the 350px copy column -- about 12.1px per character,
   which caps the font at ~19.1px. It renders 19.2px and the break lands 29/27.
   There is no headroom: raising the floor forces a third line, which would break
   the fixed two-line reserve this whole rule exists to hold. The step up is
   therefore desktop-only, by design. */
.creation-rotator .morph { min-height: 2.7em; align-items: start; align-content: start; }
/* Never break mid-word. The general .morph rule sets overflow-wrap: anywhere to
   stop the old headline rotator escaping its column; here the width is already
   fixed, so that protection is unnecessary and it would hyphen-less-split a
   word mid-rotation. */
.creation-rotator .morph,
.creation-rotator .morph-sizer,
.creation-rotator .morph-live { overflow-wrap: normal; word-break: normal; }
/* Cost, always visible. Line A carries the supporting subtitle's weight -- it
   sets none, so both inherit the body weight and match. Line B is one step
   down the scale, the same step the legal pages use (1.15rem under 1.45rem). */
/* Cost. Founder direction 2026-09-07: line A comes down one step so it reads as
   a confident label rather than a second subtitle -- clearly below the rotator's
   clamp(1.2,2.4vw,1.6). Line B stays exactly one step under A. Caps and weight
   are unchanged; A sets no font-weight, so it still inherits the body weight the
   supporting subtitle uses.

   The trademark uses the site's existing .tm treatment rather than a second one:
   .42em against Inter's 0.727em cap height is ~58%, and `line-height: 0` is what
   keeps it from touching the line box. One trademark treatment sitewide is the
   BRAND.md rule. */
.hero-cost { margin: 1.3rem 0 0; max-width: 48ch; font-size: clamp(0.95rem, 1.7vw, 1.15rem); color: var(--drafting-paper); }
.hero-cost-note { margin: 0.25rem 0 0; max-width: 52ch; font-size: clamp(0.875rem, 1.5vw, 1rem); color: var(--paper-soft); }
.creation-hero .hero-cta { margin-top: 1.75rem; }
.cta-solid,
.cta-outline {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--spark-amber);
  border-radius: 2px;
  font-weight: 700;
  text-decoration: none;
}
.cta-solid { background: var(--spark-amber); color: var(--blueprint-navy); }
.cta-outline { color: var(--drafting-paper); }
.hero-mark { margin: 0; justify-self: center; text-align: center; }
.hero-mark .wiz-home-logo { width: min(19rem, 68vw); margin-inline: auto; }
.hero-wordmark {
  display: inline-flex;
  margin-top: 0.55rem;
  padding: 0.16em 0.3em 0.2em;
  border-radius: 0.08em;
  background: var(--drafting-paper);
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.055em;
}
.hero-mark figcaption { max-width: 34rem; margin-top: 0.75rem; color: var(--paper-soft); font-size: 0.82rem; }
.wiz-home-logo {
  position: relative;
  display: block;
  aspect-ratio: 1;
  transform-origin: center;
}
.wiz-home-base { display: block; width: 100%; height: auto; }
.wiz-home-eyes {
  position: absolute;
  z-index: 2;
  left: 33%;
  top: 51.5%;
  width: 34%;
  height: 17%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2%;
  opacity: 0;
  pointer-events: none;
  transform-origin: center top;
}
.wiz-home-eye {
  position: relative;
  flex: 1 1 0;
  max-width: 50%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, #fff 0 34%, #eef4f8 58%, #c5d2dd 82%, #91a7ba 100%);
  box-shadow: 0 0 0 0.025em #eaf6ff, 0 0.05em 0.12em rgba(0, 18, 48, 0.58);
}
.wiz-home-pupil {
  position: absolute;
  z-index: 1;
  left: 28%;
  top: 28%;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  background: #02060b;
  box-shadow: 0 0 0 0.035em #071b31;
  transform: translate(0, 0);
}
.wiz-home-pupil::after {
  content: "";
  position: absolute;
  left: 61%;
  top: 18%;
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: #fff;
}
.wiz-home-lid {
  position: absolute;
  z-index: 2;
  inset: -8%;
  border-radius: 50%;
  background: linear-gradient(180deg, #2f8bd5 0%, #145899 46%, #082f67 100%);
  box-shadow: inset 0 -0.035em 0 rgba(203, 240, 255, 0.7);
  transform: translateY(0);
}
.wiz-home-logo.is-pulsing .wiz-home-base { animation: wiz-three-pulses 6s ease-in-out 1 both; }
.wiz-home-logo.is-full-sequence .wiz-home-base,
.wiz-home-logo.is-random-gaze .wiz-home-base { animation: wiz-fourth-pulse 0.95s ease-in-out 1; }
.wiz-home-logo.is-full-sequence .wiz-home-eyes { animation: wiz-full-eye-presence 6.7s linear 1 both; }
.wiz-home-logo.is-full-sequence .wiz-home-lid { animation: wiz-full-lid-sequence 6.7s ease-in-out 1 both; }
.wiz-home-logo.is-full-sequence .wiz-home-pupil { animation: wiz-full-pupil-sequence 6.7s ease-in-out 1 both; }
.wiz-home-logo.is-random-gaze .wiz-home-eyes { animation: wiz-random-eye-presence 4.2s ease-in-out 1 both; }
.wiz-home-logo.is-random-gaze .wiz-home-lid { animation: wiz-random-lid 4.2s ease-in-out 1 both; }
.wiz-home-logo.is-random-gaze.gaze-left .wiz-home-pupil { animation: wiz-gaze-left 4.2s ease-in-out 1 both; }
.wiz-home-logo.is-random-gaze.gaze-right .wiz-home-pupil { animation: wiz-gaze-right 4.2s ease-in-out 1 both; }
.wiz-home-logo.is-random-gaze.gaze-up .wiz-home-pupil { animation: wiz-gaze-up 4.2s ease-in-out 1 both; }
.wiz-home-logo.is-random-gaze.gaze-down .wiz-home-pupil { animation: wiz-gaze-down 4.2s ease-in-out 1 both; }
.wiz-home-logo.is-random-gaze.gaze-circle .wiz-home-pupil { animation: wiz-gaze-circle 4.2s ease-in-out 1 both; }
.wiz-home-logo.is-random-gaze.gaze-blink .wiz-home-lid { animation: wiz-random-double-blink 4.2s ease-in-out 1 both; }
.wiz-home-logo[data-phase="launcher-reaction"] .wiz-home-eyes { animation: wiz-launcher-eye-presence 1.4s ease-in-out 1 both; }
.wiz-home-logo[data-phase="launcher-reaction"] .wiz-home-lid { animation: wiz-launcher-wake 1.4s ease-in-out 1 both; }
.wiz-home-logo[data-phase="launcher-reaction"] .wiz-home-pupil { animation: wiz-launcher-glance 1.4s ease-in-out 1 both; }
@keyframes wiz-launcher-eye-presence { 0% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes wiz-launcher-wake { 0%, 12% { transform: translateY(-108%); } 28%, 72% { transform: translateY(0); } 80%, 88% { transform: translateY(-108%); } 94%, 100% { transform: translateY(0); } }
@keyframes wiz-launcher-glance { 0%, 32%, 100% { transform: translate(0, 0); } 52%, 76% { transform: translate(36%, -12%); } }
@keyframes wiz-three-pulses {
  0%, 33.333%, 66.666%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 rgba(44, 203, 255, 0)); }
  16.666%, 50%, 83.333% { opacity: 0.7; transform: scale(1.055); filter: drop-shadow(0 0 0.8rem rgba(44, 203, 255, 0.78)); }
}
@keyframes wiz-fourth-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(44, 203, 255, 0)); }
  48% { transform: scale(1.07); filter: drop-shadow(0 0 1rem rgba(44, 203, 255, 0.9)); }
}
@keyframes wiz-full-eye-presence {
  0%, 4% { opacity: 0; transform: scaleY(0.08); }
  10%, 92% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.08); }
}
@keyframes wiz-full-lid-sequence {
  0%, 7% { transform: translateY(0); }
  18%, 38% { transform: translateY(-108%); }
  42% { transform: translateY(0); }
  46%, 52% { transform: translateY(-108%); }
  56% { transform: translateY(0); }
  60%, 74% { transform: translateY(-108%); }
  84% { transform: translateY(-48%); }
  93%, 100% { transform: translateY(0); }
}
@keyframes wiz-full-pupil-sequence {
  0%, 20%, 48%, 100% { transform: translate(0, 0); }
  28% { transform: translate(-38%, -4%); }
  36% { transform: translate(38%, 4%); }
  65% { transform: translate(12%, -38%); }
  74% { transform: translate(-18%, 12%); }
  82% { transform: translate(0, 0); }
}
@keyframes wiz-random-eye-presence {
  0%, 5% { opacity: 0; transform: scaleY(0.08); }
  16%, 86% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.08); }
}
@keyframes wiz-random-lid {
  0%, 7% { transform: translateY(0); }
  19%, 78% { transform: translateY(-108%); }
  83% { transform: translateY(0); }
  88% { transform: translateY(-108%); }
  96%, 100% { transform: translateY(0); }
}
@keyframes wiz-random-double-blink {
  0%, 7% { transform: translateY(0); }
  18%, 40% { transform: translateY(-108%); }
  46% { transform: translateY(0); }
  52%, 62% { transform: translateY(-108%); }
  68% { transform: translateY(0); }
  74%, 82% { transform: translateY(-108%); }
  88%, 100% { transform: translateY(0); }
}
@keyframes wiz-gaze-left { 0%, 20%, 100% { transform: translate(0, 0); } 42%, 74% { transform: translate(-42%, 0); } }
@keyframes wiz-gaze-right { 0%, 20%, 100% { transform: translate(0, 0); } 42%, 74% { transform: translate(42%, 0); } }
@keyframes wiz-gaze-up { 0%, 20%, 100% { transform: translate(0, 0); } 42%, 74% { transform: translate(0, -42%); } }
@keyframes wiz-gaze-down { 0%, 20%, 100% { transform: translate(0, 0); } 42%, 74% { transform: translate(0, 38%); } }
@keyframes wiz-gaze-circle {
  0%, 20%, 100% { transform: translate(0, 0); }
  34% { transform: translate(-34%, -28%); }
  48% { transform: translate(34%, -28%); }
  62% { transform: translate(34%, 28%); }
  76% { transform: translate(-34%, 28%); }
  88% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wiz-home-logo *,
  .wiz-home-logo { animation: none !important; }
  .wiz-home-eyes { display: none; }
}
@media (min-width: 58rem) {
  .creation-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr); gap: 4rem; }
}

.creation-pillars h2 { max-width: 28ch; }
.pillar-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.pillar-grid article { border-top: 3px solid var(--blueprint-navy); padding: 1rem 0; }
.pillar-grid article > span { font: 600 0.8rem/1 var(--mono); color: var(--wireframe-ink); }
.pillar-grid h3 { margin-top: 0.65rem; }
.pillar-grid p { color: var(--ink-soft); }
@media (min-width: 52rem) { .pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

.watch-section { background: rgba(10, 16, 32, 0.03); }
.watch-grid { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .watch-grid { grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr); gap: 3rem; align-items: center; } }
.watch-section .workflow-progress { display: none; }

/* Public story flow: interactive Wiz, explanation, demos, and cinematic layer */
.wiz-intro { background: #eaf3f8; }
.wiz-intro-grid,.claim-grid,.why-best-grid { display:grid; gap:2rem; align-items:center; }
.wiz-activator { display:grid; justify-items:center; gap:1rem; padding:1rem; border:0; background:transparent; color:var(--blueprint-navy); cursor:pointer; }
.shared-wiz-slot { display:block; }
.shared-wiz-large { width:min(70vw,20rem); }
.shared-wiz-small { width:2.5rem; flex:0 0 2.5rem; }
.wiz-activator-label { font:700 .8rem/1 var(--mono); letter-spacing:.12em; }
/* Wiz speaking. S2 and S4 are the same character, so they share one treatment:
   sentence case, the body face rather than the mono UI face, no letter-spacing.
   The mascot is the launcher, so his line IS the press invitation. */
.wiz-says { max-width:24ch; font:600 1.02rem/1.35 var(--sans); letter-spacing:0; text-transform:none; text-wrap:balance; }
.wiz-says-reply { max-width:30ch; }
@media (max-width:640px) { .wiz-says { font-size:.98rem; } }
.claim-grid { min-height:0; }  /* inner grid only; the band carries the rhythm */
.claim-copy h2 { display:grid; gap:.02em; margin:0; max-width:15ch; font-size:clamp(2.15rem,5.4vw,5.25rem); line-height:.91; letter-spacing:-.055em; }
.claim-copy h2 span { display:block; white-space:nowrap; }
.claim-copy h2 em { display:block; margin-top:.22em; color:var(--spark-amber); font-style:normal; font-size:.78em; line-height:.88; }
.claim-copy p { margin:.9rem 0 0; max-width:31rem; color:#d8e6ef; }
.claim-wiz-button { display:grid; justify-items:center; gap:.55rem; justify-self:center; padding:.65rem; border:2px solid transparent; border-radius:1rem; background:transparent; color:var(--drafting-paper); font:700 .78rem/1 var(--mono); letter-spacing:.12em; cursor:pointer; }
.claim-wiz-button:hover { border-color:rgba(76,195,255,.5); background:rgba(255,255,255,.04); }
.claim-wiz-button:focus-visible { outline:3px solid var(--spark-amber); outline-offset:5px; }
.proof-story-grid { display:grid; gap:2.5rem; }
.why-best { background:#eaf3f8; }
.idea-flow { display:grid; gap:.75rem; margin-top:2rem; }
.idea-flow article { position:relative; padding:1.25rem; border:1px solid var(--rule); background:#fff; }
.idea-flow article:not(:last-child)::after { content:"↓"; position:absolute; left:50%; bottom:-1.05rem; z-index:1; color:var(--wireframe-ink); font-weight:800; }
.evidence-note { max-width:68ch; margin-top:2rem; color:var(--ink-soft); }
.demo-choices { background:#eef5f8; }
.demo-choice-grid { display:grid; gap:1rem; margin-top:2rem; }
.demo-choice-grid button { display:grid; gap:.5rem; min-height:13rem; padding:1.25rem; text-align:left; border:1px solid var(--rule); border-top:4px solid var(--wireframe-ink); background:var(--drafting-paper); color:var(--blueprint-navy); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.demo-choice-pending { display:grid; gap:.5rem; min-height:13rem; padding:1.25rem; text-align:left; border:1px solid var(--rule); border-top:4px solid var(--wireframe-ink); background:var(--drafting-paper); color:var(--blueprint-navy); }
.demo-choice-grid button:hover,.demo-choice-grid button:focus-visible { transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(10,16,32,.12); }
.demo-choice-grid strong { margin-top:auto; font-size:1.4rem; }
.choice-brand { display:flex; align-items:center; gap:.55rem; }
.choice-brand b { font-size:1.05rem; }
/* Theater presentation, founder ruling 2026-08-19 night: a playing video
   must occupy the majority of the screen -- 80%+ of viewport width on
   desktop, effectively full-width on mobile. Reuses the existing <dialog>
   lightbox (native ESC handling, backdrop dimming, scroll-position
   restore, focus management -- all already correct in public-flow.js,
   untouched here) rather than a new mechanism: the fix is that the video
   itself, and the chrome competing with it, were sized wrong. The old
   64rem stage cap alone held desktop video width to roughly half the
   screen; combined with a 58vh height cap and a hero-sized (up to 5rem)
   title eating vertical space in the same column as the video, the
   rendered player was far smaller than either cap suggests on its own.
   One signature treatment: every data-cinematic launcher opens this same
   dialog, so every future film inherits this sizing for free. */
.cinematic-dialog { width:96vw; max-width:96vw; height:94vh; max-height:94vh; padding:0; border:1px solid rgba(76,195,255,.55); background:var(--blueprint-navy); color:var(--drafting-paper); opacity:1; transition:opacity .6s ease; }
.cinematic-dialog::backdrop { background:rgba(2,6,16,.9); backdrop-filter:blur(6px); }
.cinematic-dialog.is-finishing { opacity:0; }
.cinematic-shell { display:grid; grid-template-rows:auto 1fr auto; min-height:100%; padding:clamp(.6rem,1.4vw,1.1rem) clamp(1rem,3vw,2rem) clamp(.9rem,2vw,1.4rem); gap:.4rem; }
.cinematic-brand { display:flex; align-items:center; gap:.5rem; }
.cinematic-brand img { width:1.9rem; height:1.9rem; object-fit:contain; }
.cinematic-brand b { display:block; font-size:.95rem; }.cinematic-brand small { display:none; }
.cinematic-close { position:absolute; right:1rem; top:.6rem; border:0; background:transparent; color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.cinematic-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; min-height:0; gap:.4rem; text-align:center; }
/* Sound-on autoplay fallback. Hidden unless a browser refused sound even from a
   real gesture; one tap turns it on. Founder ruling 2026-09-08. */
.cinematic-fullscreen { display:block; margin:.5rem auto 0; padding:.45rem .9rem; border:1px solid var(--wireframe-cyan); border-radius:2px; background:transparent; color:var(--wireframe-cyan); font:600 .85rem/1 var(--sans); cursor:pointer; }
.cinematic-unmute {
  display: block; margin: 0.75rem auto 0; padding: 0.6rem 1.1rem;
  border: 2px solid var(--spark-amber); border-radius: 2px;
  background: var(--spark-amber); color: var(--blueprint-navy);
  font: 700 0.95rem/1 var(--sans); cursor: pointer;
}
.cinematic-video { display:block; width:100%; flex:1 1 auto; min-height:0; max-height:100%; object-fit:contain; margin:0; background:#000; }
.cinematic-video[hidden] { display:none; }
.cinematic-stage h2 { margin:0; font-size:clamp(1.1rem,2.2vw,1.5rem); }
.cinematic-kicker { margin:0; color:var(--spark-amber); font:700 .68rem/1.3 var(--mono); letter-spacing:.08em; }
.cinematic-honesty { margin:0; color:#b7c8d5; font-size:.85rem; }
#cinematic-description { margin:0; max-width:56rem; font-size:.9rem; }
.cinematic-done { justify-self:center; padding:.7rem 1.1rem; border:0; background:var(--spark-amber); color:var(--blueprint-navy); font-weight:800; cursor:pointer; }
body.dialog-open { overflow:hidden; }
@media (min-width:48rem) { .wiz-intro-grid,.why-best-grid { grid-template-columns:minmax(16rem,.65fr) minmax(0,1.35fr); }.claim-grid{grid-template-columns:minmax(0,1.35fr) minmax(14rem,.65fr);gap:clamp(2rem,6vw,6rem)}.idea-flow{grid-template-columns:repeat(5,1fr)}.idea-flow article:not(:last-child)::after{content:"→";left:auto;right:-.75rem;bottom:auto;top:42%}.demo-choice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.proof-story-grid{grid-template-columns:minmax(16rem,.7fr) minmax(0,1.3fr)} }
@media (max-width:47.99rem) { .claim-copy h2 span { white-space:normal; }.claim-wiz-button { margin-top:.25rem; } }
@media (prefers-reduced-motion:reduce) { .cinematic-dialog,.demo-choice-grid button{transition:none!important;} }
.try-section { background: #eef5f8; }
.try-grid { display: grid; gap: 2.5rem; align-items: start; }
.try-grid > * { min-width: 0; }
.try-intro { position: sticky; top: 1rem; }
.try-lead { font-size: 1.15rem; color: var(--ink-soft); }
.review-promise { margin-top: 2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--wireframe-ink); background: var(--drafting-paper); }
.review-promise h3 { font-size: 1rem; }
.review-promise ol { margin: 0; padding-left: 1.25rem; }
.review-promise li { margin: 0.35rem 0; }
@media (min-width: 60rem) { .try-grid { grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.25fr); gap: 4rem; } }
@media (max-width: 59.99rem) { .try-intro { position: static; } }

.challenge-form { padding: clamp(1rem, 3vw, 2rem); background: var(--drafting-paper); border: 1px solid var(--rule); }
.challenge-form input:not([type="checkbox"]):not([type="radio"]),
.challenge-form textarea,
.challenge-form select { width: 100%; min-width: 0; max-width: 100%; }
.challenge-form input[type="file"] { font-size: 0.88rem; overflow: hidden; }
.challenge-form fieldset { margin: 0; padding: 1rem; border: 1px solid var(--rule); }
.challenge-form legend { padding-inline: 0.4rem; font-weight: 700; }
.challenge-form fieldset .check { margin-top: 0.5rem; }
.form-pair { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .form-pair { grid-template-columns: 1fr 1fr; } }
.field-help,
.field-error { margin: -0.75rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.field-error { color: #8a1f11; font-weight: 600; }
.screenshot-preview { padding: 0.75rem; border: 1px solid var(--rule); }
.screenshot-preview img { display: block; width: min(100%, 30rem); max-height: 20rem; object-fit: contain; margin-bottom: 0.7rem; }
.screenshot-preview button,
.filter-bar button,
.queue-toolbar button { font: inherit; color: var(--blueprint-navy); background: transparent; border: 1px solid var(--blueprint-navy); padding: 0.45rem 0.7rem; cursor: pointer; }
.form-warning { padding: 0.85rem 1rem; border-left: 3px solid #9a5c00; background: #fff4da; }
.safety-notice { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.form-actions > * { flex: 1 1 13rem; text-align: center; }
.btn-paper-light { background: transparent; color: var(--blueprint-navy); }
.form-status { min-height: 1.6em; margin: 0; font-weight: 600; }
.form-status.is-success { color: #166336; }
.form-status.is-error { color: #8a1f11; }

.challenge-hero h1 { max-width: 16ch; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filter-bar button.is-active { background: var(--blueprint-navy); color: var(--drafting-paper); }
.challenge-results { display: grid; gap: 2rem; }
.challenge-card { overflow: hidden; border: 1px solid var(--rule); border-top: 4px solid var(--blueprint-navy); background: var(--drafting-paper); box-shadow: 0 1rem 2.5rem rgba(10, 16, 32, 0.08); }
.challenge-card h2 { max-width: 32ch; }
.challenge-cover { padding: clamp(1.25rem, 4vw, 2.75rem); background: linear-gradient(145deg, #f7f4eb 0%, #fff 58%, #e9f1f8 100%); }
.challenge-cover-brand { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.challenge-cover-brand > p { margin: 0; font: 600 0.72rem/1.4 var(--mono); color: var(--wireframe-ink); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }
.challenge-cover h2 { margin-top: clamp(2rem, 5vw, 4rem); }
.challenge-request { font: 1rem/1.6 var(--mono); padding-left: 1rem; border-left: 3px solid var(--wireframe-ink); }
.challenge-cover-meta { display: grid; gap: 0.75rem; margin: 2rem 0; }
.challenge-cover-meta div { padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.challenge-cover-meta dt,
.challenge-cover-outcomes h3 { margin: 0 0 0.25rem; font: 600 0.7rem/1.4 var(--mono); color: var(--wireframe-ink); text-transform: uppercase; letter-spacing: 0.06em; }
.challenge-cover-meta dd { margin: 0; font-weight: 700; }
.challenge-cover-outcomes { display: grid; gap: 1rem; }
.challenge-cover-outcomes section { padding: 1rem; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.72); }
.challenge-cover-outcomes section > p:last-child { margin-bottom: 0; }
.challenge-cover-outcomes .challenge-completion { border-color: #8cae92; background: #eef7ef; }
.assessment-verdict { display: inline-block; margin: 0.25rem 0 0.65rem; padding: 0.3rem 0.55rem; border-radius: 999px; background: #235e35; color: #fff; font: 700 0.72rem/1.3 var(--mono); }
.challenge-media img,
.challenge-media video { display: block; width: 100%; max-height: 42rem; object-fit: contain; background: var(--blueprint-navy); }
.challenge-details { display: grid; gap: 1rem; margin: 1.5rem; }
.challenge-details div { border-top: 1px solid var(--rule); padding-top: 0.65rem; }
.challenge-tags { margin: 1.5rem; }
.challenge-details dt { font-weight: 700; }
.challenge-details dd { margin: 0.25rem 0 0; color: var(--ink-soft); }
@media (min-width: 52rem) { .challenge-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.challenge-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.challenge-tags li { padding: 0.2rem 0.55rem; border: 1px solid var(--rule); font-size: 0.78rem; text-transform: capitalize; }

.queue-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin: 2rem 0 1rem; }
.queue-toolbar label { display: grid; gap: 0.3rem; font-weight: 700; }
.queue-toolbar select,
.queue-update select,
.queue-update textarea { font: inherit; padding: 0.55rem; border: 1px solid var(--rule); background: white; }
.challenge-queue { display: grid; gap: 1.5rem; }
.queue-card { padding: 1rem; border: 1px solid var(--rule); border-top: 3px solid var(--blueprint-navy); }
.queue-card header { display: grid; gap: 0.2rem; }
.queue-card header > * { margin-bottom: 0; }
.queue-id { font: 0.8rem/1.4 var(--mono); color: var(--wireframe-ink); }
.queue-created { color: var(--ink-soft); font-size: 0.85rem; }
.queue-request { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--wireframe-ink); font-family: var(--mono); }
.queue-card dl { display: grid; gap: 0.65rem; }
.queue-card dl div { border-top: 1px solid var(--rule); padding-top: 0.45rem; }
.queue-card dt { font-weight: 700; }
.queue-card dd { margin: 0; overflow-wrap: anywhere; }
.queue-update { display: grid; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.queue-update label { display: grid; gap: 0.25rem; font-weight: 700; }
.queue-update button { justify-self: start; font: inherit; font-weight: 700; padding: 0.7rem 1rem; border: 0; background: var(--spark-amber); cursor: pointer; }
.queue-save-status { min-height: 1.4em; margin: 0; }
@media (min-width: 58rem) {
  .challenge-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .queue-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Public demonstration library */
.demo-gallery-hero h1 { max-width: 22ch; }
.demo-truth-note {
  max-width: 58rem;
  margin-top: 1.4rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(247, 245, 240, 0.4);
  border-left: 4px solid var(--spark-amber);
  color: var(--drafting-paper);
}
.demo-gallery-wrap {
  width: min(94%, 88rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.demo-library-intro { max-width: 52rem; }
.demo-start-panel {
  margin-top: 2rem;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--wireframe-ink);
  background: linear-gradient(145deg, #f7f4eb 0%, #fff 62%, #e9f1f8 100%);
}
.demo-start-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1.25rem; margin-bottom: 1rem; }
.demo-start-heading > * { margin: 0; }
.demo-start-heading h3 { font-size: clamp(1.2rem, 2vw, 1.65rem); }
.demo-start-options { display: grid; gap: 0.75rem; }
.demo-start-option {
  display: grid;
  align-content: start;
  min-height: 10.5rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.84);
  color: var(--blueprint-navy);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.demo-start-option:hover,
.demo-start-option:focus-visible { transform: translateY(-3px); border-color: var(--wireframe-ink); box-shadow: 0 0.8rem 1.8rem rgba(10, 16, 32, 0.1); }
.demo-start-option strong { margin-top: 1.15rem; font-size: 1.35rem; }
.demo-start-option > span:not(.demo-start-number) { margin-top: 0.35rem; color: var(--ink-soft); }
.demo-start-option small { margin-top: auto; padding-top: 1rem; color: var(--wireframe-ink); font: 600 0.7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.demo-start-number { color: var(--wireframe-ink); font: 600 0.75rem/1 var(--mono); }
@media (min-width: 50rem) { .demo-start-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.demo-benchmark-standard {
  margin-top: 2rem;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--blueprint-navy);
  background: var(--drafting-paper);
}
.demo-benchmark-heading { display: grid; gap: 0.75rem 2rem; }
.demo-benchmark-heading h3 { margin-bottom: 0; font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
.demo-benchmark-heading > p { margin: 0; color: var(--ink-soft); }
.demo-evidence-ledger { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.demo-evidence-ledger p { display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: 0.7rem; margin: 0; padding: 0.7rem; background: rgba(10, 16, 32, 0.045); }
.demo-evidence-ledger strong { font: 700 1.35rem/1 var(--mono); color: var(--wireframe-ink); }
.demo-evidence-ledger span { font-size: 0.8rem; font-weight: 700; }
.demo-benchmark-grid { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.demo-benchmark-grid article { padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.demo-benchmark-grid h4 { margin: 0 0 0.3rem; font-size: 0.88rem; }
.demo-benchmark-grid p { margin: 0; color: var(--ink-soft); font-size: 0.82rem; }
.demo-status-key { display: grid; gap: 0.45rem; margin-top: 1.5rem; padding: 1rem; border-left: 4px solid var(--wireframe-ink); background: #eaf3f8; }
.demo-status-key p { margin: 0; font-size: 0.82rem; }
.demo-benchmark-caution { margin: 1rem 0 0; padding: 0.85rem; border: 1px solid #d5b46c; background: #fff4da; font-size: 0.84rem; }
@media (min-width: 50rem) {
  .demo-benchmark-heading { grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr); align-items: end; }
  .demo-evidence-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .demo-evidence-ledger p { grid-template-columns: 1fr; align-content: start; }
  .demo-benchmark-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-status-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.demo-tier { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.demo-tier { scroll-margin-top: 1rem; }
.demo-tier-head {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.demo-tier-head > div { display: flex; gap: 0.8rem; align-items: baseline; }
.demo-tier-head h2,
.demo-tier-head p { margin: 0; }
.demo-tier-number {
  font: 600 0.8rem/1 var(--mono);
  color: var(--wireframe-ink);
}
.demo-tier-description { max-width: 52rem; color: var(--ink-soft); }
.demo-card-grid { display: grid; gap: 1rem; }
.demo-library-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 34rem;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--wireframe-ink);
  background: var(--drafting-paper);
}
.demo-tier[data-tier="tutor"] .demo-library-card { border-top-color: #257052; }
.demo-tier[data-tier="mentor"] .demo-library-card { border-top-color: var(--wireframe-ink); }
.demo-tier[data-tier="wizard"] .demo-library-card { border-top-color: #9a5c00; }
.demo-library-card > header,
.demo-card-body,
.demo-library-card > footer { padding: 1rem; }
.demo-library-card > header { padding-bottom: 0; }
.demo-card-status,
.requested-demo-source {
  margin: 0 0 0.45rem;
  font: 600 0.72rem/1.4 var(--mono);
  color: var(--wireframe-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.demo-library-card h3 { margin-bottom: 0.7rem; font-size: 1.15rem; }
.demo-card-window { margin: 1rem; padding: 1rem; min-height: 10.5rem; border: 1px solid var(--rule); border-left: 4px solid var(--wireframe-ink); background: rgba(10, 16, 32, 0.035); }
.demo-card-window > p { margin: 0 0 0.65rem; color: var(--wireframe-ink); font: 600 0.68rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.demo-card-request { margin: 0; padding: 0; border: 0; font: 0.9rem/1.55 var(--mono); }
.demo-card-body { flex: 1; }
.demo-card-body h4,
.requested-demo-decision h4 { margin: 0.8rem 0 0.4rem; font-size: 0.84rem; }
.demo-card-focus { margin: 0; padding-left: 1.15rem; }
.demo-card-focus li { margin: 0.3rem 0; }
.demo-card-proof { margin-bottom: 0; color: var(--ink-soft); }
.demo-library-card > footer {
  border-top: 1px solid var(--rule);
  background: rgba(10, 16, 32, 0.035);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}
.requested-demo-rail {
  padding: 1.2rem;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--spark-amber);
  background: var(--drafting-paper);
}
.requested-demo-rail > h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.requested-demo-notice {
  padding: 0.85rem;
  border-left: 3px solid #9a5c00;
  background: #fff4da;
  font-size: 0.86rem;
}
.requested-demo-list { display: grid; gap: 1rem; margin: 1.5rem 0; }
.requested-demo-card {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.requested-demo-card.is-user-submission { padding-top: 0; border: 1px solid var(--rule); }
.requested-demo-card.is-user-submission > header,
.requested-demo-card.is-user-submission > .requested-demo-prompt,
.requested-demo-card.is-user-submission > .iteration-list,
.requested-demo-card.is-user-submission > .requested-demo-decision,
.requested-demo-card.is-user-submission > .requested-demo-status { margin-right: 0.85rem; margin-left: 0.85rem; }
.user-demo-cover { margin-bottom: 1rem; padding: 1rem; background: linear-gradient(145deg, #f7f4eb 0%, #fff 60%, #e9f1f8 100%); border-bottom: 1px solid var(--rule); }
.user-demo-cover-brand { display: flex; align-items: center; gap: 0.65rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.user-demo-cover-brand img { width: 2.4rem; height: 2.4rem; object-fit: contain; }
.user-demo-cover-brand strong { display: block; font-size: 1.1rem; }
.user-demo-cover-brand small { display: block; font: 600 0.6rem/1.4 var(--mono); color: var(--wireframe-ink); text-transform: uppercase; letter-spacing: 0.05em; }
.user-demo-cover-title { margin: 1.5rem 0 1rem; font-size: 1.2rem; }
.user-demo-cover-meta { display: grid; gap: 0.45rem; margin: 0 0 1rem; }
.user-demo-cover-meta div { display: grid; grid-template-columns: 5rem 1fr; gap: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--rule); }
.user-demo-cover-meta dt,
.user-demo-cover-result h4,
.user-demo-cover-assessment h4 { font: 600 0.62rem/1.4 var(--mono); color: var(--wireframe-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.user-demo-cover-meta dd { margin: 0; font-size: 0.78rem; font-weight: 700; }
.user-demo-cover-result,
.user-demo-cover-assessment { padding: 0.75rem; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.75); }
.user-demo-cover-assessment { margin-top: 0.65rem; border-color: #8cae92; background: #eef7ef; }
.user-demo-cover-result h4,
.user-demo-cover-assessment h4 { margin: 0 0 0.35rem; }
.user-demo-cover-result p,
.user-demo-cover-assessment p:last-child { margin: 0; font-size: 0.78rem; }
.requested-demo-card h3 { margin-bottom: 0.65rem; font-size: 1.05rem; }
.requested-demo-prompt {
  margin: 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--wireframe-ink);
  font: 0.8rem/1.45 var(--mono);
}
.iteration-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: iteration;
}
.iteration-list li {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0.5rem;
  counter-increment: iteration;
  font-size: 0.82rem;
}
.iteration-list strong { color: var(--wireframe-ink); }
.requested-demo-decision {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(10, 16, 32, 0.035);
  border: 1px solid var(--rule);
}
.requested-demo-decision p { margin: 0; font-size: 0.82rem; }
.requested-demo-status {
  margin-bottom: 0;
  font: 600 0.7rem/1.45 var(--mono);
  color: var(--ink-soft);
}
@media (min-width: 46rem) {
  .challenge-cover-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .challenge-cover-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-tier-head { grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr); }
  .demo-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .demo-gallery-wrap { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
  .requested-demo-rail { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 34rem) {
  .iteration-list li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* Public discussion stays compact until a visitor intentionally opens it. */
.public-discussion { margin:1rem auto 0; padding:0; grid-column:1/-1; }
.public-discussion > summary { padding:1rem 1.25rem; font-weight:800; cursor:pointer; }
.public-discussion > summary:focus-visible { outline:3px solid #4cc3ff; outline-offset:3px; }
.discussion-body { padding:0 1.25rem 1.25rem; }
.discuss-link{display:inline-block;margin:.65rem 0;color:var(--cyan);font-weight:800}.public-discussion .wrap{max-width:58rem}.discussion-context{display:inline-block;padding:.35rem .6rem;background:#eaf3f8;color:#17345c;font:700 .75rem/1.3 var(--mono);text-transform:uppercase}.learning-engine{margin:2rem 0;padding:1.25rem;border:1px solid var(--rule);background:#eef5f8}.learning-top{display:grid;gap:1rem}.learning-top article{padding:1rem;background:#fff;border:1px solid var(--rule)}@media(min-width:60rem){.learning-top{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Accepted-tester portal: deliberately locked until real authentication is deployed. */
.portal-blocker { padding:1rem; border-left:4px solid #9a5c00; background:#fff4da; color:var(--blueprint-navy); }
.portal-layout { display:grid; gap:2rem; }
.portal-layout nav { display:grid; align-content:start; gap:.35rem; padding:1rem; border:1px solid var(--rule); background:var(--drafting-paper); }
.portal-layout nav a { padding:.55rem; color:var(--blueprint-navy); }
.portal-content { display:grid; gap:2rem; }
.portal-content>section { scroll-margin-top:1rem; padding:clamp(1rem,3vw,2rem); border:1px solid var(--rule); background:var(--drafting-paper); }
.portal-content dl div { padding:.6rem 0; border-top:1px solid var(--rule); }
.portal-content dd { margin:.2rem 0 0; }
.portal-cards { display:grid; gap:.75rem; }
.portal-cards article { padding:1rem; border:1px solid var(--rule); }
.portal-cards h3 { margin:0 0 .35rem; }
.portal-cards p { margin:0; }
@media (min-width:55rem) { .portal-layout{grid-template-columns:16rem minmax(0,1fr)} .portal-layout nav{position:sticky;top:1rem}.portal-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.public-discussion{margin:2rem auto 0;padding:1.25rem;max-width:72rem;background:#fff;color:#172033;border:1px solid #ccd5e0;border-radius:12px}.public-discussion form{display:grid;gap:.75rem}.public-discussion input,.public-discussion textarea,.feedback-card textarea{width:100%}.discussion-list{list-style:none;padding:0}.discussion-comment{margin:1rem 0;padding:1rem;border-left:3px solid #4cc3ff;background:#f4f7fa}.discussion-comment.depth-1{margin-left:2rem}.discussion-comment.depth-2{margin-left:4rem}.discussion-comment header{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.official-badge,.beta-badge{font-size:.75rem;padding:.15rem .4rem;border-radius:1rem;background:#17345c;color:#fff}.beta-badge{background:#237a4b}.feedback-tabs,.feedback-card>div{display:flex;flex-wrap:wrap;gap:.5rem}.feedback-card{padding:1rem;margin:1rem 0;border:1px solid #68768a;background:#fff;color:#172033}.feedback-card header{display:flex;gap:1rem;justify-content:space-between}.honeypot{position:absolute!important;left:-9999px!important}@media(max-width:600px){.discussion-comment.depth-1,.discussion-comment.depth-2{margin-left:1rem}}

/* Plain text link that still opens a dialog. Used where a section needs a
   launcher but must not carry bespoke button chrome (AI-slop section: the
   band is standard, the link reads as text like every other section). */
.text-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--wireframe-cyan); text-decoration: underline;
  text-underline-offset: .2em;
}
.text-link:hover { text-decoration-thickness: 2px; }
.text-link:focus-visible { outline: 3px solid var(--spark-amber); outline-offset: 3px; }

/* Page-one headline tail: typewriter morph.
   The sizer and the live text share one grid cell, so the box is always as wide
   as the longest state ("for many others!") and nothing around it reflows while
   characters are typed or deleted. */
.morph { display: inline-grid; vertical-align: baseline; max-width: 100%; }
/* Both share one grid cell so the box holds the TALLEST state's height and
   nothing reflows vertically mid-type. They must NOT be nowrap: a nowrap sizer
   forces the box to the longest string on one line, which is what pushed the
   rotator out of its column and behind the mascot. Wrapping is allowed and
   intentional; overlapping is not. */
.morph-sizer, .morph-live { grid-area: 1 / 1; }
/* Belt and braces: the rotator can never exceed the copy column. */
.morph { max-width: 100%; overflow-wrap: anywhere; }
.morph-sizer { visibility: hidden; pointer-events: none; }
.morph-live { justify-self: start; }
/* Rotating subtitle EXIT: fade out in place. Founder direction 2026-09-07.
   The old exit backspaced the line away one character at a time, which reads as
   the text sliding leftward off its own start point; the founder rejected that.
   A rightward drift was offered as an alternative and NOT taken: the line can
   reach the full width of the copy column, and any transform pushing it right
   risks horizontal scroll at 390px, which the mobile rule forbids outright. A
   fade in place carries no such risk and is what the direction asked for first.
   The transition lives ONLY on .is-leaving. The base rule has none, so dropping
   the class snaps back to full opacity and the incoming line types in at full
   strength rather than fading in -- the entrance was not part of the change. */
.morph-live.is-leaving { opacity: 0; transition: opacity 300ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  /* Nothing rotates under reduced motion, so this can never fire. Belt and
     braces: if it somehow did, it would not animate. */
  .morph-live.is-leaving { opacity: 1; transition: none; }
}
/* The cursor exists only while the driver is typing: no JS, or reduced motion,
   means a plain static headline with no stray caret. */
.morph-cursor { display: none; }
.morph.is-typing .morph-cursor {
  display: inline-block;
  width: .06em;
  height: .78em;
  margin-left: .05em;
  background: currentColor;
  vertical-align: baseline;
  animation: morph-caret 1s steps(1, end) infinite;
}
@keyframes morph-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .morph-cursor, .morph.is-typing .morph-cursor { display: none; }
}
}

/* ============================================================
   SECTION BAND STANDARD  (docs/SECTION-BAND-STANDARD.md)
   S3's band structure, applied to S2 / S4 / S5 / S6. Formatting only --
   every section keeps its own class for background and colour, and its
   own copy. S1 is PAGE-ONE-MASTER and is not covered by this.
   ============================================================ */
.band-standard { min-height: 0; padding-block: clamp(2.25rem, 5vw, 4.5rem); }
.band-standard-grid { display: grid; gap: 2rem; align-items: center; min-height: 0; }
.band-standard-copy { min-width: 0; }

/* Same heading scale as S3, without S3's nowrap line spans -- prose headings
   would overflow if forced not to wrap. */
.band-standard-copy h2 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.15rem, 5.4vw, 5.25rem);
  line-height: .91;
  letter-spacing: -.055em;
}
.band-standard-copy h3 { margin: 1.4rem 0 0; }
.band-standard-copy p { margin: .9rem 0 0; max-width: 31rem; }
.band-standard-copy > :is(p, ul, ol):first-of-type { margin-top: .9rem; }

/* Wiz keeps its own column, centred, at the standard size. */
.band-standard-wiz { justify-self: center; display: grid; justify-items: center; gap: .55rem; }

@media (min-width: 48rem) {
  .band-standard-grid { grid-template-columns: minmax(0, 1.35fr) minmax(14rem, .65fr); gap: clamp(2rem, 6vw, 6rem); }
  /* S2 and S5 keep Wiz on the left, the side they already use. */
  .band-standard-grid.wiz-first { grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); }
}
.band-standard-extra { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* ============================================================
   SHARE  — one component, page one and the demo page.
   Deliberately quieter than .cta-outline: the beta CTA stays primary.
   ============================================================ */
.share { position: relative; display: inline-block; }
.btn-share {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.1rem;
  border: 1px solid rgba(76, 195, 255, .38);
  background: transparent;
  color: inherit;
  font: 600 .95rem/1 var(--sans);
  cursor: pointer;
}
.btn-share::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--wireframe-cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.btn-share:hover::before, .btn-share:focus-visible::before { transform: scaleX(1); }
.btn-share:focus-visible { outline: 3px solid var(--spark-amber); outline-offset: 3px; }
.btn-share::after { content: "↗"; font-size: .85em; opacity: .7; }

.share-menu {
  position: absolute; z-index: 30; top: calc(100% + .5rem); left: 0;
  display: grid; gap: .15rem; min-width: 12rem; padding: .4rem;
  background: var(--blueprint-navy); color: var(--drafting-paper);
  border: 1px solid rgba(76, 195, 255, .45);
  box-shadow: 0 1rem 2rem rgba(10, 16, 32, .35);
}
.share-menu[hidden] { display: none; }
.share-menu > * {
  display: block; padding: .5rem .6rem; border: 0; background: transparent;
  color: inherit; text-align: left; text-decoration: none;
  font: 600 .88rem/1.2 var(--sans); cursor: pointer;
}
.share-menu > *:hover, .share-menu > *:focus-visible { background: rgba(76, 195, 255, .14); }
.share-menu > *:focus-visible { outline: 2px solid var(--spark-amber); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) { .btn-share::before { transition: none; } }
.demo-share-row { margin: 1.25rem 0 0; }

/* Share, hero placement: stands alone under the logo, so it can never be read
   as sharing the beta application. Prominent -- larger and centred -- while
   staying visually distinct from the amber primary CTA. */
.share-hero { display: block; margin: 1.5rem auto 0; text-align: center; }
.share-hero .btn-share { padding: .8rem 1.4rem; font-size: 1rem; border-color: rgba(76, 195, 255, .55); }
.share-hero .btn-share::before { height: 3px; }
.share-hero .share-menu { left: 50%; transform: translateX(-50%); text-align: left; }

/* Trademark mark. Superscript, small, and zero-height in the line box so it
   never distorts a heading's leading or wraps onto its own line. */
.tm {
  font-size: .42em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
  margin-left: .06em;
}
/* The CADWiz name set as the brand wordmark inside a heading: same two-tone
   treatment as the logo, at the heading's own size. */
/* The mark never renders as CADWIZ. text-transform is pinned so no ancestor
   -- including an all-caps heading rule -- can force the spans to caps. */
.brand-word { white-space: nowrap; text-transform: none; }
.brand-word .word-cad { color: inherit; }
.brand-word .word-wiz { color: var(--wireframe-cyan); }
/* On the light bands the logo's own navy/blue pairing reads better. */
/* superseded 2026-08-16 by the band-dark rule below */
/* S6 capability teaser: category names only. The full catalog is parked at
   docs/internal/CAPABILITY-CATALOG.md and never ships. */
.capability-teaser { margin: .9rem 0 0; font: 600 .95rem/1.5 var(--mono); color: var(--wireframe-ink); letter-spacing: .01em; }
/* Beta affordance: a plain link toward the programme. It must never reveal
   gated content client-side -- no hidden elements, no JS-revealed text. */
.beta-pointer { margin: .9rem 0 0; font-size: .95rem; }

/* Privacy policy page. */
.legal-wrap { max-width: 46rem; }
.legal-wrap h2 { margin: 2rem 0 .6rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.legal-wrap p, .legal-wrap li { max-width: 42rem; }
.legal-wrap ul { padding-left: 1.2rem; }
.policy-version { margin-top: 2.5rem; color: var(--wireframe-ink); opacity: .75; }

/* Submit disclosure — deliberately large and unmissable, never fine print.
   The final element before the submit button. */
.submit-disclosure {
  margin: 1.75rem 0 1rem;
  padding: 1.4rem 1.5rem;
  border: 3px solid var(--spark-amber);
  border-radius: 10px;
  background: rgba(245, 165, 36, .08);
}
.submit-disclosure h3 {
  margin: 0 0 .6rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: var(--blueprint-navy);
}
.submit-disclosure p {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.55;
  color: var(--blueprint-navy);
}
.consent-line { margin: 0 0 1rem; font-size: .95rem; }


/* S6 prominence + beta funnel — founder item 15, 2026-08-15.
   The capability line is the section's summary of what it can do, so it is set
   as a panel rather than a run of body text, and the beta CTA below it is the
   section's main interactive. NOTE: no expandable/disclosure was added. The
   2026-08-14 pullback cut S6's catalog and its "Want to see what else it can
   do?" reveal, and a contract test forbids gated content in this section, so
   making the teaser prominent had to happen without restoring hidden content. */
/* The demo slot ships honest: a blueprint card naming the benchmark, never a
   mockup and never the prior non-production attempt. */
.bench-registered { margin:1.25rem 0 0; padding:1rem 1.2rem; color:var(--drafting-paper);
  background:var(--blueprint-navy); border:1px solid rgba(76,195,255,.4);
  border-left:4px solid var(--wireframe-cyan,#4cc3ff); border-radius:.5rem;
  background-image:linear-gradient(rgba(76,195,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,195,255,.07) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px; }
.bench-registered-title { margin:0 0 .35rem; font:800 1.05rem/1.3 var(--sans); letter-spacing:-.01em; }
.bench-registered p:last-child { margin:0; font-size:.98rem; color:#cfe3f0; }


/* S7 preview stamps — founder item 9, ruling 2026-08-16.
   Rubber-stamp/blueprint-approval look: angled, outlined, as if pressed onto
   the card. Stamps come OFF per launcher as approved renders land — one stamp
   is one unapproved video, so the page can never claim more than the film has.

   The first pass hung the stamp off the card edge with 2.6rem of horizontal
   padding to fake a banner. At 390px that made it 509px wide and pushed the
   whole PAGE into horizontal scroll -- the one thing the mobile rule forbids.
   It now sits inside the card and is sized by its text.

   aria-hidden: decoration over a button that already has an accessible name.
   Announcing "coming attraction" mid-label would garble it. */
.demo-choice-grid button { position:relative; overflow:hidden; }
.stamp {
  position:absolute; top:1rem; right:.9rem; z-index:2; max-width:calc(100% - 1.8rem);
  padding:.26rem .6rem;
  font:800 .66rem/1.25 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
  color:rgba(197,74,58,.92); border:2px solid rgba(197,74,58,.7); border-radius:2px;
  background:rgba(255,255,255,.06);
  transform:rotate(-7deg); transform-origin:center; opacity:.92; pointer-events:none;
}
@media (max-width:640px) { .stamp { font-size:.6rem; padding:.22rem .5rem; } }


/* Background alternation — founder item 14, 2026-08-16.
   Strict dark/light from S1 (dark), so no two adjacent sections share a family.
   Audit before this rule: S5-S8 were all light, four adjacent clashes in a row.
   S5 and S7 flipped to dark; nothing else moved.

   S9 (beta-bridge) had NO background rule of its own and was inheriting the
   light body background. A probe reading computed style saw rgba(0,0,0,0),
   scored it as black, and called it dark -- so the section that closes the page
   was silently clashing with Try It above it. It now declares its family
   explicitly rather than inheriting one by accident.

   The Try It exception the founder offered was NOT taken. Try It reads fine on
   light, and making it dark would put it against the dark beta-bridge -- two
   darks touching, which the rule forbids. The exception would cost more rhythm
   than it bought. */
.band-dark { background:var(--band-dark-bg); color:var(--drafting-paper); }
.band-dark .section-kicker { color:var(--wireframe-cyan,#4cc3ff); }
.band-dark h2, .band-dark h3, .band-dark p, .band-dark strong { color:var(--drafting-paper); }
/* ...except inside elements that paint their own LIGHT ground. The rule above
   turned S7's mode names (Tutor/Mentor/Wizard) white on cream cards, which made
   them invisible -- found in a screenshot, not by the contrast test, which only
   checks the named brand pairs. */
.band-dark .demo-choice-grid button,
.band-dark .demo-choice-grid button strong,
.band-dark .demo-choice-grid button span { color:#172033; }
.band-dark a { color:var(--wireframe-cyan,#4cc3ff); }

/* Wordmark on dark: word-cad inherits the heading colour so it flips by itself,
   but word-wiz was pinned to #2F7FF2 for every band except creation-claim. On
   navy that reads dull, so every dark band now uses the cyan that creation-claim
   already used -- one rule instead of one exception. creation-claim itself
   retired 2026-09-01 (S3/S4 swap moved dark to band-dark alone); this stays a
   plain band-dark rule with the same effect. */
.band:not(.band-dark) .brand-word .word-wiz { color:#2F7FF2; }
.band-dark .brand-word .word-wiz { color:var(--wireframe-cyan,#4cc3ff); }

/* Stamps on dark: the ink red measures 3.98:1 on navy -- fine for large text,
   short of the 4.5 these small caps need. Lightened for dark bands only. */
.band-dark .stamp { color:rgba(240,140,120,.95); border-color:rgba(240,140,120,.7); }


/* Beta front door — founder item 12, 2026-08-16. One invitation, three ways in,
   one form. FreeCAD is primary; the other two are secondary but not buried. */
.hero-invite { margin:0 0 .85rem; font:700 clamp(1.05rem,2vw,1.35rem)/1.35 var(--sans); }
.beta-choice { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.beta-groups { margin:0 0 1rem; padding:.9rem 1.1rem; border:1px solid var(--rule); border-radius:.5rem; }
.beta-groups legend { padding:0 .35rem; font:700 .95rem/1.3 var(--sans); }
.beta-groups .field-help { margin:.6rem 0 0; }
@media (max-width:560px) { .beta-choice { flex-direction:column; align-items:stretch; } .beta-choice a { text-align:center; } }


/* Optional opt-in — founder direction 2026-08-16.
   It sits with the consent elements but must never be mistaken for the required
   privacy consent, which gates submit. Lighter weight, a quieter rule, and no
   "Required." tail. Unchecked by default in markup: a pre-checked opt-in is not
   consent. */
.check-optional { padding-left:.15rem; border-left:3px solid rgba(11,95,138,.25); padding-block:.15rem; color:#41566b; }
.check-optional input { accent-color:var(--wireframe-ink,#0B5F8A); }


/* Beta intake — founder direction 2026-08-16.
   The requirements line sits with the computer question so applicants read it at
   the moment they answer, not buried elsewhere. The intelligence section is
   deliberately prominent: it is the one place the beta asks for money, and
   burying that would be the dishonest choice. */
.sysreq-note { margin:1.1rem 0 .35rem; padding:.7rem .9rem; font-size:.95rem; line-height:1.45;
  background:rgba(76,195,255,.10); border-left:4px solid var(--wireframe-ink,#0B5F8A); border-radius:.35rem; }
.intelligence-part { margin:1.5rem 0; padding:1.15rem 1.25rem; border:2px solid var(--wireframe-ink,#0B5F8A); border-radius:.5rem; }
.intelligence-part legend { padding:0 .4rem; font:800 1.05rem/1.3 var(--sans); text-transform:uppercase; letter-spacing:.04em; }
.intelligence-part p { margin:0 0 .7rem; line-height:1.5; }

/* M-BETA-INTAKE, 2026-09-05. The rebuilt application is the Aug 3 mockup's card
   structure carried onto the site's own type and rules, rather than the
   mockup's inline blue-gradient styling — same sections, this stylesheet. */
.intake-card { margin:0 0 1.15rem; padding:1.1rem 1.25rem; border:1px solid var(--rule); border-radius:.5rem; display:grid; gap:1rem; }
.intake-card > legend { padding:0 .4rem; font:700 1.05rem/1.3 var(--sans); }
.intake-note { margin:0 0 1.15rem; font-size:.95rem; line-height:1.5; color:#41566b; }
.intake-note p { margin:0 0 .6rem; }
/* Multi-answer groups: a nested fieldset so the question is the accessible
   group name, not a bare paragraph the screen reader never associates. */
.check-group { margin:0; padding:.75rem .9rem; border:1px dashed var(--rule); border-radius:.4rem; display:grid; gap:.4rem; }
.check-group > legend { padding:0 .3rem; font:600 .95rem/1.35 var(--sans); }
.provider-options .check { align-items:flex-start; gap:.5rem; line-height:1.5; }
.req-list { margin:.35rem 0 .9rem; padding-left:1.25rem; font-size:.95rem; line-height:1.6; }
.req-list li { margin:.1rem 0; }
/* The credits help affordance. <details> rather than a scripted dialog: it is
   keyboard-reachable and mobile-safe with no JavaScript, and its accessible
   name is the visible summary text rather than an aria-label that would
   override it. */
.help-popup { margin:.6rem 0 0; border:1px solid var(--rule); border-radius:.4rem; background:#fff; }
.help-popup > summary { cursor:pointer; padding:.6rem .8rem; font-weight:700; }
.help-popup > summary::after { content:" ?"; }
.help-popup > summary:focus-visible { outline:3px solid var(--wireframe-ink,#0B5F8A); outline-offset:2px; }
.help-popup-body { padding:0 .9rem .8rem; }
.help-popup-body p { margin:0 0 .7rem; font-size:.95rem; line-height:1.55; }
.ack-box { background:rgba(76,195,255,.08); }


/* S7 rich descriptions — founder copy 2026-08-16. The boxes carry what each mode
   is, who it is for, and what makes it special, so a visitor learns the offer
   even while every video is still a coming attraction. */
.demo-choice-grid button { align-content:start; text-align:left; padding-top:2.4rem; }
.choice-lede { display:block; margin:.15rem 0 .4rem; font:700 1rem/1.35 var(--sans); color:#17345c; }
.choice-body { display:block; font:400 .92rem/1.5 var(--sans); color:#41566b; }


/* S7 standing promise — founder amendment 2026-08-16. Section-level, once,
   beneath the boxes. It reads as a commitment about what will appear, not an
   apology for what has not yet: stated in the affirmative, given its own space,
   and set in the section's voice rather than as fine print. */
.demo-promise { max-width:52rem; margin:1.9rem auto 0; text-align:center;
  font:700 clamp(1.02rem,1.7vw,1.2rem)/1.5 var(--sans); color:var(--drafting-paper); }


/* S5 — The Magic Behind the Curtain. Restored from the surviving Aug 27-29
   wizlabs-media production on t2/s5-magic-restore; the launcher stays an
   honest "awaiting approval" state until a public master is cleared. */
.s5-magic { background:var(--band-dark-bg); color:var(--drafting-paper); }
.s5-magic .band-standard-copy h2 { color:var(--drafting-paper); }
.s5-magic-subtitle { color:#cfe3f0; font-size:clamp(1.1rem,2vw,1.4rem); }
.s5-video-launcher { display:grid; width:min(100%,64rem); padding:0; overflow:hidden; border:1px solid rgba(76,195,255,.42); border-radius:.75rem; background:#061823; color:var(--drafting-paper); cursor:pointer; text-align:left; transition:border-color .18s ease,box-shadow .18s ease; }
.s5-video-launcher:hover { border-color:var(--wireframe-cyan,#4cc3ff); box-shadow:0 1rem 2.5rem rgba(0,0,0,.25); }
.s5-video-launcher:focus-visible { outline:3px solid var(--spark-amber); outline-offset:4px; }
.s5-video-frame { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16/9; background:linear-gradient(145deg,rgba(11,95,138,.42),rgba(6,24,35,.96)); border-bottom:1px solid rgba(76,195,255,.25); }
.s5-play-icon { position:relative; width:clamp(3.75rem,8vw,5rem); aspect-ratio:1; border-radius:50%; background:var(--drafting-paper); box-shadow:0 .7rem 2rem rgba(0,0,0,.35); }
.s5-play-icon::after { content:""; position:absolute; left:42%; top:31%; border-top:1rem solid transparent; border-bottom:1rem solid transparent; border-left:1.45rem solid var(--wireframe-ink,#0b5f8a); }
.s5-video-label { padding:1rem 1.15rem .2rem; font:800 1rem/1.3 var(--sans); }
.s5-video-status { padding:0 1.15rem 1rem; color:#b7d0da; font:600 .78rem/1.35 var(--mono); }
@media(prefers-reduced-motion:reduce){.s5-video-launcher{transition:none}}