/* ==========================================================================
   Will It Sell? - stylesheet
   Dark premium SaaS look, inspired by Linear, Stripe, and Vercel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset and base styles
   Browsers add their own default spacing to elements. This section removes
   that so every margin and padding on the page is one we chose on purpose.
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0A0A0A;
  color: #F5F5F0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. Top navigation bar
   -------------------------------------------------------------------------- */
.navbar {
  width: 100%;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.navbar-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  color: #B91C1C;
}

/* --------------------------------------------------------------------------
   3. Purchase code gate (index.html)
   Shown instead of the landing page until a visitor enters a valid Selar
   purchase code. html.gate-required is added by a tiny inline script that
   runs before this page paints anything (see index.html), so there is
   never a flash of gated content before the gate screen appears.
   -------------------------------------------------------------------------- */
.gate-screen {
  display: none;
  max-width: 480px;
  margin: 0 auto;
  padding: 96px 24px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

html.gate-required .gate-screen {
  display: flex;
}

html.gate-required #landing-content {
  display: none;
}

#gate-form {
  width: 100%;
}

.gate-input {
  border-color: #B91C1C;
  text-align: center;
  letter-spacing: 0.05em;
}

.gate-error {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #B91C1C;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   3b. Hero section
   The "eyebrow" is the small label that sits above a headline, a common
   pattern in SaaS marketing pages to give context before the big statement.
   -------------------------------------------------------------------------- */
.hero {
  min-height: 80vh; /* vh = percent of the visible screen height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #A3A3A3;
  margin-bottom: 24px;
}

.hero-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 72px); /* scales smoothly between 40px and 72px depending on screen width */
  color: #F5F5F0;
  max-width: 900px;
  line-height: 1.15;
  margin-bottom: 24px;
}

.hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #A3A3A3;
  max-width: 600px;
  margin-bottom: 40px;
}

.cta-button {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #F5F5F0;
  background-color: #B91C1C;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(185, 28, 28, 0.35);
}

/* Disabled state: used on the form's "Continue" buttons until the step has input */
.cta-button:disabled {
  background-color: #4d1616;
  color: #A3A3A3;
  cursor: not-allowed;
}

.cta-subtext {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #A3A3A3;
  margin-top: 16px;
}

.cta-subtext a {
  color: #B91C1C;
}

/* --------------------------------------------------------------------------
   4. How it works section
   -------------------------------------------------------------------------- */
.how-it-works {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

.eyebrow-center {
  display: block;
}

.section-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 32px;
  color: #F5F5F0;
  margin-bottom: 56px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: #1A1A1A;
  border-radius: 12px;
  padding: 40px 32px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.card-number {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 40px;
  color: #B91C1C;
  margin-bottom: 16px;
}

.card-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  color: #F5F5F0;
  margin-bottom: 12px;
}

.card-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #A3A3A3;
}

/* --------------------------------------------------------------------------
   5. Trust section
   -------------------------------------------------------------------------- */
.trust-line {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #A3A3A3;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* --------------------------------------------------------------------------
   6. Closing statement
   A short line of copy between the trust section and the footer, given
   generous padding so it feels like a breath before the page ends.
   -------------------------------------------------------------------------- */
.closing-statement {
  text-align: center;
  padding: 96px 24px;
}

.closing-line {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 32px);
  color: #F5F5F0;
  max-width: 700px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 32px 24px;
  text-align: center;
}

.footer p {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #A3A3A3;
}

/* --------------------------------------------------------------------------
   9. Validation form (validate.html)
   The three-step form buyers fill out after clicking "Start validation".
   Only one .form-step has the "active" class at a time; script.js toggles
   which one, and fades between them by animating opacity.
   -------------------------------------------------------------------------- */
.validate-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* The thin bar showing how far through the 3 steps the buyer is */
.progress-track {
  width: 100%;
  height: 4px;
  background-color: #1A1A1A;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 56px;
  transition: opacity 0.2s ease;
}

.progress-fill {
  height: 100%;
  width: 33.333%; /* step 1 of 3, updated by script.js as the buyer advances */
  background-color: #B91C1C;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.form-container {
  text-align: center;
  transition: opacity 0.2s ease;
}

/* Each step is hidden by default. Only the one with .active shows. */
.form-step {
  display: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.form-step.active {
  display: block;
}

.form-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 42px);
  color: #F5F5F0;
  margin-bottom: 16px;
}

.form-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #A3A3A3;
  margin-bottom: 32px;
}

/* Text fields (textarea and single-line input) share the same look */
.textarea-input,
.text-input {
  width: 100%;
  background-color: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 20px;
  color: #F5F5F0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  outline: none;
  text-align: left;
  transition: border-color 0.2s ease;
}

.textarea-input {
  min-height: 200px;
  resize: vertical;
}

.textarea-input:focus,
.text-input:focus {
  border-color: #B91C1C;
}

.char-counter {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #A3A3A3;
  text-align: right;
  margin-top: 8px;
}

.input-hint {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #A3A3A3;
  text-align: left;
  margin-top: 8px;
}

/* The three dropdowns on step 3 */
.select-group {
  text-align: left;
  margin-bottom: 24px;
}

.select-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #F5F5F0;
  margin-bottom: 8px;
}

.select-input {
  width: 100%;
  background-color: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px 16px;
  color: #F5F5F0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.select-input:focus {
  border-color: #B91C1C;
}

/* Continue / Begin research button plus the Back link beneath it */
.step-actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.back-link {
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #A3A3A3;
  cursor: pointer;
  padding: 4px;
}

.back-link:hover {
  color: #F5F5F0;
  text-decoration: underline;
}

/* Placeholder screen shown after "Begin research" is clicked */
.placeholder-screen {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.2s ease;
}

/* The "hidden" HTML attribute normally hides an element on its own, but our
   "display: flex" rule above overrides that. This rule restores it so the
   placeholder screen stays invisible until script.js removes "hidden". */
.placeholder-screen[hidden] {
  display: none;
}

.placeholder-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 36px);
  color: #F5F5F0;
  margin-bottom: 16px;
}

.placeholder-note {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #A3A3A3;
}

/* --------------------------------------------------------------------------
   10. Research screen (validate.html)
   Shown while the serverless function is calling the Anthropic API.
   The four pulse-dots animate independently using a staggered delay so
   they don't all blink in unison.
   -------------------------------------------------------------------------- */
.research-screen {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Same fix as .placeholder-screen[hidden]: our "display: flex" rule above
   overrides the browser's built-in handling of the "hidden" attribute, so
   this restores it. */
.research-screen[hidden] {
  display: none;
}

.research-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 36px);
  color: #F5F5F0;
  margin-bottom: 16px;
}

.research-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #A3A3A3;
  max-width: 420px;
  margin-bottom: 40px;
}

.source-progress-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 40px;
}

.source-progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.source-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #F5F5F0;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #B91C1C;
  animation: pulse-dot 1.4s ease-in-out infinite;
}

.source-progress-item:nth-child(1) .pulse-dot { animation-delay: 0s; }
.source-progress-item:nth-child(2) .pulse-dot { animation-delay: 0.2s; }
.source-progress-item:nth-child(3) .pulse-dot { animation-delay: 0.4s; }
.source-progress-item:nth-child(4) .pulse-dot { animation-delay: 0.6s; }

@keyframes pulse-dot {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.research-status {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #A3A3A3;
  min-height: 20px;
  margin-bottom: 40px;
  transition: opacity 0.3s ease;
}

.research-note {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #A3A3A3;
}

/* --------------------------------------------------------------------------
   12. Results page (results.html)
   The report itself: a verdict banner, a demand score, a Gap Map, the
   sharpened idea, an optional pivot options section, five expandable hot
   spike cards, a 30-day timeline, a collapsible
   evidence archive, and the closing action buttons. script.js builds all of
   this from the report object saved in sessionStorage.
   -------------------------------------------------------------------------- */
.results-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* Shared section heading style, reused for every section below the banner */
.demand-score-section,
.gap-map-section,
.sharpened-section,
.pivot-section,
.hotspikes-section,
.action-plan-section,
.evidence-section {
  margin-top: 96px;
  text-align: center;
}

/* A section fades and lifts into place the first time it scrolls into view.
   script.js adds "is-visible" via an IntersectionObserver; see the fade-in
   comment there for how the trigger works. */
.fade-in-section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* A tighter version of .eyebrow for use inside cards, where the default
   24px margin below it is more space than a compact card needs. */
.eyebrow-tight {
  margin-bottom: 12px;
}

/* A smaller section headline, used only for the evidence archive since its
   heading is less prominent than the other sections. */
.section-headline-small {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  color: #F5F5F0;
  margin-bottom: 12px;
}

/* ----- Section 1: verdict banner ----- */
.verdict-banner {
  background-color: #1A1A1A;
  border-radius: 16px;
  padding: 48px;
}

.verdict-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.verdict-left {
  flex: 1;
  min-width: 280px;
  text-align: left;
}

.verdict-word {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(56px, 8vw, 72px);
  line-height: 1;
  margin-bottom: 24px;
}

/* Verdict color: script.js adds one of these three classes based on the
   report's verdict field. */
.verdict-word.verdict-green { color: #10B981; }
.verdict-word.verdict-yellow { color: #F59E0B; }
.verdict-word.verdict-red { color: #B91C1C; }

.verdict-reasoning {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: #F5F5F0;
  max-width: 640px;
}

.verdict-right {
  text-align: right;
}

.confidence-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #A3A3A3;
  margin-bottom: 8px;
}

.confidence-score {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 48px;
  color: #F5F5F0;
}

/* ----- Section 2: the demand score ----- */
.demand-score-total {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(48px, 8vw, 72px);
  color: #F5F5F0;
  text-align: center;
  margin: 24px 0 48px;
}

.demand-score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: left;
}

.demand-score-card {
  background-color: #1A1A1A;
  border-radius: 12px;
  padding: 32px;
}

.demand-score-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.demand-score-card-name {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  color: #F5F5F0;
}

.demand-score-card-points {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  color: #B91C1C;
  white-space: nowrap;
}

/* Shared by both the demand score cards and (formerly) the old filter
   cards: a thin track with a filled bar showing a score visually. */
.score-bar-track {
  width: 100%;
  height: 6px;
  background-color: #0A0A0A;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}

.score-bar-fill {
  height: 100%;
  background-color: #B91C1C;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.demand-score-card-reasoning {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #A3A3A3;
}

/* ----- Section 3: the Gap Map ----- */
.gap-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

.gap-map-column {
  border-radius: 12px;
  padding: 32px;
}

/* Each column gets a subtle tint matching what it means: green for what's
   already working, red for the gap everyone is missing, amber for the
   opportunity (matching the verdict color for "pivot territory"). */
.gap-map-column-well {
  background-color: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.gap-map-column-miss {
  background-color: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.2);
}

.gap-map-column-position {
  background-color: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.gap-map-column-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #F5F5F0;
  margin-bottom: 16px;
}

.gap-map-column-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #F5F5F0;
}

/* ----- Section 4: sharpened idea ----- */
.sharpened-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

.sharpened-card,
.sharpened-skipped-card {
  background-color: #1A1A1A;
  border-radius: 12px;
  padding: 32px;
}

.sharpened-skipped-card {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #F5F5F0;
  text-align: left;
  margin-top: 48px;
}

/* The one rewritten title, shown big since it replaces the buyer's
   original vague product name. */
.sharpened-title-text {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 32px;
  color: #F5F5F0;
  line-height: 1.3;
}

.buyer-description-text {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  font-style: italic;
  color: #F5F5F0;
}

/* Generic body paragraph style, shared by the painful moment, the
   transformation paragraph, and the "why this will sell" card. */
.sharpened-body-text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #F5F5F0;
}

.headline-option {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  color: #F5F5F0;
  margin-bottom: 16px;
}

.headline-option:last-child {
  margin-bottom: 0;
}

.who-not-for-text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: italic;
  color: #F5F5F0;
}

/* ----- Section 5 (conditional): pivot options, YELLOW verdicts only ----- */
.pivot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

.pivot-card {
  background-color: #1A1A1A;
  border-radius: 12px;
  padding: 32px;
}

.pivot-new-positioning {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #F5F5F0;
  margin-bottom: 12px;
}

.pivot-new-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 18px;
  color: #F5F5F0;
  margin-bottom: 12px;
}

.pivot-reasoning {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #A3A3A3;
}

.pivot-recommendation {
  margin-top: 32px;
  background-color: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  padding: 24px 32px;
  text-align: left;
}

.pivot-recommendation-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #F59E0B;
  margin-bottom: 8px;
}

.pivot-recommendation-text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #F5F5F0;
}

/* ----- Section 6: hot spike cards ----- */
.hotspikes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

.hotspike-card {
  background-color: #1A1A1A;
  border-radius: 12px;
  padding: 32px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hotspike-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.hotspike-number {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 40px;
  color: #B91C1C;
  margin-bottom: 12px;
}

/* Titles are now full sales-page-ready sentences (10-20 words) rather
   than short product names, so this runs a size smaller than the old
   22px to keep multi-line titles from overwhelming the card. */
.hotspike-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: #F5F5F0;
  margin-bottom: 12px;
}

.hotspike-teaser {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #A3A3A3;
}

/* Hidden once expanded, since the full whyHotNow paragraph in the details
   below repeats this same first sentence at its start. */
.hotspike-card.expanded .hotspike-teaser {
  display: none;
}

.hotspike-toggle-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #B91C1C;
  text-align: right;
  margin-top: 16px;
}

/* Hidden once the card is expanded, since the details panel ends with its
   own "Collapse" label instead. */
.hotspike-card.expanded .hotspike-expand-label {
  display: none;
}

/* Collapsed by default. script.js measures the real content height and
   animates max-height to it, which produces an accurate smooth expand
   instead of guessing at a fixed height. */
.hotspike-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.hotspike-details-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #F5F5F0;
  margin-top: 16px;
  margin-bottom: 4px;
}

.hotspike-details-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #A3A3A3;
}

.hotspike-mini-row {
  display: flex;
  gap: 32px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ----- Section 7: 30-day action plan timeline ----- */
.timeline {
  margin-top: 48px;
  text-align: left;
}

.timeline-item {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-number-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  flex-shrink: 0;
}

.timeline-number {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 40px;
  color: #B91C1C;
  line-height: 1;
}

.timeline-connector {
  width: 2px;
  flex: 1;
  background-color: #B91C1C;
  margin-top: 12px;
}

.timeline-item:last-child .timeline-connector {
  visibility: hidden;
}

.timeline-card {
  background-color: #1A1A1A;
  border-radius: 12px;
  padding: 28px 32px;
  flex: 1;
}

.timeline-week-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  color: #F5F5F0;
  margin-bottom: 12px;
}

.timeline-week-content {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #F5F5F0;
}

/* ----- Section 8: evidence archive ----- */
.evidence-note {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 13px;
  color: #A3A3A3;
  margin-bottom: 24px;
}

.evidence-toggle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #F5F5F0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.evidence-toggle:hover {
  border-color: #B91C1C;
}

.evidence-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

/* Same fix as .placeholder-screen[hidden] and .research-screen[hidden]:
   "display: flex" above overrides the browser's default handling of the
   "hidden" attribute, so this restores it. */
.evidence-list[hidden] {
  display: none;
}

.evidence-item {
  background-color: #1A1A1A;
  border-radius: 10px;
  padding: 20px 24px;
}

.evidence-source {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #B91C1C;
  margin-bottom: 8px;
}

.evidence-url {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #A3A3A3;
  word-break: break-all;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.evidence-url:hover {
  color: #F5F5F0;
}

.evidence-finding {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #F5F5F0;
}

/* ----- Section 9: closing action buttons ----- */
.results-actions {
  text-align: center;
  margin-top: 96px;
}

.results-actions-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cta-button-outline {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #F5F5F0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 16px 32px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.cta-button-outline:hover {
  border-color: #B91C1C;
  transform: translateY(-2px);
}

.results-actions-note {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #A3A3A3;
}

/* --------------------------------------------------------------------------
   13. Responsive layout
   Below 768px wide (roughly tablet and phone screens), the three cards
   stack vertically instead of sitting side by side, and the form gets
   slightly tighter padding to suit smaller screens.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 56px 24px;
  }

  .how-it-works {
    padding: 56px 24px;
  }

  .verdict-banner-inner {
    flex-direction: column;
  }

  .verdict-left {
    text-align: left;
  }

  .verdict-right {
    text-align: left;
  }

  .demand-score-grid {
    grid-template-columns: 1fr;
  }

  .gap-map-grid {
    grid-template-columns: 1fr;
  }

  .pivot-grid {
    grid-template-columns: 1fr;
  }

  .hotspikes-grid {
    grid-template-columns: 1fr;
  }

  .results-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .validate-main {
    padding: 32px 20px 64px;
  }
}