/* X Growth Roadmap: JB Finance brand theme.
   Dark navy base, gold titles, borders, and call to action buttons,
   bright green up and red down accents, clean bold type, hero numbers
   big. One stylesheet, no frameworks, no web fonts, no images. System
   font stack only, so pages stay fast on any connection.
   Contrast: body text is near white on navy (about 13 to 1). Gold is
   used for large headings, kickers, prices, and button backgrounds
   with navy text, never for small body copy. */

:root {
  --navy: #0a1628;
  --navy-2: #0f2140;
  --navy-3: #16305c;
  --card: #10233f;
  --line: #2a4470;
  --gold: #f5b921;
  --gold-soft: #ffd75e;
  --ink: #f4f7fc;
  --muted: #b9c7de;
  --green: #2fe07c;
  --red: #ff6b5e;
  --blue: #57b6ff;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 12px;
}

h1 {
  font-size: 2rem;
  font-weight: 800;
}

h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--gold);
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

p {
  margin: 0 0 12px;
}

a {
  color: var(--gold-soft);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
  border-bottom: 2px solid var(--gold);
}

.brand {
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.site-header nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-header nav a:hover {
  color: var(--gold-soft);
}

.demo-banner {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
}

/* Hero */

.hero {
  padding: 40px 0 8px;
  text-align: left;
}

.hero h1 {
  font-size: 2.4rem;
  max-width: 20ch;
}

.hero .accent {
  color: var(--gold);
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 62ch;
}

.hero-actions,
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 20px 0 8px;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 28px;
}

.hero-stats div {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px;
}

.hero-stats strong {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.1;
}

.hero-stats span {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Sections and cards */

.section {
  padding: 28px 0 4px;
}

.section.narrow {
  max-width: 720px;
}

.section-lede {
  color: var(--muted);
  max-width: 68ch;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 16px 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 0 0 14px;
}

.cards .card {
  margin: 0;
}

.card-featured {
  border: 2px solid var(--gold);
  background: var(--navy-2);
}

.card-kicker {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.card-big {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold);
  margin: 8px 0 0;
}

.price {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--gold);
  margin: 4px 0 8px;
  line-height: 1.1;
}

.price .per {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

.card ul {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--muted);
}

.card li {
  margin-bottom: 6px;
}

.leak-card {
  border-left: 4px solid var(--gold);
}

.module {
  border-top: 3px solid var(--navy-3);
}

.nudge-card {
  background: var(--navy-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0;
}

.review-card {
  border-left: 4px solid var(--green);
}

.review-h {
  color: var(--gold);
  margin-top: 16px;
}

.review-h:first-child {
  margin-top: 0;
}

.target-card .rules {
  list-style: none;
  padding-left: 0;
}

.rule-pass {
  color: var(--green);
}

.rule-fail {
  color: var(--muted);
}

.grade {
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--gold);
}

.grade-skip {
  color: var(--red);
}

/* Stats */

.stat {
  text-align: left;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat-num {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
  margin: 4px 0;
}

.stat-sub {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

.stat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.stat-vs {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Progress bars: gold fill for gates, green for plan tasks */

.bar {
  background: var(--navy-3);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
  margin: 10px 0;
}

.bar-fill {
  background: var(--gold);
  height: 100%;
  border-radius: 999px;
}

.task .bar-fill {
  background: var(--green);
}

.gate-card .bar-fill {
  background: var(--gold);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary {
  background: var(--gold);
  color: var(--navy);
}

.btn-primary:hover {
  background: var(--gold-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--gold-soft);
  border-color: var(--gold);
}

.btn-ghost:hover {
  background: var(--navy-3);
}

.btn-disabled {
  background: var(--navy-3);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-small {
  min-height: 40px;
  padding: 6px 14px;
  font-size: 0.9rem;
}

/* Status pills */

.pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.pill-done {
  background: var(--green);
  color: var(--navy);
}

.pill-on-track {
  background: var(--blue);
  color: var(--navy);
}

.pill-behind {
  background: var(--red);
  color: var(--navy);
}

.pill-not-started {
  background: var(--navy-3);
  color: var(--ink);
}

/* Tasks */

.task-list {
  display: grid;
  gap: 14px;
}

.task {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.task-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.task-head h3 {
  margin: 0;
  flex: 1 1 220px;
}

.task-progress {
  font-weight: 700;
}

.task-why {
  color: var(--muted);
}

.evidence {
  color: var(--gold-soft);
  font-weight: 600;
  border-left: 3px solid var(--gold);
  padding-left: 10px;
}

/* Numbers */

.num-up {
  color: var(--green);
}

.num-down {
  color: var(--red);
}

.muted {
  color: var(--muted);
}

.fineprint {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Alerts */

.alert {
  border-radius: 10px;
  padding: 14px 16px;
  font-weight: 600;
  margin: 0 0 16px;
}

.alert-info {
  background: var(--navy-2);
  border: 1px solid var(--blue);
  color: var(--ink);
}

.alert-error {
  background: #3d1420;
  border: 1px solid var(--red);
  color: var(--ink);
}

/* Forms */

label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

input[type="text"] {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 1rem;
  padding: 12px;
  min-height: 48px;
  width: 100%;
}

.scan-form {
  margin: 16px 0;
}

.scan-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.scan-row .at {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  color: var(--gold);
  font-size: 1.2rem;
}

.scan-row input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tables */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.table th,
.table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table th {
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Footer */

.site-footer {
  border-top: 2px solid var(--gold);
  max-width: 1080px;
  margin: 24px auto 0;
  padding: 24px 16px 40px;
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer strong {
  color: var(--gold);
}

/* Wider screens */

@media (min-width: 640px) {
  .hero h1 {
    font-size: 3rem;
  }

  h1 {
    font-size: 2.3rem;
  }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .cards.pricing {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .target-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .cards.pricing,
  .nudge-grid,
  .target-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Profile pictures on scan results and the dashboard */
.scan-avatar {
  border-radius: 50%;
  border: 3px solid #c9a227;
  object-fit: cover;
  margin-bottom: 10px;
}

/* Manual official home timeline entry on Gate 3 */
.ht-form { margin-top: 12px; }
.ht-form label { display: block; font-size: 0.85rem; margin-bottom: 6px; }
.ht-form input {
  flex: 1; min-width: 0; padding: 9px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: inherit;
}

/* The JB bull, kept subtle: small round mark by the wordmark and a
   quiet corner piece in the footer. */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-bull { border-radius: 50%; border: 2px solid #c9a227; object-fit: cover; }
.site-footer { position: relative; }
.footer-bull {
  position: absolute; right: 18px; bottom: 14px;
  border-radius: 50%; border: 2px solid rgba(201,162,39,0.55);
  object-fit: cover; opacity: 0.75;
}

/* New tweaks override pass: placed last so these win over any global
   image rule. Round crops for every profile and bull image. */
img.scan-avatar { border-radius: 50% !important; }
img.brand-bull { border-radius: 50% !important; }
img.footer-bull { border-radius: 50% !important; right: 18px !important; left: auto !important; }

/* Locked teaser numbers on the free scan: values X'ed out, dashed and
   muted so the shape of the stat shows without the number. */
.locked-num { color: #8a93a6 !important; letter-spacing: 0.08em; border-bottom: 2px dashed #c8a028; }

.stat-rating { display: block; margin: 4px 0 2px; font-size: 0.82rem; font-weight: 700; color: #c8a028; letter-spacing: 0.02em; }

/* Expandable section windows (Brady, Nov 10, 2026): every dashboard and
   scan section is a small fold. The summary bar is the whole header;
   opening it shows the section content. Pure HTML details/summary, no
   JavaScript. */
details.fold { background: rgba(255,255,255,0.03); border: 1px solid rgba(200,160,40,0.35); border-radius: 12px; padding: 0.4rem 1rem 0.8rem; margin: 0 0 1rem; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; color: #c8a028; font-size: 1.05rem; line-height: 1; }
details.fold[open] > summary::before { content: "▾"; }
details.fold > summary h2 { margin: 0; font-size: 1.25rem; display: inline; }
details.fold > summary:hover h2 { color: #c8a028; }
.locked-tab { background: rgba(255,255,255,0.03); border: 1px solid rgba(200,160,40,0.35); border-radius: 12px; padding: 0.85rem 1rem; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.locked-tab h2 { margin: 0; font-size: 1.25rem; display: inline; }
.locked-tab::before { content: "\1F512"; font-size: 1rem; line-height: 1; }
.locked-pill { margin-left: auto; background: #c8a028; color: #0a1628; font-weight: 700; font-size: 0.85rem; padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap; }

/* Pace bar (Nov 10, 2026): gold while short, green when the needed
   pace is achieved. */
.bar-fill.fill-green { background: var(--green) !important; }
.pace-check { margin-top: 0.5rem; }
.pace-line { margin-bottom: 0.15rem; }
.pace-note { color: var(--muted, #9aa4b2); font-size: 0.92rem; margin-top: 0.15rem; }

/* Pace bar inside the Pace needed stat square (Nov 10, 2026). */
.stat .pace-bar { margin: 6px 0 2px; height: 10px; }

/* Roadmap milestones (Nov 10, 2026) */
.roadmap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.roadmap-status { font-weight: 700; color: var(--gold); white-space: nowrap; }
.roadmap-status.done { color: var(--green); }
.roadmap-card h3 { margin: 2px 0 4px; }

/* Projected payout sliders */
.pp-range { width: 100%; accent-color: #d9a62e; margin: 6px 0 18px; }