/* ===================================================================
   WILD PIXEL — MARKETING SCORECARD (interactive)
   The funnel destination every per-page quiz secondary CTA points to.
   30 questions across 10 dimensions, 1-5 scale, total 30-150.
   Tier-segmented results + per-dimension routing line.

   May 1, 2026 — locked v1 of the interactive form.
   Per the brief: wildpixel-quiz-briefs.docx Section 06.
   =================================================================== */

/* The form section sits in a distinct interactive register.
   Per the locked principle: interactive surfaces are typographically
   louder than editorial ones. The visitor shouldn't have to figure out
   that this is something to fill out — the type scale tells them.

   Per BACKGROUND-CONTINUITY.md: section bg is transparent — it inherits
   the body's --bg-page that scroll-toggles dark → paper-warm via CSS
   transition. Once the toggle fires, the bg animates to completion over
   ~700ms whether or not scroll continues. No stuck-in-mid-fade state. */
.scorecard-form {
  background: transparent;
  position: relative;
  /* overflow removed May 2 — the form bg is transparent so there's nothing
     to clip, and the previous `overflow: hidden` broke `position: sticky`
     on the descendant .scorecard-aside (sticky requires no overflow-clip
     ancestor in the scroll chain). The aside now stays anchored at
     top: 100px through the entire form scroll. */
  padding: 100px 0 130px;
}
.scorecard-form-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter, 36px);
}

/* Two-column layout on desktop: form column + sticky sidebar.
   Below 1080px, sidebar drops out — form stretches full width and the
   existing top sticky progress strip carries the tracking. */
.scorecard-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 80px;
  align-items: start;
  /* Top margin = breathing room between the deliverables list above
     and the grid below (was on the howto's bottom margin until the
     howto was removed). Lives on the grid so both columns shift
     together and stay aligned. */
  margin-top: 80px;
}
@media (max-width: 1080px) {
  .scorecard-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .scorecard-aside { display: none; }
}

/* The sticky sidebar — dimension tracker + encouragement.
   Treated as a contained panel: subtle bg lift off the body canvas, soft
   border, 8px radius (matching homepage diagnostic + quiz cards). The
   panel reads as its own component, not a continuation of the body bg.
   BG is rgba over body so it tracks the dark→light scroll fade
   automatically — no separate transition needed. */
.scorecard-aside {
  position: sticky; top: 100px;
  align-self: start;
  padding: 26px 26px 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
/* When the body bg is in light state, the rgba-over-paper-warm reads as
   an extremely faint dark wash — flip the alpha source to dark for the
   right contrast against paper. */
body.is-interior-page.is-bg-light .scorecard-aside {
  background: rgba(30, 30, 28, 0.045);
  border-color: rgba(30, 30, 28, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Small mono label at the top of the panel — names it as a component */
.sc-aside-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--bg-fg-em);
  margin: 0 0 18px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-aside-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--bg-fg-em);
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-aside-meter {
  margin-bottom: 22px;
}
.sc-aside-meter-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bg-fg-soft); margin: 0 0 10px;
  display: flex; align-items: center; justify-content: space-between;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-aside-meter-label strong {
  color: var(--bg-fg); font-weight: 600;
  font-size: 14px; letter-spacing: 0.04em;
}
.sc-aside-meter-bar {
  height: 4px; background: rgba(128,128,128,0.22);
  position: relative; overflow: hidden; border-radius: 2px;
}
.sc-aside-meter-bar::after {
  content: ""; position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--scprog, 0%);
  background: var(--salmon);
  transition: width 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Encouragement copy — tone shifts as the user advances */
.sc-aside-encourage {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 19px; line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--bg-fg);
  margin: 0 0 26px;
  font-style: italic;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-aside-encourage em { color: var(--bg-fg-em); font-style: italic; }

/* Per-dimension tracker — list of all 10 with status indicators */
.sc-aside-dims {
  list-style: none; padding: 0; margin: 0;
}
.sc-aside-dims li {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--bg-fg-soft);
  cursor: pointer;
  transition: color 220ms ease, padding-left 220ms ease;
}
.sc-aside-dims li:hover { color: var(--bg-fg); padding-left: 4px; }
.sc-aside-dims li.is-current { color: var(--bg-fg); }
.sc-aside-dims li.is-done { color: var(--bg-fg); opacity: 0.7; }
.sc-aside-num {
  font-size: 10.5px; opacity: 0.7;
  letter-spacing: 0.10em;
}
.sc-aside-name {
  font-family: 'Space Grotesk', sans-serif; font-size: 13.5px;
  font-weight: 500; letter-spacing: 0;
  color: inherit;
}
.sc-aside-status {
  font-size: 10px; letter-spacing: 0.10em;
  text-align: right; opacity: 0.75;
}
.sc-aside-dims li.is-done .sc-aside-status {
  color: var(--bg-fg-em); opacity: 1;
}
.sc-aside-dims li.is-current .sc-aside-status {
  color: var(--bg-fg-em); opacity: 1;
}
/* Subtle indicator bar on left edge for current dimension */
.sc-aside-dims li.is-current {
  position: relative;
}
.sc-aside-dims li.is-current::before {
  content: ""; position: absolute;
  left: -16px; top: 12px; bottom: 12px;
  width: 2px; background: var(--salmon);
}

/* Per SEPARATORS.md — no decorative mode-shift seam. The typographic
   scale-shift (eyebrow + big H2 + how-to band) is the cue, not a line. */

.scorecard-head {
  max-width: 820px;
  margin: 0 0 56px;
}
.scorecard-head .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--salmon-deep); margin: 0 0 24px;
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 600;
}
.scorecard-head .eyebrow::before {
  content: ""; width: 36px; height: 2px; background: var(--salmon);
}
.scorecard-head h2 {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02; letter-spacing: -0.022em;
  color: var(--bg-fg); margin: 0 0 26px;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 14px; row-gap: 4px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scorecard-head h2 em { font-style: italic; }
.scorecard-head h2 .wp-stop { transform: translateY(2px); }
.scorecard-head .sub {
  font-size: 20px; line-height: 1.5;
  color: var(--bg-fg); max-width: 660px;
  margin: 0;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* The "what you'll do" bullets — a small instructional band that explicitly
   names the action. Tells the user "this is interactive" in plain English. */
/* Howto — actual instructions in eyebrow + body format. Reads as a
   directive, not a chip legend. Bottom margin = the breathing room
   between howto and the grid below; putting the gap HERE (outside
   the grid) lets the main column's .sc-begin and the sidebar's
   PROGRESS card align at the grid top. */
.scorecard-howto {
  margin: 30px 0 80px;
  background: transparent;
}
.scorecard-howto-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--bg-fg-em);
  font-weight: 600;
  margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 14px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scorecard-howto-eyebrow::before {
  content: ""; width: 30px; height: 1px; background: var(--bg-fg-em);
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scorecard-howto-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--bg-fg);
  margin: 0;
  max-width: 56ch;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scorecard-howto-body em {
  font-style: italic;
  color: var(--bg-fg-em);
  font-weight: inherit;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scorecard-howto-body strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em; letter-spacing: 0.08em;
  color: var(--bg-fg-em); font-weight: 600;
  padding: 0 2px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* "What you walk away with" — sample-report preview.
   Replaces the original three-card layout (May 3) with a literal
   miniature of the result panel — composite score, tier, dimension
   snapshot, top 3 priorities. Visitor sees the actual format before
   committing to the questions. Tagged "Sample read" so it can't be
   misread as their actual score.

   The original .sc-preview-card / .sc-preview-num / .sc-preview-foot
   styles are kept below for posterity / rollback, but unused. */
.scorecard-preview-wrap {
  /* Top margin trimmed May 2 — the .scorecard-head (eyebrow + H2 + sub)
     above this band was killed in the copy scrub, so the preview is now
     the form section's opening element and gets its top spacing from
     the section's own padding. */
  margin: 0 0 38px;
}
.scorecard-preview-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--bg-fg-em);
  margin: 0 0 22px;
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 600;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scorecard-preview-eyebrow::before {
  content: ""; width: 30px; height: 1px; background: var(--bg-fg-em);
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scorecard-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 880px) {
  .scorecard-preview { grid-template-columns: 1fr; gap: 14px; }
}
.sc-preview-card {
  padding: 28px 28px 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  position: relative;
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.is-interior-page.is-bg-light .sc-preview-card {
  background: rgba(30, 30, 28, 0.045);
  border-color: rgba(30, 30, 28, 0.12);
}
.sc-preview-num {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 56px; line-height: 1;
  color: var(--bg-fg);
  letter-spacing: -0.028em;
  margin: 0 0 18px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-preview-num em {
  font-style: italic;
  color: var(--bg-fg-em);
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-preview-num .unit {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--bg-fg-soft);
  font-weight: 500; text-transform: uppercase;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-preview-card h4 {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 22px; line-height: 1.18;
  color: var(--bg-fg); margin: 0 0 12px;
  letter-spacing: -0.014em;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-preview-card h4 em {
  font-style: italic;
  color: var(--bg-fg-em);
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-preview-card p {
  font-size: 14.5px; line-height: 1.55;
  color: var(--bg-fg); opacity: 0.82;
  margin: 0;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-preview-card p em {
  font-style: italic;
  color: var(--bg-fg-em);
  font-weight: 400;
  opacity: 1;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* No <strong> border-bottom rule. Underlined inline text reads as a
   hyperlink — we deliberately don't decorate <strong> here. Italic-salmon
   <em> is the only emphasis treatment, used sparingly. */

/* ===================================================================
   "WHAT YOU WALK AWAY WITH" — three plain lines, no numbering.
   Numbers were removed (May 3) because they competed with the
   "01 / 10" dimension markers below — visitors couldn't tell where
   the actual scorecard started. Now: single-column rows with
   hairlines between, salmon italic emphasis only on scan-points
   ("0–100", "first"). The first dimension's "01 / 10" header below
   becomes the unambiguous "scorecard begins here" marker.
   =================================================================== */
.sc-deliverables {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.sc-deliverables li {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.32; letter-spacing: -0.014em;
  color: var(--bg-fg);
  margin: 0;
  /* No hairlines between rows — whitespace does the separation work. */
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-deliverables li em {
  font-style: italic;
  color: var(--bg-fg-em);
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* "Begin" section marker — big section header with eyebrow + H2.
   Top margin lines up with the sidebar's internal padding-top (26px)
   so the eyebrow on the left aligns horizontally with the PROGRESS
   eyebrow on the right side panel. The breathing room from the howto
   strip lives on the howto's bottom margin (outside the grid). */
.sc-begin {
  margin: 26px 0 36px;
}
.sc-begin-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--bg-fg-em);
  font-weight: 600;
  margin: 0 0 24px;
  display: inline-flex; align-items: center; gap: 14px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-begin-eyebrow::before {
  content: ""; width: 36px; height: 2px; background: var(--bg-fg-em);
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-begin-h2 {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02; letter-spacing: -0.022em;
  color: var(--bg-fg);
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 14px; row-gap: 4px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-begin-h2 em {
  font-style: italic;
  color: var(--bg-fg-em);
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-begin-h2 .wp-stop { transform: translateY(2px); }

/* ===================================================================
   SAMPLE REPORT PREVIEW (.sc-mock) — replaced by .sc-deliverables.
   Selectors retained below for any in-flight pages still using the
   mock; safe to remove later.
   =================================================================== */
.sc-mock {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--bg-fg) 14%, transparent);
  border-radius: 8px;
  padding: 28px 32px 32px;
  position: relative;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 720px) {
  .sc-mock { padding: 22px 22px 26px; }
}

.sc-mock-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--bg-fg-em);
  font-weight: 600;
  margin: 0 0 22px;
  display: inline-flex; align-items: center; gap: 12px;
}
.sc-mock-tag::before {
  content: ""; width: 22px; height: 1px; background: var(--bg-fg-em);
}

/* Headline panel — mimics .sc-result-headline (dark, salmon glow) */
.sc-mock-headline {
  background: var(--charcoal);
  color: var(--paper);
  border-radius: 6px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.sc-mock-headline.swatch-cool::after,
.sc-mock-headline.grain-med::after { z-index: 1; }
.sc-mock-headline > * { position: relative; z-index: 2; }
@media (max-width: 720px) {
  .sc-mock-headline {
    grid-template-columns: 1fr;
    padding: 22px 22px 24px;
    gap: 16px;
  }
}

.sc-mock-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 12px;
  display: inline-flex; align-items: center; gap: 10px;
}
.sc-mock-tier em {
  color: var(--salmon-glow);
  font-style: italic;
  font-weight: 600;
}
.sc-mock-h {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.18; letter-spacing: -0.018em;
  color: var(--paper); margin: 0;
}
.sc-mock-h em { font-style: italic; color: var(--salmon-glow); }

.sc-mock-num {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif;
  font-weight: 300;
  font-size: clamp(56px, 8vw, 84px);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--paper); margin: 0;
  text-align: right;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 0;
}
.sc-mock-num em {
  font-style: italic;
  color: var(--salmon-glow);
}
.sc-mock-num .unit {
  font-size: 0.32em;
  color: var(--slate);
  letter-spacing: 0.04em;
  font-style: normal;
}
.sc-mock-numlabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--slate); margin: 6px 0 0;
  text-align: right;
}
@media (max-width: 720px) {
  .sc-mock-num { justify-content: flex-start; }
  .sc-mock-numlabel { text-align: left; }
}

/* Dimension snapshot + Top 3 sections — clean rows on paper bg */
.sc-mock-section {
  margin: 26px 0 0;
}
.sc-mock-section-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--midnight-moss); margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.sc-mock-section-h::before {
  content: ""; width: 18px; height: 1px;
  background: color-mix(in srgb, var(--charcoal) 30%, transparent);
}
.sc-mock-section-h em {
  color: var(--salmon-deep);
  font-style: italic;
}

.sc-mock-dim {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--charcoal) 8%, transparent);
}
.sc-mock-dim:first-of-type { border-top-color: color-mix(in srgb, var(--charcoal) 14%, transparent); }
.sc-mock-dim .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--salmon-deep); font-weight: 600;
}
.sc-mock-dim .name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px; color: var(--charcoal);
  font-weight: 500;
}
.sc-mock-dim .score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--midnight-moss);
  font-weight: 600;
}
.sc-mock-dim .score.is-strong { color: var(--salmon-deep); }
.sc-mock-dim .score.is-mid { color: var(--midnight-moss); opacity: 0.7; }
.sc-mock-more {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; color: var(--midnight-moss);
  font-style: italic;
  margin: 14px 0 0;
  opacity: 0.78;
}

/* Top 3 priorities — numbered list with serif numerals */
.sc-mock-pri {
  list-style: none; padding: 0; margin: 0;
}
.sc-mock-pri li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--charcoal) 8%, transparent);
}
.sc-mock-pri li:first-of-type { border-top-color: color-mix(in srgb, var(--charcoal) 14%, transparent); }
.sc-mock-pri .num {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif;
  font-weight: 300; font-style: italic;
  font-size: 18px; color: var(--salmon-deep);
  line-height: 1;
}
.sc-mock-pri .label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px; color: var(--charcoal);
  font-weight: 500;
}
/* .scorecard-preview-foot — dead style after May 2 scrub.
   Footer line was redundant with the hero sub. Element no longer
   rendered; selector kept commented for grep visibility. */

/* Social proof — stat band sitting between preview cards and howto.
   The locked Wild Pixel verifiable stat triplet: Arclight +340%
   qualified leads / Expion 8.4x ROAS / Piranha -38% CPL. Three short
   columns with a salmon left-edge stripe so each reads as a discrete
   credibility chip. Salmon-italic unit (% / x) marks the quantity at
   a glance. Tracks --bg-fg / --bg-fg-em for both bg states. */
.sc-proof-band {
  margin: 24px 0 38px;
}
.sc-proof-band-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--bg-fg-em);
  font-weight: 600;
  margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 12px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-proof-band-label::before {
  content: ""; width: 24px; height: 1px; background: var(--bg-fg-em);
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-proof-band-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 720px) {
  .sc-proof-band-stats { grid-template-columns: 1fr; gap: 14px; }
}
.sc-proof-stat {
  padding: 14px 22px 10px;
  border-left: 2px solid var(--bg-fg-em);
  transition: border-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-proof-stat-num {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 44px; line-height: 1;
  color: var(--bg-fg); margin: 0 0 8px;
  letter-spacing: -0.024em;
  display: flex; align-items: baseline; gap: 2px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-proof-stat-num .unit {
  color: var(--bg-fg-em);
  font-style: italic;
  font-size: 0.7em;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-proof-stat-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; line-height: 1.4;
  color: var(--bg-fg); opacity: 0.78;
  margin: 0;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-proof-stat-label strong {
  color: var(--bg-fg);
  font-weight: 500;
  opacity: 1;
}

/* Email-gate inline social proof — small client mention right at the
   ask. The gate panel is dark (always charcoal regardless of bg state),
   so this uses paper-soft for the line and paper-cream for the brand
   names. Tight spacing — sits between the body line and the form. */
.sc-gate-proof {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--slate-soft); line-height: 1.6;
  margin: -8px 0 22px;
  max-width: 540px;
  text-transform: uppercase;
  /* Normal block flow — flex was breaking whitespace around the
     <strong> tags. Each comma + space rendered with the wrong gap. */
}
.sc-gate-proof strong {
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Progress strip — sticky at top once user starts scoring.
   Bg + text track the page canvas. No bottom border per SEPARATORS.md. */
.scorecard-progress {
  position: sticky; top: 90px; z-index: 8;
  background: var(--bg-page);
  padding: 14px 0 12px;
  margin: 0 0 64px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.10em; color: var(--bg-fg);
  display: flex; align-items: center; gap: 18px;
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scorecard-progress strong { color: var(--bg-fg); font-weight: 600; }
.scorecard-progress .rule {
  flex: 1; height: 1px; background: rgba(128,128,128,0.22);
  position: relative; max-width: 380px;
}
.scorecard-progress .rule::after {
  content: ""; position: absolute; left: 0; top: -0.5px; height: 2px;
  background: var(--salmon);
  width: var(--scprog, 0%);
  transition: width 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scorecard-progress .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--salmon-glow); box-shadow: 0 0 10px var(--salmon-glow);
  animation: sc-pulse 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes sc-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Dimension blocks — separated by generous whitespace, not lines.
   Per SEPARATORS.md. The H3-scale dimension name + numbered counter
   delimit each block clearly without needing a horizontal rule. */
.sc-dim {
  padding: 96px 0 40px;
}
.sc-dim:first-of-type {
  padding-top: 36px;
}
.sc-dim:last-of-type {
  margin-bottom: 50px;
}
.sc-dim-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 22px;
  margin: 0 0 18px;
}
.sc-dim-num {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  letter-spacing: 0.14em; color: var(--bg-fg-em);
  font-weight: 600; flex-shrink: 0;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-dim-h3 {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: clamp(32px, 3.6vw, 44px); line-height: 1.04;
  letter-spacing: -0.022em; color: var(--bg-fg); margin: 0;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-dim-h3 em { font-style: italic; }
.sc-dim-status {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; color: var(--bg-fg-soft); text-transform: uppercase;
  white-space: nowrap;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-dim-status.is-complete { color: var(--bg-fg-em); font-weight: 600; }
.sc-dim-desc {
  font-size: 16px; color: var(--bg-fg);
  line-height: 1.55; margin: 0 0 28px;
  max-width: 720px;
  opacity: 0.78;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Question rows — typographic scale-shift carries the "interactive" cue.
   Per the locked principle: question text is at editorial-sub scale (22px),
   not body scale. Dot steppers are 1.5× their previous size. The whole row
   reads as "do this," not "read this." */
/* Question rows inside a dimension — tightly-grouped editorial content,
   so a hairline IS earned here per SEPARATORS.md. Kept very light. */
.sc-q {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid rgba(128,128,128,0.18);
}
.sc-q:first-of-type { border-top: 0; }
@media (max-width: 840px) {
  .sc-q { grid-template-columns: 1fr; gap: 18px; }
  .sc-dim-head { grid-template-columns: auto 1fr; }
  .sc-dim-status { display: none; }
}

/* The question text at H3-scale — the scale-shift is the cue.
   Text tracks --bg-fg. */
.sc-q-text {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.32; letter-spacing: -0.012em;
  color: var(--bg-fg);
  max-width: 620px;
  transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
}
.sc-q-text em { font-style: italic; }
.sc-q.is-answered .sc-q-text { opacity: 0.7; }

/* 5-dot stepper — much bigger. Each dot is a real tap target. */
.sc-dots {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.sc-dot {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; padding: 0;
  position: relative;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sc-dot::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  background: transparent;
  border: 2px solid var(--bg-fg);
  opacity: 0.62;
  transition: background 220ms ease, border-color 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms ease, opacity 220ms ease;
}
.sc-dot:hover::before { opacity: 1; }
.sc-dot:hover::before {
  border-color: var(--salmon);
  transform: scale(1.1);
}
.sc-dot.is-on::before {
  background: var(--salmon); border-color: var(--salmon);
}
.sc-dot.is-on:hover::before { background: var(--salmon-glow); border-color: var(--salmon-glow); }
.sc-dot:focus-visible { outline: none; }
.sc-dot:focus-visible::before { outline: 2px solid var(--salmon-glow); outline-offset: 3px; }

/* Scale labels — anchor the 1↔5 range underneath the dots */
.sc-scale {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; color: var(--slate);
  text-transform: uppercase;
  margin: 8px 14px 0;
  width: 232px;
}
.sc-scale span:first-child { color: var(--salmon-deep); font-weight: 600; }

/* Email gate — visible from page-load. State-aware:
   when fewer than 30 are answered, the gate is dimmed and the submit
   button is disabled with a "X questions remaining" message.
   At 30/30, the gate brightens and unlocks. */
.sc-gate {
  margin: 50px 0 0;
  padding: 40px 44px;
  background: var(--charcoal);
  color: var(--paper);
  border-radius: 8px;
  display: block;             /* always visible now — was display:none */
  position: relative;
  overflow: hidden;
  transition: opacity 320ms ease, filter 320ms ease;
}
.sc-gate.is-locked {
  /* Pre-30: muted, disabled affordance. The visitor can SEE what's coming. */
  opacity: 0.7;
}
.sc-gate.is-locked .sc-gate-form input[type="email"] {
  pointer-events: none; opacity: 0.5;
}
.sc-gate.is-locked .sc-gate-form button {
  pointer-events: none; opacity: 0.45; cursor: not-allowed;
}
/* Status line styling first (visual properties) */
.sc-gate-status-pre {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--salmon-glow);
  margin: 0 0 14px;
  align-items: center; gap: 12px;
}
.sc-gate-status-pre::before {
  content: ""; width: 28px; height: 1px; background: var(--salmon-glow);
}
.sc-gate-status-pre strong { color: var(--paper); font-weight: 600; }
.sc-gate-status-ready {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--klaviyo-mint, #4ED1A1);
  margin: 0 0 14px;
  align-items: center; gap: 12px;
}
.sc-gate-status-ready::before {
  content: ""; width: 28px; height: 1px; background: var(--klaviyo-mint, #4ED1A1);
}

/* Display toggles last so they take precedence over the styling rules above */
.sc-gate-status-pre,
.sc-gate-status-ready { display: none; }
.sc-gate.is-locked .sc-gate-status-pre { display: inline-flex; }
.sc-gate:not(.is-locked) .sc-gate-status-ready { display: inline-flex; }
/* Removed May 2 — the floating salmon corner hairline read as random
   junk floating in the panel with no anchor or meaning. Per the
   "lines extremely sparingly" rule: lines have to earn their place,
   and a decorative cue that doesn't separate or label anything fails
   the test. The status-line eyebrow up top is enough. */
.sc-gate h3 {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 28px; line-height: 1.2; letter-spacing: -0.018em;
  color: var(--paper); margin: 0 0 12px;
  max-width: 540px;
}
.sc-gate h3 em { font-style: italic; color: var(--salmon-glow); }
.sc-gate p {
  font-size: 14.5px; color: var(--slate-soft); line-height: 1.55;
  margin: 0 0 22px; max-width: 540px;
}
.sc-gate p em {
  font-style: italic;
  color: var(--salmon-glow);
  font-weight: 400;
}
.sc-gate-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.sc-gate-form input[type="email"] {
  flex: 1; min-width: 280px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(238,238,227,0.18);
  border-radius: 4px;
  color: var(--paper);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 220ms ease, background 220ms ease;
}
.sc-gate-form input[type="email"]::placeholder { color: var(--slate); }
.sc-gate-form input[type="email"]:focus {
  border-color: var(--salmon);
  background: rgba(255,255,255,0.08);
}
/* Submit button styling removed May 3 — the gate submit now uses the
   site-locked .btn .btn-primary class with the .stack hover-swap pattern.
   The form-scoped rules above were fighting site convention (Space
   Grotesk pill vs JetBrains Mono sharp-corner). The .btn class wins
   on every property now without specificity battles. */
.sc-gate-trust {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; color: var(--slate);
  margin: 18px 0 0;
}

/* Result page */
.sc-result {
  margin: 50px 0 0;
  display: none;
}
.sc-result.is-visible { display: block; }

/* Headline tier panel */
.sc-result-headline {
  background: var(--charcoal);
  --midnight: #3A3932;
  --midnight-deep: #2A2924;
  color: var(--paper);
  border-radius: 8px;
  padding: 50px 50px 44px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
@media (max-width: 840px) {
  .sc-result-headline { grid-template-columns: 1fr; padding: 36px 28px; }
}
.sc-result-headline.swatch-cool::after,
.sc-result-headline.grain-med::after { z-index: 1; }
.sc-result-headline > * { position: relative; z-index: 2; }

.sc-result-tier {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--salmon-glow); margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 12px;
}
.sc-result-tier::before { content: ""; width: 28px; height: 1px; background: var(--salmon-glow); }

.sc-result-h {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: clamp(28px, 3.2vw, 38px); line-height: 1.2;
  letter-spacing: -0.018em; color: var(--paper); margin: 0;
}
.sc-result-h em { font-style: italic; color: var(--salmon-glow); }

.sc-result-score {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: clamp(72px, 9vw, 120px); line-height: 1;
  color: var(--paper); margin: 0;
  letter-spacing: -0.04em;
  text-align: right;
}
.sc-result-score .sc-score-num em {
  font-style: italic; color: var(--salmon-glow);
}
.sc-result-score-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.10em; color: var(--slate);
  text-transform: uppercase; margin: 6px 0 0;
  text-align: right;
}

/* Dimension breakdown */
.sc-result-dims {
  margin: 50px 0 0;
}
.sc-result-section-h {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--midnight-moss); margin: 0 0 24px;
  display: inline-flex; align-items: center; gap: 12px;
}
.sc-result-section-h::before { content: ""; width: 28px; height: 1px; background: var(--salmon-deep); }

.sc-dim-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 22px;
  padding: 20px 0;
  border-top: 1px solid rgba(30,30,28,0.16);
  align-items: start;
}
.sc-dim-row:last-child { border-bottom: 1px solid rgba(30,30,28,0.16); }
@media (max-width: 720px) {
  .sc-dim-row { grid-template-columns: 1fr; gap: 8px; }
}
.sc-dim-row-num {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.10em; color: var(--salmon-deep); font-weight: 600;
  padding-top: 4px;
}
.sc-dim-row-body h4 {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 21px; line-height: 1.18; letter-spacing: -0.012em;
  color: var(--charcoal); margin: 0 0 8px;
}
.sc-dim-row-body .diag {
  font-size: 14.5px; line-height: 1.55; color: var(--midnight-moss);
  margin: 0 0 8px; max-width: 580px;
}
.sc-dim-row-body .route {
  font-size: 13.5px; color: var(--midnight-moss);
  border-bottom: 1px solid rgba(58,57,50,0.4);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color 220ms ease, border-color 220ms ease;
  display: inline-block;
}
.sc-dim-row-body .route:hover { color: var(--salmon-deep); border-color: var(--salmon-deep); }
.sc-dim-row-score {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 28px; line-height: 1;
  color: var(--charcoal); white-space: nowrap;
  letter-spacing: -0.02em;
}
.sc-dim-row-score em { font-style: italic; color: var(--salmon-deep); }
.sc-dim-row-score .sub {
  display: block;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--slate); letter-spacing: 0.08em;
  margin-top: 4px;
  font-style: normal;
}

/* Top 3 priorities */
.sc-priorities {
  margin: 50px 0 0;
}
.sc-priorities ol {
  list-style: none; padding: 0; margin: 0;
}
.sc-priorities li {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 18px; padding: 20px 0;
  border-top: 1px solid rgba(30,30,28,0.16);
}
.sc-priorities li:last-child { border-bottom: 1px solid rgba(30,30,28,0.16); }
.sc-priorities .num {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 32px; line-height: 1; color: var(--salmon-deep);
  letter-spacing: -0.02em;
}
.sc-priorities h4 {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: 22px; line-height: 1.2;
  color: var(--charcoal); margin: 0 0 6px;
}
.sc-priorities p {
  font-size: 15px; line-height: 1.55; color: var(--midnight-moss);
  margin: 0; max-width: 640px;
}

/* Engagement-shape recommendation */
.sc-shape {
  margin: 50px 0 0;
  padding: 40px 44px;
  background: var(--stone);
  border-radius: 8px;
}
.sc-shape h3 {
  font-family: 'Zilla Slab', 'Roca One', Georgia, serif; font-weight: 300;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1.18;
  letter-spacing: -0.018em; color: var(--charcoal); margin: 0 0 14px;
}
.sc-shape h3 em { font-style: italic; color: var(--salmon-deep); }
.sc-shape p {
  font-size: 16px; line-height: 1.55; color: var(--midnight-moss);
  margin: 0 0 12px; max-width: 660px;
}
.sc-shape-ctas {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 26px;
}
/* Result-panel CTAs use the site-locked .btn / .btn-primary / .btn-ghost
   pattern (defined in the page <style>). The .sc-shape-prim and
   .sc-shape-secondary classes are layout-only modifiers now — the
   styling comes from .btn. May 2 (locked): converted from one-off pill
   + underlined-link treatment to match every other CTA on the site. */