/* ============================================================================
   Amathlon marketing site
   ----------------------------------------------------------------------------
   Colour tokens are lifted verbatim from the shipped app so the site and the
   app read as one product:
     frontend for sportsman/app/globals.css   (values)
     frontend for sportsman/tailwind.config.js (names)
   Light only — the owner's call, 2026-09-06.

   One visual world, top to footer (2026-09-11, after the dual-agent critique):
   the record book. Engraved serif for anything real-world, app sans for
   product UI, court green as the single accent. Illustrative app chips (.sv)
   are set in the app's own dark navy so they can never be mistaken for the
   site's real, green controls.

   Never hardcode a colour below the token block — use a token.
   ========================================================================= */

:root {
    --canvas: #FAF9F6;
    --surface: #FFFFFF;
    --champagne: #F1EFE9;
    --line: #D9D4C9;
    --accent: #1E6B52;
    --accent-deep: #14523E;
    --ink: #191C1A;
    --ink-muted: #565E58;
    --ink-faint: #8A8F8B;
    --amber: #915D00;
    --win: #0E7A3C;
    --loss: #BE1B43;

    /* Trophy Room placement metals — light variants of lib/theme.ts. */
    --metal-gold: #8A6D2F;
    --metal-silver: #6A727C;
    --metal-bronze: #8C5830;

    /* The app's own chrome, used ONLY for illustrative in-card app UI. */
    --app-navy: #101828;
    --app-navy-ink: #E0E5F6;

    /* Type */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

    /* Rhythm & motion */
    --wrap: 1120px;
    --wrap-narrow: 760px;
    --radius: 12px;
    --section-y: 96px;
    --ease-strong: cubic-bezier(.23, 1, .32, 1);
    --ease-soft: cubic-bezier(.16, 1, .3, 1);

    color-scheme: light;
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    /* Reduced motion means less movement, not zero feedback: colour and
       opacity fades stay, transforms are pinned so nothing travels. */
    .btn:active { transform: none; }
    .nav__links, .form-status { transform: none !important; }
    .sc__m { transition: opacity 150ms ease; transform: none; filter: none; }
    .rib { overflow-x: auto; }
    .rib__t { animation: none !important; }
    .rib__t[aria-hidden] { display: none; }
    #record.will-build .bd__h,
    #record.will-build .bd__s,
    #record.will-build .tr li,
    #record.will-build .crv__plot *,
    #record.will-build .crv__svg * { opacity: 1; filter: none; }
    #record.will-build .crv__draw { clip-path: none; }
    .fq details::details-content { transition: none; }
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
/* Hover styling only where a hover actually exists — on touch, tap-triggered
   :hover sticks until the next tap, leaving false active states. */
@media (hover: hover) and (pointer: fine) {
    a:hover { text-decoration: underline; }
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 650; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* The browser surfaces nobody draws still carry the design. */
::selection { background: color-mix(in srgb, var(--accent) 22%, #FFFFFF); color: var(--ink); }
input, textarea { caret-color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #fff;
    padding: 12px 20px;
    z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* -------------------------------------------------------------- layout --- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 24px;
}
.wrap--narrow { max-width: var(--wrap-narrow); }

section { padding-block: var(--section-y); }
section + section { padding-top: 0; }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2,
.signup h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.005em;
}
.section-head h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.06; }
.lede {
    font-size: 19px;
    color: var(--ink-muted);
    line-height: 1.6;
}

.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

/* ----------------------------------------------------------------- nav --- */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--canvas) 88%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
    margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links > * { flex: none; }

.nav__links a:not(.btn) {
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 550;
    padding: 8px 13px;
    border-radius: 9px;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
    .nav__links a:not(.btn):hover { color: var(--ink); background: var(--champagne); text-decoration: none; }
    .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
    .store-badge.is-live:hover { background: var(--champagne); text-decoration: none; }
    .footer ul a:hover { color: var(--ink); }
}
.nav__links a:not(.btn)[aria-current="page"] { color: var(--ink); }

.nav__toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    width: 40px; height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.nav__toggle svg { width: 20px; height: 20px; }

@media (max-width: 820px) {
    /* Sign up (.nav__cta) lives OUTSIDE the collapsible list on purpose: a
       phone visitor must see the one action without opening the hamburger.
       order pushes the toggle to the far right, after the button. */
    .nav__toggle { display: inline-flex; order: 1; }
    .nav__links {
        position: fixed;
        inset: 68px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--canvas);
        border-bottom: 1px solid var(--line);
        padding: 10px 24px 22px;
        /* The menu arrives rather than popping into existence. Browsers
           without allow-discrete simply toggle instantly, as before. */
        transition: opacity 150ms var(--ease-strong),
            transform 150ms var(--ease-strong),
            display 150ms allow-discrete;
    }
    .nav__links:not(.is-open) {
        display: none;
        opacity: 0;
        transform: translateY(-6px);
    }
    @starting-style {
        .nav__links.is-open { opacity: 0; transform: translateY(-6px); }
    }
    .nav__links a:not(.btn) { padding: 13px 4px; font-size: 17px; border-radius: 0; }
    .nav__links a:not(.btn):hover { background: none; }
    .nav__links .btn { margin-top: 12px; justify-content: center; }
}

/* -------------------------------------------------------------- buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    /* Strong ease-out on the press: the transform must answer instantly. */
    transition: background-color .15s ease, border-color .15s ease,
        transform 150ms var(--ease-strong);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn--sm { padding: 9px 17px; font-size: 15px; }
.btn--block { width: 100%; }

/* Store badge — deliberately inert until the app is actually published.
   site.js swaps these for real links when STORE_LIVE flips to true. */
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px;
    border-radius: 11px;
    border: 1px dashed var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 15px;
    cursor: default;
    margin-top: 18px;
    transition: background-color 150ms ease;
}
.store-badge svg { width: 20px; height: 20px; flex: none; opacity: .75; }
.store-badge b { color: var(--ink); font-weight: 600; display: block; font-size: 15px; }
.store-badge span { display: block; font-size: 12.5px; line-height: 1.3; }
.store-badge.is-live {
    border-style: solid;
    cursor: pointer;
    color: var(--ink);
}

/* --------------------------------------------------------------- cards --- */

.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.band {
    background: var(--surface);
    border-block: 1px solid var(--line);
}

/* Impact bands, mirroring lib/improvement.ts */
.impact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.impact-band {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .05em;
}
.impact-band i { width: 9px; height: 9px; border-radius: 50%; flex: none; font-style: normal; }
.impact-band--rising { color: #17707B; }
.impact-band--rising i { background: #17707B; }
.impact-band--proven { color: #915D00; }
.impact-band--proven i { background: #915D00; }
.impact-band--elite { color: #8A6D2F; }
.impact-band--elite i { background: #8A6D2F; }
.impact-band b { font-weight: 700; margin-left: 3px; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- list -- */

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.ticks li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--ink-muted);
    font-size: 15.5px;
    line-height: 1.55;
}
.ticks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent); }
.ticks b { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------- form -- */

.signup {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px 30px 26px;
    margin-top: 56px;
    max-width: var(--wrap-narrow);
}
.signup h2 { font-size: 28px; margin-bottom: 10px; }
.band .signup { margin-top: 0; }
.signup p { color: var(--ink-muted); font-size: 16px; }

.field-row {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}
.field-row input { flex: 1 1 auto; min-width: 0; }
.field-row .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
    .field-row { flex-direction: column; }
    .field-row .btn { width: 100%; }
}

input[type="email"],
input[type="text"],
textarea,
select {
    font: inherit;
    font-size: 16px;
    width: 100%;
    padding: 13px 16px;
    color: var(--ink);
    background: var(--champagne);
    border: 1px solid var(--line);
    border-radius: 11px;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 7px;
}

.form-note { font-size: 13.5px; color: var(--ink-muted); margin-top: 14px; }

.form-status {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 11px;
    font-size: 15px;
    border: 1px solid var(--line);
    background: var(--champagne);
    color: var(--ink-muted);
    /* The status is the answer to the user's submit — it should arrive,
       not pop. Falls back to an instant toggle without allow-discrete. */
    transition: opacity 200ms var(--ease-strong),
        transform 200ms var(--ease-strong),
        display 200ms allow-discrete;
}
.form-status[hidden] { display: none; opacity: 0; transform: translateY(4px); }
@starting-style {
    .form-status:not([hidden]) { opacity: 0; transform: translateY(4px); }
}
.form-status a { font-weight: 600; }

/* --------------------------------------------------------------- footer -- */

.footer {
    border-top: 1px solid var(--line);
    padding-block: 56px 44px;
    color: var(--ink-muted);
    font-size: 15px;
    background: var(--canvas);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-bottom: 44px;
}
@media (max-width: 780px) {
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer__brand { grid-column: 1 / -1; }
}
.footer h4 {
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
    margin-bottom: 15px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a { color: var(--ink-muted); font-size: 15px; }
.footer__brand p { font-size: 15px; max-width: 32ch; }
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    justify-content: space-between;
    align-items: center;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-faint);
}

/* ------------------------------------------------------------ prose ------ */

.prose { max-width: 68ch; }
.prose h2 { font-size: 24px; margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin-top: 30px; }
.prose p, .prose li { color: var(--ink-muted); font-size: 16.5px; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 9px; margin-bottom: 1.2em; }
.prose strong { color: var(--ink); }

.callout {
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
    background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 20px 24px;
    margin-bottom: 34px;
}
.callout p { font-size: 15.5px; margin: 0; }
.callout strong { color: var(--ink); }

/* -------------------------------------------------------------- lines --- */

.lines {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 48px;
}
@media (min-width: 860px) {
    .lines { grid-template-columns: 1fr 1fr; }
}
.line { padding: 24px 0 28px; border-top: 1px solid var(--line); }
.line h3 { font-size: 17px; margin-bottom: 9px; letter-spacing: -.005em; }
.line p { color: var(--ink-muted); font-size: 15.5px; margin: 0; }
.line .ticks { margin-top: 4px; }

/* -------------------------------------------------------- scroll anchor -- */

section[id], .signup { scroll-margin-top: 88px; }

.col-head {
    font-size: 17px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid currentColor;
}
.col-head--yes { color: var(--win); }
.col-head--no  { color: var(--ink-muted); }
.ticks--no svg { color: var(--ink-faint); }

.note {
    font-size: 14px;
    color: var(--ink-muted);
    margin-top: 18px;
    max-width: 62ch;
}

/* -------------------------------------------------------- partners ----- */

.partner { border-top: 1px solid var(--line); }
.partner > .wrap > h2 {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(30px, 3.6vw, 44px); line-height: 1.06; margin-bottom: 16px;
}
.partner .lede { margin-bottom: 28px; max-width: 56ch; }
.partner .impact { margin-bottom: 26px; }

/* ============================================== the engraved layer ------ */
/* Engraved serif for everything real-world, app sans for product UI —
   the rule comes from lib/trophies.ts. */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.engraved { font-family: var(--font-display); font-weight: 600; }

[data-metal="gold"]   { --metal: var(--metal-gold); }
[data-metal="silver"] { --metal: var(--metal-silver); }
[data-metal="bronze"] { --metal: var(--metal-bronze); }

/* Cormorant Garamond ships oldstyle figures by default; every place a number
   is set in the display face needs lining figures. */
.engraved,
.bd__h,
.hero h1,
.crv__mk b,
.tr b,
.tr i {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ================================================= screen one: the ask -- */

.screen { position: relative; overflow: hidden; }
.screen__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    z-index: 0;
}
.screen__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(250, 249, 246, .92) 0%,
        rgba(250, 249, 246, .70) 42%,
        rgba(250, 249, 246, .88) 100%);
}
.screen > section { position: relative; z-index: 2; }

.hero { padding-block: 72px 78px; text-align: center; }
.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(38px, 5.3vw, 76px);
    line-height: 1.0;
    letter-spacing: -.02em;
    color: #12211B;
    margin: 0 auto 14px;
}
.hero__sub {
    font-size: clamp(14px, 1.25vw, 17.5px);
    line-height: 1.5;
    color: #3D443F;
    max-width: 56ch;
    margin: 0 auto;
}
.hero__form { max-width: 460px; margin: 26px auto 0; }
.hero__form .field-row { margin-top: 0; }
.hero__form input { background: rgba(255, 255, 255, .92); }
.hero__form .form-status { text-align: left; }

/* ------------------------------------------------------------ the ribbon */
/* Everything in the app, drifting past on court paint. Constant motion, so
   the easing is linear; slow enough to read; pausable on hover; static and
   hand-scrollable under reduced motion. */

.rib {
    display: flex;
    overflow: hidden;
    background: var(--accent-deep);
    border-block: 1px solid color-mix(in srgb, var(--accent-deep) 80%, #000000);
    user-select: none;
}
.rib__t {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    flex: none;
    animation: rib 48s linear infinite;
}
.rib li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 13px 0 13px 30px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .015em;
    color: #E7EFE9;
}
.rib li::after {
    content: "";
    width: 6px; height: 6px;
    border-radius: 999px;
    background: #C8D96B;   /* a tennis ball on court paint */
    margin-left: 30px;
    opacity: .9;
}
@keyframes rib { to { transform: translateX(-100%); } }
@media (hover: hover) and (pointer: fine) {
    .rib:hover .rib__t { animation-play-state: paused; }
}
/* Touch can't hover: a held finger pauses the ribbon instead (site.js). */
.rib.is-held .rib__t { animation-play-state: paused; }

/* ------------------------------------------------------- page sections -- */

.bd { padding-block: 88px; text-align: center; }
.bd__h {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.06;
    letter-spacing: -.005em;
    margin: 0 0 14px;
}
.bd__s {
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 56ch;
    margin: 0 auto 44px;
}
#story .bd__h { margin-bottom: 40px; }

/* ------------------------------------------------- the seven moments ---- */

.sc {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 56px;
    text-align: left;
    align-items: start;
}
.sc__steps { padding-block: 6vh 8vh; }
.sc__step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    min-height: 44vh;
    padding-block: 4vh;
}
.st__n {
    font-style: normal;
    flex: none;
    width: 32px; height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 700;
    background: var(--canvas);
    color: var(--ink-muted);
    border: 1px solid var(--line);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sc__step.is-on .st__n { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc__tx b {
    display: block;
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink-muted);
    transition: color 200ms ease;
}
.sc__step.is-on .sc__tx b { color: var(--ink); }
.sc__tx > p {
    font-size: 15.5px;
    color: var(--ink-muted);
    margin: 8px 0 0;
    line-height: 1.6;
    max-width: 42ch;
}

.sc__media { position: sticky; top: 92px; height: min(72vh, 640px); }
.sc__m {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(25, 28, 26, .16);
    opacity: 0;
    /* Asymmetric: the outgoing photo leaves fast, the incoming one settles.
       The 2px blur bridges the crossfade so two overlapping images read as
       one transformation instead of a swap. */
    filter: blur(2px);
    transition: opacity 150ms var(--ease-strong), filter 150ms var(--ease-strong);
}
.sc__m.is-on {
    opacity: 1;
    filter: blur(0);
    transition: opacity 260ms var(--ease-strong), filter 260ms var(--ease-strong);
}
/* Two-beat entrance: the photograph settles first, the card rises a beat
   later. Continuous life comes from --drift, a scroll-linked translate the
   script feeds; scale(1.08) keeps edges hidden while it moves. */
.sc__m img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transform: translateY(var(--drift, 0px)) scale(1.08);
}
.sc__m .sc__art {
    position: absolute;
    left: 22px; bottom: 22px;
    width: min(330px, 78%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 120ms var(--ease-strong),
        transform 120ms var(--ease-strong);
}
.sc__m.is-on .sc__art {
    opacity: 1;
    transform: none;
    transition: opacity 300ms var(--ease-strong) 90ms,
        transform 300ms var(--ease-strong) 90ms;
}
.sc__count {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 1px;
    background: color-mix(in srgb, var(--canvas) 88%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.sc__count b { color: var(--ink); font-size: 13.5px; }
.sc__fig { display: none; }

/* --- the artefacts: the app's furniture, floating on the photographs ---- */

.gc, .sl, .cf, .cc {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 26px rgba(25, 28, 26, .18);
    padding: 15px 17px;
    text-align: left;
}
.gc { display: flex; flex-direction: column; gap: 4px; }
.gc__tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.gc b { font-size: 16px; color: var(--ink); }
.gc span { font-size: 13.5px; color: var(--ink-muted); }
.gc em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--win); }

.sl__hd { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.sl__row { display: flex; gap: 8px; flex-wrap: wrap; }
.sl__s {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 13px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: var(--canvas);
}
.sl__s--gone { color: var(--ink-faint); text-decoration: line-through; background: transparent; }
.sl__s--pick { background: var(--accent); border-color: var(--accent); color: #fff; }
.sl__note { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }

.msb {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    text-align: left;
    box-shadow: 0 10px 26px rgba(25, 28, 26, .18);
}
.msb__r { display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; align-items: center; }
.msb__r span { padding: 12px 16px; font-size: 15.5px; font-weight: 700; color: var(--ink-muted); }
.msb__r--w span { color: var(--ink); }
.msb__r b {
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    color: var(--ink-muted);
    background: var(--champagne);
    border-left: 1px solid var(--line);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msb__r--w b { color: var(--ink); }
.msb__r + .msb__r { border-top: 1px solid var(--line); }
.msb--entry .msb__r b { background: color-mix(in srgb, var(--accent) 10%, #FFFFFF); }

/* Illustrative app chip — the app's own dark chrome, so it can never be
   mistaken for one of the site's green controls. Not interactive. */
.sv {
    margin-top: 10px;
    text-align: center;
    background: var(--app-navy);
    color: var(--app-navy-ink);
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    padding: 10px 0;
    cursor: default;
    box-shadow: 0 10px 26px rgba(25, 28, 26, .18);
}

.ok { position: relative; padding-left: 24px; font-size: 14.5px; font-weight: 600; color: var(--win); }
.ok::before {
    content: "";
    position: absolute;
    left: 2px; top: 5px;
    width: 11px; height: 5.5px;
    border-left: 2.4px solid var(--win);
    border-bottom: 2.4px solid var(--win);
    transform: rotate(-45deg);
}
.cf { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cf__d { font-size: 14px; color: var(--ink-muted); }
.cf__d b { color: var(--ink); }

.fd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.fd--card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 26px rgba(25, 28, 26, .18);
    padding: 13px;
}
.fd li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-muted); }
.fd b { color: var(--ink); }
.fd i {
    font-style: normal;
    flex: none;
    width: 22px; height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.fd i[data-wl="w"] { color: var(--win); border: 1.5px solid var(--win); }
.fd__new {
    background: color-mix(in srgb, var(--win) 8%, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--win) 26%, #FFFFFF);
    border-radius: 10px;
    padding: 8px 10px;
}

.cc { display: flex; flex-direction: column; gap: 6px; }
.cc__tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.cc b { font-size: 17px; color: var(--ink); }
.cc span { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.cc span b { font-size: 14px; color: var(--win); }

/* ------------------------------------------- the tiers and the climb --- */
/* Six tiers on the left, one season's rating on the right. The drawing is
   paths only — no text and no circles inside the SVG — so it can be squeezed
   to a phone's aspect ratio with preserveAspectRatio="none" without
   distorting anything that reads. Every dot and label is an HTML element
   positioned in percentages over the top, on the same scale the paths use:
   218 sits at 76.848% of the plot's height and 330 at 19.022%. */

.rec {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    text-align: left;
}

.tr { list-style: none; margin: 0; padding: 0; }
.tr li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0 11px 22px;
    position: relative;
    color: var(--ink-faint);
}
.tr__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tr li::before {
    content: "";
    position: absolute;
    left: -5px; top: 1.05em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--canvas);
    box-shadow: inset 0 0 0 2px var(--line);
}
.tr b { font-family: var(--font-display); font-size: 23px; font-weight: 600; flex: 1; }
.tr i { font-style: normal; font-size: 13px; }

/* The tier this record sits in says so with the rail, the dot and the colour.
   No sentence explains it. */
.tr li[data-here] { color: var(--ink); }
.tr li[data-here] .tr__rail { background: var(--metal-gold); }
.tr li[data-here]::before {
    background: var(--metal-gold);
    box-shadow: 0 0 0 4px var(--canvas);
    left: -6px; width: 10px; height: 10px;
}
.tr li[data-here] b { color: var(--metal-gold); font-size: 27px; }
.tr li[data-here] i { color: var(--metal-gold); font-weight: 650; }

.crv__plot { position: relative; width: 80%; aspect-ratio: 1200 / 460; }
.crv__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the line and the tint under it live in their own layer, so one wipe reveals
   both and neither can appear ahead of the other. The band and the two rules
   stay outside it: the empty chart is there before the drawing starts. */
.crv__draw { position: absolute; inset: 0; }
.crv__band { fill: color-mix(in srgb, var(--metal-gold) 15%, transparent); }
.crv__fill { fill: color-mix(in srgb, var(--accent) 6%, transparent); }
.crv__trace {
    fill: none;
    stroke: var(--accent-deep);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.crv__rule { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.crv__rule--gold { stroke: var(--metal-gold); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .85; }

.crv__node {
    position: absolute;
    width: 11px; height: 11px;
    border-radius: 50%;
    translate: -50% -50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 2.5px var(--accent-deep);
}
.crv__node[data-wl="l"] { box-shadow: inset 0 0 0 2.5px var(--loss); }
.crv__node--first { width: 9px; height: 9px; box-shadow: inset 0 0 0 2.5px var(--ink-faint); }
.crv__node--last {
    width: 16px; height: 16px;
    background: var(--accent-deep);
    box-shadow: 0 0 0 4px var(--canvas);
}

.crv__gold {
    position: absolute;
    left: 0;
    translate: 0 -150%;
    font-size: 11.5px;
    color: var(--metal-gold);
    white-space: nowrap;
}
.crv__mk { position: absolute; top: var(--top); white-space: nowrap; }
.crv__mk b { display: block; font-family: var(--font-display); font-weight: 600; line-height: 1; }
.crv__mk span { display: block; }
.crv__mk--start { left: 0; translate: 0 -50%; }
.crv__mk--start b { font-size: 21px; color: var(--ink-faint); }
.crv__mk--start span { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.crv__mk--end { left: 88%; margin-left: 22px; translate: 0 -50%; }
.crv__mk--end b { font-size: clamp(34px, 4.4vw, 58px); line-height: .85; letter-spacing: -.02em; }
.crv__mk--end span { font-size: 12.5px; color: var(--ink-muted); margin-top: 7px; }

/* The drawing is aria-hidden, so this table is what a screen reader gets.
   Taken out of the flow rather than hidden — display:none is not announced.
   The clip sits on a wrapper because a <table> ignores width:1px and sizes
   itself to its content, which pushed the document 288px wide. */
.crv__data {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The section's one delight moment: it arrives out of focus and resolves, and
   the line is DRAWN rather than faded in — the empty chart appears first, then
   the stroke travels from 1128 and each dot lands at the moment the tip
   reaches it. Those moments are not evenly spaced: the delay on every node is
   its real position along the path, worked out when the markup is generated.

   Class-driven transitions rather than keyframes, so every settled state is a
   static computed value and a resize can never strand a piece mid-reveal. */
#record.will-build .bd__h,
#record.will-build .bd__s,
#record.will-build .tr li,
#record.will-build .crv__band,
#record.will-build .crv__rule,
#record.will-build .crv__node,
#record.will-build .crv__gold,
#record.will-build .crv__mk { opacity: 0; filter: blur(7px); }
#record.is-built .bd__h,
#record.is-built .bd__s,
#record.is-built .tr li,
#record.is-built .crv__band,
#record.is-built .crv__rule,
#record.is-built .crv__node,
#record.is-built .crv__gold,
#record.is-built .crv__mk {
    opacity: 1;
    filter: none;
    transition: opacity 700ms var(--ease-soft), filter 700ms var(--ease-soft);
}
#record.is-built .bd__s { transition-delay: 180ms; }
#record.is-built .tr li { transition-delay: calc(260ms + var(--i) * 55ms); }

/* The reveal is a left-to-right clip wipe, not a stroke-dash: the trace
   carries vector-effect: non-scaling-stroke, and that rescales dash lengths
   by the rendered stroke scale, so a dashoffset animation ran visibly ahead
   of the dots it was supposed to meet. x increases monotonically along this
   path, so a wipe front IS the drawing tip — and a clip on an HTML wrapper
   resolves against its border box in every browser, which a basic-shape clip
   on an SVG child does not. It stops at the last match; nothing is painted
   right of it. Linear, so the tip travels at a constant speed. */
#record.will-build .crv__draw { clip-path: inset(0 100% 0 0); }
#record.is-built .crv__draw {
    clip-path: inset(0 12% 0 0);
    transition: clip-path 1000ms linear 220ms;
}
#record.is-built .crv__band,
#record.is-built .crv__rule { transition-delay: 120ms; }
#record.is-built .crv__node { transition-duration: 380ms; transition-delay: var(--d, 340ms); }
#record.is-built .crv__node--first { transition-delay: 220ms; }
#record.is-built .crv__gold { transition-delay: 440ms; }
#record.is-built .crv__mk--start { transition-delay: 300ms; }
#record.is-built .crv__mk--end { transition-delay: 1180ms; }

@media (max-width: 880px) {
    .rec { grid-template-columns: 1fr; gap: 34px; }
    /* At phone width the season's start and end figures cannot sit beside the
       drawing, so they become the line underneath it. */
    .crv__plot { width: 100%; aspect-ratio: 660 / 440; margin-bottom: 58px; }
    .crv__mk { top: 100%; translate: 0 10px; }
    .crv__mk--end { left: auto; right: 0; margin-left: 0; text-align: right; }
    .crv__mk--end b { font-size: 38px; }
}

/* -------------------------------------------------------- plain facts --- */

.bd--facts { padding-block: 0 88px; }
.tbl { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 0; }
.tbl li { display: flex; align-items: baseline; gap: 8px; padding: 0 26px; }
.tbl li + li { border-left: 1px solid var(--line); }
.tbl b { font-size: 17px; font-weight: 700; color: var(--ink); }
.tbl span { font-size: 13.5px; color: var(--ink-muted); }

/* ------------------------------------------------------------- split ---- */

.split { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.split li { position: relative; overflow: hidden; height: 380px; }
.split img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__t {
    position: absolute;
    inset: auto 0 0 0;
    padding: 110px 30px 30px;
    text-align: left;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 40%, rgba(0,0,0,.8) 100%);
}
.split__t b {
    display: block;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.02;
}
.split__t i { display: block; font-style: normal; color: rgba(255,255,255,.9); font-size: 14px; margin: 9px 0 16px; }

/* ------------------------------------------------------------ the ask --- */

.cta2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; text-align: left; align-items: start; }
.cta2 .bd__h { margin-bottom: 22px; }
.cta2 form { max-width: 560px; }
.cta2 .field-row { margin-top: 0; }
.cta2__fq h3 { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--ink-muted); margin: 6px 0 14px; }
.fq { text-align: left; }
.fq details { border-top: 1px solid var(--line); padding: 13px 2px; }
.fq details:last-child { border-bottom: 1px solid var(--line); }
.fq summary {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 26px;
}
.fq summary::after {
    content: "+";
    position: absolute;
    right: 4px; top: -2px;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink-faint);
}
.fq details[open] summary::after { content: "\2212"; }
.fq p { font-size: 14px; line-height: 1.6; color: var(--ink-muted); margin: 8px 0 2px; }
/* FAQ rows open like a drawer instead of snapping. Progressive: browsers
   without interpolate-size keep the instant toggle they had before. */
.fq details { interpolate-size: allow-keywords; }
.fq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 250ms var(--ease-strong),
        content-visibility 250ms allow-discrete;
}
.fq details[open]::details-content { height: auto; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
    .bd { padding-block: 56px; }
    .bd--facts { padding-block: 0 56px; }
    .hero { padding-block: 52px 58px; }

    .sc { grid-template-columns: 1fr; gap: 0; }
    /* Phone: no pinned pane. Each step carries its own photo card inline —
       nothing floats, nothing sits to the side. */
    .sc__media { display: none; }
    .sc__steps { padding-block: 0 2vh; }
    .sc__step { min-height: 0; padding-block: 24px; }
    .sc__step + .sc__step { border-top: 1px solid var(--line); }
    .sc__fig { display: block; position: relative; margin: 16px 0 0; overflow: visible; }
    .sc__fig img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
        border-radius: 14px;
        border: 1px solid var(--line);
    }
    /* The card tucks under the photo with a slight overlap — it never
       covers the photograph. */
    .sc__fig .sc__art { position: relative; margin: -26px 12px 0; z-index: 2; }

    .prof { padding: 20px 18px 22px; }
    .prof__cells { grid-template-columns: 1fr 1fr; gap: 10px; }
    .prof__cells > div:first-child { grid-column: 1 / -1; }
    .mdm--row { flex-direction: column; }

    .split { grid-template-columns: 1fr; }
    .split li { height: 250px; }
    .split__t { padding: 70px 16px 18px; }

    .cta2 { grid-template-columns: 1fr; gap: 36px; }
}