/* Strength Pool landing page.
 *
 * Tokens match admin/src/styles.css and SPDesignSystem, so the three surfaces read as one
 * product. Values that only exist on this page (the gradients, the hero mockup) are taken
 * from the Figma landing-page frame (node 40:4).
 *
 * No build step and no framework: this is one static page whose job is to load fast on a
 * phone on mobile data. Everything below is hand-written CSS served as-is.
 */

/* ---------------------------------------------------------------- fonts */

/* Self-hosted rather than linked from Google's CDN: a third-party font request is a
 * render-blocking dependency on someone else's uptime, and it tells that third party who
 * visited the page. These are the same latin-subset woff2 files Google serves, ~48KB each,
 * fetched once and committed. `swap` so copy is readable before the face arrives. */
@font-face { font-family: Outfit; font-weight: 700; font-display: swap;
             src: url('assets/fonts/outfit-700.woff2') format('woff2'); }
@font-face { font-family: Outfit; font-weight: 800; font-display: swap;
             src: url('assets/fonts/outfit-800.woff2') format('woff2'); }
@font-face { font-family: Outfit; font-weight: 900; font-display: swap;
             src: url('assets/fonts/outfit-900.woff2') format('woff2'); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap;
             src: url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap;
             src: url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap;
             src: url('assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: Inter; font-weight: 800; font-display: swap;
             src: url('assets/fonts/inter-800.woff2') format('woff2'); }

/* --------------------------------------------------------------- tokens */

:root {
    --coral: #FF5B44;
    --coral-light: #FF8A7A;
    --coral-50: #FFECE8;
    --coral-100: #FFD7D0;
    --teal: #14B8A6;
    --teal-100: #CCFBF1;

    --ink: #1C1917;
    --muted: #78716C;
    --white: #FFFFFF;
    --cream: #FAF8F5;
    --cream-warm: #FFF7F2;
    --sand: #F5F1E9;
    --line: #EFEBE4;

    --shell: 1440px;
    --gutter: 80px;

    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;

    --shadow-card: 0 14px 17px rgba(68, 33, 26, 0.08);
    --shadow-panel: 0 10px 22px rgba(255, 91, 68, 0.08), 0 14px 30px rgba(68, 33, 26, 0.07);
    --shadow-input: 0 10px 24px rgba(255, 91, 68, 0.15), 0 12px 28px rgba(68, 33, 26, 0.08);
}

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

html { scroll-behavior: smooth; }

/* Honour a stated preference for less motion — the smooth scroll and the reveal
 * transitions below are decoration, and for some people they are nausea. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: linear-gradient(to right, var(--cream), var(--cream-warm));
    color: var(--ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: Outfit, Inter, sans-serif; margin: 0; }
p { margin: 0; }

a { color: inherit; }

/* A visible focus ring everywhere. The default is removed by so many resets that stating
 * it explicitly is the only way to be sure keyboard users can see where they are. */
:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 0 0 var(--r-md) 0;
    font-weight: 700;
}
.skip-link:focus { left: 0; }

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.eyebrow {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--coral);
}
.eyebrow--teal { color: var(--teal); }

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

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-bottom: 1px solid var(--line);
}
.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 24px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.logo__mark { width: 36px; height: 36px; }
.logo__word {
    font-family: Outfit, sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.01em;
}
.nav__links {
    display: flex;
    align-items: center;
    gap: 32px;
}
.nav__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}
.nav__link:hover { color: var(--ink); }

.nav__cta {
    background: linear-gradient(to right, var(--coral-50), var(--coral-100));
    border: 1px solid var(--coral);
    border-radius: 8px;
    padding: 10px 20px;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--coral);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 12px rgba(255, 91, 68, 0.2);
}

/* ---------------------------------------------------------------- hero */

.hero {
    background: linear-gradient(to right, var(--white), var(--cream-warm));
}
.hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    padding-block: 64px 96px;
}
.hero__content { flex: 1 1 0; max-width: 620px; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(to right, var(--coral-50), var(--coral-100));
    border: 1px solid var(--coral);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--coral);
    box-shadow: 0 8px 9px rgba(255, 91, 68, 0.2);
}
.pill__dot { width: 8px; height: 8px; }

.hero__headline {
    font-weight: 900;
    /* Scales with the viewport so the 72px design holds its proportions on a laptop and
     * does not overflow on a phone. */
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.05;
    margin-block: 32px 0;
}
.hero__subtitle {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    margin-top: 32px;
}
.hero__capture { margin-top: 32px; }

/* Hero mockup: a fixed-height stage the three phone screens are absolutely placed inside,
 * matching the Figma composition. Decorative throughout — see the aria-hidden in the HTML. */
.mockup {
    position: relative;
    flex: 1 1 0;
    max-width: 540px;
    height: 420px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 10px 24px -10px rgba(255, 91, 68, 0.15),
                0 18px 40px -12px rgba(68, 33, 26, 0.1);
}
.mockup__bloom { position: absolute; left: 99px; top: 9px; width: 400px; height: 400px; }
.mockup__bar {
    position: absolute;
    width: 12px;
    border-radius: var(--r-sm);
}
.mockup__bar--left {
    left: -16px; top: 120px; height: 180px;
    background: rgba(20, 184, 166, 0.1);
    transform: rotate(-12deg);
}
.mockup__bar--right {
    left: 496px; top: 80px; height: 220px;
    background: rgba(255, 91, 68, 0.1);
    transform: rotate(12deg);
}
.mockup__circle { position: absolute; left: 419px; top: 259px; width: 120px; height: 120px; }
.mockup__triangle {
    position: absolute; left: -14px; top: 292px; width: 100px; height: 100px;
    transform: rotate(18deg);
}

.mockup__screen {
    position: absolute;
    width: 220px;
    height: 500px;
    top: 50%;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(255, 91, 68, 0.08), 0 14px 30px rgba(68, 33, 26, 0.1);
}
.mockup__screen img { width: 100%; height: 100%; object-fit: cover; }
.mockup__screen--a { left: 90px; transform: translateY(-50%) rotate(-8deg); }
.mockup__screen--b { left: 160px; transform: translateY(-46%) rotate(6deg); z-index: 1; }
.mockup__screen--c { left: 262px; transform: translateY(-48%) rotate(-4deg); }

/* ------------------------------------------------------------- capture */

.capture__row {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 6px 6px 6px 16px;
}
.capture__row--hero {
    border-color: var(--coral);
    box-shadow: var(--shadow-input);
}
.capture__input {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    padding-block: 12px;
}
.capture__input::placeholder { color: var(--muted); }
.capture__input:focus { outline: none; }
/* The ring goes on the whole pill, since the input has no border of its own. */
.capture__row:focus-within {
    outline: 3px solid var(--coral);
    outline-offset: 2px;
}

.capture__submit {
    flex-shrink: 0;
    border: 0;
    border-radius: 22px;
    padding: 12px 24px;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--white);
    background: var(--coral);
    cursor: pointer;
    white-space: nowrap;
}
.capture__submit--gradient {
    background: linear-gradient(to right, var(--coral), var(--coral-light));
    box-shadow: 0 10px 11px rgba(255, 91, 68, 0.25);
}
.capture__submit--teal { background: var(--teal); }
.capture__submit:hover { filter: brightness(1.05); }
.capture__submit:disabled { opacity: 0.6; cursor: progress; }

/* Off-screen but readable by a screen reader, and by the spam bots that fill every field
 * they find. `tabindex="-1"` in the HTML keeps keyboard users out of it. */
.capture__honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.capture__note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    min-height: 20px;
}
.capture__note img { width: 14px; height: 14px; }
.capture__note--ok { color: var(--teal); }
.capture__note--error { color: var(--coral); }

/* --------------------------------------------------------- how it works */

.method {
    background: linear-gradient(to right, var(--sand), var(--cream-warm));
    border-block: 1px solid var(--line);
    padding-block: 80px;
}
.method__header { text-align: center; display: grid; gap: 12px; }
.method__title {
    font-weight: 900;
    font-size: clamp(30px, 3.4vw, 44px);
}
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.card {
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-card);
}
.card__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: rgba(255, 91, 68, 0.1);
}
.card__icon--teal { background: rgba(20, 184, 166, 0.1); }
.card__icon img { width: 24px; height: 24px; }
.card__title {
    font-weight: 800;
    font-size: 20px;
    margin-top: 16px;
}
.card__desc {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    margin-top: 16px;
}

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

.split {
    border-block: 1px solid var(--line);
    padding-block: 112px;
}
.split--athletes { background: var(--white); }
.split--creators { background: linear-gradient(to right, var(--sand), #E6FFFB); }

.split__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
}
.split--creators .split__inner { flex-direction: row-reverse; }

.split__content { flex: 1 1 0; max-width: 560px; }
.split__heading {
    font-weight: 900;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.1;
    margin-top: 16px;
}
.split__body {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
    margin-top: 16px;
}

.bullets {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    gap: 24px;
}
.bullet { display: flex; gap: 16px; align-items: flex-start; }
.bullet__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 91, 68, 0.07);
}
.bullet__icon--teal { background: rgba(20, 184, 166, 0.07); }
.bullet__icon img { width: 18px; height: 18px; }
/* `display: block` is load-bearing: these are spans inside a span (so the whole group can
 * sit as one flex child), and without it the title and description run together on a
 * single line. */
.bullet__body { display: block; }
.bullet__title {
    display: block;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: 18px;
}
.bullet__desc {
    display: block;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 4px;
}

.split__capture { margin-top: 40px; }

/* ------------------------------------------------------------- panels */

.panel {
    flex: 1 1 0;
    max-width: 500px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 40px;
    box-shadow: var(--shadow-panel);
}
.panel--creator {
    box-shadow: 0 10px 22px rgba(20, 184, 166, 0.1), 0 14px 30px rgba(68, 33, 26, 0.07);
}
.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.panel__title { font-family: Outfit, sans-serif; font-weight: 800; font-size: 18px; }
.panel__badge {
    background: var(--teal-100);
    color: var(--teal);
    border-radius: var(--r-sm);
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.panel__screens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
.panel__shot {
    height: 220px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(255, 91, 68, 0.08), 0 12px 24px rgba(68, 33, 26, 0.07);
}
.panel__shot--wide { grid-column: 1 / -1; }
.panel--creator .panel__shot {
    box-shadow: 0 8px 18px rgba(20, 184, 166, 0.08), 0 12px 24px rgba(68, 33, 26, 0.07);
}
.panel__shot img { width: 100%; height: 100%; object-fit: cover; }

.panel__list { display: grid; gap: 12px; margin-top: 16px; }
.panel__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
}
.panel__item--flat {
    background: var(--cream);
    border-color: transparent;
    justify-content: flex-start;
}
.panel__item-label { display: flex; align-items: center; gap: 12px; }
.panel__item-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
}
.panel__item-icon--tinted { background: var(--coral-50); }
.panel__item-icon img { width: 16px; height: 16px; }
.panel__item-name { font-family: Outfit, sans-serif; font-weight: 700; font-size: 15px; }
.panel__item-tag { font-size: 12px; font-weight: 700; color: var(--coral); }
.panel__item-text { font-size: 14px; }
.panel__item-text img { width: 18px; height: 18px; }

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

.footer {
    background: var(--ink);
    color: var(--white);
    padding-block: 80px 48px;
}
.footer__top {
    display: flex;
    justify-content: space-between;
    gap: 64px;
    flex-wrap: wrap;
}
.footer__brand { max-width: 300px; }
.footer__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 16px;
}
.footer__cols { display: flex; gap: 80px; flex-wrap: wrap; }
.footer__col { display: grid; gap: 16px; align-content: start; }
.footer__col h3 { font-family: Outfit, sans-serif; font-weight: 800; font-size: 14px; }
.footer__col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-decoration: none;
}
.footer__col a:hover { color: var(--white); }

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 48px;
    padding-top: 24px;
}
.footer__copy { color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.footer__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer__badge {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

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

/* The design is a 1440px desktop frame. Below that it reflows rather than scaling: the
 * two-column rows stack, the hero mockup is dropped entirely (it is decoration, and a
 * 540px absolutely-positioned stage cannot be made to work at 380px), and the capture
 * row becomes a stacked block so the button keeps a full-width tap target. */

@media (max-width: 1100px) {
    :root { --gutter: 48px; }
    .hero__inner, .split__inner { gap: 40px; }
    .cards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    :root { --gutter: 32px; }

    .nav__links { gap: 20px; }
    .nav__link { display: none; }

    .hero__inner,
    .split__inner,
    .split--creators .split__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .hero__content, .split__content, .panel { max-width: none; }

    .mockup { display: none; }

    .split { padding-block: 72px; }
    .method { padding-block: 64px; }
}

@media (max-width: 560px) {
    :root { --gutter: 20px; }

    /* At 375px the wordmark wraps to two lines and crowds the CTA. Smaller and
     * unbreakable keeps the header one row, which is the only thing it has to do. */
    .logo__mark { width: 28px; height: 28px; }
    .logo__word { font-size: 15px; white-space: nowrap; }
    .nav__inner { gap: 12px; padding-block: 16px; }
    .nav__cta { padding: 8px 14px; font-size: 12px; }

    .capture__row {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--r-lg);
        padding: 8px;
        gap: 8px;
    }
    .capture__input { padding: 12px; }
    .capture__submit { width: 100%; border-radius: var(--r-md); padding-block: 14px; }

    .panel { padding: 24px; }
    .panel__screens { grid-template-columns: 1fr; }
    .footer__cols { gap: 40px; }
}