/* Fehling Profile base styles. Every brand-specific value is a custom property
   below and gets overridden by the per-site theme file loaded after this one.

   The accent ramp has three steps and they are not interchangeable:
     --f-accent        carries text. Either it sits on the card as small text or
                       white text sits on it. Must clear 4.5:1 against white.
     --f-accent-dk     the darker press/hover partner. Also >= 4.5:1 on white.
     --f-accent-bright the loud brand colour, for fills that nothing sits on top
                       of (progress bars, selected dots) and for text on a dark
                       background. Never put small text on it or under it.
   A brand whose signature colour is too light for text sets --f-accent to a
   darkened version and keeps the signature in --f-accent-bright. */

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

:root {
  --f-bg:      #EEECE8;
  --f-card:    #FFFFFF;
  --f-ink:     #0A0A0A;
  --f-body:    #3A3A3A;
  --f-muted:   #6E7376;
  --f-border:  #DCD8D1;
  --f-accent:    #0085CA;
  --f-accent-dk: #00609A;
  --f-accent-bright: #0085CA;
  --f-accent-tint: #E7F2F9;

  /* Result-card slot ramp. Colour is assigned by card slot rather than by type,
     because two slots can resolve to the same type and per-type colour would
     render the whole profile monochrome. Read by results.js at render time.
     All three carry both white text and small text on white, so all three must
     clear 4.5:1 against white. */
  --f-slot-1: #0A0A0A;
  --f-slot-2: #00609A;
  --f-slot-3: #0085CA;

  --f-nav-bg:    rgba(247,246,243,0.92);
  --f-nav-link:  rgba(10,10,10,0.55);
  --f-bar-link:  rgba(255,255,255,0.72);
  --f-badge-bg:  #EFEDE9;

  --f-font-body:   'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-font-head:   'Montserrat', sans-serif;
  --f-font-script: 'Kalam', cursive;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-font-body);
  background: var(--f-bg);
  color: var(--f-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display { font-family: var(--f-font-head); font-weight: 900; color: var(--f-ink); }

/* Orphan control. `balance` evens out short headings so a header never drops a
   lone word; `pretty` pulls a stranded last word up on body copy. Browsers
   without support just wrap normally, so nothing breaks. Applies to print too,
   since the PDF is rendered by the same engine. */
h1, h2, h3, h4, .tcard-name, .keep, .moves-title h2 { text-wrap: balance; }
p, li, .tcard-sub, .dim-label span, .spec-tag { text-wrap: pretty; }
/* "Truth-Teller" was splitting at its hyphen inside the narrow type chips. */
.spec-name { white-space: nowrap; }
svg.ico, svg.ico-sm, svg.ico-md, svg.ico-lg { display: block; }
.ico    { width: 20px; height: 20px; }
.ico-sm { width: 18px; height: 18px; }
.ico-md { width: 26px; height: 26px; }
.ico-lg { width: 34px; height: 34px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.screen[hidden] { display: none; }

/* ── site nav ──
   Ported from the homepage so the assessment doesn't look like a different
   site. Anchors point back at the homepage since those sections live there.
   The compact header.bar below is kept for print only: it becomes the PDF's
   branded band, where a fixed site nav makes no sense. */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--f-nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--f-border);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 60px; height: 64px;
}
.nav-logo { font-size: 13px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--f-ink); text-decoration: none; display: flex; align-items: center; }
/* A brand that ships a wordmark image sets --f-nav-logo-h; text marks ignore it. */
.nav-logo img { height: var(--f-nav-logo-h, 24px); width: auto; display: block; }
.nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }
.nav-links a { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--f-nav-link); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--f-ink); }
.nav-book { background: var(--f-accent) !important; color: #fff !important; padding: 9px 22px; letter-spacing: 0.15em !important; transition: background 0.2s !important; white-space: nowrap; }
.nav-book:hover { background: var(--f-accent-dk) !important; }
/* clears the fixed nav */
body { padding-top: 64px; }

@media (max-width: 960px) { nav { padding: 0 24px; } }
@media (max-width: 640px) {
  .nav-logo { font-size: 11px; }
  .nav-links { gap: 16px; }
  .nav-links li:not(:last-child) { display: none; }
}

/* ── header (print only; the nav above replaces it on screen) ── */
header.bar {
  background: var(--f-ink);
  color: #fff;
  padding: 16px 28px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mark { font-weight: 900; font-size: 15px; letter-spacing: 0.06em; color: #fff; line-height: 1; text-decoration: none; }
.mark span { color: var(--f-accent-bright); }
.bar a.back { color: var(--f-bar-link); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.bar a.back:hover { color: #fff; }

/* ── intro ── */
.intro { padding: 76px 0 90px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--f-accent-dk); margin-bottom: 18px; }
.intro h1 { font-size: clamp(40px, 7vw, 76px); line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 22px; }
.intro h1 em { font-style: normal; color: var(--f-accent); }
.intro .lede { font-size: 19px; max-width: 620px; margin-bottom: 34px; }
.intro .lede + .lede { margin-top: -22px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 44px 0 38px; }
.step { background: var(--f-card); border: 1px solid var(--f-border); border-radius: 14px; padding: 24px; }
.step h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--f-muted); }
.step .num { font-weight: 900; font-size: 13px; color: #fff; background: var(--f-accent); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--f-accent); color: #fff; text-decoration: none;
  transition: transform 0.15s, background 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--f-accent-dk); transform: translateY(-1px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.btn.ghost { background: transparent; color: var(--f-ink); border: 1.5px solid var(--f-border); }
.btn.ghost:hover { background: #fff; border-color: var(--f-ink); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.fine { font-size: 12.5px; color: var(--f-muted); max-width: 620px; margin-top: 26px; }

/* Honeypot wrapper. Off-canvas rather than display:none, because some bots skip
   fields they can tell are hidden. Screen readers skip it via aria-hidden. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── quiz ── */
.quiz { padding: 40px 0 100px; max-width: 780px; }
.progress { height: 4px; background: var(--f-border); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.progress > div { height: 100%; background: var(--f-accent-bright); width: 0; transition: width 0.3s ease; }
.quiz-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.quiz-meta .eyebrow { margin: 0; }
.quiz-meta .count { font-size: 12px; font-weight: 700; color: var(--f-muted); letter-spacing: 0.08em; }
#quiz-q { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.22; letter-spacing: -0.01em; margin: 22px 0 14px; }
.pick-one {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--f-muted); margin-bottom: 16px;
}

.opt {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: var(--f-card); border: 1.5px solid var(--f-border); border-radius: 12px;
  padding: 17px 20px; margin-bottom: 10px; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--f-body);
  transition: border-color 0.14s, background 0.14s, transform 0.1s;
}
.opt:hover { border-color: var(--f-ink); transform: translateX(2px); }
.opt-dot { flex: 0 0 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--f-border); transition: 0.14s; }
.opt.is-selected { border-color: var(--f-accent); background: var(--f-accent-tint); }
.opt.is-selected .opt-dot { border-color: var(--f-accent-bright); background: var(--f-accent-bright); box-shadow: inset 0 0 0 3px #fff; }

/* ── type spectrums ──
   Same markup runs horizontally under the cards (hype) and vertically in the
   pattern panel (fehl). Unmarked types stay muted so the marked ones carry. */
.spec {
  display: grid; align-items: center; gap: 4px;
  border: 1.5px solid var(--f-border); border-radius: 11px;
  background: var(--f-card); padding: 12px 10px;
}
.spec-badge {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--f-badge-bg); color: var(--f-muted);
}
.spec-name { font-weight: 800; font-size: 13px; letter-spacing: -0.01em; color: var(--f-muted); }
.spec-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--f-accent-dk); min-height: 12px;
}
.spec.is-need   { border-color: var(--f-accent-dk); background: var(--f-accent-tint); }
.spec.is-give   { border-color: var(--f-accent); background: var(--f-accent-tint); }
.spec.is-you    { border-color: var(--f-accent); background: var(--f-accent-tint); }
.spec.is-both   { border-color: var(--f-ink); background: #fff; }
.spec.is-sec    { border-color: var(--f-accent); border-style: dashed; }
.spec.is-need .spec-badge { background: var(--f-accent-dk); color: #fff; }
.spec.is-give .spec-badge { background: var(--f-accent); color: #fff; }
.spec.is-you .spec-badge  { background: var(--f-accent); color: #fff; }
.spec.is-both .spec-badge { background: var(--f-ink); color: #fff; }
.spec.is-sec  .spec-badge { background: #fff; color: var(--f-accent); box-shadow: inset 0 0 0 1.5px var(--f-accent); }
.spec.is-need .spec-name, .spec.is-give .spec-name, .spec.is-you .spec-name,
.spec.is-both .spec-name, .spec.is-sec .spec-name { color: var(--f-ink); }

/* horizontal: all seven across, under the type cards */
.spectrum-band { margin-bottom: 22px; }
.spectrum-band .spec-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.spectrum-band .spec { justify-items: center; text-align: center; }
.spectrum-band .note { margin: 14px 0 0; }

/* vertical: fills the column beside the taller Flip breakdown */
.spectrum-col { margin-top: 26px; border-top: 1.5px solid var(--f-border); padding-top: 18px; }
.spectrum-col h3 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--f-muted); margin-bottom: 12px;
}
.spectrum-col .spec {
  grid-template-columns: 30px 1fr auto; gap: 11px; text-align: left;
  padding: 8px 12px; margin-bottom: 7px;
}

/* Back sits left, Continue right, so the forward action is where the thumb is. */
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }

/* ── interstitial ── */
.inter { padding: 110px 0; max-width: 660px; }
.inter h2 { font-size: clamp(30px, 5vw, 46px); line-height: 1.02; text-transform: uppercase; margin-bottom: 18px; }
.inter p { font-size: 18px; margin-bottom: 32px; }

/* ── likert ── */
.flip-sec { padding: 40px 0 100px; max-width: 820px; }
.flip-sec h2 { font-size: clamp(28px, 4.6vw, 42px); line-height: 1.04; text-transform: uppercase; margin-bottom: 14px; }
.flip-sec .lede { font-size: 17px; margin-bottom: 30px; }
.likert { background: var(--f-card); border: 1px solid var(--f-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 12px; }
.likert-q { font-size: 16px; color: var(--f-ink); margin-bottom: 14px; display: flex; gap: 12px; }
.likert-n { font-size: 12px; font-weight: 800; color: var(--f-muted); flex: 0 0 20px; padding-top: 3px; }
.likert-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lk { background: var(--f-bg); border: 1.5px solid var(--f-border); border-radius: 9px; padding: 9px 4px; cursor: pointer; font: inherit; transition: 0.14s; }
.lk:hover { border-color: var(--f-ink); }
.lk-num { display: block; font-weight: 900; font-size: 15px; color: var(--f-ink); }
.lk-label { display: block; font-size: 10px; color: var(--f-muted); letter-spacing: 0.02em; margin-top: 2px; }
/* Per-button labels don't fit under a 5-across scale on a phone, so narrow
   screens get end anchors instead. Hidden wherever the labels themselves show. */
.likert-anchors { display: none; justify-content: space-between; margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--f-muted); }
.lk.is-selected { background: var(--f-accent-bright); border-color: var(--f-accent-bright); }
.lk.is-selected .lk-num, .lk.is-selected .lk-label { color: #fff; }
.flip-foot { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--f-bg) 26%); padding: 26px 0 8px; display: flex; gap: 16px; align-items: center; }
.flip-foot .count { font-size: 13px; font-weight: 700; color: var(--f-muted); }

/* ── gate ── */
.gate { padding: 90px 0; max-width: 520px; }
.gate h2 { font-size: clamp(28px, 5vw, 44px); line-height: 1.02; text-transform: uppercase; margin-bottom: 14px; }
.gate p.lede { font-size: 17px; margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--f-ink); margin-bottom: 7px; }
.field input { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1.5px solid var(--f-border); border-radius: 10px; background: var(--f-card); color: var(--f-ink); }
.field input:focus { outline: none; border-color: var(--f-accent); }

/* ── results ── */
.results { padding: 34px 0 0; }
.r-hero { display: grid; grid-template-columns: 1fr 2.15fr; gap: 30px; align-items: start; margin-bottom: 30px; }
.r-hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.02em; }
.r-hero h1 .or { color: var(--f-accent); }
.r-date { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f-muted); margin: 16px 0 18px; }
.r-lede { font-size: 17px; color: var(--f-ink); }
.r-lede span { display: block; }
.r-lede span + span { margin-top: 12px; }
/* Handwritten sign-off, set slightly off-axis so it reads as written on, not typeset. */
.keep {
  font-family: var(--f-font-script); font-size: 26px; color: var(--f-ink);
  border-bottom: 2px solid var(--f-accent); display: inline-block;
  margin-top: 24px; line-height: 1.1; padding: 0 4px 2px 0;
  transform: rotate(-3.5deg); transform-origin: left center;
}

#r-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tcard { background: var(--f-card); border: 1px solid var(--f-border); border-radius: 14px; padding: 24px 20px; text-align: center; }
.tcard-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 18px; color: var(--f-muted); }
.tcard-badge { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; color: #fff; }
.tcard-name { font-size: 24px; text-transform: uppercase; line-height: 1; margin-bottom: 10px; }
.tcard-band { font-size: 19px; color: var(--f-accent-dk); }
.tcard-sub { font-size: 13px; color: var(--f-muted); line-height: 1.5; }
.ring { width: 128px; height: 128px; margin: 0 auto 12px; display: block; }
.ring-num { font-weight: 900; font-size: 38px; fill: var(--f-ink); text-anchor: middle; font-family: var(--f-font-head); }
.ring-den { font-size: 13px; fill: var(--f-muted); text-anchor: middle; font-family: var(--f-font-head); }

.note { font-size: 13px; color: var(--f-muted); margin-top: 16px; }

.panel { background: var(--f-card); border: 1px solid var(--f-border); border-radius: 14px; padding: 26px; }
.panel > h2 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.panel > .sub { font-size: 13.5px; color: var(--f-muted); margin-bottom: 22px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.grid-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

/* chain */
#r-chain { display: flex; align-items: flex-start; gap: 6px; }
.chain-step { flex: 1; text-align: center; }
.chain-badge { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; color: #fff; }
.chain-step h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.chain-step p { font-size: 12.5px; color: var(--f-muted); line-height: 1.45; }
.chain-arrow { color: var(--f-muted); padding-top: 18px; font-size: 18px; }

/* bullet lists */
ul.checks { list-style: none; }
/* Panels without a subhead had their first bullet 4px under the header. */
.panel > h2 + ul.checks { margin-top: 18px; }
ul.checks li { position: relative; padding-left: 28px; font-size: 14px; margin-bottom: 11px; color: var(--f-body); }
ul.checks li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--f-accent-dk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
ul.checks.teal li::before   { background-color: var(--f-accent); }
ul.checks.orange li::before { background-color: var(--f-ink); }

/* Kalam runs larger and heavier than Caveat at the same px, so sizes step down. */
.hand { font-family: var(--f-font-script); font-size: 16px; line-height: 1.4; margin-top: 18px; display: block; }
/* Equal-height columns pooled their slack at the bottom of the shorter panels.
   Anchoring the closing line turns that void into spacing above a footer. */
.grid-3 .panel, .grid-hero .panel { display: flex; flex-direction: column; }
.grid-3 .hand { margin-top: auto; padding-top: 18px; }
#r-flip-note { margin-top: auto; padding-top: 18px; }
.hand.teal { color: var(--f-accent-dk); }
.hand.orange { color: var(--f-ink); }

/* dimensions */
.dim { display: grid; grid-template-columns: 26px 1fr 200px 60px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--f-bg); }
.dim:last-child { border-bottom: 0; }
.dim-ico { color: var(--f-accent); }
.dim-label strong { display: block; font-weight: 900; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--f-ink); }
.dim-label span { font-size: 12px; color: var(--f-muted); }
.dim-track { height: 9px; background: var(--f-bg); border-radius: 999px; overflow: hidden; }
.dim-fill { height: 100%; background: var(--f-accent-bright); border-radius: 999px; }
.dim-score { font-weight: 900; font-size: 15px; color: var(--f-ink); text-align: right; }
.dim-score span { font-size: 11px; color: var(--f-muted); font-weight: 600; }

/* hype gap */
.gap-pair { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 10px; margin-bottom: 18px; }
.gap-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px; }
.gap-row { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.gap-row h4 { font-size: 21px; text-transform: uppercase; line-height: 1; }
.gap-side p { font-size: 12.5px; color: var(--f-muted); }
.gap-op { font-weight: 900; font-size: 26px; color: var(--f-ink); text-align: center; }
.gap-callout { background: var(--f-accent-tint); border-radius: 11px; padding: 18px; }
.gap-callout strong { display: block; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--f-accent-dk); margin-bottom: 8px; }
.gap-callout p { font-size: 13.5px; margin-bottom: 8px; }
.gap-callout p:last-child { margin-bottom: 0; }

/* moves */
.moves-band { display: grid; grid-template-columns: 1fr 3fr; gap: 16px; margin-top: 16px; }
/* Was solid black, which outranked every other element on a light page.
   Tinted with a blue rule still reads as the band's anchor without pulling
   the eye there first. */
.moves-title {
  background: var(--f-accent-tint); border-left: 5px solid var(--f-accent);
  border-radius: 14px; padding: 26px; display: flex; flex-direction: column; justify-content: center;
}
.moves-title h2 { color: var(--f-ink); font-size: 26px; text-transform: uppercase; line-height: 1; }
.moves-title h2 span { color: var(--f-accent-dk); }
#r-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.move { background: var(--f-card); border: 1px solid var(--f-border); border-radius: 14px; padding: 22px; display: flex; gap: 14px; }
.move-n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--f-accent); color: #fff; font-weight: 900; font-size: 12px; display: grid; place-items: center; }
.move h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 7px; }
.move p { font-size: 13px; color: var(--f-muted); line-height: 1.5; }

/* post-results opt-ins */
.optin { margin-top: 22px; max-width: 720px; }
.optin > .sub { margin-bottom: 18px; }
.optin-row {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  padding: 13px 0; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--f-body);
  border-top: 1px solid var(--f-border);
}
.optin-row input {
  width: 20px; height: 20px; margin: 0; accent-color: var(--f-accent); cursor: pointer;
  /* The label's line-height is 1.5 on 14px, so the first line's optical centre
     sits about 2px below the box's own centre at the top of the grid cell. */
  margin-top: 1px;
}
.optin-actions { margin-top: 20px; }
.optin-done { margin-top: 16px; color: var(--f-ink); font-weight: 600; }

/* share footer */
.share { border-top: 1px solid var(--f-border); margin-top: 40px; padding: 30px 0 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.share h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.share p { font-size: 13px; color: var(--f-muted); }
.share-icons { display: flex; gap: 10px; }
.share-icons a[hidden], .share-icons button[hidden] { display: none; }
#share-native { padding: 13px 26px; }
.share-icons a, .share-icons button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--f-border); background: var(--f-card); display: grid; place-items: center; color: var(--f-ink); cursor: pointer; text-decoration: none; transition: 0.14s; }
.share-icons a:hover, .share-icons button:hover { border-color: var(--f-ink); }
.share-icons .copied { background: var(--f-accent); border-color: var(--f-accent); color: #fff; }

.section-gap { margin-top: 16px; }
.print-foot { display: none; }

/* ── responsive ── */
@media (max-width: 980px) {
  #r-cards, .grid-3, #r-moves { grid-template-columns: 1fr 1fr; }
  .r-hero, .moves-band, .grid-hero { grid-template-columns: 1fr; }
  .dim { grid-template-columns: 24px 1fr 60px; }
  .dim-track { grid-column: 1 / -1; }
  /* Seven across cannot fit a narrow screen. `1fr` will not shrink past the
     type names either, because .spec-name is nowrap, so the row has to wrap
     onto fewer columns rather than overflow. */
  .spectrum-band .spec-row { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  #r-cards, .grid-3, #r-moves, .grid-2 { grid-template-columns: 1fr; }
  .spectrum-band .spec-row { grid-template-columns: repeat(2, 1fr); }
  .spectrum-col .spec { grid-template-columns: 30px 1fr auto; }
  .share { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  .steps, #r-cards, .grid-2, .grid-3, #r-moves { grid-template-columns: 1fr; }
  #r-chain { flex-direction: column; align-items: stretch; gap: 14px; }
  .chain-arrow { display: none; }
  .chain-step { display: flex; gap: 14px; text-align: left; align-items: flex-start; }
  .chain-badge { margin: 0; flex: 0 0 54px; }
  .likert-scale { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .lk-label { display: none; }
  .likert-anchors { display: flex; }
  .gap-pair { grid-template-columns: 1fr; }
  .gap-op { padding: 6px 0; }
}

/* ── one-page print / PDF ──
   Every dimension below is retuned to fit a single Letter page. Media queries
   above are re-declared here because print viewport width can trip them. */
@media print {
  @page { size: letter portrait; margin: 0.3in; }

  html, body { background: #fff; font-size: 7.2pt; line-height: 1.34; }
  .share, #optin, #intro, #interstitial, #quiz, #flip, #gate { display: none !important; }

  /* branded header band */
  nav { display: none; }
  body { padding-top: 0; }
  header.bar { display: flex; padding: 5pt 9pt; border-radius: 5pt; margin-bottom: 7pt; }
  .mark { font-size: 8pt; letter-spacing: 0.08em; }
  .bar a.back { font-size: 5.4pt; }

  /* branded footer band */
  .print-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10pt;
    margin-top: 6pt; padding-top: 4.5pt; border-top: 1.2pt solid var(--f-accent);
  }
  .pf-mark { font-weight: 900; font-size: 6.4pt; letter-spacing: 0.08em; color: var(--f-ink); }
  .pf-mark span { color: var(--f-accent-bright); }
  .pf-note { font-size: 5pt; color: var(--f-muted); }
  .pf-url  { font-size: 5.6pt; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f-accent-dk); }

  .wrap { max-width: none; padding: 0; }
  .results { padding: 0; }
  .panel, .tcard, .move, .moves-band, .grid-2, .grid-3, .grid-hero, .r-hero { break-inside: avoid; }
  .panel, .tcard, .move { border: 0.6pt solid #C9C9C9; border-radius: 6pt; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* hero */
  .r-hero { grid-template-columns: 1fr 2.6fr; gap: 12pt; margin-bottom: 6pt; }
  .r-hero h1 { font-size: 25pt; line-height: 0.88; }
  .r-date { font-size: 5.6pt; margin: 6pt 0 6pt; }
  .r-lede { font-size: 7.4pt; line-height: 1.3; }
  .r-lede span + span { margin-top: 5pt; }
  .keep { font-size: 13pt; margin-top: 8pt; border-bottom-width: 1pt; padding-bottom: 1pt; }

  /* type cards */
  #r-cards { grid-template-columns: repeat(4, 1fr); gap: 7pt; }
  .tcard { padding: 7pt 5pt; }
  .tcard-eyebrow { font-size: 5pt; letter-spacing: 0.1em; margin-bottom: 5pt; }
  .tcard-badge { width: 26pt; height: 26pt; margin-bottom: 5pt; }
  .ico-lg { width: 13pt; height: 13pt; }
  .tcard-name { font-size: 10.5pt; margin-bottom: 3pt; }
  .tcard-band { font-size: 8.5pt; }
  .tcard-sub { font-size: 5.9pt; line-height: 1.25; }
  .ring { width: 44pt; height: 44pt; margin-bottom: 4pt; }

  #r-secondary { font-size: 5.4pt; line-height: 1.25; margin: 0; }

  /* panels */
  .grid-hero, .grid-2, .grid-3, .moves-band { gap: 4.5pt; margin-top: 4.5pt; }
  .grid-hero, .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3, #r-moves { grid-template-columns: repeat(3, 1fr); }
  .panel { padding: 6.5pt; }
  .panel > h2 {
    font-size: 8.5pt; margin-bottom: 4pt; display: inline-block;
    border-bottom: 1.4pt solid var(--f-accent); padding-bottom: 2pt;
  }
  .panel > .sub { font-size: 5.9pt; margin-bottom: 5pt; }
  .note { font-size: 5.8pt; line-height: 1.28; margin-top: 5pt; }

  /* Chain stacks in print, same as it does on mobile. Four columns in a 200pt
     panel gives each step ~35px of text width, which shreds any description
     longer than a few words. Stacked, each step gets the full column. */
  #r-chain { flex-direction: column; align-items: stretch; gap: 3.5pt; }
  .chain-arrow { display: none; }
  .chain-step { display: flex; gap: 4pt; text-align: left; align-items: flex-start; }
  .chain-badge { margin: 0; flex: 0 0 13pt; width: 13pt; height: 13pt; }
  .ico-md { width: 7.5pt; height: 7.5pt; }
  .chain-step h4 { font-size: 5.2pt; margin-bottom: 1pt; text-wrap: nowrap; }
  .chain-step p { font-size: 5.4pt; line-height: 1.26; }

  /* dimensions */
  /* Label column widened from 74pt so dimension subtitles stop orphaning. */
  .dim { grid-template-columns: 12pt 1fr 64pt 26pt; gap: 6pt; padding: 2.2pt 0; border-bottom: 0.5pt solid #EDEDED; }
  .ico-sm { width: 9pt; height: 9pt; }
  .dim-label strong { font-size: 6.2pt; display: inline; }
  .dim-label span { font-size: 5.6pt; margin-left: 4pt; }
  .dim-track { height: 4pt; grid-column: auto; }
  .dim-score { font-size: 7.4pt; }
  .dim-score span { font-size: 5pt; }

  /* lists */
  /* These two subheads are worth the room on screen, not on a one-page PDF. */
  .sub-screen { display: none; }
  .panel > h2 + ul.checks { margin-top: 5pt; }
  ul.checks li { font-size: 6.2pt; padding-left: 11pt; margin-bottom: 2.6pt; line-height: 1.32; }
  ul.checks li::before { width: 7pt; height: 7pt; top: 1pt; background-size: 4.6pt; }
  .hand { font-size: 7.4pt; line-height: 1.35; margin-top: 6pt; }

  /* hype gap */
  .gap-pair { grid-template-columns: 1fr 16pt 1fr; gap: 5pt; margin-bottom: 5pt; }
  .gap-eyebrow { font-size: 5pt; margin-bottom: 3pt; }
  .gap-row { gap: 4pt; margin-bottom: 2pt; }
  .gap-row h4 { font-size: 9.5pt; }
  .gap-side p { font-size: 5.8pt; line-height: 1.3; }
  .gap-op { font-size: 12pt; }
  /* The spectrum band above already states give vs need across all seven,
     so the paired restatement is dropped here to buy back the page. */
  .gap-pair { display: none; }
  .gap-callout { padding: 7pt; border-radius: 5pt; }
  .gap-callout strong { font-size: 5.4pt; margin-bottom: 3pt; }
  .gap-callout p { font-size: 5.9pt; line-height: 1.3; margin-bottom: 2.4pt; }

  /* spectrums: the band keeps its icons, the column drops to name-only pills
     so all seven Fehling Types still print without costing a second page */
  .spectrum-band { margin-bottom: 5pt; padding: 5pt 6.5pt; }
  /* the You need / You give tags say what the subhead said */
  .spectrum-band > .sub { display: none; }
  .spectrum-band > h2 { font-size: 7pt; margin-bottom: 3.5pt; padding-bottom: 1.4pt; }
  /* Print renders at ~758px, which trips the 980px mobile breakpoint above.
     The seven-across layout has to be restated here or the band wraps to four
     columns and pushes the profile onto a second page. */
  .spectrum-band .spec-row { grid-template-columns: repeat(7, 1fr); gap: 3pt; }
  .spectrum-band .spec { padding: 2.6pt 2pt; gap: 1pt; border-width: 0.8pt; border-radius: 4pt; }
  .spectrum-band .spec-badge { width: 11pt; height: 11pt; }
  .spectrum-band .spec-name { font-size: 5.6pt; }
  .spectrum-band .spec-tag { font-size: 4.2pt; min-height: 0; }
  .spectrum-band .note { font-size: 5pt; line-height: 1.25; margin: 3pt 0 0; }

  .spectrum-col { margin-top: 6pt; padding-top: 5pt; border-top-width: 0.8pt; }
  .spectrum-col h3 { font-size: 5pt; letter-spacing: 0.14em; margin-bottom: 3.5pt; }
  .spectrum-col #r-fehl-spectrum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5pt; }
  .spectrum-col .spec {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    padding: 2.4pt 1pt; margin: 0; gap: 0; border-width: 0.8pt; border-radius: 3pt;
  }
  .spectrum-col .spec-badge { display: none; }
  .spectrum-col .spec-name { font-size: 5.2pt; }
  .spectrum-col .spec-tag { font-size: 3.8pt; min-height: 0; }

  /* moves */
  .moves-band { grid-template-columns: 1fr 3.4fr; }
  .moves-title { padding: 9pt; border-radius: 6pt; border-left-width: 3pt; }
  .moves-title h2 { font-size: 12pt; }
  #r-moves { gap: 7pt; }
  .move { padding: 8pt; gap: 6pt; }
  .move-n { flex: 0 0 12pt; height: 12pt; font-size: 6pt; }
  .move h4 { font-size: 6.4pt; margin-bottom: 3pt; }
  .move p { font-size: 5.9pt; line-height: 1.32; }
}