/* <pp-landing> — retro CRT "title screen" for the public front door. Built entirely
 * on the app's :root tokens + fonts so the promo and the app are one system. All
 * styles nest under .landing; class names are landing-specific to dodge globals. */

.landing-body { overflow-x: hidden; }

.landing {
  --hard: 6px 6px 0 rgba(0, 0, 0, .55);
  --hard-sm: 4px 4px 0 rgba(0, 0, 0, .5);
  --crt-dark: #071a10;                 /* darker-than-field CRT ground for panels */
  display: block;
  position: relative;
  font-family: var(--body);

  /* ---- fixed CRT atmosphere ---- */
  & .field { position: fixed; inset: 0; z-index: 0; display: block; }
  & .vignette {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.86) 100%);
  }
  & .scanlines {
    position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 3px 4px);
  }
  & .content { position: relative; z-index: 3; }

  & .wrap { width: min(960px, 92vw); margin: 0 auto; }

  /* ---- shared type ---- */
  & .eyebrow {
    font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--brass);
  }
  & .screen-title {
    font-family: var(--display); font-size: clamp(26px, 4.4vw, 44px); line-height: 1; margin: 10px 0 0;
    letter-spacing: 1px; text-wrap: balance; color: var(--chalk);
    text-shadow: 3px 3px 0 rgba(0,0,0,.5);
  }
  & .lead { color: var(--chalk-dim); max-width: 60ch; }
  & .gold { color: var(--brass); }
  & .up { color: var(--up); }

  /* ---- pixel panel ---- */
  & .crt-panel {
    background: linear-gradient(180deg, var(--field-2), var(--crt-dark));
    border: 3px solid var(--stripe);
    border-radius: 0;
    box-shadow: var(--hard);
    padding: 30px;
  }

  /* ================= HERO ================= */
  & .hero {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px 20px 0;
  }
  & .cabinet {
    font-family: var(--mono); font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--chalk-dim); margin-bottom: 26px;
  }
  & .mark { user-select: none; display: flex; flex-direction: column; align-items: center; line-height: .84; }
  & .mark .l1 {
    font-family: var(--display); font-size: clamp(30px, 7vw, 72px); color: var(--chalk); letter-spacing: 2px;
    text-shadow: 4px 4px 0 var(--field), 8px 8px 0 rgba(0,0,0,.5);
  }
  & .mark .l2 {
    font-family: var(--display); font-size: clamp(52px, 13vw, 132px); color: var(--brass); letter-spacing: 1px;
    text-shadow: 4px 4px 0 #7a5714, 8px 8px 0 rgba(0,0,0,.55), 0 0 26px rgba(217,165,63,.28);
  }
  & .mark .l2 .apos { color: var(--chalk); }

  & .slogan {
    margin-top: 24px; font-family: var(--mono); font-weight: 600; letter-spacing: 3px;
    font-size: clamp(11px, 2.4vw, 15px); text-transform: uppercase; color: var(--chalk);
  }
  /* Brass squares rather than a glyph: the app's rank chips are gold squares and
     every corner in the retro layer is square, so the separator is drawn instead of
     typed — no font can round it off, and it sits on the text's optical centre. */
  & .slogan .sep {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 14px;
    background: var(--brass);
    vertical-align: 0.18em;
  }
  & .subtitle { margin-top: 14px; color: var(--chalk-dim); max-width: 56ch; font-size: 15px; line-height: 1.6; }

  & .start {
    margin-top: 38px; display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: 16px;
    color: var(--chalk); text-decoration: none; padding: 14px 26px;
    background: var(--field-2); border: 3px solid var(--brass); box-shadow: var(--hard);
  }
  /* The two doors, side by side and wrapping to stacked on a phone rather than shrinking
     the primary one. */
  & .start-row {
    margin-top: 38px;
    display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  }
  & .start-row .start { margin-top: 0; }

  /* QUIET, NOT ABSENT. An owner whose browser has forgotten them still needs this, and a
     visitor who turns out to have an account should not have to hunt. It is a link rather
     than a second button so nothing competes with the one action the page is asking for. */
  & .start-alt {
    font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--chalk-dim); text-decoration: none;
    border-bottom: 1px solid var(--stripe); padding-bottom: 2px;
  }
  & .start-alt:hover, & .start-alt:focus-visible {
    color: var(--brass); border-bottom-color: var(--brass); outline: none;
  }

  & .start .caret { color: var(--brass); }
  & .start:hover, & .start:focus-visible { background: var(--field-3); transform: translate(-2px,-2px); box-shadow: 8px 8px 0 rgba(0,0,0,.6); outline: none; }
  & .start:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(0,0,0,.6); }
  & .blink { animation: landing-blink 1.1s steps(1) infinite; }

  & .scroll-hint { margin-top: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--chalk-dim); text-transform: uppercase; }

  /* ---- scoreboard ticker ---- */
  & .scoreboard {
    position: relative; z-index: 3; margin-top: 42px; width: 100%; overflow: hidden; white-space: nowrap;
    border-top: 3px solid var(--stripe); border-bottom: 3px solid var(--stripe); background: rgba(7,26,16,.85);
  }
  & .scoreboard-track { display: inline-block; padding: 9px 0; will-change: transform; animation: landing-slide 34s linear infinite; }
  & .scoreboard-track span { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; padding: 0 22px; text-transform: uppercase; }
  & .scoreboard-track .val { color: var(--brass); font-variant-numeric: tabular-nums; }
  & .scoreboard-track .up { color: var(--up); }
  & .scoreboard-track .team { color: var(--chalk); }
  & .scoreboard-track .sep { color: var(--stripe); }

  /* ================= SCREENS ================= */
  & .screen { padding: 74px 0; }
  & .screen-head { margin-bottom: 30px; }

  & .what p { font-family: var(--body); font-size: 17px; line-height: 1.7; margin: 0 0 14px; }
  & .what p:last-child { margin-bottom: 0; }
  & .what .big { font-family: var(--display); font-size: clamp(20px,3vw,26px); color: var(--brass); letter-spacing: .5px; }

  /* ================= DASHBOARD MOCK =================
     Markup rather than a screenshot; see the note in index.php for why. It deliberately
     mirrors the real components' proportions and type — the mono
     money column, the gold rank chip, the panel headers — because its job is to look
     like the app, not merely to look like a dashboard. Everything is drawn from the
     :root tokens, so it re-themes with the app instead of going stale on disk. */
  & .mock { margin: 0; }
  & .mock-shell {
    border: 3px solid var(--stripe);
    box-shadow: var(--hard);
    background: var(--crt-dark);
    overflow: hidden;
  }
  /* The window chrome. Brass rail echoes the app's lit topbar "marquee". */
  & .mock-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: linear-gradient(180deg, var(--field-3), var(--field-2));
    border-bottom: 3px solid var(--stripe);
  }
  & .mock-bar .dot { width: 9px; height: 9px; background: var(--stripe); display: inline-block; }
  & .mock-bar .dot:first-child { background: var(--brass); }
  & .mock-name {
    margin-left: 8px; font-family: var(--display); font-size: 13px;
    letter-spacing: 1px; color: var(--chalk);
  }
  & .mock-week {
    margin-left: auto; font-family: var(--mono); font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--chalk-dim);
  }

  & .mock-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; align-items: start; }

  & .mpanel { background: var(--field-2); border: 2px solid var(--stripe); }
  & .mpanel > header {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; border-bottom: 2px solid var(--stripe);
    background: var(--scanline);
  }
  & .mpanel h3 { font-family: var(--display); font-size: 14px; letter-spacing: .5px; margin: 0; color: var(--chalk); }
  & .msub, & .mmuted { color: var(--chalk-dim); }
  & .msub { font-size: 11px; }
  & .mmuted { font-size: 11px; }
  & .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  & .mlabel {
    font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--chalk-dim);
  }
  /* Gains and losses read at a glance; $0.00 is neither, so .flat takes no colour —
     the same three-way treatment the app's components use. */
  & .up { color: var(--up); }
  & .down { color: var(--red); }
  & .flat { color: var(--chalk-dim); }

  & .mhead { padding: 14px; border-bottom: 1px solid var(--stripe); }
  & .mbig {
    font-size: clamp(26px, 4vw, 38px); line-height: 1.05; color: var(--chalk);
    margin-top: 2px; text-shadow: 2px 2px 0 rgba(0,0,0,.4);
  }
  & .mchange { font-size: 11px; margin-top: 4px; color: var(--up); }

  & .mseason { display: flex; gap: 22px; padding: 12px 14px 0; font-size: 13px; }
  & .mseason b { margin-left: 6px; color: var(--chalk); }
  & .mnote { margin: 8px 14px 12px; font-size: 11px; line-height: 1.55; color: var(--chalk-dim); }
  & .mnote b { color: var(--chalk); }

  /* One series, so no legend — the head names the line and the range. 2px stroke,
     recessive fill, no gridlines: at this size anything more is noise. */
  & .mchart { padding: 10px 14px 12px; border-top: 1px solid var(--stripe); }
  & .mchart-head {
    display: flex; justify-content: space-between; font-size: 10px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--chalk-dim); margin-bottom: 6px;
  }
  & .mchart svg { display: block; width: 100%; height: 62px; }
  & .mchart .stroke { fill: none; stroke: var(--up); stroke-width: 2; vector-effect: non-scaling-stroke; }
  & .mchart .fill { fill: color-mix(in srgb, var(--up) 16%, transparent); stroke: none; }

  & .msplit { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--stripe); }
  & .mplus { font-family: var(--display); color: var(--brass); font-size: 16px; }
  & .mamt { font-size: 15px; color: var(--chalk); margin-top: 2px; }

  & .mperf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 14px; border-top: 1px solid var(--stripe); }
  & .mperf .mamt { font-size: 13px; }

  & .mteams { width: 100%; border-collapse: collapse; font-size: 12px; }
  & .mteams th {
    text-align: left; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--chalk-dim); font-weight: 400;
    padding: 9px 10px; border-bottom: 2px solid var(--stripe);
  }
  & .mteams td { padding: 9px 10px; border-bottom: 1px solid var(--stripe); color: var(--chalk); }
  & .mteams tr:last-child td { border-bottom: 0; }
  & .mteams .r { text-align: right; }
  /* The app's rank chip: a gold square, never a rounded pill. */
  & .mchip {
    display: inline-block; min-width: 20px; padding: 2px 5px; text-align: center;
    background: var(--brass); color: var(--field);
    font-family: var(--mono); font-size: 11px; font-weight: 600;
  }
  & .munranked { font-family: var(--mono); font-size: 10px; color: var(--chalk-dim); }

  & .mock figcaption {
    margin-top: 14px; text-align: center;
    font-size: 13px; color: var(--chalk-dim); line-height: 1.6;
  }

  /* how to play */
  & .plays { display: grid; gap: 20px; }
  & .play { display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-items: start; padding: 22px 24px; }
  & .play .num {
    font-family: var(--display); font-size: 54px; line-height: .8; color: var(--field);
    -webkit-text-stroke: 2px var(--brass); text-shadow: 4px 4px 0 rgba(0,0,0,.4);
  }
  & .play h3 { font-family: var(--display); font-size: 22px; letter-spacing: .5px; margin: 2px 0 8px; color: var(--chalk); }
  & .play .phase { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--brass); display: block; margin-bottom: 3px; text-transform: uppercase; }
  & .play p { margin: 0; color: var(--chalk-dim); font-size: 15px; line-height: 1.6; }
  & .play p b { color: var(--chalk); }

  /* payout table */
  & .payouts { margin-top: 22px; padding: 22px 26px; }
  & .prow { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 2px dotted var(--stripe); }
  & .prow:last-child { border-bottom: 0; }
  & .rnd { font-family: var(--mono); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: var(--chalk); }
  & .pct { font-family: var(--display); color: var(--brass); font-variant-numeric: tabular-nums; font-size: 18px; }

  /* features */
  & .feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  & .feat { padding: 22px 20px; }
  & .feat .ico { font-family: var(--display); font-size: 30px; color: var(--brass); line-height: 1; }
  & .feat h4 { font-family: var(--display); font-size: 15px; letter-spacing: .5px; margin: 12px 0 6px; color: var(--chalk); }
  & .feat p { margin: 0; font-size: 13px; color: var(--chalk-dim); line-height: 1.55; }

  /* ================= CTA ================= */
  & .enter { text-align: center; padding: 84px 0 30px; }
  & .enter .lead { margin: 14px auto 0; }
  & .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
  & .mbtn {
    font-family: var(--mono); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 14px;
    text-decoration: none; padding: 14px 24px; border: 3px solid var(--brass); background: var(--brass);
    color: var(--field); box-shadow: var(--hard-sm);
  }
  & .mbtn.ghost { background: transparent; color: var(--chalk); border-color: var(--stripe); }
  & .mbtn:hover, & .mbtn:focus-visible { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(0,0,0,.6); outline: none; }
  & .mbtn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.6); }
  & .invite-note { margin-top: 22px; font-size: 13px; color: var(--chalk-dim); }
  & .invite-note b { color: var(--brass); }

  /* THE PAGE'S ONLY FORM, and its first — there was no input on this page before, so this
     is the retro idiom applied to a field rather than a reuse of one. It cannot borrow the
     app's .login-card either: landing avoids the globals on purpose, which is why every
     class here is landing-local. Square corners, 3px borders, hard offset shadow, mono
     uppercase label — the same vocabulary as .crt-panel and .mbtn one rule up. */
  & .capture {
    max-width: 520px;
    margin: 26px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--stripe);
  }
  & .capture-label {
    display: block;
    font-family: var(--mono); font-size: 12px; letter-spacing: 3px;
    text-transform: uppercase; color: var(--brass);
  }
  & .capture-sub { margin: 8px 0 16px; font-size: 13px; color: var(--chalk-dim); }

  /* Wraps to stacked on a narrow screen rather than shrinking the field to nothing. The
     input needs min-width: 0 to be allowed to shrink at all inside a flex row. */
  & .capture-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  & .capture-row input {
    flex: 1 1 240px; min-width: 0;
    font-family: var(--mono); font-size: 14px;
    padding: 13px 14px;
    color: var(--chalk); background: var(--crt-dark);
    border: 3px solid var(--stripe); border-radius: 0;
    box-shadow: var(--hard-sm);
  }
  & .capture-row input::placeholder { color: var(--chalk-dim); opacity: .7; }
  & .capture-row input:focus-visible { border-color: var(--brass); outline: none; }

  /* .mbtn is an <a> everywhere else on this page, so as a <button> it arrives carrying the
     UA's own font and cursor. */
  & .capture-row button { font: inherit; cursor: pointer; flex: 0 0 auto; }
  & .capture-row .mbtn {
    font-family: var(--mono); font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; font-size: 14px;
  }

  /* OFF SCREEN, NOT `display: none`. A bot that parses CSS skips a hidden field, and one
     that does not still needs somewhere to put the value; this is reachable to neither a
     pointer nor the accessibility tree (aria-hidden + tabindex=-1 on the markup). */
  & .capture-trap {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
  }

  & .capture-msg { margin: 14px 0 0; font-size: 13px; color: var(--up); min-height: 1.2em; }
  & .capture-msg:empty { margin-top: 0; }

  & .landing-foot { text-align: center; padding: 30px 20px 70px; color: var(--chalk-dim); font-size: 11px; letter-spacing: 1px; }
  & .landing-foot .disc { text-transform: uppercase; letter-spacing: 2px; }
  & .landing-foot .ver { margin-top: 10px; }

  & a { color: var(--brass); }
  & :focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

  /* reveal-on-scroll */
  & .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  & .reveal.in { opacity: 1; transform: none; }

  /* Above the app's other breakpoints: at 780px each panel is ~320px, which squeezes
     the five-column team table into an unreadable width. Stack instead. */
  @media (max-width: 780px) { & .mock-body { grid-template-columns: 1fr; } }
  @media (max-width: 640px) {
    & .feats { grid-template-columns: 1fr 1fr; }
    & .play { grid-template-columns: 54px 1fr; gap: 14px; }
    & .play .num { font-size: 40px; }
  }
  @media (max-width: 420px) { & .feats { grid-template-columns: 1fr; } }
}

@keyframes landing-blink { 50% { opacity: 0; } }
@keyframes landing-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* THE HERO ANCHOR GLIDES instead of teleporting, so the jump to the form at the foot reads
   as travel down one page rather than as a new one.
   On `html`, not nested under .landing, because scroll-behavior applies to the SCROLLING
   element and that is the document — nested it would style a box that never scrolls. Safe
   to write bare: page_head() links this file only on the page that names the component. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .landing .blink { animation: none; }
  .landing .scoreboard-track { animation: none; }
  .landing .reveal { opacity: 1; transform: none; transition: none; }
}

/* Spencer's closing line on a section — a beat of its own, not body copy. */
.landing .strap {
  margin-top: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* The hand-off to /how-to-play/. Centred under the payout table because it closes
   the section rather than trailing the last article in it. */
.landing .guide-link {
  margin-top: 22px;
  text-align: center;
  font-weight: 400;
  color: var(--chalk-dim);
}