/* LOCAL (see PATCHES.md patch 251): /for-students, the landing page for people
 * who train. From the owner's approved canvas (2026-09-29), in the site brand:
 * navy #01102F, panels #011F5D, gold #FFD800, Archivo 900 headings, Manrope body.
 *
 * Mobile first: one column with a 16px gutter at 390, two columns from 992px.
 * LOGICAL properties only (margin-inline, padding-inline, text-align: start,
 * inset-inline) so the Arabic, right-to-left page mirrors by itself (patch 171).
 * Everything is scoped under .fs so nothing leaks into the rest of the site. */

html.fs-page body, body:has(#fs) { background: #01102F; }
/* LOCAL (see PATCHES.md patch 324): a navy page: a hovered, focused or pressed link is gold (app.css applies it). */
html.fs-page, body:has(#fs), .fs { --oss-link-hover: #FFD800; }
html.fs-page footer { background: #01102F; border-top: 1px solid rgba(255,255,255,.13); }
html.fs-page footer, html.fs-page footer a, html.fs-page footer p, html.fs-page footer .text-dark-r, html.fs-page footer .text-muted, html.fs-page footer .text-link { color: rgba(255,255,255,.75) !important; }

.fs {
    --fs-navy: #01102F;
    --fs-panel: #011F5D;
    --fs-gold: #FFD800;
    --fs-line: rgba(255,255,255,.14);
    --fs-dim: rgba(255,255,255,.78);   /* about 11:1 on navy, 8.9:1 on the panel */
    --fs-faint: rgba(255,255,255,.68); /* about 8.8:1 on navy */
    background: var(--fs-navy);
    color: var(--fs-dim);
    font-family: Manrope, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: clip;
}
.fs *, .fs *::before, .fs *::after { box-sizing: border-box; }
.fs h1, .fs h2, .fs h3, .fs p, .fs ol, .fs ul, .fs dl, .fs dd, .fs figure { margin: 0; }
.fs ul, .fs ol { padding: 0; list-style: none; }
.fs h1, .fs h2, .fs h3 { font-family: Archivo, system-ui, sans-serif; color: #fff; letter-spacing: -0.02em; }
.fs h1, .fs h2 { font-weight: 900; }
.fs h3 { font-weight: 800; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.fs ::selection { background: var(--fs-gold); color: #011F5D; }
.fs a:focus-visible { outline: 3px solid var(--fs-gold); outline-offset: 3px; }
.fs .fs-btn-gold:focus-visible { outline-color: #fff; }

.fs-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .fs-wrap { padding-inline: 32px; } }
@media (min-width: 1200px) { .fs-wrap { padding-inline: 40px; } }

/* ---- buttons ---- */
.fs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px; border-radius: 999px; font: 700 16px/1.2 Manrope, system-ui, sans-serif; text-decoration: none; text-align: center; border: 1px solid transparent; }
.fs-btn-gold { background: var(--fs-gold); border-color: var(--fs-gold); color: #011F5D; }
/* LOCAL (see PATCHES.md patch 324): focus and press stated with hover; a pill with one class of colour loses to the site's `a:focus`. */
.fs-btn-gold:hover, .fs-btn-gold:focus, .fs-btn-gold:active { background: #E6C200; border-color: #E6C200; color: #011F5D; text-decoration: none; }
.fs-btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.fs-btn-ghost:hover, .fs-btn-ghost:focus, .fs-btn-ghost:active { border-color: #fff; color: #fff; text-decoration: none; }
.fs-btn-sm { min-height: 44px; padding: 8px 16px; font-size: 14px; }

/* ---- header ---- */
.fs-head { border-bottom: 1px solid var(--fs-line); }
.fs-head-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.fs-logo { min-width: 44px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 900 24px Archivo, system-ui, sans-serif; letter-spacing: -0.03em; color: #fff !important; text-decoration: none !important; }
.fs-logo img { display: block; width: 25px; height: auto; }
.fs-head-links { display: flex; align-items: center; gap: 16px; }
.fs-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
.fs-link:hover { color: var(--fs-gold); }
/* On a small phone the word "Onlyoss" goes, the gold mark stays (it still links home). */
@media (max-width: 419px) {
    .fs-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- hero ---- */
.fs-hero { padding-block: 40px 56px; }
.fs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.fs-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.fs-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fs-gold); }
.fs h1 { font-size: 40px; line-height: 1.04; letter-spacing: -0.03em; }
.fs-lead { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 52ch; }
.fs-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.fs-note { font-size: 14px; color: var(--fs-faint); }
@media (max-width: 575px) {
    .fs-ctas .fs-btn { flex: 1 1 100%; }
}
@media (min-width: 992px) {
    .fs-hero { padding-block: 72px 88px; }
    /* Patch 254: the real card is taller than the drawn one was, so the copy sits at
       the top and stays in view beside it while the card scrolls past. */
    .fs-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
    .fs-hero-copy { position: sticky; top: 32px; padding-block-start: 40px; }
    .fs h1 { font-size: 60px; }
    .fs-lead { font-size: 19px; }
}

/* ---- the sample profile card ----
 * Patch 254: the REAL athlete card (elements/profile/athlete-card, styled by
 * athlete-styles), fed sample data. This file only frames it: a width, a rounded
 * edge and a shadow so it reads as a card on the navy page. Its insides are the
 * athlete page's own styles, so the two can never drift apart. */
.fs-sample { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.fs-showcase { width: 100%; max-width: 460px; min-width: 0; }
.fs-showcase .oz-ap { border-radius: 24px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.fs-sample-cap { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fs-faint); }

/* ---- pills ---- */
.fs-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.25; }
.fs-pill svg { flex: none; }
.fs-pill-gold { background: var(--fs-gold); color: #011F5D; }
.fs-pill-grey { background: rgba(255,255,255,.1); color: #E3E7F0; border: 1px solid rgba(255,255,255,.22); }

/* ---- sections ---- */
.fs-section { padding-block: 56px; }
.fs-panel { background: var(--fs-panel); }
.fs-intro { display: flex; flex-direction: column; gap: 14px; max-width: 46rem; margin-block-end: 32px; }
.fs h2 { font-size: 32px; line-height: 1.08; }
.fs-intro p { font-size: 17px; color: rgba(255,255,255,.85); }
@media (min-width: 992px) {
    .fs-section { padding-block: 88px; }
    .fs h2 { font-size: 44px; }
    .fs-intro { margin-block-end: 44px; }
}

.fs-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .fs-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.fs-box { padding: 24px; border-radius: 20px; background: var(--fs-navy); border: 1px solid var(--fs-line); display: flex; flex-direction: column; gap: 10px; }
.fs-box p { color: var(--fs-dim); }

/* The comparison: dashed (anywhere else) beside gold-bordered (Onlyoss). */
.fs-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 52rem; }
@media (min-width: 576px) { .fs-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.fs-compare-card { padding: 24px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; }
.fs-compare-card.is-else { border: 2px dashed rgba(255,255,255,.35); }
.fs-compare-card.is-us { border: 2px solid var(--fs-gold); background: var(--fs-panel); }
.fs-compare-card h3 { font-family: Manrope, system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fs-dim); }
.fs-compare-card.is-us h3 { color: var(--fs-gold); }
.fs-compare-rank { font: 900 28px/1.1 Archivo, system-ui, sans-serif; color: #fff; }
.fs-compare-foot { color: var(--fs-dim); }

/* The three steps. */
.fs-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .fs-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.fs-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 20px; background: var(--fs-navy); border: 1px solid var(--fs-line); }
.fs-steps li > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fs-steps p { color: var(--fs-dim); }
.fs-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fs-gold); color: #011F5D; font: 900 18px Archivo, system-ui, sans-serif; }

/* Patch 283: the membership, what the price buys. One column at 390 (the price card,
 * then the list); two from 992: intro + price card beside the list. Every track is
 * minmax(0, ...) and nothing has a fixed width, so nothing scrolls sideways. */
.fs-member { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.fs-member-side { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 992px) {
    .fs-member { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
}
.fs-price { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; border-radius: 20px; background: var(--fs-navy); border: 2px solid var(--fs-gold); }
.fs-price-big { font: 800 20px/1.1 Manrope, system-ui, sans-serif; color: #fff; }
.fs-price-big span { font: 900 56px/1 Archivo, system-ui, sans-serif; letter-spacing: -0.03em; color: var(--fs-gold); }
.fs-price-sub { color: var(--fs-dim); }
.fs-price-notes { display: flex; flex-direction: column; gap: 10px; }
.fs-price-notes li { position: relative; padding-inline-start: 20px; color: #fff; }
/* LOCAL (see PATCHES.md patch 325): "Give a year as a gift" took the site's navy link colour on the navy card and could not be seen. */
.fs-price-notes li a { color: var(--fs-gold); text-decoration: underline; }
.fs-price-notes li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--fs-gold); }
.fs-price .fs-btn { margin-block-start: 6px; }
@media (max-width: 575px) { .fs-price .fs-btn { width: 100%; } }
.fs-member-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 576px) { .fs-member-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
.fs-member-list li { border-block-start: 3px solid var(--fs-gold); padding-block-start: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fs-member-list p { color: var(--fs-dim); }

/* Patch 283: the steps moved onto the navy background, so their boxes take the panel. */
.fs-section:not(.fs-panel) .fs-steps li { background: var(--fs-panel); }

/* The hero's price line. */
.fs-hero-price { font-size: 16px; color: rgba(255,255,255,.85); }
.fs-hero-price strong { color: var(--fs-gold); font-weight: 800; }

/* The questions (patch 283: the membership's own first). */
@media (min-width: 992px) {
    .fs-free { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
    .fs-free .fs-intro { margin-block-end: 0; }
}
.fs-faq { display: flex; flex-direction: column; gap: 12px; }
.fs-faq > div { padding: 20px 24px; border-radius: 16px; background: var(--fs-navy); border: 1px solid var(--fs-line); }
.fs-faq dt { font: 800 17px/1.35 Archivo, system-ui, sans-serif; color: #fff; margin-block-end: 6px; }
.fs-faq dd { color: var(--fs-dim); margin-inline-start: 0; }

/* Closing. */
.fs-close .fs-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.fs-close h2 { max-width: 20ch; }
@media (max-width: 575px) { .fs-close .fs-btn { width: 100%; } }