/* ============================================================
   EnterCannected — Cannabis Retail Business Health Check
   Page-specific styles. Reuses design tokens (--green, --white,
   --mid, --dark, --black, --gray, fonts, --edge, --maxw) and
   component conventions (.btn, .cta-field, .eyebrow, .mono,
   .wordmark, .nav, .reveal) already defined in ec-styles.css.
   ============================================================ */

.hc-body { background: var(--black); }

.hc-wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--edge); }
.hc-wrap-results { max-width: 920px; margin: 0 auto; padding: 0 var(--edge); }

.hc-app { padding-top: 96px; }

.hc-nav-label {
  color: var(--gray);
  font-size: 13px;
  margin-right: 20px;
}
.hc-exit-link { border-color: rgba(255,255,255,0.25); color: var(--white); }
.hc-exit-link:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.hc-section { padding: 48px 0 100px; }

/* ---------- INTRO ---------- */
.hc-intro-h1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-size: clamp(32px, 4.4vw, 52px);
  margin: 18px 0 26px;
  max-width: 22ch;
}
.hc-intro-body p { margin-bottom: 16px; max-width: 62ch; }
.hc-intro-time { color: var(--green); margin: 4px 0 36px; font-size: 13px; }

.hc-intro-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.hc-intro-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hc-intro-row-solo { grid-template-columns: 1fr; }
@media (max-width: 640px) { .hc-intro-row { grid-template-columns: 1fr; } }
.hc-start-btn { align-self: flex-start; margin-top: 4px; }
.hc-intro-status {
  min-height: 20px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray);
}
.hc-intro-status.error { color: #ff8a8a; }
.hc-intro-status.success { color: var(--green); }

.hc-privacy-note {
  font-size: 13px; color: var(--gray); max-width: 60ch;
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; margin-top: 8px;
}

/* ---------- RESUME / COMING SOON ---------- */
.hc-resume-card, .hc-comingsoon-card {
  border: 1px solid rgba(90,185,54,0.25);
  border-radius: 24px;
  padding: 44px clamp(24px, 4vw, 56px);
  background: rgba(90,185,54,0.04);
}
.hc-resume-card h2, .hc-comingsoon-card h2 {
  font-family: var(--serif); font-size: clamp(26px, 3vw, 36px);
  margin: 12px 0 16px; line-height: 1.15;
}
.hc-resume-detail { color: var(--gray); margin-bottom: 28px; }
.hc-resume-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hc-notify-form { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.hc-notify-form .cta-field { flex: 1; min-width: 220px; }
.hc-comingsoon-back {
  display: inline-block; margin-top: 24px; color: var(--green);
  font-family: var(--mono); font-size: 13px; text-decoration: none;
  border-bottom: 1px solid rgba(90,185,54,0.4);
}
.hc-comingsoon-back:hover { border-color: var(--green); }

/* ---------- PROGRESS HEADER ---------- */
.hc-progress-head { margin-bottom: 40px; }
.hc-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.hc-progress-category { color: var(--green); font-size: 12px; letter-spacing: 0.14em; }
.hc-progress-qnum { color: var(--gray); font-size: 12px; letter-spacing: 0.1em; }
.hc-progress-business { color: var(--white); font-size: 14px; margin-bottom: 14px; opacity: 0.75; }
.hc-progress-bar-track {
  width: 100%; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.hc-progress-bar-fill {
  height: 100%; background: var(--green); border-radius: 999px;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 12px var(--green-glow);
}
.hc-progress-pct { margin-top: 8px; font-size: 11px; color: var(--gray); letter-spacing: 0.12em; }

/* ---------- QUESTION CARDS (accordion) ---------- */
.hc-questions { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }

.hc-qcard {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: border-color .25s, background .25s;
}
.hc-qcard.active { border-color: rgba(90,185,54,0.4); background: rgba(90,185,54,0.03); }
.hc-qcard.answered:not(.active) { cursor: pointer; }
.hc-qcard.answered:not(.active):hover { border-color: rgba(255,255,255,0.25); }

.hc-qcard-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 22px 26px;
}
.hc-qcard-num {
  font-family: var(--mono); font-size: 12px; color: var(--green);
  letter-spacing: 0.1em; display: block; margin-bottom: 8px;
}
.hc-qcard-text { font-size: 18px; line-height: 1.4; color: var(--white); font-weight: 500; }
.hc-qcard-instruction { display: block; font-size: 13px; color: var(--gray); margin-top: 6px; font-weight: 400; }

.hc-qcard-status {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap;
}
.hc-qcard-answered-badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--green); text-transform: uppercase;
  border: 1px solid rgba(90,185,54,0.35); border-radius: 999px; padding: 5px 12px;
}
.hc-qcard-edit-btn {
  background: none; border: none; color: var(--gray); font-size: 13px;
  cursor: pointer; text-decoration: underline; font-family: var(--sans);
}
.hc-qcard-edit-btn:hover { color: var(--white); }

.hc-qcard-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.2,.7,.2,1), opacity .35s;
  opacity: 0;
}
.hc-qcard.active .hc-qcard-panel { opacity: 1; }
.hc-qcard-panel-inner { padding: 0 26px 26px; }

/* Answer rows */
.hc-answers { display: flex; flex-direction: column; gap: 10px; }
.hc-answer-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  cursor: pointer;
  background: rgba(255,255,255,0.015);
  transition: border-color .2s, background .2s;
  text-align: left;
  width: 100%;
}
.hc-answer-row:hover { border-color: rgba(255,255,255,0.3); }
.hc-answer-row:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hc-answer-row.selected {
  border-color: var(--green);
  background: rgba(90,185,54,0.08);
}
.hc-answer-indicator {
  flex-shrink: 0; width: 20px; height: 20px;
  border: 1.5px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
  position: relative;
}
.hc-answer-row.selected .hc-answer-indicator { border-color: var(--green); background: var(--green); }
.hc-answer-indicator.radio { border-radius: 50%; }
.hc-answer-indicator.checkbox { border-radius: 5px; }
.hc-answer-indicator .hc-check-mark { color: var(--black); font-size: 13px; line-height: 1; display: none; font-weight: 700; }
.hc-answer-row.selected .hc-check-mark { display: block; }
.hc-answer-indicator .hc-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--black); display: none; }
.hc-answer-row.selected .hc-radio-dot { display: block; }
.hc-answer-text { font-size: 15px; line-height: 1.45; color: var(--white); }
.hc-answer-row.selected .hc-answer-text { color: var(--white); }
/* Non-color-only affordance: selected rows also get a leading check glyph label for SR + a subtle left accent */
.hc-answer-row.selected::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--green); border-radius: 3px 0 0 3px;
}
.hc-answer-row { position: relative; }

.hc-max-select-note { font-size: 12px; color: var(--gray); margin-top: 6px; font-family: var(--mono); letter-spacing: 0.06em; }

/* ---------- ACTIONS ---------- */
.hc-assessment-actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-top: 8px;
}
.hc-assessment-actions-right { display: flex; align-items: center; gap: 18px; }
.hc-save-exit {
  background: none; border: none; color: var(--gray); font-size: 13px;
  text-decoration: underline; cursor: pointer; font-family: var(--sans);
}
.hc-save-exit:hover { color: var(--white); }
.hc-back-btn:disabled { opacity: 0.35; cursor: default; }

.hc-presubmit-disclosure {
  font-size: 12px; color: var(--gray); max-width: 60ch; line-height: 1.5;
  margin-top: 16px;
}

/* ---------- TERMS OF USE ACCEPTANCE GATE (final-submission checkbox) ----------
   Shown only on the last question, directly above the Continue/"See My
   Results" button (see updatePreSubmitDisclosure() in health-check.js /
   startup-readiness.js). Deliberately self-contained (does not depend on
   .priv-note from legal.css, which isn't loaded on every Health Check
   page) so it renders identically and legibly on both assessments. */
.hc-terms-gate {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-soft);
}
.hc-terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
  max-width: 640px;
}
.hc-terms-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}
.hc-terms-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.hc-terms-checkbox span { flex: 1; }
.hc-terms-checkbox a { color: var(--green); text-decoration: underline; }
.hc-terms-checkbox a:hover { color: var(--white); }
.hc-terms-ack {
  margin: 8px 0 0 28px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray);
  max-width: 600px;
}
.hc-terms-ack a { color: var(--gray); text-decoration: underline; }
.hc-terms-ack a:hover { color: var(--white); }
.hc-terms-error {
  margin: 10px 0 0 28px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,120,120,0.08);
  border: 1px solid rgba(255,120,120,0.3);
  color: #ffb3b3;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  max-width: 600px;
}
@media (max-width: 640px) {
  .hc-terms-ack, .hc-terms-error { margin-left: 0; }
}

/* ---------- INTRO-PAGE NOTICE ACKNOWLEDGMENT (required checkbox) ----------
   The "Notice at Collection / Privacy Policy" acknowledgment shown on the
   direct-URL intro form (above the Start button) is a required checkbox,
   not passive text -- mirrors the homepage form's .cta-consent pattern and
   the final-submission .hc-terms-checkbox gate. Built on top of .priv-note
   (legal.css) for its font-size/color/link styling; this class only adds
   the checkbox + label flex layout on top. */
.hc-consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin-top: 10px;
}
.hc-consent-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}
.hc-consent-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.hc-consent-checkbox span { flex: 1; }
.hc-consent-error {
  margin: 8px 0 0 23px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,120,120,0.08);
  border: 1px solid rgba(255,120,120,0.3);
  color: #ffb3b3;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  max-width: 560px;
}
@media (max-width: 640px) {
  .hc-consent-error { margin-left: 0; }
}

.hc-validation-msg {
  margin-top: 16px; padding: 12px 18px; border-radius: 12px;
  background: rgba(255,120,120,0.08); border: 1px solid rgba(255,120,120,0.3);
  color: #ffb3b3; font-size: 14px;
}

/* ---------- RESULTS ---------- */
.hc-results { padding-top: 0; }
.hc-results-header { text-align: center; margin-bottom: 40px; }
.hc-results-header h1 {
  font-family: var(--serif); font-size: clamp(34px, 5vw, 56px);
  margin: 14px 0 12px; letter-spacing: -0.02em;
}
.hc-results-meta { color: var(--gray); font-size: 14px; }
.hc-results-meta span { margin: 0 8px; }

.hc-results-score-card {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  border: 1px solid rgba(90,185,54,0.25); border-radius: 28px;
  padding: clamp(28px, 4vw, 48px); margin-bottom: 48px;
  background: rgba(90,185,54,0.03);
}
.hc-score-ring-wrap { position: relative; width: 160px; height: 160px; flex-shrink: 0; margin: 0 auto; }
.hc-score-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.hc-score-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
/* Five-stage directional status indicator — each arc is a fixed-length
   segment (not a proportional fill) representing one Business Health
   Level. Inactive segments sit at a low-contrast neutral tone; only the
   segment matching the respondent's current level is highlighted in
   green. This intentionally does not behave like a percentage ring. */
.hc-score-segment {
  fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 8; stroke-linecap: round;
  transition: stroke .5s ease, opacity .5s ease;
}
.hc-score-segment.active {
  stroke: var(--green);
  filter: drop-shadow(0 0 6px var(--green-glow));
}
.hc-score-ring-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.hc-score-ring-word {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray); line-height: 1.5;
}

.hc-score-detail { flex: 1; min-width: 240px; }
.hc-score-level-badge {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--green);
  border: 1px solid rgba(90,185,54,0.4); border-radius: 999px; padding: 5px 14px;
  margin-bottom: 14px;
}
.hc-score-detail h3 { font-family: var(--serif); font-size: 26px; margin-bottom: 10px; }
.hc-score-detail p { font-size: 15px; color: #d0d0d0; max-width: 56ch; margin-bottom: 10px; }

.hc-results-section { margin-bottom: 48px; }
.hc-results-subhead {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 18px;
}
.hc-category-breakdown-note { color: var(--gray); font-size: 13px; margin: -8px 0 16px; }
.hc-strongest-line { color: var(--green); font-size: 15px; margin-bottom: 20px; }

.hc-category-list { display: flex; flex-direction: column; gap: 12px; }
.hc-category-row {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 16px 20px;
}
.hc-category-row-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; font: inherit; text-align: left; color: inherit;
}
.hc-category-row-head:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px;
}
.hc-category-name { font-size: 15px; color: var(--white); }
.hc-category-head-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hc-category-level {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--gray); white-space: nowrap;
}
/* Five-stage directional status indicator (replaces the old percentage
   fill bar). Each segment represents one Business Health Level; only
   the segment matching this category's current level is highlighted.
   This intentionally does not scale with the exact numerical score. */
.hc-category-status { display: flex; gap: 4px; margin-top: 10px; }
.hc-category-status-seg {
  flex: 1; height: 4px; min-width: 8px; border-radius: 2px;
  background: rgba(255,255,255,0.08); transition: background .5s ease;
}
.hc-category-status-seg.active { background: var(--green); }
.hc-category-expand {
  max-height: 0; overflow: hidden; transition: max-height .35s ease;
}
/* Raised from 300px: the accordion panel now also contains the "Where
   to Go Deeper" block (.hc-deeper below), which needs more room than
   the personalized result copy alone did. This is a CSS max-height
   transition ceiling, not a fixed visible height -- actual content
   still determines the real rendered height. */
.hc-category-row.open .hc-category-expand { max-height: 900px; }
.hc-category-expand-inner { padding-top: 14px; font-size: 14px; color: #c7c7c7; line-height: 1.5; }
.hc-category-toggle-icon { font-family: var(--mono); color: var(--gray); font-size: 13px; }

/* "Where to Go Deeper" block -- per-category (inside the Category
   breakdown accordion) and once at the overall/cross-category level
   (.hc-deeper-overall). Deliberately restrained/subordinate to the
   personalized result copy above it: smaller type, muted supporting
   tones, a single small green eyebrow rather than a large promotional
   headline. Uses only existing EnterCannected design tokens (--green,
   --gray, --serif, --mono) -- no new colors/fonts introduced. */
.hc-deeper {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08);
}
.hc-deeper-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green); margin: 0 0 8px;
}
.hc-deeper-transition { font-size: 13px; color: #a9a9a9; line-height: 1.5; margin: 0 0 10px; }
.hc-deeper-name { font-family: var(--serif); font-size: 17px; color: var(--white); margin: 0 0 6px; font-weight: 400; }
.hc-deeper-body { font-size: 13px; color: #a9a9a9; line-height: 1.55; margin: 0 0 12px; max-width: 62ch; }
.hc-deeper-cta {
  display: inline-block; font-size: 13px; color: var(--green); text-decoration: none;
  border-bottom: 1px solid rgba(90,185,54,0.4); padding-bottom: 1px; margin-bottom: 8px;
}
.hc-deeper-cta:hover, .hc-deeper-cta:focus-visible { border-bottom-color: var(--green); }
.hc-deeper-cta:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 3px; }
.hc-deeper-microcopy { font-size: 12px; color: var(--gray); line-height: 1.5; margin: 0; font-style: italic; }

/* Overall/cross-category block sits inside its own results section
   (.hc-deeper-overall-section), styled slightly more prominently than a
   per-category instance (no top border needed, card-like container)
   but still visually secondary to the score/category sections above it. */
.hc-deeper-overall-section { display: block; }
.hc-deeper-overall {
  margin-top: 0; border-top: none;
  border: 1px solid rgba(90,185,54,0.2); border-radius: 16px; padding: 22px 26px;
  background: rgba(90,185,54,0.03);
}
.hc-deeper-overall .hc-deeper-body { max-width: 68ch; }

/* Neutral, non-alarming badges by level — four directional tones from
   the existing EnterCannected palette (brand green, muted sage, warm
   yellow, warm amber). None are alarm-red or "danger" red. V2 uses a
   4-band scoreBands system (strong_foundation / generally_structured /
   developing / needs_closer_look); the old 5-tier classes below are
   kept only for any legacy/historical V1 rendering path. */
.hc-badge-strong_foundation, .hc-badge-strong-foundation { color: var(--green); border-color: rgba(90,185,54,0.4); }
.hc-badge-generally_structured, .hc-badge-generally-structured { color: #7ecfa9; border-color: rgba(126,207,169,0.4); }
.hc-badge-developing { color: #d9c95a; border-color: rgba(217,201,90,0.4); }
.hc-badge-needs_closer_look, .hc-badge-needs-a-closer-look { color: #e0a25a; border-color: rgba(224,162,90,0.4); }
.hc-badge-priority-area { color: #e08a8a; border-color: rgba(224,138,138,0.4); }

.hc-insight-list { display: flex; flex-direction: column; gap: 20px; }
.hc-insight-card {
  border-left: 3px solid var(--green); padding: 4px 0 4px 22px;
}
.hc-insight-card h4 { font-family: var(--serif); font-size: 19px; margin-bottom: 8px; font-weight: 400; }
.hc-insight-card p { font-size: 14px; color: #c7c7c7; margin-bottom: 8px; }
.hc-insight-card .hc-insight-limitation { color: var(--gray); font-size: 13px; font-style: italic; }

/* Answer-responsive evidence block ("What Your Answers Show") -- used by
   the Startup Dispensary Readiness Health Check's category accordion and
   insight cards. Purely additive: no existing selector above is modified,
   and the Business Health Check does not currently emit these classes, so
   this addition has no effect on its results page. */
.hc-evidence-heading { font-size: 13px; margin-top: 10px; margin-bottom: 4px; color: #e6e6e6; }
.hc-evidence-line { font-size: 13.5px; color: #c7c7c7; line-height: 1.5; margin-bottom: 6px; }
.hc-evidence-line strong { color: #e6e6e6; }

.hc-flags-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.hc-flag-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px; }
.hc-flag-count { font-family: var(--serif); font-size: 32px; color: var(--green); line-height: 1; margin-bottom: 8px; }
.hc-flag-title { font-size: 14px; color: var(--white); margin-bottom: 8px; font-weight: 600; }
.hc-flag-body { font-size: 13px; color: #c0c0c0; line-height: 1.5; }

.hc-reco-list { display: flex; flex-direction: column; gap: 14px; }
.hc-reco-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid rgba(90,185,54,0.25); border-radius: 16px; padding: 22px 26px;
  background: rgba(90,185,54,0.03); flex-wrap: wrap;
}
.hc-reco-info { flex: 1; min-width: 220px; }
.hc-reco-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--gray); text-transform: uppercase; margin-bottom: 6px; }
.hc-reco-name { font-family: var(--serif); font-size: 21px; margin-bottom: 6px; }
.hc-reco-why { font-size: 14px; color: #c7c7c7; }

.hc-disclaimer {
  border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 24px 0; margin-bottom: 48px;
}
.hc-disclaimer p { font-size: 13px; color: var(--gray); line-height: 1.6; max-width: 72ch; }

/* "YOUR NEXT VIEW" block (Startup Dispensary Readiness Health Check,
   2026-08-10 Change 2) -- replaces the old limitation-oriented disclaimer
   copy on the Startup results page/email. Card-style container matching
   .hc-deeper-overall's visual weight (a step more prominent than the
   plain .hc-disclaimer text block it replaces, since it now carries a
   primary CTA), but still clearly secondary to the score/category
   sections and the existing Final CTA below it. */
.hc-your-next-view {
  border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 32px 0; margin-bottom: 48px;
}
.hc-your-next-view .eyebrow { margin-bottom: 14px; }
.hc-your-next-view-heading { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 0 0 14px; max-width: 32ch; }
.hc-your-next-view p { font-size: 14px; color: #c7c7c7; line-height: 1.6; max-width: 68ch; margin: 0 0 12px; }
.hc-your-next-view-actions { margin-top: 18px; }

.hc-final-cta { text-align: center; margin-bottom: 40px; }
.hc-final-cta h2 { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); max-width: 26ch; margin: 0 auto 18px; line-height: 1.15; }
.hc-final-cta p { max-width: 62ch; margin: 0 auto 12px; color: #c7c7c7; font-size: 15px; }
.hc-final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 26px 0 14px; }
.hc-final-cta-support { font-size: 13px; color: var(--gray); max-width: 52ch; margin: 10px auto 0; }

/* "Talk Through My Results" (#hcFinalCtaSecondary): visible but
   non-interactive until the secure, signed Fit & Focus URL for this
   completed Health Check has actually arrived -- see health-check.js
   setFinalCtaSecondaryPending()/revealFitFocusCta()/
   setFinalCtaSecondaryFailed(). Never a dead link: cursor + reduced
   opacity communicate the unavailable state visually while
   aria-disabled/tabindex="-1" (set in JS) cover assistive tech and
   keyboard focus. */
.hc-final-cta-actions .btn.is-pending,
.hc-final-cta-actions .btn.is-failed {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.hc-fitfocus-status {
  font-size: 13px;
  color: var(--gray);
  max-width: 52ch;
  margin: 12px auto 0;
  text-align: center;
}
.hc-fitfocus-status a { color: var(--green); text-decoration: underline; }

.hc-email-cta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding-bottom: 40px; }
.hc-start-over-link { background: none; border: none; color: var(--gray); text-decoration: underline; cursor: pointer; font-size: 13px; font-family: var(--sans); }
.hc-start-over-link:hover { color: var(--white); }

/* ---------- FIT & FOCUS CALL CTA (results page, after Email My Results) ---------- */
/* Populated + revealed only once a signed eligibility URL is available
   for this session (see health-check.js sendCompletionNotification) --
   hidden by default in markup above. Never placed inside the category
   breakdown / insight cards / phone demo / sticky overlay. */
.hc-fitfocus-cta {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hc-fitfocus-cta h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 12px; }
.hc-fitfocus-cta p { color: #c7c7c7; font-size: 14px; line-height: 1.6; max-width: 52ch; margin: 0 auto 20px; }

/* ---------- MODALS ---------- */
.hc-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 500;
  backdrop-filter: blur(4px);
}
/* The [hidden] attribute must win over the class's own display:flex —
   otherwise a modal that JS has marked hidden still renders (and
   intercepts clicks) because both rules share the same specificity and
   this stylesheet is applied after the UA stylesheet. */
.hc-modal-overlay[hidden] { display: none; }
.hc-modal {
  background: var(--black); border: 1px solid rgba(90,185,54,0.3);
  border-radius: 24px; padding: clamp(24px, 4vw, 40px); max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto; position: relative;
}
.hc-modal-sm { max-width: 420px; }
.hc-modal h2 { font-family: var(--serif); font-size: 26px; margin-bottom: 10px; }
.hc-modal-sub { color: var(--gray); font-size: 14px; margin-bottom: 24px; }
.hc-modal-close {
  position: absolute; top: 20px; right: 20px; background: none; border: none;
  color: var(--gray); font-size: 16px; cursor: pointer;
}
.hc-modal-close:hover { color: var(--white); }

.hc-modal-field { display: block; margin-bottom: 16px; }
.hc-modal-field span { display: block; font-size: 13px; color: var(--gray); margin-bottom: 6px; }
.hc-modal-field input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.03);
  color: var(--white); font: inherit; font-size: 14px;
}
.hc-modal-field input:focus { outline: none; border-color: var(--green); }

.hc-modal-field-group { margin-bottom: 18px; }
.hc-modal-field-group-label { display: block; font-size: 13px; color: var(--gray); margin-bottom: 10px; }
.hc-modal-field-group-label em { color: var(--gray); font-style: normal; opacity: 0.8; }
.hc-team-email-rows { display: flex; flex-direction: column; gap: 10px; }
.hc-team-email-row { display: flex; gap: 8px; align-items: center; }
.hc-team-email-row input {
  flex: 1; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.03);
  color: var(--white); font: inherit; font-size: 14px;
}
.hc-team-email-row input:focus { outline: none; border-color: var(--green); }
.hc-team-email-remove {
  background: none; border: none; color: var(--gray); cursor: pointer; font-size: 16px; padding: 4px 8px;
}
.hc-team-email-remove:hover { color: #e08a8a; }
.hc-add-team-email {
  margin-top: 10px; background: none; border: none; color: var(--green);
  font-size: 13px; cursor: pointer; text-decoration: underline; font-family: var(--sans);
}

.hc-modal-checkbox {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; cursor: pointer;
}
.hc-modal-checkbox input { margin-top: 3px; accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }
.hc-modal-checkbox span { font-size: 13px; color: #c7c7c7; line-height: 1.4; }

.hc-modal-privacy { font-size: 12px; color: var(--gray); margin-bottom: 16px; line-height: 1.5; }

.hc-modal-status { min-height: 20px; font-size: 13px; margin-bottom: 8px; }
.hc-modal-status.error { color: #ff8a8a; }
.hc-modal-status.success { color: var(--green); }

.hc-modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.hc-danger-btn { background: #7a1616 !important; color: var(--white) !important; }
.hc-danger-btn:hover { box-shadow: 0 20px 40px -10px rgba(122,22,22,0.5); }

/* ---------- FOCUS STATES ---------- */
.hc-body a:focus-visible,
.hc-body button:focus-visible,
.hc-body input:focus-visible,
.hc-body select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .hc-qcard-panel, .hc-progress-bar-fill, .hc-category-status-seg, .hc-score-segment, .hc-category-expand {
    transition: none !important;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  .hc-app { padding-top: 84px; }
  .hc-nav-label { display: none; }
  .hc-qcard-head { padding: 18px 18px; flex-direction: column; align-items: flex-start; }
  .hc-qcard-status { align-self: flex-start; }
  .hc-qcard-panel-inner { padding: 0 18px 20px; }
  .hc-answer-row { padding: 13px 14px; }
  .hc-assessment-actions { flex-direction: column; align-items: stretch; }
  .hc-assessment-actions-right { justify-content: space-between; }
  .hc-results-score-card { flex-direction: column; text-align: center; }
  .hc-reco-card { flex-direction: column; align-items: flex-start; }
  .hc-category-row-head { flex-wrap: wrap; gap: 8px; }
  .hc-category-level { font-size: 11px; }
}