@import url('/fonts/fonts.css');

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

:root {
  /* §8 corAIgen Enterprise Tier — inherits §7, teal accent */
  --bg: #000000;
  --surface: #0c0c0e;
  --surface-2: #111114;
  --text: #ffffff;
  --text-muted: #8a8a8f;
  --accent: #2dd4bf;          /* 11.28:1 on bg, 10.50:1 on surface */
  --accent-strong: #0f766e;   /* 5.47:1 with white — filled CTAs only */
  --link: #5eead4;
  --border: #1c1c20;          /* DECORATIVE hairlines only */
  --border-control: #35857a;  /* 4.46:1 — any interactive boundary (1.4.11) */

  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace;

  --radius: 8px;
  --radius-lg: 18px;
  --u: 4px;
  --maxw: 1040px;             /* narrower than AWD's 1240 — senior tier */
  --section: calc(var(--u) * 36);  /* AWD uses 26; ×1.4 is the tier signal */
}

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

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: calc(var(--u) * 7); }

/* Sticky header would otherwise bury section headings on anchor jumps. */
.section, .hero { scroll-margin-top: 88px; }

/* ── type ─────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 calc(var(--u) * 5);
}
.hero h1 {
  font-size: clamp(2.6rem, 1.0rem + 5.6vw, 4.4rem);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 700;
  margin: 0 0 calc(var(--u) * 7); max-width: 16ch;
}
.hero h1 .hl { color: var(--accent); display: block; }
.section h2 {
  font-size: clamp(1.9rem, 0.9rem + 3.2vw, 3rem);
  line-height: 1.08; letter-spacing: -0.025em; font-weight: 700;
  margin: 0 0 calc(var(--u) * 6); max-width: 20ch;
}
.section h2 .hl { color: var(--accent); }
.lede { color: var(--text-muted); font-size: 1.15rem; max-width: 56ch; margin: 0; }

/* ── header ───────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgb(0 0 0 / 72%); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 6); padding-block: calc(var(--u) * 5);
}
.wordmark {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.16em; color: var(--accent); text-decoration: none; white-space: nowrap;
}
.nav { display: flex; gap: calc(var(--u) * 8); }
.nav a {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; transition: color 140ms ease;
  /* 2.5.8 target size, all viewports. 0.7rem mono caps are ~19px tall on
     their own; this padding is what carries them past the 24px minimum, so
     it is load-bearing, not spacing. It costs no header height — the row is
     already sized by the taller CTA button beside it. */
  padding-block: calc(var(--u) * 2);
}
.nav a:hover { color: var(--text); }
/* Below 860px the nav drops to its own row. It used to be `display: none`
   with no hamburger and no footer fallback, so phone visitors had no
   navigation at all. Wrapping beats a toggle here: no JS, nothing hidden
   behind a control, and no second state that can break. */
@media (max-width: 860px) {
  /* A wrapped nav makes this header ~140px. Sticky, that is a fifth of a
     phone viewport permanently gone — worse than the problem being fixed.
     Static instead: the whole nav is visible on arrival and scrolls away
     after. Nothing is stranded, because the page CTA repeats five times
     below the fold. */
  .site-header { position: static; }
  .site-header .wrap { flex-wrap: wrap; row-gap: calc(var(--u) * 2); }
  .nav {
    order: 3; width: 100%; flex-wrap: wrap;
    gap: calc(var(--u) * 1) calc(var(--u) * 6);
  }
}
/* The header CTA is the longest single string up there; below 420px it and
   the wordmark stop fitting on one line together. */
@media (max-width: 420px) {
  .site-header .wrap { justify-content: flex-start; gap: calc(var(--u) * 3); }
  .site-header .btn { font-size: 0.64rem; padding-inline: calc(var(--u) * 4); }
}

/* corAIgen's internal capitals are load-bearing — opt out of uppercasing. */
.brand { text-transform: none; letter-spacing: 0.02em; }

/* ── buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4) calc(var(--u) * 7);
  border-radius: var(--radius);
  border: 1px solid var(--border-control);   /* 1.4.11: never --border here */
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.btn-primary { background: var(--surface); color: var(--accent); box-shadow: none; }
.btn-primary:hover { border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── sections ─────────────────────────────────────────────────── */
.hero { position: relative; padding-block: calc(var(--u) * 30) var(--section); }
.section { padding-block: var(--section); }
.section--rule { border-top: 1px solid var(--border); }

/* ── comparison (without / with) ──────────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 12); }
.compare-col { padding: calc(var(--u) * 8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.compare-col h3 {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 calc(var(--u) * 6);
}
.compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 4); }
.compare-col li { color: var(--text-muted); font-size: 1rem; padding-left: calc(var(--u) * 7); position: relative; }
.compare-col li::before { position: absolute; left: 0; }
.compare--bad li::before { content: '×'; color: #8a8a8f; }
.compare--good li::before { content: '→'; color: var(--accent); }
.compare--good { border-color: var(--border-control); }

/* ── service ladder ───────────────────────────────────────────── */
.tiers { display: grid; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 12); }
.tier {
  display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 9);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.tier--featured { border-color: var(--border-control); }
.tier-kicker {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 calc(var(--u) * 3);
}
.tier h3 { margin: 0 0 calc(var(--u) * 3); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.tier-desc { color: var(--text-muted); margin: 0 0 calc(var(--u) * 5); max-width: 52ch; }
.tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 2); }
.tier-list li { color: var(--text-muted); font-size: 0.95rem; padding-left: calc(var(--u) * 6); position: relative; }
.tier-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
.tier-side { text-align: right; min-width: 210px; }
.tier-price { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 calc(var(--u) * 2); }
.tier-price .per { font-size: 0.9rem; font-weight: 400; color: var(--text-muted); }
.tier-meta { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 calc(var(--u) * 6); line-height: 1.9; }
@media (max-width: 820px) {
  .tier { grid-template-columns: 1fr; }
  .tier-side { text-align: left; }
  .compare { grid-template-columns: 1fr; }
}

/* ── stats ────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 12); }
.stat { padding: calc(var(--u) * 7); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.stat b { display: block; font-size: 1.9rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.stat span { display: block; margin-top: calc(var(--u) * 2); color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* ── forms ────────────────────────────────────────────────────── */
.form { display: grid; gap: calc(var(--u) * 5); max-width: 560px; margin-top: calc(var(--u) * 10); }
.field-label {
  display: block; margin-bottom: calc(var(--u) * 2);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.field {
  width: 100%; padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-control);   /* 1.4.11 */
  font: inherit; font-size: 1rem;
}
.field::placeholder { color: var(--text-muted); }
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea.field { min-height: 130px; resize: vertical; }

/* ── footer ───────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border); padding-block: calc(var(--u) * 10);
  color: var(--text-muted); font-size: 0.88rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 5); justify-content: space-between; }
.site-footer a { color: var(--link); text-decoration: none; }

.site-footer p { margin: 0; max-width: 56ch; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.family-doors {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: calc(var(--u) * 2) calc(var(--u) * 3);
  max-width: none;
}
.family-doors .sep { color: var(--text-muted); }
.family-doors .note { font-size: 0.85em; }

/* Netlify honeypot. MUST be display:none — .visually-hidden uses the clip-rect
   pattern, which deliberately KEEPS content in the accessibility tree and tab
   order. A screen-reader or autofill user filling it makes Netlify silently
   discard the submission while the visitor is shown a success page. That is
   the exact failure that cost aiwithdanny.com 17 days of signups. */
.hp { display: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── hero transition canvas ───────────────────────────────────── */
.rain-hero {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.42;
  mask-image: radial-gradient(ellipse 58% 62% at 42% 45%, transparent 34%, #000 86%);
}

@media (max-width: 620px) {
  :root { --section: calc(var(--u) * 20); }
  .hero { padding-block: calc(var(--u) * 16) var(--section); }
  .wrap { padding-inline: calc(var(--u) * 5); }
  .tier { padding: calc(var(--u) * 6); }
}

/* ══ READINESS ASSESSMENT ═════════════════════════════════════════
   Radio boundaries use --border-control, never --border: WCAG 1.4.11
   requires >=3:1 for interactive control boundaries and --border
   measures 1.15:1 on this surface. */
.assess { display: grid; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10); max-width: 640px; }
.assess-progress {
  margin: 0; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}

.q { border: 0; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 3); }
/* An author `display` declaration beats the UA stylesheet's
   [hidden]{display:none}, so without this every step renders at once. The
   same trap bit the AI with Danny workflow panels on 2026-07-27. */
.q[hidden], .assess[hidden], .assess-result[hidden],
.form[hidden], .assess-skip[hidden] { display: none; }
.q legend {
  padding: 0; margin-bottom: calc(var(--u) * 4);
  font-size: 1.35rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em;
  color: var(--text);
}
.q legend:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.opt {
  display: flex; align-items: flex-start; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  color: var(--text-muted); font-size: 1rem; line-height: 1.5;
  cursor: pointer; transition: border-color 140ms ease, color 140ms ease;
}
.opt:hover { color: var(--text); border-color: var(--accent); }
.opt input {
  accent-color: var(--accent); margin-top: 0.35em; flex-shrink: 0;
  /* Unchecked radios render as solid white on a dark surface, which makes them
     louder than the one that IS selected. Dim them so the selection dominates. */
  opacity: 0.45; transition: opacity 140ms ease;
}
.opt:has(input:checked) input, .opt:hover input { opacity: 1; }
/* The option text needs its own element: the radio widget renders light and
   would otherwise sit inside any region sampled for the text's contrast. */
.opt-t { flex: 1; }
.opt:has(input:checked) { color: var(--text); border-color: var(--accent); }
.opt:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

.assess-nav { display: flex; gap: calc(var(--u) * 4); }

.assess-result {
  margin-top: calc(var(--u) * 10); max-width: 640px;
  padding: calc(var(--u) * 9);
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-lg);
}
.assess-result h3 {
  margin: 0 0 calc(var(--u) * 4); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--accent); line-height: 1.2;
}
.assess-result p { margin: 0 0 calc(var(--u) * 5); color: var(--text-muted); }
.assess-cta {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
  margin: 0;
}

/* Steps toggle `hidden` with no animation, so there is no step transition to
   disable — this only quiets the option hover. Do not add a step animation
   in order to have something to reduce. */
/* Skip link revealing the contact form without completing the assessment. */
.assess-skip {
  margin: calc(var(--u) * 6) 0 0; font-size: 0.92rem; color: var(--text-muted);
}
.assess-skip button {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--link); text-decoration: underline; cursor: pointer;
}
.assess-skip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .opt, .opt input { transition: none; } }
@media (max-width: 620px) {
  .q legend { font-size: 1.15rem; }
  .assess-result { padding: calc(var(--u) * 6); }
}

/* ── reduced motion, global backstop ─────────────────────────────────
   The rain canvas and the keyframe animations were each guarded
   individually, but `scroll-behavior: smooth` on <html> was not — and that
   is the one every in-page nav link fires, so it was the most-triggered
   unguarded motion on the site. Individual guards keep working; this is the
   net beneath them, so a new transition cannot ship unguarded by omission. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── skip link ───────────────────────────────────────────────────────
   Deliberately NOT display:none, visibility:hidden, or the clip-rect
   .visually-hidden pattern. The first two drop it out of the tab order, so
   the keyboard user it exists for could never reach it; the third keeps it
   focusable but is the exact pattern that made the Netlify honeypot
   reachable on this site. transform is the one that hides it visually while
   leaving it focusable, and :focus brings it back on screen. */
.skip {
  position: fixed; left: calc(var(--u) * 4); top: calc(var(--u) * 4); z-index: 100;
  transform: translateY(calc(-100% - var(--u) * 8));
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--border-control); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }

/* The sticky header would otherwise cover the top of whatever we jumped to. */
#main { scroll-margin-top: 96px; }

/* ── phone: tighten the header ────────────────────────────────────────
   The wrapped nav plus a full-size CTA made this header a fifth of a phone
   screen, which is what "crowded" meant. Everything below is smaller only
   below 620px; tablets keep the roomier setting.
   The one thing NOT reduced past its floor is the nav link height — 2.5.8
   still wants 24px, and these land at ~29px. */
@media (max-width: 620px) {
  .site-header .wrap {
    padding-block: calc(var(--u) * 3);
    row-gap: calc(var(--u) * 1.5);
    gap: calc(var(--u) * 3);
  }
  .nav { gap: 0 calc(var(--u) * 5); }
  .nav a {
    font-size: 0.62rem; letter-spacing: 0.12em;
    padding-block: calc(var(--u) * 2);
  }
  .site-header .btn {
    padding: calc(var(--u) * 2.5) calc(var(--u) * 4);
    font-size: 0.62rem; letter-spacing: 0.1em;
  }
}

/* The desktop hero opens with ~112px of air above the eyebrow. On a phone
   that is a third of the remaining screen after the header, for no gain —
   there is no wide layout to breathe into. */
@media (max-width: 620px) {
  .hero { padding-block: calc(var(--u) * 14) calc(var(--u) * 12); }
}