:root {
  --sn: #FFCC00;
  --sn-ink: #0f1115;
  --sn-bg: #0f1115;
  --sn-surface: #171a21;
  --sn-surface-2: #1e222b;
  --sn-line: #2a2f3a;
  --strava: #FC4C02;
  --bs-body-bg: var(--sn-bg);
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-link-color-rgb: 255, 204, 0;
  --bs-link-hover-color-rgb: 255, 221, 87;
}
body { background: var(--sn-bg); }
h1, h2, h3, .sn-display, .sn-h2, .sn-brand { font-family: "Space Grotesk", system-ui, sans-serif; }
a { text-decoration: none; }
.text-sn { color: var(--sn) !important; }
code { color: var(--sn); }

/* nav */
.sn-nav { background: rgba(15, 17, 21, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sn-line); }
.sn-brand { font-weight: 700; font-size: 1.35rem; color: #fff; letter-spacing: -.01em; }
.sn-brand span, .sn-brand i { color: var(--sn); }
.navbar-toggler { color: #fff; border-color: var(--sn-line); }

/* buttons */
.btn-sn { background: var(--sn); color: var(--sn-ink); font-weight: 600; border: 0; }
.btn-sn:hover, .btn-sn:focus { background: #ffd83d; color: var(--sn-ink); }
.btn-sn-outline { border: 1px solid var(--sn); color: var(--sn); font-weight: 500; }
.btn-sn-outline:hover { background: var(--sn); color: var(--sn-ink); }
.btn-strava { background: var(--strava); color: #fff; font-weight: 600; border: 0; }
.btn-strava:hover { background: #e34402; color: #fff; }
.btn-sn-toggle { border: 1px solid var(--sn-line); color: var(--bs-body-color); }
.btn-check:checked + .btn-sn-toggle { background: var(--sn); color: var(--sn-ink); border-color: var(--sn); font-weight: 600; }

/* hero */
.sn-hero { padding: 5rem 0 4rem; position: relative; overflow: hidden;
  background: radial-gradient(900px 500px at 85% 20%, rgba(255, 204, 0, .10), transparent 60%); }
.sn-eyebrow { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--sn-line); border-radius: 999px;
  font-size: .85rem; color: var(--bs-secondary-color); background: var(--sn-surface); }
.sn-display { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.sn-display s { text-decoration-color: var(--sn); text-decoration-thickness: .12em; color: #8a93a3; }
.sn-h2 { font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.01em; }

.sn-card-mock { max-width: 540px; background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: 1.25rem;
  padding: 1.75rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.sn-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sn); color: var(--sn-ink); font-size: 1.2rem; flex: none; }
.sn-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.sn-old { color: #8a93a3; text-decoration: line-through; text-decoration-color: var(--strava); font-weight: 500; }
.sn-new { font-family: "Space Grotesk", sans-serif; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; min-height: 2.6em; line-height: 1.25; }
.sn-caret { display: inline-block; width: 3px; height: 1em; background: var(--sn); margin-left: 4px; vertical-align: -.12em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sn-metrics { border-top: 1px solid var(--sn-line); padding-top: 1rem; }
.sn-road { height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--sn) 0 28px, transparent 28px 48px); animation: road 1.2s linear infinite; opacity: .8; }
@keyframes road { to { background-position: -48px 0; } }
@media (prefers-reduced-motion: reduce) { .sn-road, .sn-caret { animation: none; } }

/* sections */
.sn-band { background: var(--sn-surface); border-top: 1px solid var(--sn-line); border-bottom: 1px solid var(--sn-line); }
.sn-step, .sn-cat, .sn-panel, .sn-feature { background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: 1rem; padding: 1.5rem; height: 100%; position: relative; }
.sn-band .sn-cat { background: var(--sn-surface-2); }
.sn-step-n { position: absolute; top: 1rem; right: 1.25rem; font-family: "Space Grotesk"; font-size: 3rem; font-weight: 700; color: rgba(255, 204, 0, .12); line-height: 1; }
.sn-feature { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; }
.sn-feature > i { color: var(--sn); font-size: 1.4rem; margin-top: .15rem; }
.sn-badge { background: rgba(255, 204, 0, .12); color: var(--sn); font-weight: 600; }
.sn-chip { display: inline-flex; align-items: center; padding: .45rem .9rem; border-radius: 999px; background: var(--sn-bg); border: 1px solid var(--sn-line); font-size: .92rem; }
.sn-chip i { color: var(--sn); }
.sn-acc .accordion-item { background: var(--sn-surface); border-color: var(--sn-line); }
.sn-acc .accordion-button { background: var(--sn-surface); font-weight: 600; }
.sn-acc .accordion-button:not(.collapsed) { color: var(--sn); box-shadow: none; }
.sn-cta { background: linear-gradient(120deg, rgba(255, 204, 0, .14), rgba(255, 204, 0, .03)); border: 1px solid rgba(255, 204, 0, .35); border-radius: 1.25rem; padding: 2rem; }
.sn-alert { background: rgba(255, 204, 0, .1); border: 1px solid rgba(255, 204, 0, .4); color: #fff; }
.sn-danger { border-color: rgba(220, 53, 69, .45); }
.sn-hist li { padding: .6rem 0; border-bottom: 1px solid var(--sn-line); }
.sn-hist li:last-child { border-bottom: 0; }
.sn-table { --bs-table-bg: transparent; }
.sn-footer { border-top: 1px solid var(--sn-line); background: var(--sn-surface); }
.sn-powered { color: var(--strava); font-weight: 600; }

/* Strava brand assets — official files, unmodified */
.sn-connect { display: inline-block; line-height: 0; }
.sn-connect img { height: 48px; width: auto; }
.sn-powered img { height: 20px; width: auto; }
.sn-view-strava { color: #FC5200 !important; font-weight: 700; text-decoration: underline; }
.sn-panel { height: auto; }