/* Minimal styles. No third-party assets. WCAG 2.2 AA contrast.
 *
 * v1.2.0 conversion-redesign (ARCHITECT-CONVERSION-REDESIGN.md,
 * 2026-08-13): single-column mobile-first capture page, form above
 * the fold at 390x844 and 1440x900. The 7-step Decision Layer
 * diagram lives in the success state (rendered by app.js after a
 * 200 response) and in an optional <details> block on the capture
 * page; its CSS rules are reused unchanged.
 *
 * Earlier lineage preserved:
 * - /neo-crit rebuild (UX-NEO-CRIT-BUILD-SPEC.md, 2026-08-12).
 * - Pre-assurance CRIT attribution and legal-presentation demote
 *   (CONTENT-NEO-CRIT-REVIEW §3 + UX-NEO-CRIT-RENDER-REVIEW §3).
 * - OKLCH progressive enhancement of the existing hex tokens.
 */

:root {
  --bg: #0f1115;
  --card: #161a22;
  --text: #f4f6fa;
  --muted: #c9cdd6;
  --border: #2a2f3a;
  --accent: #2f7bff;
  --accent-soft: rgba(47, 123, 255, 0.12);
  --accent-text: #ffffff;
  --error: #ff8a8a;
  --focus: #ffd166;
  --maxw: 38rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  /* Body / UI stack: OS-resident, no network fetch. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Display system stack: local serif, OS-resident. */
:root {
  --display-stack: "Iowan Old Style", "Palatino Linotype", "Palatino",
                   "Book Antiqua", Georgia, serif;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--focus);
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.25rem 0.25rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

main {
  display: block;
  padding: 1rem;
}

.card {
  max-width: var(--maxw);
  margin: 1.25rem auto;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

/* Layer A: card-head wrapper holds the eyebrow + H1. */
.card-head {
  margin: 0 0 0.75rem;
}

/* Layer A: eyebrow uses small-caps, NOT text-transform. */
.eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--display-stack);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-caps: all-small-caps;
  font-weight: 600;
}

h1 {
  /* Editorial move: display serif on the H1, no font swap. */
  font-family: var(--display-stack);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* v1.2.0: subhead below the H1, <=25 words, no vendor name. */
.subhead {
  color: var(--muted);
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
}

/* v1.2.0: proof strip (5-min setup, works in any AI, no install, no code). */
.proof {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Layer A: section heading used by .kit-includes and .decision-layer. */
.section-h {
  font-family: var(--display-stack);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 0.4rem;
  font-weight: 600;
}

/* Layer A: one-sentence lead under a section heading. */
.section-lede {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Layer A: .kit-includes (three locked bullets), now BELOW the form. */
.kit-includes {
  margin: 1.25rem 0 0.75rem;
}
.kit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kit-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  line-height: 1.5;
}
.kit-list li:last-child { border-bottom: 0; }
.kit-list li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.9rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}
.kit-list li strong {
  color: var(--text);
  font-weight: 600;
}

/* v1.2.0: 1-line "for you if" filter. */
.for-you {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* v1.2.0: optional <details> 7-step summary. Collapsed by default; the
   visitor who scrolls can expand it to verify the framework. The
   7-step diagram inside is byte-equivalent to the success state. */
.how-it-works {
  margin: 0.5rem 0 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0;
}
.how-it-works > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  list-style: none;
  color: var(--text);
}
.how-it-works > summary::-webkit-details-marker { display: none; }
.how-it-works > summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  font-weight: 700;
  color: var(--accent);
}
.how-it-works[open] > summary::before { content: "−"; }
.how-it-works[open] > .decision-layer {
  display: block;
  margin-top: 0.5rem;
}

/* Layer A: seven-step Decision Layer diagram. Used by the optional
   <details> on the capture page AND by the success state (the JS
   renderer in app.js reuses the same .step / .step-num / .step-h /
   .step-body p / .step-list rules verbatim). */
.decision-layer {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0 0;
}

.step-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 0.6rem;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.6rem;
  align-items: start;
  padding-left: 0.25rem;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: 0.95rem;
  background: rgba(47, 123, 255, 0.08);
  position: relative;
  z-index: 1;
}

.step-h {
  margin: 0 0 0.1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.step-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Vertical connector on < 768px (mobile / single-column layout). */
.step + .step::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: -0.6rem;
  width: 1px;
  height: 0.6rem;
  background: var(--border);
}

.field { margin-bottom: 0.7rem; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  background: #0f1115;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 1rem;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: 44px;
}

.consent-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.consent-label span {
  display: block;
}

.error {
  color: var(--error);
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  min-height: 1em;
}
.error[data-state="hidden"] { display: none; }
.error[data-state="visible"] { display: block; }

button[type="submit"] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
button[type="submit"]:disabled {
  background: #4a4f5b;
  cursor: progress;
}

button[type="submit"]:focus-visible,
input:focus-visible,
.consent-label:focus-within,
.how-it-works > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* v1.2.0: legal presentation demoted. The v1.2.0 disclosure text and
   the element id="disclosure" are unchanged. The block no longer
   carries a tinted background, a left border, or its own padding.
   Font size is 0.85rem, the same weight as .privacy. The
   `disclosureTextRenderedHash` in FUNNEL_CONFIG reads textContent
   of this element; CSS does not touch that contract. */
.disclosure {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0;
  background: transparent;
  border-left: 0;
  border-radius: 0;
}

.privacy {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* v1.2.0: minimal footer-links. */
.footer-links {
  margin: 0.75rem 0 0;
  color: #8a90a0;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.footer-links a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.footer-links a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

/* v1.2.0: result block (success / banner). The success state now
   includes the 7-step diagram; the banner state is unchanged. */
.result {
  margin: 0.75rem 0 0;
  padding: 0.9rem;
  border-radius: 0.375rem;
}
.result[data-state="hidden"] { display: none; }
.result.success { background: rgba(47, 123, 255, 0.12); border: 1px solid var(--accent); }
.result.success .success-head h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.result.success .success-head p { margin: 0 0 0.5rem; }
.result.error { background: rgba(255, 138, 138, 0.1); border: 1px solid var(--error); }
.result h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.result.success .success-detail {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--accent);
}

.kit-button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  min-height: 44px;
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.kit-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* v1.2.0: required CRIT attribution line. Static, just above
   .footer-links. Outside #disclosure / #form-region / #privacy /
   hash surface. Sits as a typographic byline, not a callout. */
.credit {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  font-family: var(--display-stack);
  font-style: italic;
  letter-spacing: 0.01em;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

@media (min-width: 600px) {
  main { padding: 2rem; }
  .card { padding: 2rem; }
  h1 { font-size: 1.75rem; }
}

@media (min-width: 768px) {
  /* Asymmetric two-column sub-grid for the seven-step diagram.
     The page is still one column at every breakpoint; the
     asymmetry lives inside the .card. The same selector is
     reused by the success-state renderer in app.js. */
  .step-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .step-list > .step:nth-child(odd)  { grid-column: 1; }
  .step-list > .step:nth-child(even) { grid-column: 2; }
  /* No vertical connector on the desktop grid. */
  .step + .step::before { display: none; }
  /* Horizontal connector on rows 1-6, except the last odd step. */
  .step-list > .step:nth-child(-n+6)::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: 2.5rem;
    right: -1rem;
    height: 1px;
    background: var(--border);
  }
  .step-list > .step:nth-child(even)::after {
    right: auto;
    left: -1rem;
  }
  .step-list > .step:nth-child(7)::after { display: none; }
}

/* v1.2.0: at >= 1024px the card widens to 64rem and the H1 uses
   the editorial clamp. The capture page stays single-column; only
   the inner diagram is two-column. */
@media (min-width: 1024px) {
  .card { max-width: 64rem; padding: 2.5rem 3rem; }
  h1 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
  .card-head {
    border-left: 1px solid var(--border);
    padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* OKLCH progressive enhancement: re-expresses the existing hex
   tokens in OKLCH for modern browsers. The hex values above are
   the visual source of truth and the fallback for browsers
   without OKLCH support. No new color hue, no new family, no
   WCAG 2.2 AA drift. */
@supports (color: oklch(50% 0.1 264)) {
  :root {
    --bg:     oklch(17% 0.012 264);
    --card:   oklch(20% 0.015 264);
    --text:   oklch(96% 0.005 264);
    --muted:  oklch(82% 0.008 264);
    --border: oklch(28% 0.012 264);
    --accent: oklch(58% 0.18 264);
  }
}