/* AdvantEdgeHQ homepage
   Editorial ivory on the outside, live command center on the inside. */

body.home-page {
    --home-paper: #f5f0e7;
    --home-paper-deep: #ebe4d8;
    --home-ink: #17161a;
    --home-muted: #706b63;
    --home-rule: rgba(23, 22, 26, 0.16);
    --home-violet: var(--brand-fill);
    --home-violet-text: var(--primary);
    --home-violet-bright: var(--primary);
    --home-night: #100f13;
    --home-night-raised: #19171f;
    /* Pinned literal, NOT var(--signal-lime). Almost every --home-lime user on
       this page (.hero-board-value, .hero-edge-value, .hero-edge-meter,
       .signal-tiers b, .home-final-cta p, .preview-callout) sits on a surface
       that is dark in BOTH themes -- the hero night panel, the dark signal
       card, the violet strip, a screenshot. --signal-lime is now theme-aware
       and goes deep olive on paper, which is right for the page surface and
       wrong for every one of those. Same reasoning as the literal position
       hexes further down this file: a token safe on one surface is not
       automatically safe on the other. */
    --home-lime: #d9ff66;

    /* ---- Field markings ------------------------------------------------
       The page's structural signature is a 1px rule; football's is a yard
       line with hash marks. These drive the tick band under every section
       label and the yard grid behind the final CTA. Derived from
       --home-rule so they re-color with the theme for free -- do not give
       them literal values, or the dark theme silently keeps light ticks. */
    --field-hash: var(--home-rule);
    --field-hash-gap: 22px;
    --field-hash-height: 7px;

    --bg: var(--home-paper);
    --surface: #fbf8f2;
    --surface-hover: #fffdf9;
    --border: #dcd4c8;
    --border-highlight: #bcb2a4;
    --text: var(--home-ink);
    --text-muted: var(--home-muted);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--home-paper);
    background-image:
        radial-gradient(circle at 78% 4%, rgba(109, 40, 217, 0.10), transparent 28rem),
        linear-gradient(rgba(23, 22, 26, 0.018) 1px, transparent 1px);
    background-size: auto, 100% 5px;
    background-attachment: scroll;
}

html:has(body.home-page) { scroll-behavior: smooth; scrollbar-gutter: stable; }

body.home-page:not(.light-theme) {
    --home-paper: #0c0b0f;
    --home-paper-deep: #151319;
    --home-ink: #f4f0e8;
    --home-muted: #aaa3b1;
    --home-rule: rgba(255, 255, 255, 0.14);
    --home-violet-text: var(--primary);
    --bg: var(--home-paper);
    --surface: #17151c;
    --surface-hover: #1e1b25;
    --border: #2d2935;
    --border-highlight: #484250;
    --text: var(--home-ink);
    --text-muted: var(--home-muted);
    background-image:
        radial-gradient(circle at 78% 4%, rgba(139, 92, 246, 0.13), transparent 30rem),
        linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px);
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    transform: translateY(-150%);
    padding: 10px 16px;
    background: var(--home-night);
    color: #fff;
    text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.home-masthead {
    box-sizing: border-box;
    width: min(100% - 48px, 1280px);
    height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--home-rule);
}
.home-brand {
    display: inline-flex;
    align-items: center;
    color: var(--home-ink);
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.home-brand strong {
    margin-left: 4px;
    padding: 3px 5px 4px;
    background: var(--home-violet);
    color: #fff;
    font-size: 0.72em;
    letter-spacing: 0.04em;
}
.home-nav { display: flex; align-items: center; gap: 28px; }
.home-nav > a {
    color: var(--home-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.18s ease;
}
.command-trigger {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--home-rule);
    background: transparent;
    color: var(--home-muted);
    font: 600 0.72rem var(--font-body);
    cursor: pointer;
}
.command-trigger-icon { display: none; width: 18px; height: 18px; }
kbd {
    min-width: 24px;
    padding: 2px 5px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font: 600 0.61rem var(--font-body);
    text-align: center;
    white-space: nowrap;
    opacity: 0.7;
}
body.home-page .theme-toggle-btn {
    position: static;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border-color: var(--home-rule);
    background: transparent;
    color: var(--home-ink);
    box-shadow: none;
    line-height: 1;
}

body.home-page :is(a, button, input):focus-visible {
    outline: 2px solid var(--home-violet-bright);
    outline-offset: 3px;
}

main { display: block; }

.home-hero {
    box-sizing: border-box;
    width: min(100% - 48px, 1280px);
    min-height: 690px;
    margin: 0 auto;
    padding: 74px 0 68px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
    gap: clamp(48px, 7vw, 104px);
    align-items: center;
}
.home-eyebrow,
.home-section-label,
.workspace-stage {
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.home-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    color: var(--home-violet-text);
}
.home-eyebrow span { width: 28px; height: 2px; background: currentColor; }
.home-hero h1 {
    margin: 0;
    max-width: 760px;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 7.1vw, 7.25rem);
    font-weight: 700;
    line-height: 0.82;
    letter-spacing: -0.035em;
    color: var(--home-ink);
}
.home-hero h1 em,
.home-thesis h2 em {
    color: var(--home-violet-text);
    font-weight: inherit;
    font-style: italic;
}
.home-tagline {
    max-width: 600px;
    margin: 30px 0 0;
    color: var(--home-muted);
    font-size: 1.03rem;
    line-height: 1.7;
}
.home-hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.home-hero-cta,
.home-final-cta > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0 19px 0 22px;
    border: 1px solid var(--home-violet);
    background: var(--home-violet);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.home-hero-cta:focus-visible,
.home-final-cta > a:focus-visible { transform: translateY(-2px); background: #5b21b6; box-shadow: 0 10px 28px rgba(109, 40, 217, 0.26); }
.home-text-link {
    color: var(--home-ink);
    font-size: 0.79rem;
    font-weight: 700;
    text-underline-offset: 5px;
}
.home-trust-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; color: var(--home-muted); font-size: 0.72rem; }
.home-trust-row i { color: var(--home-violet-text); font-style: normal; font-weight: 800; }

/* Signature command-center panel. It deliberately remains dark in both themes. */
.hero-command-wrap {
    /* ---- Broadcast chrome, scoped to this panel ------------------------
       Literal stops, and they have to be scoped here. This panel is a night
       surface in BOTH themes, while --status-caution-fg, --primary and
       friends flip to dark ink under body.light-theme because they are meant
       for paper -- referencing them would paint dark-on-black the moment the
       site is in its default light mode. Scoping the tokens to the panel is
       what stops them being reused on a surface they aren't safe on.
       --broadcast-fill is the deeper violet because it sits under white text
       (7.1:1); --broadcast-violet is the lighter stop and is for borders and
       arrows ONLY -- white on it is 4.22:1 and fails at small sizes. */
    --broadcast-dim: #8f8798;
    --broadcast-live: #d9ff66;
    --broadcast-warn: #fcd34d;
    --broadcast-violet: #8b5cf6;
    --broadcast-fill: #6d28d9;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0 18px 18px;
    border: 1px solid #34303b;
    background: var(--home-night);
    color: #f8f5fb;
    box-shadow: 16px 18px 0 rgba(109, 40, 217, 0.13);
}
.hero-command-wrap::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 38px;
    width: 112px;
    height: 7px;
    background: var(--home-violet-bright);
}
.hero-command-kicker {
    min-height: 53px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #2f2b35;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #b7b0bf;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--home-lime); box-shadow: 0 0 0 4px var(--signal-lime-bg); }
/* The pick clock. This is the single element that turns "a list that
   updates" into "a draft room": a counting-down 0:24 in condensed tabular
   figures is unmistakably draft night, and it finally gives the Pause button
   something visible to pause. min-width holds 4 characters so the ticking
   1:00 -> 0:59 -> 0:09 sequence can't nudge the button beside it. */
.hero-clock {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
}
.hero-clock-label { color: var(--broadcast-dim); font-size: inherit; letter-spacing: inherit; }
.hero-clock-time {
    min-width: 3.2ch;
    color: var(--broadcast-live);
    font: 700 0.95rem var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    text-align: right;
}
/* Under ten seconds the room gets tense. Gold is the site's caution signal
   and this is exactly a caution, not a failure -- it never goes orange. */
.hero-clock.is-warning .hero-clock-time { color: var(--broadcast-warn); }
.hero-clock.is-paused .hero-clock-time { color: var(--broadcast-dim); }

/* Snake order rail. Twelve cells, a marker that walks left-to-right on odd
   rounds and right-to-left on even ones. Built from rules and numbers only,
   which is the whole thesis of this pass: the most fantasy-specific objects
   that exist are structural, not pictorial. */
.hero-draft-rail {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 10px 0 11px;
    border-bottom: 1px solid #2f2b35;
}
.hero-rail-meta {
    color: var(--broadcast-dim);
    font: 700 0.6rem var(--font-display);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    white-space: nowrap;
}
.hero-rail-meta b { color: #ece8ef; }
.hero-rail-dir {
    color: var(--broadcast-violet);
    font-size: 0.78rem;
    line-height: 1;
    transition: transform 0.3s ease;
}
.hero-rail-slots {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hero-rail-slots li {
    min-height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2b2733;
    /* was #6f6878 -- 3.57:1 on the night panel, at 8.5px */
    color: #8f8798;
    font: 700 0.53rem var(--font-display);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hero-rail-slots li.is-you { border-color: var(--broadcast-violet); color: #d9cffb; }
.hero-rail-slots li.is-onclock {
    background: var(--broadcast-fill);
    border-color: var(--broadcast-fill);
    color: #fff;
}
/* When the marker reaches your slot it goes lime, not violet. That is lime
   doing its documented job -- a live opportunity -- and it is the one moment
   in the simulation that is about the visitor rather than the room. */
.hero-rail-slots li.is-onclock.is-you {
    background: var(--home-lime);
    border-color: var(--home-lime);
    color: var(--signal-lime-ink);
}

.hero-play-toggle {
    margin-left: 12px;
    padding: 4px 8px;
    border: 1px solid #3b3642;
    background: transparent;
    color: #8f8798;
    font: 600 0.62rem var(--font-body);
    cursor: pointer;
    min-height: 30px;
}
.hero-command-wrap .hero-board { padding: 0; border: 0; background: transparent; box-shadow: none; }
.hero-command-wrap .hero-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0 11px;
    border-bottom: 1px solid #2f2b35;
}
.hero-command-wrap .hero-board-title { margin: 0; color: #f8f5fb; font-size: 0.8rem; }
.hero-command-wrap .hero-board-meta { color: #98919f; font-size: 0.63rem; white-space: nowrap; }
.hero-command-wrap .hero-board-list { margin: 0; padding: 0; list-style: none; }
.hero-command-wrap .hero-board-row {
    position: relative;
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr) 2.3rem 3.1rem 2.7rem 3.4rem;
    align-items: center;
    column-gap: 8px;
    min-height: 40px;
    padding: 5px 4px 5px 9px;
    border-bottom: 1px solid #25222a;
    transition: opacity 0.32s ease, transform 0.32s ease, background 0.32s ease;
}
body.home-page .hero-command-wrap .hero-board-row[class*="pos-tint-"] { background: transparent; border-left-width: 2px; }

/* Position colour on the position cell itself, not just the 2px edge strip.
   Six hues that mean QB/RB/WR/TE/K/DST is the most football-specific language
   this design system already owns, and the hero spent none of it.

   These are the DARK-theme stops written out literally, and they have to be:
   --pos-*-fg flips to a dark ink under body.light-theme (#9a3412, #0f766e, …)
   because it is meant for paper, while .hero-command-wrap is deliberately a
   night panel in BOTH themes. Referencing the token here would paint dark text
   on a near-black panel the moment the site is in its default light mode --
   the same "a token safe on one surface is not safe on the other" trap the
   pick tracker documents in styles.css. Keep these literal, or make them
   panel-local tokens; don't "fix" them back to --pos-*-fg.
   All six clear AA against --home-night (#100f13) by a wide margin, and the
   position abbreviation is still spelled out, so colour stays redundant. */
.hero-command-wrap .hero-board-row.pos-tint-QB  .hero-board-pos { color: #ffb08a; }
.hero-command-wrap .hero-board-row.pos-tint-RB  .hero-board-pos { color: #5eead4; }
.hero-command-wrap .hero-board-row.pos-tint-WR  .hero-board-pos { color: #93c5fd; }
.hero-command-wrap .hero-board-row.pos-tint-TE  .hero-board-pos { color: #fcd34d; }
.hero-command-wrap .hero-board-row.pos-tint-K   .hero-board-pos { color: #f0abfc; }
.hero-command-wrap .hero-board-row.pos-tint-DST .hero-board-pos { color: #cbd5e1; }
.hero-command-wrap .hero-board-pos {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.09em;
}
.hero-command-wrap .hero-board-row.is-target { background: rgba(139, 92, 246, 0.13) !important; }
.hero-command-wrap .hero-board-row.is-target::after {
    content: "TARGET";
    position: static;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    color: var(--home-lime);
    font: 700 0.54rem var(--font-display);
    letter-spacing: 0.11em;
}
.hero-command-wrap .hero-board-row.is-target .hero-board-pos { visibility: hidden; grid-column: 3; grid-row: 1; }
.hero-command-wrap .hero-board-row.is-drafted { opacity: 0.22; transform: translateX(8px); text-decoration: line-through; }
.hero-command-wrap .hero-board-rank,
.hero-command-wrap .hero-board-team,
.hero-command-wrap .hero-board-pos { color: #98919f; }
.hero-command-wrap .hero-board-rank,
.hero-command-wrap .hero-board-score { font-variant-numeric: tabular-nums; text-align: right; }
.hero-command-wrap .hero-board-name { min-width: 0; overflow: hidden; color: #ece8ef; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-command-wrap .hero-board-team { margin-left: 7px; }
.hero-command-wrap .hero-board-pos { text-align: left; }
.hero-command-wrap .hero-board-score { color: #fff; font-size: 0.84rem; }
/* Bye week and value-vs-ADP: the two columns that make this a draft board
   rather than a leaderboard. Both are quiet by default -- the score stays the
   loudest number in the row -- and the value only lights up when it's
   positive, which is the same scarcity rule lime follows everywhere else. */
.hero-command-wrap .hero-board-bye {
    /* was #7d7684 -- 4.36:1 on the night panel, at 9.3-10.9px */
    color: #928b99;
    font: 700 0.58rem var(--font-display);
    letter-spacing: 0.07em;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.hero-command-wrap .hero-board-value {
    /* was #7d7684 -- 4.36:1 on the night panel, at 9.3-10.9px */
    color: #928b99;
    font: 700 0.68rem var(--font-display);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.hero-command-wrap .hero-board-value.is-value { color: var(--home-lime); }
.hero-command-wrap .hero-board-foot { display: none; }
.hero-edge-readout {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 18px;
    margin-top: 15px;
    padding: 13px 14px;
    border: 1px solid #34303b;
    background: #17151b;
}
.hero-edge-readout > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.hero-edge-label { color: #8f8798; font: 700 0.62rem var(--font-display); letter-spacing: 0.13em; text-transform: uppercase; }
.hero-edge-value { color: var(--home-lime); font: 700 1.25rem var(--font-display); }
.hero-edge-meter { height: 4px; background: #302c35; overflow: hidden; }
.hero-edge-meter span { display: block; width: 72%; height: 100%; background: linear-gradient(90deg, var(--home-violet-bright), var(--home-lime)); transition: width 0.45s ease; }
.hero-edge-reason { grid-column: 1 / -1; margin: 0; color: #928b99; font-size: 0.65rem; }

.home-signal-strip {
    min-height: 52px;
    padding: 0 max(24px, calc((100vw - 1280px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    overflow: hidden;
    background: var(--home-violet);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}
.home-signal-strip b { color: var(--home-lime); font-size: 0.5rem; }

.home-stats {
    width: min(100% - 48px, 1280px);
    margin: 0 auto;
    padding: 38px 0;
    border-bottom: 1px solid var(--home-rule);
}
.home-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.home-stat { padding: 0 28px; border-left: 1px solid var(--home-rule); }
.home-stat:first-child { padding-left: 0; border-left: 0; }
/* Box score, not four callouts: column name over a ruled header, figure
   below it in tabular figures. The label is muted and the value carries the
   weight -- inverting that (both in ink) is what made this read as marketing
   copy. Figures are tabular so "500+" and "7" sit on the same rhythm as the
   0.634/0.565 pair in the detail line; see main.py's render_site_stats for
   why the DOM order changed. */
.home-stat-label {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--home-rule);
    color: var(--home-muted);
    font: 700 0.66rem var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.home-stat-value {
    margin-top: 12px;
    color: var(--home-ink);
    font: 700 2rem var(--font-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.home-stat-detail { max-width: 210px; margin-top: 9px; color: var(--home-muted); font-size: 0.65rem; line-height: 1.45; font-variant-numeric: tabular-nums; }

.home-thesis,
.workspace-section,
.toolbox-section,
.home-steps {
    box-sizing: border-box;
    width: min(100% - 48px, 1280px);
    margin: 0 auto;
}
.home-thesis { padding: 104px 0 0; }
.workspace-section { padding: 96px 0 0; }
.toolbox-section { padding: 96px 0 0; }
.home-steps { padding: 96px 0; }
.home-section-label { padding-bottom: 16px; border-bottom: 1px solid var(--home-rule); color: var(--home-violet-text); }

/* Yard line + hash marks. The section rule is the most repeated element on
   the page, so converting it from "editorial hairline" to "field marking" is
   the cheapest football move available -- no markup, no images, four
   instances, felt on every scroll. The ticks are absolutely positioned so
   they add zero height and can't disturb the section rhythm below them
   (every section clears >=40px before its heading, so 7px never collides). */
.home-section-label,
.home-steps .section-eyebrow { position: relative; }
.home-section-label::after,
.home-steps .section-eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--field-hash-height);
    background-image: repeating-linear-gradient(
        90deg,
        var(--field-hash) 0 1px,
        transparent 1px var(--field-hash-gap)
    );
    pointer-events: none;
}
.home-thesis-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.65fr); gap: 80px; align-items: end; padding: 44px 0 46px; }
.home-thesis h2,
.workspace-heading-row h2,
.toolbox-heading h2 {
    margin: 0;
    color: var(--home-ink);
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5.2rem);
    line-height: 0.92;
    letter-spacing: -0.025em;
}
.home-thesis-copy p,
.workspace-heading-row p,
.toolbox-heading > p { margin: 0; color: var(--home-muted); font-size: 0.88rem; line-height: 1.7; }
.home-thesis-copy a { display: inline-block; margin-top: 20px; color: var(--home-ink); font-size: 0.78rem; font-weight: 700; text-underline-offset: 5px; }

.signal-cards { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--home-rule); }
.signal-card { position: relative; min-height: 325px; box-sizing: border-box; padding: 26px; border-right: 1px solid var(--home-rule); background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.signal-card:last-child { border-right: 0; }
.signal-card-dark { background: var(--home-night); color: #f4f0f7; }
.signal-number { display: block; color: var(--home-muted); font: 700 0.66rem var(--font-display); letter-spacing: 0.12em; }
/* .signal-card-dark is a night panel in BOTH themes, so --home-muted (which
   flips to the paper muted #706b63 in light mode) lands at 3.61:1 on it --
   the same "token safe on one surface, not the other" trap documented for the
   hero position colours below. Pinned to a night-safe muted: 6.60:1. */
.signal-card-dark .signal-number { color: #9c95a6; }
.signal-card h3 { margin: 34px 0 9px; color: inherit; font: 700 1.55rem var(--font-display); }
.signal-card:not(.signal-card-dark) h3 { color: var(--home-ink); }
.signal-card p { max-width: 34ch; margin: 0; color: var(--home-muted); font-size: 0.76rem; line-height: 1.65; }
.signal-card-dark p { color: #9f98a7; }
/* Twelve cells, one of them yours. The old orbit diagram (a ring with four
   satellites) read as "a system with inputs" and would have been at home on
   any B2B landing page; a 6x2 grid of teams reads as a league and nothing
   else. Same footprint, so the card geometry is untouched. */
.signal-icon-league {
    height: 98px;
    margin-top: 27px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 7px;
}
.signal-icon-league span { border: 1px solid var(--home-rule); }
.signal-icon-league .is-you { background: var(--home-violet); border-color: var(--home-violet); }

/* Tier ladder: bars in the six position hues, shortening down the board,
   split by a lime tier break. This is the second place the position colour
   language appears (after the hero board), which is what makes it read as a
   system rather than a one-off. Literal dark stops because .signal-card-dark
   is a night surface in BOTH themes -- see the note on .hero-board-pos. */
.signal-tiers { height: 98px; margin-top: 27px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.signal-tiers i { display: block; height: 9px; }
.signal-tiers i.tier-qb { background: #ffb08a; }
.signal-tiers i.tier-rb { background: #5eead4; }
.signal-tiers i.tier-wr { background: #93c5fd; }
.signal-tiers i.tier-te { background: #fcd34d; }
.signal-tiers i:nth-child(1) { width: 94%; }
.signal-tiers i:nth-child(2) { width: 81%; }
.signal-tiers i:nth-child(3) { width: 72%; }
.signal-tiers i:nth-child(5) { width: 52%; }
.signal-tiers i:nth-child(6) { width: 41%; }
.signal-tiers i:nth-child(7) { width: 30%; }
/* The cliff between tiers -- the thing the whole card is about. */
.signal-tiers b {
    display: block;
    height: 1px;
    margin: 3px 0;
    background: repeating-linear-gradient(90deg, var(--home-lime) 0 7px, transparent 7px 14px);
}

.signal-shift { height: 98px; margin-top: 27px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.signal-shift span { padding: 11px 13px; border: 1px solid var(--home-rule); color: var(--home-muted); font: 700 0.7rem var(--font-display); letter-spacing: 0.07em; font-variant-numeric: tabular-nums; }
.signal-shift span:last-child { background: var(--home-violet); color: #fff; border-color: var(--home-violet); transform: translateY(-12px); }
.signal-shift b { color: var(--home-violet-text); }

.workspace-heading-row { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: end; padding: 44px 0 50px; }
.workspace-heading-row p { padding-bottom: 5px; }
.workspace-heading-aside { min-width: 0; }

/* The starting lineup, as ten ruled slots with a position-coloured cap.
   The 3px top edge is the same accent-strip idea the app uses on player rows
   (there it's a left border), so this reads as the product's own vocabulary
   rather than a homepage-only graphic. --pos-*-accent is theme-aware and
   safe on paper, unlike the --pos-*-fg stops the night panel needs. */
.lineup-card { margin-top: 26px; }
.lineup-card-label {
    display: block;
    margin-bottom: 11px;
    color: var(--home-muted);
    font: 700 0.6rem var(--font-display);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.lineup-card ul {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lineup-card li {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--home-rule);
    border-top: 3px solid var(--home-rule);
    color: var(--home-ink);
    font: 700 0.56rem var(--font-display);
    letter-spacing: 0.04em;
}
.lineup-card .slot-qb { border-top-color: var(--pos-qb-accent); }
.lineup-card .slot-rb { border-top-color: var(--pos-rb-accent); }
.lineup-card .slot-wr { border-top-color: var(--pos-wr-accent); }
.lineup-card .slot-te { border-top-color: var(--pos-te-accent); }
.lineup-card .slot-k { border-top-color: var(--pos-k-accent); }
.lineup-card .slot-dst { border-top-color: var(--pos-dst-accent); }
/* FLEX is the only slot that isn't a position -- it's the decision slot, so
   it takes the brand accent rather than a position hue. */
.lineup-card .slot-flex { border-top-color: var(--home-violet); }
.workspace-demos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.workspace-demo {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 230px;
    border: 1px solid var(--home-rule);
    background: var(--surface);
    color: var(--home-ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease;
}
.workspace-demo:focus-visible { transform: translateY(-4px); border-color: var(--home-violet); }
.workspace-demo-wide { grid-column: 1 / -1; grid-template-columns: 0.68fr 1.32fr; grid-template-rows: 420px; }
.workspace-demo-copy { position: relative; z-index: 2; box-sizing: border-box; padding: 34px; display: flex; flex-direction: column; align-items: flex-start; }
.workspace-stage { color: var(--home-violet-text); }
.workspace-demo h3 { margin: 64px 0 13px; color: var(--home-ink); font: 700 2rem var(--font-display); line-height: 1; }
.workspace-demo p { max-width: 43ch; margin: 0; color: var(--home-muted); font-size: 0.79rem; line-height: 1.65; }
.workspace-link { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; color: var(--home-ink); font-size: 0.75rem; font-weight: 700; }
.workspace-link b { color: var(--home-violet-text); }
/* This background is a LOADING PLACEHOLDER, not a design surface -- the shot
   is object-fit:cover at 100%/100%, so once it lands nothing of this colour is
   ever visible. It therefore has to match the image that covers it, and it did
   not: --home-night is #100f13 in BOTH themes (unlike --home-paper-deep, it is
   deliberately never re-declared for light), so on the ivory default theme
   these were three near-black rectangles until the screenshot arrived.

   That is a user-reported bug and the cause of its strangest symptom. The
   previews are loading="lazy", so they only start fetching as they approach
   the viewport: at the top of the page you never see the placeholder, and it
   only appears when you load or reload already scrolled down to this section
   -- which reads as the whole site flashing dark and then snapping to light.
   Keep this token theme-aware. The other --home-night users on this page
   (.hero-command-wrap, .signal-card-dark) ARE deliberate dark surfaces in both
   themes; this one is the only one sitting behind an image. */
.workspace-preview { position: relative; min-width: 0; overflow: hidden; background: var(--home-paper-deep); }
.workspace-preview::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); pointer-events: none; }
.workspace-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 0.45s ease; }
.workspace-demo:focus-visible img { transform: scale(1.018); }
.preview-callout { position: absolute; right: 22px; top: 22px; padding: 9px 12px; background: var(--home-lime); color: #1b1a1d; font: 700 0.68rem var(--font-display); letter-spacing: 0.08em; box-shadow: 4px 4px 0 rgba(0,0,0,0.22); }

.toolbox-heading { display: grid; grid-template-columns: 1fr 340px; gap: 80px; align-items: end; margin-bottom: 42px; }
.toolbox-heading .home-section-label { margin-bottom: 40px; }
.toolbox-heading > p { padding-bottom: 4px; }
.toolbox-list { border-top: 1px solid var(--home-rule); }
.toolbox-list a {
    display: grid;
    grid-template-columns: 42px minmax(190px, 0.7fr) 1fr 24px;
    gap: 18px;
    align-items: center;
    min-height: 78px;
    border-bottom: 1px solid var(--home-rule);
    color: var(--home-ink);
    text-decoration: none;
    transition: padding 0.18s ease, background 0.18s ease;
}
.toolbox-list a:focus-visible { padding: 0 16px; background: rgba(109, 40, 217, 0.06); }
.toolbox-list span { color: var(--home-violet-text); font: 700 0.67rem var(--font-display); letter-spacing: 0.12em; }
.toolbox-list strong { font: 700 1.25rem var(--font-display); }
.toolbox-list small { color: var(--home-muted); font-size: 0.73rem; }
.toolbox-list b { color: var(--home-violet-text); }

.home-steps .section-eyebrow { width: auto; margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--home-rule); background: none; clip-path: none; transform: none; box-shadow: none; color: var(--home-violet-text); font: 700 0.76rem var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.home-steps .section-heading { margin: 42px 0; color: var(--home-ink); font: 700 clamp(2.7rem, 4.5vw, 4.5rem) var(--font-display); text-align: left; letter-spacing: -0.02em; }
.section-heading-accent { color: var(--home-violet-text); -webkit-text-fill-color: currentColor; background: none; font-style: italic; }
.home-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.home-step { min-height: 190px; box-sizing: border-box; padding: 26px; border: 1px solid var(--home-rule); background: transparent; }
.home-step-num { color: var(--home-violet-text); font: 700 0.7rem var(--font-display); letter-spacing: 0.12em; -webkit-text-fill-color: currentColor; background: none; }
.home-step-title { margin: 48px 0 9px; color: var(--home-ink); font: 700 1.25rem var(--font-display); }
.home-step-body { margin: 0; color: var(--home-muted); font-size: 0.72rem; line-height: 1.65; }

/* The closing panel is the page's one "gameday" moment. It was a single
   violet bloom rising from the bottom edge, which is the default hero
   gradient every generated landing page ships with. Two washes coming DOWN
   from the upper corners is what stadium lighting actually looks like, and
   the yard grid underneath them gives the panel a floor. */
.home-final-cta {
    position: relative;
    box-sizing: border-box;
    min-height: 480px;
    padding: 90px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(circle at 12% -12%, rgba(139, 92, 246, 0.30), transparent 45%),
        radial-gradient(circle at 88% -12%, rgba(139, 92, 246, 0.30), transparent 45%),
        var(--home-night);
    color: #f7f3fa;
    overflow: hidden;
}
/* Yard lines, masked to fade out through the middle so they never sit behind
   the headline. A pseudo-element rather than another background layer purely
   so the mask can exist -- background layers can't be masked individually. */
.home-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.055) 0 1px,
        transparent 1px 88px
    );
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 42%, transparent 58%, rgba(0,0,0,0.9));
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 42%, transparent 58%, rgba(0,0,0,0.9));
    pointer-events: none;
}
.home-final-cta > * { position: relative; z-index: 1; }
.home-final-cta > p { margin: 0 0 18px; color: var(--home-lime); font: 700 0.72rem var(--font-display); letter-spacing: 0.15em; }
.home-final-cta h2 { margin: 0 0 34px; font: 700 clamp(3.5rem, 7vw, 7rem) var(--font-display); line-height: 0.9; letter-spacing: -0.03em; }
.home-final-cta small { margin-top: 16px; color: #8f8798; font-size: 0.66rem; }

/* Searchable, keyboard-accessible tool switcher. */
.command-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    padding: 12vh 20px 20px;
    box-sizing: border-box;
    background: rgba(8, 7, 10, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.command-backdrop[hidden] { display: none; }
.command-palette { width: min(100%, 610px); max-height: 72vh; margin: 0 auto; overflow: auto; border: 1px solid #393440; background: #131116; color: #f7f3fa; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.command-search-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 17px 18px; border-bottom: 1px solid #302b36; }
.command-search-row svg { width: 19px; color: #89818e; }
.command-search-row input { min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 500 0.92rem var(--font-body); }
.command-search-row input::placeholder { color: #77707c; }
.command-search-row:focus-within { border-bottom-color: var(--home-violet-bright); box-shadow: inset 0 -1px 0 var(--home-violet-bright); }
.command-close {
    min-width: 38px;
    min-height: 28px;
    padding: 0 7px;
    border: 1px solid #625b68;
    border-radius: 3px;
    background: transparent;
    color: #b3acb8;
    font: 700 0.62rem var(--font-body);
    cursor: pointer;
}
.command-palette h2 { margin: 18px 18px 8px; color: #7e7684; font: 700 0.63rem var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.command-results { padding: 5px 9px 12px; }
.command-results a { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; min-height: 48px; padding: 0 10px; color: #f4f0f7; text-decoration: none; }
.command-results a:focus { outline: none; background: #241f2a; }
.command-results span { color: var(--home-violet-bright); font: 700 0.62rem var(--font-display); }
.command-results strong { font: 600 0.82rem var(--font-body); }
.command-results small { color: #817987; font-size: 0.65rem; }
.command-empty { margin: 0; padding: 20px; color: #89818e; font-size: 0.78rem; text-align: center; }
body.command-open { overflow: hidden; }

body.home-page .site-footer {
    box-sizing: border-box;
    width: min(100% - 48px, 1280px);
    max-width: none;
}

body.home-page .bug-fab { opacity: 0; visibility: hidden; pointer-events: none; }

@media (hover: hover) {
    .home-nav > a:hover { color: var(--home-ink); }
    .home-hero-cta:hover,
    .home-final-cta > a:hover { transform: translateY(-2px); background: #5b21b6; box-shadow: 0 10px 28px rgba(109, 40, 217, 0.26); }
    .workspace-demo:hover { transform: translateY(-4px); border-color: var(--home-violet); }
    .workspace-demo:hover img { transform: scale(1.018); }
    .toolbox-list a:hover { padding: 0 16px; background: rgba(109, 40, 217, 0.06); }
    .command-results a:hover { background: #241f2a; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    /* The signal cards no longer animate at all -- the tier ladder that
       replaced the pulsing equalizer is static by design, since the hero's
       draft clock now supplies the page's motion and two competing loops
       above the fold was one too many. */
    .workspace-demo,
    .workspace-preview img,
    .hero-board-row,
    .hero-rail-slots li,
    .hero-rail-dir,
    .hero-edge-meter span { transition: none; }
    .home-nav > a,
    .home-hero-cta,
    .home-final-cta > a,
    .toolbox-list a { transition: none; }
}

@media (max-width: 1100px) {
    .home-hero { grid-template-columns: 1fr; padding-top: 58px; }
    .home-hero-copy { max-width: 760px; }
    .hero-command-wrap { max-width: 700px; }
    .home-thesis-grid { grid-template-columns: 1fr; gap: 24px; }
    .workspace-demo-wide { grid-template-columns: 0.8fr 1.2fr; }
}

@media (max-width: 820px) {
    .home-masthead,
    .home-hero,
    .home-stats,
    .home-thesis,
    .workspace-section,
    .toolbox-section,
    .home-steps { width: min(100% - 32px, 1280px); }
    .home-masthead { height: 70px; }
    .home-nav > a { display: none; }
    .command-trigger span { display: none; }
    .command-trigger { width: 44px; height: 44px; justify-content: center; gap: 0; padding: 0; }
    .command-trigger-icon { display: block; }
    .command-trigger kbd { display: none; }
    body.home-page .theme-toggle-btn { width: 44px; height: 44px; }
    .home-hero { min-height: 0; padding: 54px 0 66px; gap: 54px; }
    .home-hero h1 { font-size: clamp(4rem, 18vw, 6.4rem); }
    .home-tagline { font-size: 0.92rem; }
    .home-signal-strip { justify-content: flex-start; padding: 0 16px; }
    .home-signal-strip span:nth-of-type(n+3),
    .home-signal-strip b:nth-of-type(n+2) { display: none; }
    .home-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
    .home-stat { padding: 0 18px; }
    .home-stat:nth-child(3) { padding-left: 0; border-left: 0; }
    .home-thesis { padding-top: 76px; }
    .workspace-section,
    .toolbox-section { padding-top: 72px; }
    .home-steps { padding: 72px 0; }
    .signal-cards { grid-template-columns: 1fr; }
    .signal-card { min-height: 295px; border-right: 0; border-bottom: 1px solid var(--home-rule); }
    .signal-card:last-child { border-bottom: 0; }
    .workspace-heading-row,
    .toolbox-heading { grid-template-columns: 1fr; gap: 24px; }
    .workspace-demos { grid-template-columns: 1fr; }
    .workspace-demo,
    .workspace-demo-wide { grid-column: 1; grid-template-columns: 1fr; grid-template-rows: auto 220px; }
    .workspace-demo-wide .workspace-preview { grid-row: 2; }
    .workspace-demo-copy { min-height: 300px; padding: 26px; }
    .workspace-demo h3 { margin-top: 44px; }
    .toolbox-heading .home-section-label { margin-bottom: 28px; }
    .toolbox-list a { grid-template-columns: 30px 1fr 22px; gap: 10px; }
    .toolbox-list small { display: none; }
    .home-steps-grid { grid-template-columns: 1fr; }
    .home-final-cta { min-height: 400px; }
    .command-backdrop {
        padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
        display: flex;
        align-items: flex-start;
    }
    .command-palette { max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    body.home-page .site-footer { width: min(100% - 32px, 1280px); }
}

@media (max-width: 480px) {
    .home-brand { font-size: 1.3rem; }
    .home-nav { gap: 9px; }
    .home-hero-actions { align-items: flex-start; flex-direction: column; }
    .home-hero-cta { width: 100%; justify-content: space-between; }
    .home-trust-row { gap: 11px; font-size: 0.64rem; }
    .hero-command-wrap { padding: 0 10px 10px; box-shadow: 8px 10px 0 rgba(109, 40, 217, 0.13); }
    /* Phone: the row is back to four columns. Bye and value are the first
       things to go -- a truncated player name costs more than either, and
       the team abbreviation was already sacrificed here for the same
       reason. Keep this grid in step with those two display:none rules. */
    .hero-command-wrap .hero-board-row { grid-template-columns: 1.25rem minmax(0, 1fr) 2rem 2.7rem; }
    .hero-command-wrap .hero-board-bye,
    .hero-command-wrap .hero-board-value { display: none; }
    .hero-command-wrap .hero-board-row:nth-child(n+7) { display: none; }
    .hero-command-wrap .hero-board-row.is-target::after { display: none; }
    .hero-command-wrap .hero-board-team { display: none; }
    /* The rail survives on phones, the round/pick caption does not: the
       snake motion is the part that carries meaning, and the caption is the
       part that eats the width twelve cells need. */
    .hero-draft-rail { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
    .hero-rail-meta { display: none; }
    .hero-rail-slots { gap: 2px; }
    .hero-rail-slots li { min-height: 19px; font-size: 0.46rem; letter-spacing: 0; }
    .hero-edge-readout { grid-template-columns: 1fr; }
    .hero-edge-reason { grid-column: 1; }
    .home-stat { padding: 0 10px; }
    .home-stat-value { font-size: 1.55rem; }
    .home-stat-detail { display: none; }
    .home-thesis h2,
    .workspace-heading-row h2,
    .toolbox-heading h2 { font-size: 2.75rem; }
    .command-results a { grid-template-columns: 28px 1fr; }
    .command-results small { display: none; }
}