/* Shared visual theme for the leaderboard and Content Creator Machine funnel.
   Edit these tokens to update all three pages. Keep page behavior elsewhere. */
:root {
  --speed-bg: #07111f;
  --speed-panel: #102035;
  --speed-raised: #1b304a;
  --speed-text: #f4f7ff;
  --speed-muted: #aebfd5;
  --speed-copy: #cbd8e9;
  --speed-accent: #75caff;
  --speed-teal: #68e2b5;
  --speed-accent-hover: #a2dcff;
  --speed-on-accent: #071c2a;
  --speed-line: rgba(151,179,217,.2);
  --speed-field: #0c192c;
  --speed-field-line: #617c9c;
  --speed-radius-card: 1.25rem;
  --speed-radius-control: .85rem;
  --speed-width: 1000px;
  --speed-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --speed-body-size: 16px;
  --speed-leading: 1.5;
  --speed-heading-size: clamp(2.25rem, 6.4vw, 4.75rem);
  --speed-heading-leading: 1.05;
  --speed-heading-tracking: -.045em;
  --speed-card-padding: clamp(1.4rem, 4vw, 2.5rem);
  --speed-section-gap: 1.75rem;
  --speed-button-weight: 650;
  --speed-soft-accent: rgba(117,202,255,.08);
  --speed-backdrop: radial-gradient(ellipse 85% 640px at 0% 0%,rgba(51,145,255,.4),transparent 85%), radial-gradient(ellipse 70% 600px at 100% 0%,rgba(171,89,227,.3),transparent 85%), linear-gradient(180deg,#124782 0px,#103567 360px,#0b1c33 760px,var(--speed-bg) 1250px);
}

/* Both sites use the same tokens, while keeping their own content/layout. */
.speed-page {
  --bg: var(--speed-bg); --panel: var(--speed-panel);
  --raised: var(--speed-raised); --text: var(--speed-text);
  --muted: var(--speed-muted); --accent: var(--speed-accent);
  --line: var(--speed-line);
  font-family: var(--speed-font);
  font-size: var(--speed-body-size);
  line-height: var(--speed-leading);
}
.speed-page main, .speed-page .site-header, .speed-page footer {
  max-width: var(--speed-width);
}
.speed-page .hero h1, .st-entry h1, .st-thanks h1 {
  font-size: var(--speed-heading-size);
  line-height: var(--speed-heading-leading);
  letter-spacing: var(--speed-heading-tracking);
}
.speed-page main > .hero, .speed-page main > .featured,
.speed-page main > .board, .speed-page main > .rank-section,
.speed-page main > .entry-section, .speed-page main > .about-app {
  border-radius: var(--speed-radius-card);
  margin-bottom: var(--speed-section-gap);
}
.speed-page main > .hero { padding: var(--speed-card-padding); }
.speed-page .hero .hero-copy, .speed-page .featured > p { color: var(--speed-copy); }
.speed-page .brand, .st-brand {
  color: var(--speed-accent); font-family: var(--speed-font);
  font-size: 1.4rem; line-height: 1.15; font-weight: 700;
  letter-spacing: -.025em; text-decoration: none;
}
.speed-page .brand span, .st-brand span {
  display: block; margin-top: .25rem; color: var(--speed-muted);
  font-size: .72rem; line-height: 1.5; font-weight: 450; letter-spacing: .02em;
}
.speed-page .app-cta, .st-entry .st-button, .st-thanks .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1rem;
  color: var(--speed-on-accent); background: var(--speed-accent);
  border: 1px solid var(--speed-accent);
  border-radius: var(--speed-radius-control);
  font-family: var(--speed-font); font-size: .95rem;
  line-height: 1.5; font-weight: var(--speed-button-weight); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.speed-page .app-cta:hover, .st-entry .st-button:hover, .st-thanks .btn:hover {
  background: var(--speed-accent-hover);
}
}

/* Funnel adapter: shared rules, served from the leaderboard's own origin.
   :has scopes builder resets to these pages; it does not affect other funnels. */
body:has(.st-entry), body:has(.st-thanks) {
  color-scheme: dark; margin: 0; background: var(--speed-bg) !important;
  color: var(--speed-text); font-family: var(--speed-font);
  font-size: var(--speed-body-size); line-height: var(--speed-leading);
}
body:has(.st-entry) .c-section, body:has(.st-thanks) .c-section {
  background: transparent !important;
}
.st-entry, .st-thanks {
  width: 100%; max-width: var(--speed-width); margin: 0 auto;
  padding: 0 1.25rem; color: var(--speed-text);
  font-family: var(--speed-font); font-size: var(--speed-body-size);
  line-height: var(--speed-leading); box-sizing: border-box;
}
.st-entry *, .st-thanks * { box-sizing: border-box; }
.st-entry a, .st-thanks a {
  color: var(--speed-accent); text-underline-offset: 4px;
}
.st-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 0; margin: 0 0 .5rem;
}
.st-top > a:last-child {
  display: flex; align-items: center; min-height: 44px; font-size: .85rem;
}
.st-hero, .st-card, .st-thanks-card {
  padding: var(--speed-card-padding); margin: 0 0 var(--speed-section-gap);
  background: var(--speed-panel); border: 1px solid var(--speed-line);
  border-radius: var(--speed-radius-card); box-shadow: none;
}
.st-entry h1, .st-thanks h1 {
  color: var(--speed-text); font-weight: 700; margin: 0 0 1rem;
}
.st-intro, .st-thanks-card > p {
  color: var(--speed-copy); font-size: 1rem; line-height: 1.55;
  margin: 1rem 0;
}
.st-kicker, .st-chip {
  color: var(--speed-accent); font-size: .7rem; font-weight: 650;
  line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 .75rem;
}
.st-grid { display: block; }
.st-card h2, .st-android-intro h2 {
  color: var(--speed-text); font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.2; letter-spacing: -.02em; font-weight: 700;
  margin: .4rem 0 1rem;
}
.st-steps { list-style: none; counter-reset: steps; padding: 0; margin: 1.25rem 0; }
.st-steps li {
  counter-increment: steps; position: relative; padding: 0 0 1.25rem 2.6rem;
}
.st-steps li::before {
  content: counter(steps); position: absolute; top: 0; left: 0;
  display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
  color: var(--speed-accent); background: var(--speed-raised);
  border-radius: 50%; font-size: .8rem; font-weight: 700;
}
.st-steps strong { display: block; color: var(--speed-text); font-size: 1rem; }
.st-steps span { display: block; color: var(--speed-muted); font-size: .95rem; }
.st-note, .st-thanks .small { color: var(--speed-muted); font-size: .8rem; margin: .85rem 0 0; }
.st-android-intro {
  padding: var(--speed-card-padding); padding-bottom: .25rem;
  background: var(--speed-panel); border: 1px solid var(--speed-line);
  border-bottom: 0; border-radius: var(--speed-radius-card) var(--speed-radius-card) 0 0;
}
.st-android-intro p { color: var(--speed-copy); margin: .75rem 0; }
body:has(.st-entry) .c-form {
  max-width: calc(var(--speed-width) - 2.5rem) !important;
  width: calc(100% - 2.5rem) !important; margin: 0 auto var(--speed-section-gap) !important;
  padding: 0 var(--speed-card-padding) var(--speed-card-padding) !important;
  background: var(--speed-panel) !important;
  border: 1px solid var(--speed-line); border-top: 0;
  border-radius: 0 0 var(--speed-radius-card) var(--speed-radius-card);
}
body:has(.st-entry) .c-form .hl-app,
body:has(.st-entry) .c-form .ghl-form-wrap { margin: 0 !important; max-width: none !important; }
body:has(.st-entry) .c-form #_builder-form {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; padding: .75rem 0 0 !important;
  max-width: none !important; color: var(--speed-text) !important;
}
body:has(.st-entry) .c-form #_builder-form label,
body:has(.st-entry) .c-form #_builder-form label *,
body:has(.st-entry) .c-form #_builder-form .label-alignment { color: var(--speed-text) !important; }
body:has(.st-entry) .c-form #form-builder #_builder-form input {
  background: var(--speed-field) !important; color: var(--speed-text) !important;
  border: 1px solid var(--speed-field-line) !important;
  border-radius: var(--speed-radius-control) !important;
  font-family: var(--speed-font) !important; font-size: 16px !important; min-height: 48px;
}
body:has(.st-entry) .c-form #form-builder #_builder-form input::placeholder { color: var(--speed-muted) !important; opacity: 1; }
body:has(.st-entry) .c-form #_builder-form button[type=submit] {
  background: var(--speed-accent) !important; color: var(--speed-on-accent) !important;
  border: 1px solid var(--speed-accent) !important;
  border-radius: var(--speed-radius-control) !important;
  min-height: 48px; padding: .8rem 1rem !important; box-shadow: none !important;
}
body:has(.st-entry) .c-form #_builder-form button[type=submit] * {
  color: var(--speed-on-accent) !important; font-family: var(--speed-font) !important;
  font-size: .95rem !important; font-weight: var(--speed-button-weight) !important;
}
@media (hover: hover) and (pointer: fine) {
body:has(.st-entry) .c-form #_builder-form button[type=submit]:hover { background: var(--speed-accent-hover) !important; }
}
body:has(.st-entry) .c-form #_builder-form .text-element * {
  color: var(--speed-muted) !important; font-family: var(--speed-font) !important;
}
.st-thanks-card { margin-top: .5rem; }
.st-thanks .btn { margin: .75rem 0; }
.st-entry a:focus-visible, .st-thanks a:focus-visible,
body:has(.st-entry) .c-form #form-builder #_builder-form input:focus-visible {
  outline: 3px solid var(--speed-accent); outline-offset: 4px;
}
@media(max-width:649px) {
  :root { --speed-card-padding: 1.2rem; }
  .st-entry, .st-thanks { padding: 0 1rem; }
  body:has(.st-entry) .c-form {
    max-width: calc(var(--speed-width) - 2rem) !important;
    width: calc(100% - 2rem) !important;
  }
  .st-entry .st-button, .st-thanks .btn { display: flex; width: 100%; }
}
@media(prefers-reduced-motion:reduce) { .st-entry, .st-thanks { scroll-behavior: auto; } }

/* CCM renders its page backdrop beside the body. */
html:has(.st-entry) .bg-fixed, html:has(.st-thanks) .bg-fixed { background: var(--speed-bg) !important; }

/* Colourful opening and navy cards are shared across all challenge pages. */
.speed-page, body:has(.st-entry), body:has(.st-thanks) {
  background:var(--speed-backdrop) !important; background-attachment:scroll !important;
}
html:has(.st-entry) .bg-fixed, html:has(.st-thanks) .bg-fixed {
  background:var(--speed-backdrop) !important; background-attachment:scroll !important;
}
.speed-page .hero-stats>div { background:transparent; border:0; }
.speed-page .hero-stats span { color:var(--speed-muted); }
.speed-page .journey-invitation {
  background:var(--speed-soft-accent); border-color:var(--speed-line); border-left-color:var(--speed-accent);
}
@media (hover: hover) and (pointer: fine) {
.speed-page .journey-invitation:hover { border-color:var(--speed-accent); }
}
.speed-page main>.featured, .speed-page main>.rank-section, .speed-page main>.about-app {
  background:linear-gradient(145deg,#142840,#0b1729); border:1px solid var(--speed-line);
}
.speed-page main>.board {
  background:linear-gradient(145deg,#102137,#0a1627); border:1px solid var(--speed-line);
  border-radius:var(--speed-radius-card); padding:1.1rem;
}
.speed-page .compact-rank { background:var(--speed-panel); }
.speed-page .entry-details:nth-child(odd) { background:transparent; }
.speed-page .compact-row { padding-right:0; }
.speed-page.player-page .compact-row { padding-right:1rem; }
.speed-page .segmented button[aria-pressed=true], .speed-page .challenge-pill {
  background:var(--speed-raised); color:var(--speed-text);
}
.speed-page .video-player { background:var(--speed-raised); }
.speed-page .watch-play { color:var(--speed-on-accent); }
.speed-page .sticky-cta { background:var(--speed-field); border-color:var(--speed-line); }
.speed-page .sticky-cta .app-cta { background:var(--speed-accent); color:var(--speed-on-accent); }
.speed-page button, .speed-page select { border-color:var(--speed-field-line); }
.speed-page .app-cta { border-color:var(--speed-accent); }
.speed-page .segmented button { border-color:transparent; }
@media (hover: hover) and (pointer: fine) {
.speed-page .segmented button:hover { border-color:var(--speed-line); }
}


/* Kickstart-inspired hierarchy: colourful invitation, quieter evidence and product cards. */
.speed-page { -webkit-font-smoothing: antialiased; }
.speed-page .site-header { padding-top:1rem; padding-bottom:.75rem; }
.speed-page .brand, .st-brand { color:var(--speed-text); }
.speed-page .brand span, .st-brand span { color:#dbe9fc; }
.speed-page .help-link { color:#e1edff; font-weight:500; }
.speed-page main > .hero, .st-hero {
  background:radial-gradient(ellipse at top right,rgba(118,108,244,.22),transparent 65%),linear-gradient(130deg,rgba(23,75,156,.7),rgba(19,56,110,.68));
  border:1px solid rgba(177,209,255,.24);
  box-shadow:0 18px 60px -32px rgba(0,9,30,.65);
}
.speed-page .hero h1 { max-width:13ch; font-weight:700; }
.speed-page .hero h1 span { color:#a5e6ff; }
.speed-page .hero .hero-kicker, .st-kicker, .st-chip {
  font-size:.7rem; font-weight:700; letter-spacing:.14em; color:#d7e7ff;
}
.speed-page .hero .hero-kicker { margin:0 0 1rem; }
.speed-page .hero .hero-copy { max-width:48ch; color:#e1ebfc; font-size:1.05rem; line-height:1.65; }
.hero-benefits { list-style:none; display:flex; flex-wrap:wrap; gap:.65rem 1.35rem; padding:0; margin:1.3rem 0; color:#e1ebfc; font-size:.8rem; }
.hero-benefits li::before { content:'✓'; color:var(--speed-teal); font-weight:700; margin-right:.45rem; }
.speed-page .hero .journey-invitation { background:rgba(7,24,49,.25); border:1px solid rgba(177,209,255,.22); border-left:3px solid var(--speed-teal); margin:1.4rem 0; padding:1rem 1.1rem; }
.speed-page .journey-invitation strong { font-weight:650; }
.speed-page .journey-invitation span { color:#b8e6ff; }
@media (hover: hover) and (pointer: fine) {
.speed-page .hero .journey-invitation:hover { background:rgba(7,24,49,.4); border-color:var(--speed-teal); }
}
.speed-page .hero-stats { gap:0; padding:1.15rem .25rem; margin:1.4rem 0; background:rgba(5,21,44,.35); border:1px solid rgba(177,209,255,.16); border-radius:1rem; }
.speed-page .hero-stats > div { padding:.25rem .35rem; border-radius:0; }
.speed-page .hero-stats > div + div { border-left:1px solid rgba(177,209,255,.22); }
.speed-page .hero-stats strong { color:var(--speed-text); font-weight:700; letter-spacing:-.04em; font-size:clamp(2rem,6vw,3.5rem); }
.speed-page .hero-stats > div:nth-child(2) strong { color:#8ed7ff; }
.speed-page .hero-stats span { color:#c5d8f0; font-size:.75rem; font-weight:500; }
.speed-page .hero > .app-cta { background:var(--speed-accent); border-color:var(--speed-accent); color:var(--speed-on-accent); }
@media (hover: hover) and (pointer: fine) {
.speed-page .hero > .app-cta:hover { background:var(--speed-accent-hover); border-color:var(--speed-accent-hover); }
}
.st-entry .st-button { background:var(--speed-teal); border-color:var(--speed-teal); color:#08261e; }
@media (hover: hover) and (pointer: fine) {
.st-entry .st-button:hover { background:#9aefcf; border-color:#9aefcf; }
}
.speed-page .featured, .speed-page .board, .speed-page .rank-section, .speed-page .about-app { box-shadow:0 18px 55px -36px #000b; }
.speed-page .featured-heading .eyebrow, .speed-page .eyebrow { color:#b1cbec; font-weight:700; letter-spacing:.13em; }
.speed-page .featured > p { color:var(--speed-copy); line-height:1.65; }
.speed-page .section-heading h2 { font-weight:700; letter-spacing:-.035em; }
.speed-page .segmented { grid-template-columns:repeat(3,minmax(0,1fr)); padding:.3rem; background:#071425; border:1px solid var(--speed-line); border-radius:.85rem; }
.speed-page .segmented button { border-radius:.6rem; font-weight:500; }
.speed-page .segmented button[aria-pressed=true] { background:var(--speed-raised); color:var(--speed-text); font-weight:650; box-shadow:0 2px 8px #0002; }
.speed-page .compact-rank { background:rgba(117,202,255,.08); border:1px solid var(--speed-line); font-weight:600; }
.speed-page .row-identity strong { font-weight:500; }
.speed-page .row-count strong { font-weight:700; color:var(--speed-text); }
.speed-page .row-identity small, .speed-page .row-count small { color:var(--speed-muted); }
@media (hover: hover) and (pointer: fine) {
.speed-page .entry-details > .compact-row:hover { background:rgba(117,202,255,.035); }
}
.speed-page .metric-chart svg, .speed-page .progress-card > svg { background:#091525; border-color:var(--speed-line); }
.speed-page .player-hero, .speed-page .player-invitation, .speed-page .progress-card { background:linear-gradient(145deg,#142840,#0b1729); }
.speed-page.player-page .entry-details { background:#0b1729; }
.speed-page main > .rank-section { border-top:2px solid var(--speed-teal); }
.speed-page .rank-section h2 { font-weight:700; }
.speed-page main > .about-app {
  padding:var(--speed-card-padding);
  background:radial-gradient(ellipse at top right,rgba(82,108,195,.17),transparent 60%),linear-gradient(145deg,#142840,#0a1525);
  border-top:2px solid var(--speed-accent);
}
.product-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2rem; align-items:center; }
.product-copy { min-width:0; }
.product-icon { display:block; width:64px; height:64px; border-radius:1rem; margin-bottom:1.4rem; }
.speed-page .about-app .eyebrow { color:#abc8ef; margin:0 0 1rem; }
.speed-page .about-app h2 { font-size:clamp(2.15rem,4.5vw,3.5rem); font-weight:700; letter-spacing:-.04em; line-height:1.08; margin:0 0 1.25rem; }
.product-copy > p:not(.eyebrow) { color:var(--speed-muted); font-size:.95rem; line-height:1.7; margin:.9rem 0; max-width:40ch; }
.product-copy > .product-lead { color:var(--speed-text)!important; font-size:1.15rem!important; line-height:1.5!important; font-weight:500; }
.product-download { margin-top:1.5rem; }
.app-store-badge { display:inline-block; max-width:100%; padding:15px; margin-left:-15px; line-height:0; border-radius:.5rem; }
.app-store-badge img { display:block; width:180px; max-width:100%; height:auto; }
.product-download .product-platforms { color:var(--speed-text); font-size:.85rem; font-weight:500; margin:.3rem 0; }
.product-download .product-access { color:var(--speed-muted); font-size:.75rem; line-height:1.65; margin:.75rem 0 0; }
.product-visual { min-width:0; margin:0; text-align:center; }
.product-visual > img { display:block; width:100%; max-width:340px; height:auto; margin:auto; filter:drop-shadow(0 20px 30px #0005); }
.product-visual figcaption { color:var(--speed-muted); font-size:.75rem; line-height:1.6; margin:.3rem 0 0; }
.speed-page .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:2rem 0 1.25rem; }
.speed-page .feature-grid article { padding:1.25rem; border:1px solid var(--speed-line); border-top:2px solid var(--speed-accent); background:linear-gradient(145deg,rgba(30,53,82,.8),rgba(14,29,48,.8)); border-radius:1rem; min-width:0; }
.speed-page .feature-grid article:nth-child(2), .speed-page .feature-grid article:nth-child(3) { border-top-color:var(--speed-teal); }
.feature-symbol { display:grid; place-items:center; width:34px; height:34px; background:rgba(117,202,255,.1); color:var(--speed-accent); border-radius:.6rem; margin-bottom:1rem; font-size:1.2rem; font-weight:500; }
.speed-page .feature-grid h3 { color:var(--speed-text); font-size:1rem; font-weight:650; line-height:1.3; margin:0 0 .6rem; }
.speed-page .feature-grid p { color:var(--speed-muted); font-size:.85rem; font-weight:400; line-height:1.65; margin:0; }
.product-more { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; font-size:.9rem; font-weight:600; text-decoration:none; }
@media (hover: hover) and (pointer: fine) {
.product-more:hover { text-decoration:underline; }
}
.speed-page .sticky-cta { background:rgba(12,25,44,.97); box-shadow:0 8px 35px #0008; }
.speed-page .sticky-cta .app-cta { font-weight:650; }
.st-card, .st-thanks-card, .st-android-intro, body:has(.st-entry) .c-form { background:linear-gradient(145deg,#142840,#0b1729)!important; }
.st-steps strong { font-weight:600; }
.st-steps li::before { color:var(--speed-teal); background:rgba(104,226,181,.08); border:1px solid rgba(104,226,181,.2); }
.st-intro { color:#e1ebfc; line-height:1.65; }
@media(min-width:650px) {
  .speed-page .hero .hero-copy { font-size:1.15rem; }
  .speed-page .hero-stats { margin:1.75rem 0; padding:1.3rem .5rem; }
  .speed-page .hero-stats span { font-size:.85rem; }
  .speed-page .hero > .app-cta { width:auto; min-width:260px; min-height:52px; font-size:1rem; }
  .speed-page main > .featured, .speed-page main > .board, .speed-page main > .rank-section { padding:var(--speed-card-padding); }
}
@media(max-width:649px) {
  .product-grid { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .product-visual > img { max-width:270px; }
  .speed-page .feature-grid { grid-template-columns:minmax(0,1fr); gap:.85rem; margin-top:1.5rem; }
  .speed-page .feature-grid article { padding:1.1rem; }
  .speed-page .hero h1 { max-width:13ch; }
  .hero-benefits { gap:.6rem 1rem; font-size:.75rem; }
  .speed-page .hero-stats strong { font-size:clamp(1.8rem,8vw,2.5rem); }
  .speed-page .hero-stats span { font-size:.68rem; }
  .speed-page .sticky-cta > div { min-width:0; }
  .speed-page .sticky-cta .app-cta { font-size:.8rem; padding:.6rem .7rem; }
}
@media(prefers-contrast:more) {
  :root { --speed-muted:#d0dced; --speed-line:rgba(180,205,237,.5); }
}

/* App browsers lead with standings; keep rules and support available below. */
#app-heading { display:none; }
html[data-presentation="app"] #hero,
html[data-presentation="app"] #record-note,
html[data-presentation="app"] #featured,
html[data-presentation="app"] #rank-section,
html[data-presentation="app"] #about-app,
html[data-presentation="app"] #sticky-cta,
html[data-presentation="app"] #player-invitation,
html[data-presentation="app"] .site-header .help-link,
html[data-presentation="app"] .footer-links > a { display:none!important; }
html[data-presentation="app"] #app-heading {
  display:block; font-size:clamp(1.5rem,5vw,2rem); margin:1rem 0;
}
html[data-presentation="app"] .speed-page main { padding-top:0; }
html[data-presentation="app"] .speed-page footer { padding-bottom:1rem; }