/* SqlGuard Report — Upstash "Crisp alpine air" style.
 *
 * Design tokens follow /home/ubuntu/tmp/DESIGN.md (Upstash style reference):
 * Paper White page, Forest Pine text, Spring Bud accent, Sky Mist borders.
 * Cards rely on background-color shifts + thin borders for depth — no
 * box-shadows on main surfaces per the design's explicit "Don't" rule.
 * Headline scale uses Inter Tight; body uses Inter; code uses ui-monospace.
 * 8px spacing base, comfortable density, 40px section gap, 32px card padding.
 *
 * Class names keep the `readiness-*` prefix used by the existing JS so the
 * refactor is style-only — no DOM changes required.
 */

:root {
  /* ---- Upstash palette ---------------------------------------------- */
  --color-forest-pine:    #022c22;
  --color-spring-bud:     #00bc7d;
  --color-evergreen:      #007a55;
  --color-sky-mist:       #e5e7eb;
  --color-paper-white:    #ffffff;
  --color-graphite:       #71717b;
  --color-obsidian:       #000000;
  --color-whisper-green:  #b4e6d6;
  --color-alert-red:      #dc2626;
  --color-warm-gold:      #f59e0b;
  --color-dark-code:      #09090b;
  --color-ghost-button:   #f5f5f5;
  /* The brand's signature "tinted green" fill — used for feature cards,
   * ghost buttons, and collapsible region backgrounds. Lives unchanged
   * across the design system as the canonical secondary surface. */
  --color-tint-green:     rgba(4, 120, 87, 0.08);
  /* Hero headline gradient — green → green → warm-gold accent. */
  --gradient-aura:        linear-gradient(to right,
                            oklch(0.508 0.118 165.612),
                            oklch(0.696 0.17 162.48),
                            rgb(245, 158, 11));

  /* ---- Type system --------------------------------------------------- */
  --font-inter:       'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-inter-tight: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', monospace;

  /* ---- Spacing (8px base) ------------------------------------------- */
  --spacing-8:   8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --section-gap:   40px;
  --card-padding:  32px;
  --element-gap:   8px;

  /* ---- Radii --------------------------------------------------------- */
  --radius-input:  6px;
  --radius-badge: 12px;
  --radius-card:  16px;
  --radius-pill: 9999px;

  /* ---- Shadow (only subtle exists per design) ----------------------- */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  /* ---- Semantic aliases used throughout this file ------------------- */
  --readiness-bg:        var(--color-paper-white);
  --readiness-surface:   var(--color-paper-white);
  --readiness-surface-2: var(--color-tint-green);
  --readiness-fg:        var(--color-forest-pine);
  --readiness-muted:     var(--color-graphite);
  --readiness-border:    var(--color-sky-mist);
  --readiness-accent:    var(--color-spring-bud);
  --readiness-accent-2:  var(--color-evergreen);
  --readiness-sans:      var(--font-inter);
  --readiness-display:   var(--font-inter-tight);
  --readiness-mono:      var(--font-mono);
}

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

.readiness-layout {
  margin: 0;
  min-width: 320px;
  font-family: var(--readiness-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--readiness-fg);
  background: var(--readiness-bg);
  line-height: 1.5;
}

.readiness-layout a {
  color: var(--readiness-fg);
  text-decoration: none;
}
.readiness-layout a:hover { color: var(--readiness-accent-2); }

.readiness-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;
}

/* ---------- header (sticky, full-bleed) ------------------------------- */
.readiness-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  padding: var(--spacing-16) clamp(var(--spacing-16), 4vw, var(--spacing-48));
  background: var(--color-paper-white);
  border-bottom: 1px solid var(--readiness-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.readiness-brand {
  font-family: var(--readiness-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--readiness-fg);
}
.readiness-brand span { color: var(--readiness-accent); }
.readiness-header nav {
  display: flex;
  gap: var(--spacing-24);
  flex-wrap: wrap;
}
.readiness-header nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--readiness-muted);
}
.readiness-header nav a:hover { color: var(--readiness-fg); }

/* ---------- main + hero ----------------------------------------------- */
.readiness-layout main {
  max-width: 1120px;
  margin: 0 auto;
  /* Tighter top padding so the form lands above the fold on a 13" laptop.
   * Hero text below is compact enough that 24px top + the hero gap is
   * sufficient breathing room without burying the input. */
  padding: var(--spacing-24) clamp(var(--spacing-16), 4vw, var(--spacing-48)) var(--spacing-80);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* Hero sits flush against the section gap below but uses a smaller
 * gap-after of its own — the eyebrow/h1/lede triplet reads as one
 * unit rather than three. */
.readiness-hero {
  max-width: 60rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-bottom: calc(var(--section-gap) * -0.4);
}
/* Hero headline applies the brand Gradient Aura — green to green to warm
 * gold — via background-clip:text. Falls back to the accent color when
 * background-clip isn't supported. Sizes capped at 28px (was 48px) so
 * the form input is reachable without scrolling on a typical 13" laptop
 * viewport (~700px high). */
.readiness-hero h1 {
  font-family: var(--readiness-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--readiness-accent-2);
  background: var(--gradient-aura);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.readiness-lede {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--readiness-muted);
  margin: 0;
  max-width: 48rem;
}
.readiness-lede code {
  font-family: var(--readiness-mono);
  font-size: 14px;
  letter-spacing: -0.073em;
  color: var(--readiness-fg);
  background: var(--color-tint-green);
  border-radius: var(--radius-input);
  padding: 2px 6px;
}
.readiness-eyebrow {
  font-family: var(--readiness-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--readiness-accent-2);
  margin: 0;
}

/* "What this is / What this is not" disclosure card. Collapsed by default
 * so the form stays in view; expanding it surfaces the boundary statement
 * verbatim. Sits inside the hero so evaluators see it on first paint —
 * PRD §14 "企业 IT / 安全 / 治理团队更信任边界清楚的产品" demands the
 * boundary be visible on the page, not hidden in a README link. */
.readiness-limits {
  margin-top: var(--spacing-8);
  background: var(--color-tint-green);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: 12px var(--spacing-16);
  font-size: 13px;
}
.readiness-limits summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--readiness-fg);
  list-style: none;
  user-select: none;
}
.readiness-limits summary::-webkit-details-marker { display: none; }
.readiness-limits summary::before {
  content: '›';
  display: inline-block;
  width: 14px;
  margin-right: var(--spacing-8);
  color: var(--readiness-accent-2);
  transition: transform 120ms ease-in-out;
}
.readiness-limits[open] summary::before { transform: rotate(90deg); }
.readiness-limits-grid {
  margin-top: var(--spacing-16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-24);
}
.readiness-limits-title {
  margin: 0 0 var(--spacing-8);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.readiness-limits-yes { color: var(--color-spring-bud); }
.readiness-limits-no  { color: var(--color-alert-red); }
.readiness-limits ul {
  margin: 0;
  padding-left: var(--spacing-16);
  color: var(--readiness-muted);
  line-height: 1.5;
}
.readiness-limits ul li + li { margin-top: 6px; }
.readiness-limits ul code {
  font-family: var(--readiness-mono);
  font-size: 12px;
  letter-spacing: -0.073em;
  color: var(--readiness-fg);
  background: var(--color-paper-white);
  border-radius: var(--radius-input);
  padding: 1px 4px;
}
.readiness-limits-cta {
  margin: var(--spacing-16) 0 0;
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--readiness-border);
  color: var(--readiness-fg);
  font-size: 13px;
  line-height: 1.5;
}
.readiness-limits-cta a {
  font-weight: 600;
  color: var(--readiness-accent-2);
}
.readiness-limits-cta a:hover { color: var(--color-spring-bud); }

/* ---------- noscript -------------------------------------------------- */
.readiness-noscript {
  margin: var(--spacing-16) clamp(var(--spacing-16), 4vw, var(--spacing-48));
  padding: var(--spacing-16) var(--spacing-24);
  background: var(--color-tint-green);
  border: 1px solid var(--readiness-border);
  border-radius: var(--radius-card);
  color: var(--readiness-fg);
  font-size: 14px;
}

/* ---------- form (Paper White card, no shadow) ------------------------ */
/* Padding/gaps trimmed so the demo picker, SQL textarea, controls, and the
 * Run button all fit above the fold on a 13" laptop (~700px tall) without
 * scrolling. The textarea drops to rows=8 / min-height 10rem in parallel
 * (sqlguard-report.htm:80, .readiness-form textarea below). */
.readiness-form {
  background: var(--readiness-surface);
  border: 1px solid var(--readiness-border);
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  /* Sister of .readiness-result's scroll-margin-top — the "↑ New query"
   * button scrolls here, and the sticky header would otherwise overlap
   * the demo picker. ~72px clears the header bar. */
  scroll-margin-top: 72px;
}
.readiness-label {
  display: block;
  color: var(--readiness-fg);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--spacing-8);
}
.readiness-form textarea {
  width: 100%;
  min-height: 10rem;
  border: 1px solid var(--readiness-border);
  border-radius: var(--radius-input);
  background: var(--color-paper-white);
  color: var(--readiness-fg);
  font-family: var(--readiness-mono);
  font-size: 14px;
  letter-spacing: -0.073em;
  line-height: 1.5;
  padding: 12px var(--spacing-16);
  resize: vertical;
  tab-size: 2;
  transition: border-color 120ms ease-in-out;
}
.readiness-form textarea:focus {
  border-color: var(--readiness-accent);
  outline: 0;
}

/* "Try a rule" demo picker sits above the SQL textarea — separate from the
 * main controls so it reads as a discoverability affordance rather than a
 * required option. Tinted-green ghost fill matches the secondary-button
 * shape elsewhere on the page. */
.readiness-demo-row {
  background: var(--color-tint-green);
  border-radius: var(--radius-card);
  padding: 12px var(--spacing-16);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.readiness-demo-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--readiness-fg);
}
.readiness-demo-label select {
  display: block;
  width: 100%;
  margin-top: var(--spacing-8);
  border: 1px solid var(--readiness-border);
  border-radius: var(--radius-input);
  background: var(--color-paper-white);
  color: var(--readiness-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 120ms ease-in-out;
}
.readiness-demo-label select:hover  { border-color: var(--readiness-accent-2); }
.readiness-demo-label select:focus  { border-color: var(--readiness-accent); outline: 0; }
.readiness-demo-hint {
  margin: 0;
  font-size: 12px;
  color: var(--readiness-muted);
}

.readiness-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
  border: 0;
}
.readiness-controls-context {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-16);
}
.readiness-controls-context input[type="text"] {
  width: 100%;
  margin-top: var(--spacing-8);
  border: 1px solid var(--readiness-border);
  border-radius: var(--radius-input);
  background: var(--color-paper-white);
  color: var(--readiness-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 12px;
  transition: border-color 120ms ease-in-out;
}
.readiness-controls-context input[type="text"]:hover  { border-color: var(--readiness-accent-2); }
.readiness-controls-context input[type="text"]:focus  { border-color: var(--readiness-accent); outline: 0; }
.readiness-controls-context input[type="text"]::placeholder { color: var(--readiness-muted); }
.readiness-field-hint {
  display: inline-block;
  margin-left: var(--spacing-8);
  font-size: 12px;
  font-weight: 400;
  color: var(--readiness-muted);
}
.readiness-controls label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--readiness-fg);
}
.readiness-controls select {
  width: 100%;
  margin-top: var(--spacing-8);
  border: 1px solid var(--readiness-border);
  border-radius: var(--radius-input);
  background: var(--color-paper-white);
  color: var(--readiness-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 120ms ease-in-out;
}
.readiness-controls select:hover { border-color: var(--readiness-accent-2); }
.readiness-controls select:focus { border-color: var(--readiness-accent); outline: 0; }

.readiness-action-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  margin-top: 0;
}
.readiness-status {
  color: var(--readiness-muted);
  font-size: 14px;
}

/* ---------- buttons --------------------------------------------------- */
.readiness-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--readiness-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
  transition: background 120ms ease-in-out, color 120ms ease-in-out, border-color 120ms ease-in-out;
}

/* Primary — Spring Bud filled pill. `.readiness-layout` prefix bumps
 * specificity so anchor CTAs win against the `.readiness-layout a` rule. */
.readiness-layout .readiness-cta-primary {
  background: var(--readiness-accent);
  color: var(--color-paper-white);
}
.readiness-layout .readiness-cta-primary:hover {
  background: var(--readiness-accent-2);
  color: var(--color-paper-white);
}

/* Secondary — ghost variant per design (tinted green fill, dark text,
 * 12px radius). Smaller padding so the in-result Download actions tuck
 * into the decision row without competing with the WARN/DENY pill. */
.readiness-layout .readiness-cta-secondary {
  background: var(--color-tint-green);
  color: var(--readiness-fg);
  border: 1px solid transparent;
  border-radius: var(--radius-badge);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}
.readiness-layout .readiness-cta-secondary:hover {
  background: rgba(4, 120, 87, 0.16);
  color: var(--readiness-fg);
}

/* Focus indicator — accent green ring, 2px solid at 3px offset.
 * Spring Bud (#00bc7d) gives ~3.1:1 against Paper White (just over the
 * 3:1 minimum) and is the brand's interaction signal. */
.readiness-form button:focus-visible,
.readiness-cta:focus-visible,
.readiness-layout a:focus-visible,
.readiness-form select:focus-visible,
.readiness-form textarea:focus-visible,
.readiness-region summary:focus-visible {
  outline: 2px solid var(--readiness-accent);
  outline-offset: 3px;
  border-radius: var(--radius-input);
}

/* ---------- result card ----------------------------------------------- */
.readiness-result {
  padding: var(--card-padding);
  background: var(--readiness-surface);
  border: 1px solid var(--readiness-border);
  border-radius: var(--radius-card);
  max-width: 100%;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  /* scroll-margin-top reserves clearance for the sticky header when the
   * page auto-scrolls here after a Run readiness assessment. ~72px =
   * header padding (16+16) + brand line-height (~22*1.5) + safety
   * margin so the decision pill lands a couple of pixels below the
   * header divider, not behind it. */
  scroll-margin-top: 72px;
}

.readiness-decision-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  margin: 0;
}

/* Decision badge — 12px radius "badge" shape per design. Uses the brand
 * palette: Spring Bud (ALLOW), Warm Gold (WARN), Alert Red (DENY/ERROR).
 * All three are pre-authorized palette colors per the design's
 * "Refrain from introducing other vibrant colors" rule. */
.readiness-decision {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-badge);
  padding: 6px 14px;
  background: var(--color-sky-mist);
  color: var(--readiness-fg);
  font-family: var(--readiness-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.readiness-decision[data-decision="ALLOW"] {
  background: var(--color-spring-bud);
  color: var(--color-paper-white);
}
.readiness-decision[data-decision="WARN"] {
  background: var(--color-warm-gold);
  color: var(--readiness-fg);
}
/* PRD §11 fourth decision — sits between WARN and DENY. Forest-Pine fill
 * with Paper-White text reads as "serious enough to escalate, but not a
 * hard stop"; the brand-neutral dark surface differentiates it from
 * WARN's warm gold without veering into Alert Red territory. */
.readiness-decision[data-decision="APPROVAL_REQUIRED"] {
  background: var(--color-forest-pine);
  color: var(--color-paper-white);
}
.readiness-decision[data-decision="DENY"],
.readiness-decision[data-decision="ERROR"] {
  background: var(--color-alert-red);
  color: var(--color-paper-white);
}

.readiness-risk-score {
  font-family: var(--readiness-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--readiness-fg);
  letter-spacing: -0.04em;
}
.readiness-latency {
  color: var(--readiness-muted);
  font-size: 12px;
  margin-left: auto;
}
.readiness-summary {
  margin: 0;
  color: var(--readiness-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* PRD §11 — recommended_action banner. Sits between the summary line
 * and the collapsible findings regions so it's the second thing the
 * user reads (after the decision pill). Uses the tinted-green feature-
 * card surface so it reads as actionable guidance rather than another
 * warning; bordered to set it apart from the surrounding white card. */
.readiness-recommended {
  background: var(--color-tint-green);
  border-left: 3px solid var(--readiness-accent-2);
  border-radius: var(--radius-input);
  padding: var(--spacing-16) var(--spacing-24);
  margin: 0;
}
.readiness-recommended[hidden] { display: none; }
.readiness-recommended-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--readiness-accent-2);
}
.readiness-recommended-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--readiness-fg);
}

/* ---------- collapsible regions (tinted feature-card surfaces) -------- */
.readiness-region {
  background: var(--color-tint-green);
  border: 0;
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
}
.readiness-region summary {
  cursor: pointer;
  font-family: var(--readiness-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--readiness-fg);
  list-style: none;
  user-select: none;
}
.readiness-region summary::-webkit-details-marker { display: none; }
.readiness-region summary::before {
  content: '›';
  display: inline-block;
  width: 16px;
  margin-right: var(--spacing-8);
  color: var(--readiness-accent-2);
  font-size: 18px;
  transition: transform 120ms ease-in-out;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}
.readiness-region[open] summary::before { transform: rotate(90deg); }

.readiness-findings,
.readiness-policy-evaluations,
.readiness-statements {
  margin: var(--spacing-16) 0 0;
  padding-left: 0;
  list-style: none;
}
.readiness-finding {
  display: grid;
  grid-template-columns: minmax(10rem, auto) minmax(4rem, auto) 1fr minmax(12rem, auto);
  gap: var(--spacing-8) var(--spacing-16);
  align-items: baseline;
  padding: var(--spacing-16) 0;
  border-bottom: 1px solid var(--readiness-border);
  word-break: break-word;
  font-size: 14px;
}
.readiness-finding:last-child { border-bottom: 0; }
.readiness-finding-code {
  font-family: var(--readiness-mono);
  font-size: 13px;
  letter-spacing: -0.04em;
  color: var(--readiness-fg);
}
.readiness-finding-severity {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--readiness-muted);
}
.readiness-finding-message { color: var(--readiness-fg); }
.readiness-finding-evidence {
  font-family: var(--readiness-mono);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: var(--readiness-fg);
  text-align: right;
}
.readiness-finding-evidence[data-missing="true"] {
  color: var(--readiness-muted);
  font-style: italic;
  font-family: var(--readiness-sans);
  letter-spacing: normal;
}
.readiness-finding[data-severity="error"] .readiness-finding-severity { color: var(--color-alert-red); }
.readiness-finding[data-severity="warn"]  .readiness-finding-severity { color: var(--color-warm-gold); }
.readiness-finding[data-severity="info"]  .readiness-finding-severity { color: var(--readiness-accent-2); }

.readiness-policy-evaluations li,
.readiness-statements li {
  padding: var(--spacing-12, 12px) 0;
  border-bottom: 1px solid var(--readiness-border);
  font-size: 14px;
  color: var(--readiness-fg);
}
.readiness-policy-evaluations li:last-child,
.readiness-statements li:last-child { border-bottom: 0; }

/* Code/facts block — dark per design Quick Start §4. Background
 * #09090b, white monospace text with the brand's -0.073em tracking. */
.readiness-facts {
  margin: var(--spacing-16) 0 0;
  padding: var(--spacing-24);
  background: var(--color-dark-code);
  color: var(--color-paper-white);
  border-radius: var(--radius-card);
  font-family: var(--readiness-mono);
  font-size: 14px;
  letter-spacing: -0.073em;
  line-height: 1.5;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
}

.readiness-audit {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--spacing-8) var(--spacing-16);
  margin: var(--spacing-16) 0 0;
  font-size: 14px;
}
.readiness-audit dt {
  font-weight: 600;
  color: var(--readiness-muted);
}
.readiness-audit dd {
  margin: 0;
  word-break: break-all;
  font-family: var(--readiness-mono);
  font-size: 13px;
  letter-spacing: -0.04em;
  color: var(--readiness-fg);
}

/* ---------- CTA panel (Feature Card per design §"Components") -------- */
.readiness-cta-panel {
  padding: var(--card-padding);
  background: var(--color-tint-green);
  border: 0;
  border-radius: var(--radius-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-24);
  flex-wrap: wrap;
}
.readiness-cta-panel h2 {
  font-family: var(--readiness-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--readiness-fg);
  margin: var(--spacing-8) 0 0;
}
.readiness-cta-panel p {
  color: var(--readiness-muted);
  font-size: 16px;
  margin: var(--spacing-8) 0 0;
  max-width: 36rem;
}
.readiness-cta-panel .readiness-eyebrow { margin: 0; }

/* ---------- responsive ------------------------------------------------ */
@media (max-width: 980px) {
  .readiness-controls { grid-template-columns: 1fr; }
  .readiness-controls-context { grid-template-columns: 1fr; }
  .readiness-cta-panel { flex-direction: column; align-items: stretch; }
  .readiness-cta-panel .readiness-cta-primary { align-self: flex-start; }
}
@media (max-width: 640px) {
  .readiness-header { align-items: flex-start; flex-direction: column; }
  .readiness-form textarea { min-height: 8rem; }
  .readiness-finding { grid-template-columns: 1fr; }
  .readiness-audit { grid-template-columns: 1fr; }
  .readiness-hero h1 { font-size: 22px; }
  .readiness-limits-grid { grid-template-columns: 1fr; }
}