/* GymAnna — Steel & Red
   Dark-first, cinematic. The palette is taken from the logo: a warm polished
   steel and a pure, blue-free red. Sampled from the mark rather than guessed —
   the body red quantises around #C00000–#D00000 with no green or blue in it at
   all, which is why it reads harder than the crimson this replaced.

   Blue and teal survive only where the app itself uses them, inside the
   screenshots. Page chrome is steel and red, like the logo. */

:root {
    --ink: #0B0B0C;
    --ink-raised: #141416;
    --ink-card: #1A1A1D;
    --paper: #F4F4F5;
    --text: #F2F1F3;
    --text-dim: #A5A5AC;
    --text-faint: #6E6E76;

    /* Brand */
    --red: #C6140F;
    --red-bright: #FF564A;
    --red-deep: #7C0B08;
    --steel: #E4E0DE;        /* the mark's highlight */
    --steel-dim: #BDB5B2;    /* its midtone — very slightly warm */
    --steel-shadow: #8C8280;

    /* Data colours, used only to echo what the app screenshots show */
    --chart-blue: #5FB0E8;
    --chart-teal: #2DD4BF;

    --hairline: rgba(255, 255, 255, 0.09);
    --measure: 68ch;
    --page: 1180px;
}

*, *::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: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* `height: auto` is not optional here. The width/height attributes on an <img>
   act as CSS presentational hints, so a rule that sets only the width leaves the
   height pinned to the attribute and the image renders stretched. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--red-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

.skip {
    position: absolute; left: -9999px;
    background: var(--red); color: #fff;
    padding: 12px 20px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Navigation ---------- */

.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(11, 11, 12, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
}
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 62px; gap: 24px;
}
/* ---------- Brand lockup ---------- */

/* The mark is the logo artwork; the wordmark is set in type rather than cut
   from the same image. At 20px the bevel in the original is invisible anyway,
   and live text stays sharp at every density and can be selected and read. */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: auto; height: 30px; flex: none; }
.brand-word {
    font-weight: 800; font-size: 19px;
    letter-spacing: 0.005em; line-height: 1;
    text-transform: uppercase;
}
.w-gym  { color: var(--steel); }
.w-anna { color: var(--red-bright); }

.brand-lg .brand-mark { height: 46px; }
.brand-lg .brand-word { font-size: 27px; }
.nav-links { display: flex; gap: 26px; font-size: 15px; }
.nav-links a { color: var(--text-dim); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); text-decoration: none; }

@media (max-width: 640px) {
    .nav-links { gap: 16px; font-size: 14px; }
    .nav-links .hide-sm { display: none; }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: min(92vh, 860px);
    display: flex; align-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
}

/* Photography slot. Until a photo is dropped in, the gradient below carries
   the composition on its own. */
.hero-media {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 78% 18%, rgba(198, 20, 15, 0.30) 0%, transparent 58%),
        radial-gradient(100% 80% at 12% 88%, rgba(189, 181, 178, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #101012 0%, #0B0B0C 62%);
}
/* Rotating frames. Each carries its own strength in --f-op rather than setting
   `opacity` directly, so the breakpoints below can re-tune every frame at once
   without fighting the class that turns one on. */
.hero-frame {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease;
}
.hero-frame.is-on { opacity: var(--f-op); }

/* The first frame is a product shot, not scenery — near full strength and
   barely desaturated, with the scrim below doing the work of making the copy
   readable. The other two are the room, and are treated as texture. */
.f-product { --f-op: 0.88; object-position: 62% 44%; filter: grayscale(0.06) contrast(1.04); }
.f-room    { --f-op: 0.50; object-position: 50% 38%; filter: grayscale(0.30) contrast(1.07); }
.f-floor   { --f-op: 0.42; object-position: 64% 42%; filter: grayscale(0.34) contrast(1.07); }
.hero-media::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.20) 42%, rgba(11,11,12,0.96) 100%),
        linear-gradient(90deg, rgba(11,11,12,0.88) 0%, rgba(11,11,12,0.25) 55%, transparent 100%);
}

.hero-inner { position: relative; z-index: 2; padding: 120px 0 96px; width: 100%; }
.hero-copy { max-width: 660px; }

/* On a phone the copy runs the full width, so the left-to-right scrim does
   nothing useful — darken from the bottom instead and let the photo keep the
   top of the frame. */
/* Between roughly 720 and 1100 the copy reaches across the device. There is no
   pan left to give — the photo barely overflows the frame at these widths — so
   the scrim carries further right instead, dimming the phone rather than
   letting a line of text run across a lit screen. */
@media (max-width: 1100px) {
    .hero-media::after {
        background:
            linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.22) 42%, rgba(11,11,12,0.96) 100%),
            linear-gradient(90deg, rgba(11,11,12,0.93) 0%, rgba(11,11,12,0.72) 48%, rgba(11,11,12,0.34) 78%, transparent 100%);
    }
}

@media (max-width: 720px) {
    /* Too narrow to hold the copy and the phone side by side. Pan off the
       device to the wall behind it and drop the photo back to texture — a
       half-legible screen under a headline is worse than no screen at all. */
    .f-product { --f-op: 0.36; object-position: 10% 46%; filter: grayscale(0.30) contrast(1.06); }
    .f-room    { --f-op: 0.34; object-position: 62% 40%; }
    .f-floor   { --f-op: 0.30; object-position: 78% 40%; }
    .hero-media::after {
        background: linear-gradient(180deg,
            rgba(11,11,12,0.62) 0%, rgba(11,11,12,0.34) 30%, rgba(11,11,12,0.97) 88%);
    }
    .hero-inner { padding: 84px 0 68px; }
}

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--red-bright);
    border: 1px solid rgba(255, 86, 74, 0.32);
    background: rgba(198, 20, 15, 0.10);
    padding: 7px 15px; border-radius: 100px;
    margin-bottom: 30px;
}
.eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--red-bright);
}

h1 {
    font-size: clamp(2.9rem, 8.5vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 700;
    margin: 0 0 26px;
}
h1 em { font-style: normal; color: var(--red-bright); }

.lede {
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    color: var(--text-dim);
    max-width: 56ch;
    margin: 0 0 40px;
    line-height: 1.55;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 100px;
    font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
    border: 1px solid transparent;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #E5303E; }
.btn-ghost { border-color: rgba(255,255,255,0.22); color: var(--text); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.05); }

.hero-note { margin-top: 26px; font-size: 14px; color: var(--text-faint); }

/* ---------- Sections ---------- */

section { padding: 108px 0; }
section + section { border-top: 1px solid var(--hairline); }

.section-head { max-width: var(--measure); margin-bottom: 56px; }
.kicker {
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--red-bright); margin: 0 0 16px;
}
h2 {
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1.06; letter-spacing: -0.035em; font-weight: 700;
    margin: 0 0 20px;
}
h3 { font-size: 1.28rem; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 10px; }
p { margin: 0 0 18px; }
.muted { color: var(--text-dim); }
.section-head p { font-size: 1.13rem; color: var(--text-dim); }

/* ---------- Feature grid ---------- */

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

.card {
    background: var(--ink-card);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 32px 30px;
    transition: transform 0.22s ease, border-color 0.22s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.18); }
.card p:last-child { margin-bottom: 0; }
.card .icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; margin-bottom: 20px;
    background: rgba(198, 20, 15, 0.14);
    border: 1px solid rgba(255, 86, 74, 0.26);
}
.card .icon svg { width: 22px; height: 22px; stroke: var(--red-bright); fill: none; stroke-width: 1.9; }
.card .icon.steel { background: rgba(228,224,222,0.10); border-color: rgba(228,224,222,0.24); }
.card .icon.steel svg { stroke: var(--steel); }
.card .icon.graphite { background: rgba(140,130,128,0.14); border-color: rgba(189,181,178,0.24); }
.card .icon.graphite svg { stroke: var(--steel-dim); }

/* ---------- Showcase ---------- */

.showcase {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 72px; align-items: center;
}
.showcase.flip .showcase-copy { order: 2; }
@media (max-width: 860px) {
    .showcase { grid-template-columns: 1fr; gap: 44px; }
    .showcase.flip .showcase-copy { order: 0; }
}

.phone {
    position: relative;
    max-width: 310px; margin: 0 auto;
    border-radius: 46px;
    padding: 11px;
    background: linear-gradient(160deg, #2C2C31 0%, #171719 46%, #232327 100%);
    box-shadow:
        0 2px 3px rgba(0,0,0,0.6),
        0 42px 80px -22px rgba(0,0,0,0.92),
        0 0 0 1px rgba(255,255,255,0.07) inset;
}
.phone img { border-radius: 36px; width: 100%; }
/* No drawn notch — the captures are full-device screenshots and already carry
   the real status bar and Dynamic Island. */

.glow { position: relative; }
.glow::before {
    content: ""; position: absolute; z-index: 0;
    inset: 14% -6% 6% -6%;
    background: radial-gradient(60% 55% at 50% 45%, rgba(198, 20, 15,0.30), transparent 72%);
    filter: blur(52px);
}
.glow > * { position: relative; z-index: 1; }

.checks { list-style: none; padding: 0; margin: 28px 0 0; }
.checks li {
    position: relative; padding-left: 32px; margin-bottom: 15px;
    color: var(--text-dim);
}
.checks li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(228, 224, 222, 0.12);
    border: 1px solid rgba(228, 224, 222, 0.38);
}
.checks li::after {
    content: ""; position: absolute; left: 5.5px; top: 13px;
    width: 7px; height: 4px;
    border-left: 2px solid var(--steel); border-bottom: 2px solid var(--steel);
    transform: rotate(-45deg);
}
.checks strong { color: var(--text); font-weight: 600; }

/* ---------- Notes / code sample ---------- */

.note-sample {
    background: #0E0E10;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 26px 24px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 13.5px; line-height: 1.75;
    color: var(--text-dim);
    overflow-x: auto;
}
.note-sample .hl { color: var(--red-bright); }
.note-sample .dim { color: var(--text-faint); }

.arrow-down {
    display: grid; place-items: center;
    margin: 26px 0; color: var(--text-faint);
}

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.stat { text-align: center; padding: 30px 18px; border-radius: 16px; background: var(--ink-raised); border: 1px solid var(--hairline); }
.stat .num {
    font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.04em;
    line-height: 1; margin-bottom: 10px;
    background: linear-gradient(180deg, #fff 0%, #C9C9D0 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .label { font-size: 13.5px; color: var(--text-dim); }

/* ---------- Photo slot ---------- */

.photo-band { position: relative; overflow: hidden; padding: 0; border: 0; }
.photo-band img {
    width: 100%; height: clamp(400px, 52vw, 620px);
    object-fit: cover; object-position: 50% 42%;
    filter: grayscale(0.14) contrast(1.06);
}
/* Light enough that the photograph still reads as a photograph. The quote sits
   in the bottom band, where the scrim is doing the most work. */
.photo-band .overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end;
    background: linear-gradient(180deg,
        rgba(11,11,12,0.52) 0%, rgba(11,11,12,0.14) 34%, rgba(11,11,12,0.90) 100%);
    padding: clamp(28px, 5vw, 60px);
}
.photo-band blockquote {
    margin: 0; max-width: 20ch;
    font-size: clamp(1.7rem, 4.4vw, 3rem); font-weight: 700;
    letter-spacing: -0.035em; line-height: 1.1;
    text-shadow: 0 2px 24px rgba(0,0,0,0.75);
}

@media (max-width: 720px) {
    .photo-band img { object-position: 44% 42%; }
}

/* ---------- Closing photo call to action ---------- */

.cta-band { position: relative; overflow: hidden; padding: 0; border: 0; }
.cta-band > img {
    width: 100%; height: clamp(520px, 58vw, 660px);
    object-fit: cover; object-position: 34% 38%;
    filter: grayscale(0.14) contrast(1.05);
}
/* Darkest on the right, where the copy sits — the subject on the left keeps
   most of its own light. */
.cta-band::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(11,11,12,0.05) 0%, rgba(11,11,12,0.40) 44%, rgba(11,11,12,0.86) 78%),
        linear-gradient(180deg, rgba(11,11,12,0.42) 0%, rgba(11,11,12,0.10) 40%, rgba(11,11,12,0.72) 100%);
}
.cta-band-inner h2, .cta-band-inner p, .cta-band-inner .kicker { text-shadow: 0 2px 22px rgba(0,0,0,0.7); }
.cta-band-inner {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
    text-align: right;
}
.cta-band-inner > * { max-width: 34ch; }
.cta-band-inner .cta-row { justify-content: flex-end; }
.cta-band-inner h2 { margin-bottom: 16px; }
.cta-band-inner p { color: var(--text-dim); font-size: 1.08rem; }

@media (max-width: 720px) {
    /* No room for the photo and the copy side by side — put the copy in the
       lower third and let the frame breathe above it. */
    .cta-band > img { object-position: 46% 16%; height: 700px; }
    .cta-band::after {
        background: linear-gradient(180deg,
            rgba(11,11,12,0.28) 0%, rgba(11,11,12,0.12) 20%, rgba(11,11,12,0.93) 46%, rgba(11,11,12,0.99) 100%);
    }
    .cta-band-inner {
        justify-content: flex-end; align-items: flex-start; text-align: left;
        padding-bottom: 48px;
    }
    .cta-band-inner .cta-row { justify-content: flex-start; }
}

/* ---------- Footer ---------- */

footer {
    border-top: 1px solid var(--hairline);
    padding: 62px 0 46px;
    background: #08080A;
}
/* The rule sits under the grid, not over the note — the note is measure-capped,
   so a border on it stops two-thirds of the way across and reads as a mistake. */
.foot-grid {
    display: flex; flex-wrap: wrap; gap: 44px;
    justify-content: space-between; align-items: center;
    padding-bottom: 30px; border-bottom: 1px solid var(--hairline);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 30px; font-size: 15px; }
.foot-links a { color: var(--text-dim); }
.foot-links a:hover { color: var(--text); }
.foot-note {
    margin-top: 26px;
    font-size: 13.5px; color: var(--text-faint); max-width: var(--measure);
}
.foot-note a { color: var(--text-dim); }
.foot-note a:hover { color: var(--text); }

/* ---------- Policy pages ---------- */

.doc { padding: 76px 0 100px; }
.doc-inner { max-width: var(--measure); }
.doc h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); margin-bottom: 14px; }
.doc .updated { color: var(--text-faint); font-size: 14.5px; margin-bottom: 48px; }
.doc h2 { font-size: 1.5rem; margin: 52px 0 16px; letter-spacing: -0.025em; }

/* Part dividers in a long policy — these separate whole bodies of terms, so
   they need to outrank the numbered sections beneath them. */
.doc h2.part {
    font-size: 1.05rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--red-bright);
    margin: 76px 0 8px; padding-top: 26px;
    border-top: 1px solid var(--hairline);
}
.doc h2.part + p { color: var(--text-dim); }
.doc h2.part + p + h2 { margin-top: 34px; }
.doc h3 { font-size: 1.13rem; margin: 32px 0 10px; }
.doc p, .doc li { color: var(--text-dim); }
.doc strong { color: var(--text); font-weight: 600; }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 18px; }
.doc li { margin-bottom: 9px; }

.callout {
    background: var(--ink-card);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--red);
    border-radius: 0 14px 14px 0;
    padding: 22px 26px;
    margin: 32px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout.steel { border-left-color: var(--steel-dim); }

.doc table { width: 100%; border-collapse: collapse; margin: 24px 0 30px; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.doc th { color: var(--text); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.doc td { color: var(--text-dim); }
.table-scroll { overflow-x: auto; }

/* ---------- Reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }