.useful-growth-page {
  --useful-navy: #102c3a;
  --useful-blue: #1f5363;
  --useful-cream: #fff8eb;
  --useful-coral: #e87855;
  --useful-sage: #a9bd9f;
  --useful-gold: #e5bb58;
  --useful-line: rgba(16, 44, 58, 0.18);
}

.useful-growth-page .useful-hero {
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr);
  gap: clamp(22px, 4vw, 58px);
  width: 100%;
  margin: 0;
  padding: clamp(28px, 5vw, 64px);
  color: var(--useful-cream);
  border: 0;
  background:
    radial-gradient(circle at 86% 8%, rgba(232, 120, 85, .28), transparent 26%),
    linear-gradient(132deg, #0b222d 0%, var(--useful-navy) 58%, #183e4b 100%);
  overflow: hidden;
}

.useful-growth-page .useful-hero::before { display: none; }
.useful-growth-page .useful-hero h1,
.useful-growth-page .useful-hero h2,
.useful-growth-page .useful-hero .guide-lede,
.useful-growth-page .useful-hero .guide-byline,
.useful-growth-page .useful-hero .guide-byline a { color: var(--useful-cream); }
.useful-hero h1 { max-width: 860px; font-size: clamp(2.7rem, 5vw, 5.6rem); line-height: .95; }
.useful-hero .guide-lede { max-width: 760px; color: rgba(255, 248, 235, .82); }
.useful-growth-page .useful-hero .eyebrow span,
.useful-growth-page .useful-hero .guide-meta span { color: var(--useful-cream); border-color: rgba(255,248,235,.28); background: rgba(255,255,255,.09); }
.useful-hero .button.primary { color: var(--useful-navy); border-color: var(--useful-gold); background: var(--useful-gold); }
.useful-hero .button.secondary { color: var(--useful-cream); border-color: rgba(255,248,235,.48); background: transparent; }

.useful-bench-card {
  align-self: stretch;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(255,248,235,.2);
  border-radius: 20px;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.14);
}
.useful-bench-card h2 { margin: .6rem 0 1rem; font-size: clamp(1.55rem, 2.4vw, 2.35rem); }
.useful-bench-card dl { display: grid; margin: 0; }
.useful-bench-card dl div { display: grid; grid-template-columns: .75fr 1.25fr; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,248,235,.14); }
.useful-bench-card dt { color: rgba(255,248,235,.64); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.useful-bench-card dd { margin: 0; font-weight: 700; }
.useful-bench-card > p:last-child { margin: 1rem 0 0; color: rgba(255,248,235,.7); }

.useful-growth-page .useful-visual { order: 2; min-height: 500px; margin-top: 0; background: var(--useful-navy); }
.useful-growth-page .useful-visual img { height: 500px; object-position: center 50%; }

.useful-direct-answer {
  color: var(--useful-cream);
  border: 0;
  background: linear-gradient(120deg, rgba(232,120,85,.13), transparent 42%), var(--useful-navy);
}
.useful-direct-answer h2,
.useful-direct-answer > p { color: inherit; }
.useful-direct-answer > p:not(.eyebrow):not(.guide-callout) { max-width: 940px; color: rgba(255,248,235,.8); }
.useful-direct-answer a { color: #ffe3a0; }
.useful-essential-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.useful-essential-grid article { display: grid; gap: .42rem; min-height: 154px; padding: 1rem; border: 1px solid rgba(255,248,235,.16); border-radius: 15px; background: rgba(255,255,255,.06); }
.useful-essential-grid span { color: var(--useful-gold); font-weight: 800; }
.useful-essential-grid strong { font-family: "Fraunces", serif; font-size: 1.05rem; }
.useful-essential-grid small { color: rgba(255,248,235,.68); line-height: 1.45; }
.useful-direct-answer .guide-callout { color: var(--useful-navy); border-color: transparent; background: var(--useful-gold); }

.useful-kit-matcher { border-top: 6px solid var(--useful-coral); background: linear-gradient(180deg, rgba(169,189,159,.22), transparent 260px), var(--useful-cream); }
.useful-filter-grid button { min-height: 48px; }
.useful-filter-grid button.is-selected,
.useful-filter-grid button[aria-pressed="true"] { color: #fff; border-color: var(--useful-blue); background: var(--useful-blue); box-shadow: 0 9px 22px rgba(31,83,99,.16); }
.useful-match { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .52fr); gap: 1rem; margin-top: 1rem; }
.useful-match-card,
.useful-reject-card { padding: 1.2rem; border: 1px solid var(--useful-line); border-radius: 18px; background: #fff; }
.useful-match-card { border-top: 5px solid var(--useful-coral); }
.useful-match-card h3,
.useful-reject-card h3 { margin-top: 0; }
.useful-spec-list { display: grid; gap: .55rem; margin: 1rem 0; padding: 0; list-style: none; }
.useful-spec-list li { display: grid; grid-template-columns: 115px 1fr; gap: .7rem; padding: .68rem; border-radius: 11px; background: rgba(169,189,159,.18); }
.useful-spec-list strong { color: var(--useful-blue); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.useful-reject-card { background: linear-gradient(145deg, rgba(229,187,88,.18), #fff); }
.useful-reject-card .button { width: 100%; margin-top: .7rem; }

.useful-proof { order: 3; border-top: 6px solid var(--useful-blue); }
.useful-proof > p { max-width: 920px; }
.useful-ready-panel { margin: 1rem 0; padding: 1rem; border: 1px solid var(--useful-line); border-radius: 16px; background: rgba(169,189,159,.16); }
.useful-ready-panel legend { padding: 0 .35rem; color: var(--useful-navy); font-weight: 800; }
.useful-ready-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.useful-ready-grid label { display: flex; gap: .65rem; min-height: 92px; padding: .85rem; border: 1px solid var(--useful-line); border-radius: 13px; background: #fff; cursor: pointer; }
.useful-ready-grid input { margin-top: .2rem; accent-color: var(--useful-blue); }
.useful-ready-grid span { display: grid; gap: .2rem; }
.useful-ready-grid small { color: #5d6c70; }
.useful-progress li.is-complete span { color: #fff; background: var(--useful-blue); }
.useful-progress li.is-current span { color: var(--useful-navy); background: var(--useful-gold); }
.useful-earned-path { margin-top: 1rem; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--useful-line); border-radius: 18px; background: linear-gradient(135deg, rgba(229,187,88,.18), rgba(255,255,255,.96)); }
.useful-earned-path h3 { margin-top: 0; }
.useful-earned-path .guide-pick { max-width: 720px; border-top: 4px solid var(--useful-coral); }

.useful-source-deck { color: var(--useful-cream); border: 0; background: var(--useful-navy); }
.useful-source-deck h2 { color: inherit; }
.useful-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.useful-source-grid a { display: grid; gap: .45rem; min-height: 190px; padding: 1.3rem; color: inherit; text-decoration: none; border: 1px solid rgba(255,248,235,.16); border-radius: 16px; background: rgba(255,255,255,.06); transition: transform .18s ease, border-color .18s ease; }
.useful-source-grid a:hover { transform: translateY(-2px); border-color: var(--useful-gold); }
.useful-source-grid span { color: var(--useful-gold); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.useful-source-grid b { font-family: "Fraunces", serif; font-size: 1.35rem; }
.useful-source-grid small { color: rgba(255,248,235,.68); line-height: 1.5; }
.useful-source-grid em { align-self: end; color: #ffe3a0; font-style: normal; font-weight: 800; }

@media (max-width: 980px) {
  .useful-growth-page .useful-hero,
  .useful-match { grid-template-columns: 1fr; }
  .useful-essential-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .useful-growth-page .useful-hero { padding: 24px 18px; }
  .useful-hero h1 { font-size: clamp(2.45rem, 13vw, 4rem); }
  .useful-growth-page .useful-visual,
  .useful-growth-page .useful-visual img { min-height: 340px; height: 340px; }
  .useful-growth-page .useful-visual img { object-position: 51% center; }
  .useful-essential-grid,
  .useful-ready-grid,
  .useful-source-grid { grid-template-columns: 1fr; }
  .useful-essential-grid article { min-height: auto; }
  .useful-spec-list li { grid-template-columns: 1fr; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .useful-source-grid a { transition: none; }
  .useful-source-grid a:hover { transform: none; }
}



.useful-growth-page .useful-hero {
  background: linear-gradient(135deg, #102c3a 0%, #153f4d 58%, #244f45 100%);
}

.useful-growth-page .useful-hero h1,
.useful-growth-page .useful-hero .guide-lede,
.useful-growth-page .useful-hero .guide-byline,
.useful-growth-page .useful-hero .guide-byline a {
  color: #fffaf0;
}

.useful-growth-page .useful-ledger-card {
  border-color: rgba(255, 248, 235, .34);
  background: rgba(255, 248, 235, .09);
  color: #fffaf0;
}

.useful-growth-page .useful-ledger-card dt {
  color: #b8d2c3;
}

.useful-growth-page .useful-ledger-card dd {
  color: #fffaf0;
}

.useful-growth-page .useful-direct-answer {
  background: linear-gradient(180deg, #fffaf0 0%, #f7f0df 100%);
}

.useful-payoff-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.useful-payoff-grid article {
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--useful-line);
  border-radius: 18px;
  background: #fffdf8;
}

.useful-payoff-grid span {
  display: block;
  margin-bottom: 18px;
  color: var(--useful-coral);
  font: 800 .72rem/1 Manrope, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.useful-payoff-grid strong,
.useful-payoff-grid small {
  display: block;
}

.useful-payoff-grid strong {
  margin-bottom: 8px;
  color: var(--useful-navy);
  font: 700 1.08rem/1.2 Fraunces, serif;
}

.useful-payoff-grid small {
  color: #4c5d5f;
  line-height: 1.55;
}

.useful-idea-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.useful-idea-grid article {
  padding: 22px;
  border: 1px solid var(--useful-line);
  border-radius: 18px;
  background: #fff;
}

.useful-idea-grid article > span {
  color: var(--useful-coral);
  font: 800 .72rem/1 Manrope, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.useful-idea-grid h3 {
  margin: 10px 0 8px;
}

.useful-idea-grid p {
  margin: 0;
}

.useful-idea-grid .useful-first-step {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--useful-line);
  color: #38505a;
  font-size: .92rem;
}

.useful-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.useful-source-grid a {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--useful-line);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.useful-source-grid a:hover {
  border-color: var(--useful-coral);
  transform: translateY(-2px);
}

.useful-source-grid span,
.useful-source-grid em {
  color: var(--useful-coral);
  font: 800 .73rem/1.2 Manrope, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.useful-source-grid small {
  color: #4b5c60;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .useful-payoff-grid,
  .useful-idea-grid,
  .useful-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .useful-payoff-grid,
  .useful-idea-grid,
  .useful-source-grid {
    grid-template-columns: 1fr;
  }
}