/* ============================================================
   THE CUBE SCORE - STYLES
   Brand color: #1F4E79
   Single file, no dependencies, mobile-first
   ============================================================ */

:root {
  --cube-blue: #1F4E79;
  --cube-blue-dark: #163A5C;
  --cube-blue-light: #2A6AA8;
  /* Cube face colors, taken from the Cube Creative logo. Three colors
     spread across six faces (opposite faces share a color), so the cube
     reads as the logo from any angle. */
  --face-blue: #3D3D7A;
  --face-blue-light: #5757A6;
  --face-red: #A8273A;
  --face-red-light: #C73E55;
  --face-green: #2E9D5C;
  --face-green-light: #44BE76;
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #14233A;
  --ink-soft: #4A5870;
  --ink-muted: #8794A8;
  --border: #E2E8F0;
  --border-soft: #EFF2F7;
  --grade-a: #1F7A4D;
  --grade-b: #4A9E5C;
  --grade-c: #B89030;
  --grade-d: #C0612E;
  --grade-f: #B23A2F;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(20, 35, 58, 0.08), 0 4px 16px rgba(20, 35, 58, 0.04);
  --shadow-lg: 0 4px 12px rgba(20, 35, 58, 0.10), 0 12px 32px rgba(20, 35, 58, 0.08);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   Screen management
   ============================================================ */
.screen {
  display: none;
  min-height: 100vh;
  padding: 24px 0 48px;
}
.screen.active {
  display: block;
}

/* ============================================================
   Site header
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.brand-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.header-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.header-link:hover {
  color: var(--cube-blue);
}
.header-link-button {
  background: transparent;
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.header-link-button:hover {
  background: var(--surface);
  border-color: var(--cube-blue);
  color: var(--cube-blue);
}

/* ============================================================
   Site footer
   ============================================================ */
.site-footer {
  text-align: center;
  padding: 48px 0 16px;
  color: var(--ink-muted);
  font-size: 13px;
}
.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--cube-blue);
}

/* ============================================================
   Landing hero
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 24px 0 64px;
}
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 16px 0 48px;
  }
  .hero-cube {
    order: -1;
  }
}

.hero h1 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 880px) {
  .hero h1 {
    font-size: 30px;
  }
}

.hero-sub {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 480px;
}

/* ============================================================
   Form
   ============================================================ */
.scan-form {
  background: var(--surface);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-soft);
}

.form-row {
  margin-bottom: 16px;
}
.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .form-row-split {
    grid-template-columns: 1fr;
  }
}

.form-col {
  display: flex;
  flex-direction: column;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus {
  outline: none;
  border-color: var(--cube-blue);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
input::placeholder {
  color: var(--ink-muted);
}

.btn-primary {
  display: inline-block;
  width: 100%;
  background: var(--cube-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 20px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.05s;
}
.btn-primary:hover {
  background: var(--cube-blue-dark);
}
.btn-primary:active {
  transform: scale(0.99);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.results-cta .btn-primary,
.error-wrap .btn-primary {
  width: auto;
  padding: 13px 28px;
  text-decoration: none;
}

.form-note {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 12px 0 0;
  text-align: center;
}
.form-error {
  font-size: 14px;
  color: var(--grade-f);
  margin: 12px 0 0;
  text-align: center;
  min-height: 1.2em;
}

/* ============================================================
   CUBE - 3D transforms
   ============================================================ */
.hero-cube,
.loading-cube,
.results-cube {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.cube {
  position: relative;
  width: 220px;
  height: 220px;
  transform-style: preserve-3d;
  margin: 32px auto;
}

@media (max-width: 520px) {
  .cube {
    width: 180px;
    height: 180px;
  }
}

.face {
  position: absolute;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  backface-visibility: visible;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.15);
}
@media (max-width: 520px) {
  .face {
    width: 180px;
    height: 180px;
  }
}

.face-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.face-score {
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Face positions (default cube layout, 220px / 2 = 110).
   Background colors come from the brand: opposite faces share a color
   so the cube reads as the Cube Creative logo from any angle.
     - Identity / Authority   = blue/purple   (front + back)
     - Proof / Transparency   = brick red     (right + left)
     - Structure / Visibility = green         (top + bottom) */
.face-front  {
  transform: translateZ(110px);
  background: linear-gradient(135deg, var(--face-blue) 0%, var(--face-blue-light) 100%);
}
.face-back   {
  transform: rotateY(180deg) translateZ(110px);
  background: linear-gradient(135deg, var(--face-blue) 0%, var(--face-blue-light) 100%);
}
.face-right  {
  transform: rotateY(90deg) translateZ(110px);
  background: linear-gradient(135deg, var(--face-red) 0%, var(--face-red-light) 100%);
}
.face-left   {
  transform: rotateY(-90deg) translateZ(110px);
  background: linear-gradient(135deg, var(--face-red) 0%, var(--face-red-light) 100%);
}
.face-top    {
  transform: rotateX(90deg) translateZ(110px);
  background: linear-gradient(135deg, var(--face-green) 0%, var(--face-green-light) 100%);
}
.face-bottom {
  transform: rotateX(-90deg) translateZ(110px);
  background: linear-gradient(135deg, var(--face-green) 0%, var(--face-green-light) 100%);
}

@media (max-width: 520px) {
  .face-front  { transform: translateZ(90px); }
  .face-back   { transform: rotateY(180deg) translateZ(90px); }
  .face-right  { transform: rotateY(90deg) translateZ(90px); }
  .face-left   { transform: rotateY(-90deg) translateZ(90px); }
  .face-top    { transform: rotateX(90deg) translateZ(90px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(90px); }
}

/* Idle: slow gentle rotation around Y only (text stays right-side-up) */
.cube-idle {
  animation: cube-idle-spin 24s linear infinite;
  transform: rotateX(-15deg) rotateY(30deg);
}
@keyframes cube-idle-spin {
  0%   { transform: rotateX(-15deg) rotateY(0deg); }
  100% { transform: rotateX(-15deg) rotateY(360deg); }
}

/* Loading: faster horizontal rotation with gentle vertical tilt.
   Stays within ±15deg on the X axis so text never inverts.
   Y axis spins continuously to feel dynamic. */
.cube-spin {
  animation: cube-loading-spin 8s linear infinite;
}
@keyframes cube-loading-spin {
  0%   { transform: rotateX(-15deg) rotateY(0deg); }
  25%  { transform: rotateX(-15deg) rotateY(90deg); }
  50%  { transform: rotateX(-15deg) rotateY(180deg); }
  75%  { transform: rotateX(-15deg) rotateY(270deg); }
  100% { transform: rotateX(-15deg) rotateY(360deg); }
}

/* Result: rotates to show weakest side, then stops */
.cube-result {
  transition: transform 1.2s cubic-bezier(0.34, 1.2, 0.64, 1);
  transform: rotateX(-15deg) rotateY(30deg);
}
/* Result mode: cube settles with one face squarely toward viewer.
   These rotations are exact opposites of each face's positioning transform,
   so the chosen face ends up at the "front" position with its content visible. */
.cube-result.show-identity     { transform: rotateY(0deg);    }  /* front face → front */
.cube-result.show-authority    { transform: rotateY(180deg);  }  /* back face → front */
.cube-result.show-proof        { transform: rotateY(-90deg);  }  /* right face → front */
.cube-result.show-transparency { transform: rotateY(90deg);   }  /* left face → front */
.cube-result.show-structure    { transform: rotateX(-90deg);  }  /* top face → front */
.cube-result.show-visibility   { transform: rotateX(90deg);   }  /* bottom face → front */

.cube-caption {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 8px;
}

/* ============================================================
   Cube explainer (landing)
   ============================================================ */
.cube-explain {
  margin: 40px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}
.cube-explain h2 {
  font-size: 28px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.cube-explain > p {
  color: var(--ink-soft);
  margin: 0 0 32px;
}
.sides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .sides-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 440px) {
  .sides-grid {
    grid-template-columns: 1fr;
  }
}
.side-card {
  background: var(--surface);
  padding: 20px 20px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  text-align: left;
  display: flex;
  flex-direction: column;
}
.side-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--cube-blue);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.side-card > p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}
.signal-list {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.signal-list li {
  font-size: 13px;
  color: var(--ink-soft);
  position: relative;
  padding-left: 14px;
  line-height: 1.4;
}
.signal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--cube-blue);
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 0.5;
}
.sides-note {
  margin: 24px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  font-style: italic;
}

/* ============================================================
   Loading screen
   ============================================================ */
.loading-wrap {
  max-width: 520px;
  margin: 80px auto 0;
  text-align: center;
}
@media (max-width: 520px) {
  .loading-wrap {
    margin-top: 32px;
  }
}

#loading-status {
  font-size: 24px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.loading-sub {
  color: var(--ink-soft);
  margin: 0 0 32px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border-soft);
  border-radius: 100px;
  overflow: hidden;
  margin: 16px 0;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cube-blue) 0%, var(--cube-blue-light) 100%);
  border-radius: 100px;
  width: 0%;
  transition: width 0.5s ease;
}

.loading-detail {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 8px 0 0;
}

/* ============================================================
   Results hero
   Top-align the two columns instead of vertically centering them.
   With the benchmark line added below the grade row, the left column
   is taller than the right. Top-aligning makes the score, grade, and
   benchmark read as one block; centering would push the cube down
   and make the layout look unbalanced.
   ============================================================ */
.results-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 16px 0 48px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 32px;
}
@media (max-width: 880px) {
  .results-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
    align-items: center;
  }
}

.results-score {
  position: relative;
}
.score-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.score-number {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--cube-blue);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
  .score-number {
    font-size: 56px;
  }
}
.score-divider {
  color: var(--ink-muted);
  font-weight: 400;
  margin: 0 4px;
}
.score-total {
  color: var(--ink-muted);
}

.score-grade-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 880px) {
  .score-grade-row {
    justify-content: center;
  }
}
.score-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  font-weight: 700;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
}
.score-grade.grade-a { background: var(--grade-a); }
.score-grade.grade-b { background: var(--grade-b); }
.score-grade.grade-c { background: var(--grade-c); }
.score-grade.grade-d { background: var(--grade-d); }
.score-grade.grade-f { background: var(--grade-f); }

.score-percentage {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-soft);
}

.result-headline {
  font-size: 24px;
  margin: 16px 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.result-subhead {
  color: var(--ink-soft);
  margin: 0;
  font-size: 16px;
}

/* ============================================================
   Benchmark label
   Small line of context that belongs to the score block. Sits closer
   to the grade row than to the headline below so it reads as part of
   the score, not a floating intro to the headline.
   ============================================================ */
.result-benchmark {
  margin: -8px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;
  max-width: 32em;
}
.result-benchmark:empty {
  display: none;
}
@media (max-width: 880px) {
  .result-benchmark {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   What's working (wins row)
   2-4 cards shown between the headline and the side breakdown.
   Gives the reader a beat of validation before the critique.
   ============================================================ */
.results-wins {
  margin: 0 0 40px;
}
.results-wins-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}
.results-wins-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 880px) {
  .results-wins-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .results-wins-grid {
    grid-template-columns: 1fr;
  }
}

.win-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--grade-a);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
/* Tint the left edge by side so the wins read as connected to the
   six-sided structure below. Falls back to grade-a green if no side. */
.win-card[data-side="identity"]     { border-left-color: var(--face-blue); }
.win-card[data-side="authority"]    { border-left-color: var(--face-red); }
.win-card[data-side="proof"]        { border-left-color: var(--face-green); }
.win-card[data-side="transparency"] { border-left-color: var(--face-blue-light); }
.win-card[data-side="structure"]    { border-left-color: var(--face-red-light); }
.win-card[data-side="visibility"]   { border-left-color: var(--face-green-light); }

.win-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--grade-a);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.win-body {
  flex: 1;
  min-width: 0;
}
.win-signal-name {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.win-message {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ============================================================
   Side cards (results)
   ============================================================ */
.results-sides {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
@media (max-width: 720px) {
  .results-sides {
    grid-template-columns: 1fr;
  }
}

.result-side {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.result-side:hover {
  box-shadow: var(--shadow-lg);
}

.result-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  cursor: pointer;
  background: linear-gradient(180deg, transparent 0%, transparent 100%);
  user-select: none;
}
.result-side-header:hover {
  background: var(--border-soft);
}

.result-side-header-left {
  flex: 1;
  min-width: 0;
}

.result-side-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}

.result-side-summary {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}

.result-side-score-block {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.result-side-score {
  font-size: 26px;
  font-weight: 700;
  color: var(--cube-blue);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.result-side-score-total {
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 16px;
}
.expand-arrow {
  color: var(--ink-muted);
  transition: transform 0.2s;
  font-size: 20px;
  line-height: 1;
}
.result-side.expanded .expand-arrow {
  transform: rotate(180deg);
}

/* Signal list (expanded state) */
.result-side-signals {
  display: none;
  border-top: 1px solid var(--border-soft);
  padding: 8px 24px 24px;
}
.result-side.expanded .result-side-signals {
  display: block;
}

.signal-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.signal-item:last-child {
  border-bottom: none;
}

.signal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.signal-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.signal-name-text {
  display: inline;
}

.signal-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--border-soft);
  color: var(--ink-soft);
  border: none;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
}
.signal-info:hover,
.signal-info.active {
  background: var(--cube-blue);
  color: #fff;
}

.signal-definition {
  display: none;
  margin: 8px 0;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  font-style: italic;
}
.signal-definition.show {
  display: block;
}

.signal-score-pill {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--border-soft);
  padding: 4px 10px;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.signal-score-pill.score-strong { background: rgba(31, 122, 77, 0.12); color: var(--grade-a); }
.signal-score-pill.score-medium { background: rgba(184, 144, 48, 0.12); color: var(--grade-c); }
.signal-score-pill.score-weak   { background: rgba(178, 58, 47, 0.12); color: var(--grade-f); }

.signal-finding {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 8px;
  line-height: 1.5;
}

.signal-rec-toggle {
  background: transparent;
  border: none;
  color: var(--cube-blue);
  font-weight: 600;
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.signal-rec-toggle:hover {
  color: var(--cube-blue-dark);
}
.signal-rec-toggle::after {
  content: "▾";
  transition: transform 0.15s;
}
.signal-rec-toggle.expanded::after {
  transform: rotate(180deg);
}

.signal-recommendation {
  display: none;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: rgba(31, 78, 121, 0.05);
  border-left: 3px solid var(--cube-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.signal-recommendation.show {
  display: block;
}
.signal-recommendation strong {
  color: var(--cube-blue);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   Results CTA + Error
   ============================================================ */
.results-cta {
  text-align: center;
  background: var(--surface);
  padding: 40px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  margin-bottom: 24px;
}
.results-cta h2 {
  font-size: 26px;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.results-cta p {
  max-width: 540px;
  margin: 0 auto 24px;
  color: var(--ink-soft);
}

/* Tight, muted "or email us" line under the CTA button */
.results-cta-alt {
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.results-cta-alt a {
  color: var(--cube-blue);
  text-decoration: none;
}
.results-cta-alt a:hover {
  text-decoration: underline;
}

.error-wrap {
  max-width: 480px;
  margin: 80px auto 0;
  text-align: center;
}
@media (max-width: 520px) {
  .error-wrap {
    margin-top: 32px;
  }
}
.error-wrap h1 {
  font-size: 28px;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.error-wrap p {
  color: var(--ink-soft);
  margin: 0 0 24px;
}