/* TASK-120: direction D on "/" (approved by Dee 2026-10-14). Values come from /aeo/tokens.css, which
   scripts/redesign-tokens.mjs generates from lib/design-tokens.ts. Layout follows demo/redesign/direction-d.css and
   sport-hero.css; this file is the static-page version of those rules. Only the landing loads it. */

body.ld-page { margin: 0; background: var(--tk-dark-ground); color: var(--tk-dark-text); font-family: var(--tk-font-sans);
  font-size: var(--tk-type-body-size); line-height: var(--tk-type-body-line); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; --tk-focus: var(--tk-dark-focus); --tk-loss: var(--tk-dark-loss); }
.ld-page *, .ld-page *::before, .ld-page *::after { box-sizing: border-box; }
.ld-page img { max-width: 100%; }
.ld-page a { color: inherit; }
.ld-page :focus-visible { outline: 2px solid var(--tk-focus); outline-offset: 2px; border-radius: var(--tk-radius-sm); }
.ld-page .site-arrow { width: 18px; height: 18px; flex: none; }

.ld-page .aeo-skip { position: absolute; left: 12px; top: 0; transform: translateY(-110%); z-index: 50; padding: 10px 14px; background: var(--tk-dark-accent); color: var(--tk-dark-on-accent); font-weight: 650; text-decoration: none; border-radius: var(--tk-radius-sm); }
.ld-page .aeo-skip:focus { transform: translateY(12px); }

/* Bands. Each band sets its own ground and text so nothing inherits the wrong theme. */
.ld-band { padding-block: var(--tk-space-9); }
.ld-dark { background: var(--tk-dark-ground); color: var(--tk-dark-text); --ld-muted: var(--tk-dark-text-muted); --ld-rule: var(--tk-dark-rule); --ld-rule-strong: var(--tk-dark-rule-strong); --ld-accent: var(--tk-dark-accent); --tk-focus: var(--tk-dark-focus); --tk-loss: var(--tk-dark-loss); }
.ld-light { background: var(--tk-light-ground); color: var(--tk-light-text); --ld-muted: var(--tk-light-text-muted); --ld-rule: var(--tk-light-rule); --ld-rule-strong: var(--tk-light-rule-strong); --ld-accent: var(--tk-light-accent); --tk-focus: var(--tk-light-focus); --tk-loss: var(--tk-light-loss); }
.ld-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--tk-space-6); }
.ld-h2 { margin: 0 0 var(--tk-space-7); max-width: 20em; font-stretch: var(--tk-type-h1-stretch); font-size: var(--tk-type-h1-size); line-height: 1.05; font-weight: var(--tk-type-h1-weight); letter-spacing: var(--tk-type-h1-tracking); text-wrap: balance; overflow-wrap: break-word; }
.ld-micro { margin: 0; font-size: var(--tk-type-caption-size); line-height: var(--tk-type-caption-line); font-weight: 600; letter-spacing: var(--tk-kicker-tracking); font-stretch: var(--tk-type-caption-stretch); text-transform: uppercase; color: var(--ld-muted); }
.ld-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--ld-accent); text-underline-offset: 4px; }
/* TASK-126: ".ld-page a" (line 9) outranks ".ld-link"; the prefix keeps the accent (Design handoff #624 rule 5). */
.ld-page .ld-link { color: var(--ld-accent); }

/* Buttons */
.ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--tk-radius-sm); border: 1px solid transparent;
  font-size: var(--tk-type-button-size); font-weight: var(--tk-type-button-weight); line-height: var(--tk-type-button-line); text-decoration: none; text-align: center; }
.ld-page .ld-btn--primary { background: var(--tk-dark-accent); color: var(--tk-dark-on-accent); }
.ld-page .ld-btn--primary:hover { background: color-mix(in srgb, var(--tk-dark-accent) 86%, var(--tk-bone)); }
.ld-page .ld-light .ld-btn--primary { background: var(--tk-light-accent); color: var(--tk-light-on-accent); }
.ld-page .ld-light .ld-btn--primary:hover { background: var(--tk-brand-pressed);}

/* Nav */

/* Hero: the venue photo carries it; the grade only darkens for legibility (sport-hero.css). */
.ld-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--tk-dark-sunk); color: var(--tk-bone); --tk-focus: var(--tk-dark-focus); --tk-loss: var(--tk-dark-loss); }
.ld-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(80% 60% at 60% 110%, var(--tk-dark-raised) 0%, var(--tk-dark-sunk) 45%, var(--tk-dark-sunk) 80%); }
.ld-backdrop__photo { position: absolute; top: 0; right: 0; left: 30%; width: 70%; height: 100%; object-fit: cover; object-position: center 45%;
  filter: saturate(.72) brightness(.62) contrast(1.08); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 38%); mask-image: linear-gradient(90deg, transparent 0%, black 38%); }
.ld-backdrop__grade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7,10,9,.94) 0%, rgba(7,10,9,.72) 40%, rgba(7,10,9,.22) 75%, rgba(7,10,9,.45) 100%),
  radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.65) 100%),
  linear-gradient(0deg, rgba(7,10,9,.9) 0%, transparent 30%); }
.ld-backdrop__credit { position: absolute; right: 12px; bottom: 10px; z-index: 2; margin: 0; font-size: var(--tk-type-caption-size); line-height: 1; font-weight: 600; font-stretch: 80%; letter-spacing: .06em; text-transform: uppercase; color: rgba(246,245,240,.62); }
.ld-hero__inner { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 9vh, 112px) var(--tk-space-6) clamp(48px, 8vh, 96px); min-height: min(680px, calc(100svh - 64px)); display: grid; align-items: end; }
.ld-kicker { margin: 0; font-size: var(--tk-type-caption-size); line-height: 16px; font-weight: 600; font-stretch: 80%; letter-spacing: .04em; text-transform: uppercase; color: rgba(246,245,240,.78); }
.ld-headline { margin: 20px 0 0; max-width: 15em; font-stretch: var(--tk-type-hero-stretch); font-weight: var(--tk-type-hero-weight); font-size: var(--tk-type-hero-size); line-height: var(--tk-type-hero-line); letter-spacing: var(--tk-type-hero-tracking); overflow-wrap: break-word; hyphens: auto; }
.ld-headline span { display: block; text-wrap: balance; }
.ld-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.ld-trust { list-style: none; margin: 40px 0 0; padding: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; border-top: 1px solid rgba(246,245,240,.2); max-width: 46rem; }
.ld-trust li { font-size: var(--tk-type-label-size); line-height: var(--tk-type-label-line); color: rgba(246,245,240,.78); }
.ld-trust--record { grid-template-columns: minmax(0, 1fr); margin: 24px 0 8px; gap: 8px; }
.ld-hero .hero-note { margin: 24px 0 0; font-size: var(--tk-type-label-size); line-height: var(--tk-type-label-line); color: rgba(246,245,240,.7); }
/* TASK-135: the front page (#622 section 5, Design's frames in section 10). One real object beside the H1 on desktop,
   under it on a phone; the card is light so the object reads as a thing, not decoration. */
.ld-front { align-content: end; }
.ld-front > .ld-ctas { align-items: center; }
@media (min-width: 900px) {
  .ld-front { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "kicker card" "title card" "line card" "ctas card" "note card"; column-gap: var(--tk-space-8); }
  .ld-front > .ld-kicker { grid-area: kicker; }
  .ld-front > .ld-headline { grid-area: title; }
  .ld-front > .ld-front__line { grid-area: line; }
    .ld-front > .ld-ctas { grid-area: ctas; }
  .ld-front > .hero-note { grid-area: note; }
}
.ld-front__line { margin: 20px 0 0; max-width: 34em; font-size: var(--tk-type-body-size); line-height: var(--tk-type-body-line); color: rgba(246,245,240,.86); }
/* TASK-169 (#703 P0): one real lead in the hero, never an illustration. The H1 says what Tikata is; the lead column says
   what to open today. Phone: kicker, H1, lead, its action, the 21+ note. Desktop: the lead column beside the H1. */
.ld-hero__inner.ld-front--lead { min-height: 0; padding-block: var(--tk-space-7) var(--tk-space-7); align-content: start; row-gap: 0; }
.ld-lead-col { min-width: 0; margin-top: var(--tk-space-6); }
.ld-lead { min-width: 0; padding: var(--tk-space-5) 0 var(--tk-space-4); border-top: 2px solid var(--tk-dark-accent); }
.ld-lead__item { display: grid; gap: var(--tk-space-2); }
.ld-lead__item p, .ld-lead__item h2 { margin: 0; }
.ld-lead__label { font-size: var(--tk-type-caption-size); line-height: var(--tk-type-caption-line); font-weight: 600; letter-spacing: var(--tk-kicker-tracking);
  text-transform: uppercase; color: var(--tk-dark-accent); }
/* TASK-180: the lead card's title is the h2 role while the lead stacks under the hero (the h1 role's width 112.5 would push
   the 21+ note below the first viewport at 375), and the h1 role once it sits beside the hero (1024px and up). */
.ld-lead__title { font-size: var(--tk-type-h2-size); line-height: 1.12; font-weight: 700; font-stretch: var(--tk-type-h1-stretch); overflow-wrap: break-word; text-wrap: balance; }
.ld-lead__meta { display: flex; flex-wrap: wrap; gap: var(--tk-space-1) var(--tk-space-4); font-size: var(--tk-type-label-size); line-height: var(--tk-type-label-line);
  color: rgba(246,245,240,.78); font-variant-numeric: tabular-nums; }
.ld-lead__why { max-width: 34em; font-size: var(--tk-type-body-size); line-height: var(--tk-type-body-line); color: rgba(246,245,240,.86); }
.ld-lead .ld-card__result { border-color: var(--tk-dark-rule); color: rgba(246,245,240,.78); }
.ld-lead .ld-result { color: var(--tk-bone); }
.ld-lead .ld-card__meta { border-color: var(--tk-dark-rule); color: rgba(246,245,240,.78); }
/* A receipt's cleared image sits beside the name, never below the result as a loose band. */
.ld-lead__item { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--tk-space-4); }
.ld-lead__item > * { grid-column: 1 / -1; }
.ld-lead__item:has(> .ld-card__player) > :is(.ld-lead__label, .ld-lead__title, .ld-lead__meta) { grid-column: 1; }
.ld-lead .ld-card__player { grid-column: 2; grid-row: 1 / span 3; align-self: start; width: 96px; height: auto; }
.ld-lead-col > .ld-ctas { margin-top: var(--tk-space-4); }
.ld-front--lead > .hero-note { margin-top: var(--tk-space-5); }
@media (min-width: 1024px) {
  .ld-lead__title { font-size: var(--tk-type-h1-size); }
  .ld-front--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "kicker col" "title col" "line col" "note col"; column-gap: var(--tk-space-8); align-items: end; }
  /* The lead sits over the photo's brightest area on desktop: a dark backing keeps its text legible. */
  .ld-front--lead > .ld-lead-col { grid-area: col; margin-top: 0; align-self: end; padding: 0 var(--tk-space-5) var(--tk-space-5); background: rgba(7,10,9,.82); }
  .ld-front--lead > .ld-kicker { grid-area: kicker; }
  .ld-front--lead > .ld-headline { grid-area: title; }
  .ld-front--lead > .ld-front__line { grid-area: line; }
  .ld-front--lead > .hero-note { grid-area: note; }
}
@media (max-width: 1023px) {
  .ld-front--lead { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .ld-front.ld-front--lead > * { grid-area: auto; }
}
@media (max-width: 899px) {
  /* Keep the Today destination below the two-row sticky header as reading text grows. */
  #today.ld-today { scroll-margin-block-start: calc(var(--tk-space-8) + 2lh); }
  .ld-hero__inner.ld-front--lead { padding-block: var(--tk-space-5) var(--tk-space-6); }
  .ld-lead-col { margin-top: var(--tk-space-5); }
}
/* The explore list: a short, finite list of public matchup pages, not a card grid. Hidden when there is none. */
.ld-explore { margin-bottom: var(--tk-space-7); }
.ld-explore[hidden] { display: none; }
.ld-today .ld-explore .ld-h2 { margin-bottom: var(--tk-space-2); }
.ld-explore__note, .ld-explore__asof { margin: 0; color: var(--ld-muted); font-size: var(--tk-type-label-size); line-height: var(--tk-type-label-line); }
.ld-explore__rows { list-style: none; margin: var(--tk-space-4) 0 var(--tk-space-3); padding: 0; border-top: 1px solid var(--ld-rule-strong); }
.ld-explore__rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tk-space-1) var(--tk-space-4); align-items: baseline; min-height: 44px;
  padding: var(--tk-space-4) 0; border-bottom: 1px solid var(--ld-rule); text-decoration: none; }
.ld-explore__rows a:is(:hover, :focus-visible) .ld-explore__title { text-decoration: underline; text-underline-offset: 4px; }
/* A drawn chevron (no glyph joins the link's name) says each row opens a page. */
.ld-explore__rows a { position: relative; padding-right: var(--tk-space-6); }
.ld-explore__rows a::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg); opacity: .6; }
.ld-explore__title { font-weight: 600; overflow-wrap: break-word; }
.ld-explore__meta { color: var(--ld-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .ld-explore__rows a { grid-template-columns: minmax(0, 1fr); } .ld-explore__meta { text-align: left; } }
.ld-page .ld-front__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ld-card { display: grid; gap: var(--tk-space-3); padding: var(--tk-space-5) var(--tk-space-5) var(--tk-space-4); border-radius: var(--tk-radius-md); background: var(--tk-light-ground); color: var(--tk-light-text); --tk-focus: var(--tk-light-focus); --tk-loss: var(--tk-light-loss); }
.ld-card p, .ld-card h2 { margin: 0; }
.ld-team { width: 40px; height: 40px; object-fit: contain; }
.ld-card__meta { padding-top: var(--tk-space-3); border-top: 1px solid var(--tk-light-rule); color: var(--tk-light-text-muted); }
.ld-card__player { width: 120px; height: auto; flex: none; }
.ld-card__result { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--tk-space-3); padding-block: var(--tk-space-3); border-block: 1px solid var(--tk-light-rule); color: var(--tk-light-text-muted); }
/* A loss gets the same weight and place as a win (doctrine): one style for every result. */
.ld-result { color: var(--tk-light-text); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ld-today .ld-h2 { margin-bottom: var(--tk-space-5); }
.ld-slate__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ld-rule-strong); }
.ld-slate__rows li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--tk-space-4); align-items: center; padding: var(--tk-space-4) 0; border-bottom: 1px solid var(--ld-rule); scroll-margin-top: 80px; }
.ld-slate__rows li:target { background: color-mix(in srgb, var(--tk-light-accent) 8%, transparent); }
.ld-slate__teams { display: flex; gap: 8px; }
.ld-slate__teams .ld-team { width: 36px; height: 36px; }
.ld-slate__match { font-weight: 600; overflow-wrap: break-word; }
.ld-slate__when { color: var(--ld-muted); text-align: right; }
.ld-slate__rows li.is-started .ld-slate__when { color: var(--tk-light-text); font-weight: 600; }
.ld-slate__line { margin: 0; padding: var(--tk-space-4) 0; border-top: 1px solid var(--ld-rule-strong); font-size: var(--tk-type-lead-size); line-height: var(--tk-type-lead-line); }
.ld-slate__line--failed { padding: var(--tk-space-5); border: 1px dashed var(--tk-light-caution); border-radius: var(--tk-radius-sm); }
/* Columns are sized in em, so larger text gets fewer, wider chips instead of a sideways scroll. */
.ld-chips { list-style: none; margin: var(--tk-space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: var(--tk-space-3); }
.ld-chips li { display: grid; gap: 6px; padding: var(--tk-space-4); border: 1px solid var(--ld-rule-strong); border-radius: var(--tk-radius-sm); min-width: 0; }
.ld-chips li.is-current { border-color: var(--tk-light-accent); }
.ld-chips b { font-size: var(--tk-type-label-size); letter-spacing: .06em; }
.ld-chips span { color: var(--ld-muted); }
.ld-chips li.is-current span { color: var(--tk-light-text); }
@keyframes ld-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
/* How Tikata works: a real sequence, so it is an ordered list. */
.ld-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid currentColor; counter-reset: ld-step; }
.ld-steps li { counter-increment: ld-step; display: grid; gap: 6px; align-content: start; padding: var(--tk-space-5) var(--tk-space-6) var(--tk-space-6) 0; border-bottom: 1px solid var(--ld-rule); }
.ld-steps li:not(:nth-child(3n + 1)) { padding-left: var(--tk-space-6); border-left: 1px solid var(--ld-rule); }
.ld-steps b { font-size: var(--tk-type-body-size); line-height: var(--tk-type-body-line); font-weight: 700; }
.ld-steps b::before { content: counter(ld-step) "  "; white-space: pre; font-stretch: var(--tk-type-data-stretch); font-variant-numeric: tabular-nums; color: var(--ld-muted); }
.ld-steps p { margin: 0; max-width: 26em; }

/* Territories */
.ld-territories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tk-space-6); }
.ld-territories article { display: grid; gap: 10px; align-content: start; padding-top: var(--tk-space-4); border-top: 1px solid var(--ld-rule-strong); min-width: 0; }
.ld-territories h3 { margin: 0; font-size: var(--tk-type-h2-size); line-height: 1.15; font-weight: 700; font-stretch: 112.5%; text-wrap: balance; }
.ld-territories p:not(.ld-micro) { margin: 0; color: var(--ld-muted); }

/* Recorded prices: the dated capture, kept with its provenance. */
.ld-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tk-space-8); align-items: start; }
.ld-split__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tk-space-4); align-content: start; min-width: 0; overflow-wrap: break-word; }
.ld-split__copy .ld-h2 { margin: 0; }
.ld-split__copy p:not(.ld-micro) { margin: 0; max-width: 34em; }
.ld .annotated-example { margin: 0; min-width: 0; background: var(--tk-light-raised); border: 1px solid var(--ld-rule); border-radius: var(--tk-radius-md); padding: var(--tk-space-5); display: grid; gap: var(--tk-space-4); --tk-focus: var(--tk-light-focus); --tk-loss: var(--tk-light-loss); }
.ld .preview-label { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--tk-type-caption-size); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ld-muted); }
.ld .recorded-prices-provenance { margin: 0; font-size: var(--tk-type-label-size); color: var(--ld-muted); }
.ld .recorded-prices { overflow-x: auto; }
.ld .recorded-prices table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.ld .recorded-prices th, .ld .recorded-prices td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--ld-rule); white-space: nowrap; }
.ld .recorded-prices thead th { font-size: var(--tk-type-caption-size); font-weight: 600; color: var(--ld-muted); border-bottom-color: var(--ld-rule-strong); }
.ld .recorded-prices td { font-weight: 600; font-stretch: var(--tk-type-data-stretch); font-size: var(--tk-type-data-size); }
.ld .example-key { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tk-space-4); }
.ld .example-key span { font-size: var(--tk-type-caption-size); font-weight: 600; letter-spacing: .08em; color: var(--ld-accent); }
.ld .example-key p { margin: 4px 0 0; font-size: var(--tk-type-body-size); }
.ld .annotated-example figcaption { font-size: var(--tk-type-caption-size); line-height: 1.5; color: var(--ld-muted); }

/* Plans */
.ld-plans__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 2px solid var(--tk-light-text); }
.ld-plan { padding: var(--tk-space-6); display: grid; gap: var(--tk-space-4); align-content: start; min-width: 0; }
.ld-plan h3 { margin: 0; font-size: var(--tk-type-h2-size); line-height: 1.1; font-weight: 700; font-stretch: 112.5%; }
.ld-plan--members { background: var(--tk-light-brand); color: var(--tk-bone); --tk-focus: var(--tk-dark-focus); --tk-loss: var(--tk-dark-loss); --ld-rule: rgba(246,245,240,.18); --ld-muted: rgba(246,245,240,.72); }
.ld-checks { list-style: none; margin: 0; padding: 0; display: grid; }
.ld-checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ld-rule); font-size: var(--tk-type-body-size); }
.ld-checks svg { margin-top: 3px; }
.ld-founding { display: grid; gap: var(--tk-space-3); margin-top: var(--tk-space-3); }
.ld-founding h4 { margin: 0; font-size: var(--tk-type-body-size); font-weight: 700; }
.ld-founding__plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tk-space-3); }
.ld-founding__plans article { border: 1px solid rgba(246,245,240,.3); border-radius: var(--tk-radius-sm); padding: var(--tk-space-4); display: grid; gap: 6px; align-content: start; min-width: 0; }
.ld-founding__plans article p:last-child { margin: 0; font-size: var(--tk-type-body-size); }
.ld-price { margin: 0; font-size: var(--tk-type-h2-size); line-height: 1.2; font-weight: 700; font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
.ld-price span { font-size: var(--tk-type-label-size); font-weight: 400; font-stretch: 100%; color: var(--ld-muted); }
.ld-fine { margin: 0; font-size: var(--tk-type-caption-size); line-height: 1.5; color: var(--ld-muted); }
.ld-plan__access { margin: var(--tk-space-2) 0 0; max-width: 36em; font-size: var(--tk-type-body-size); }
/* TASK-227 (Design on #817): the returning member's only way in is a 44px target, not a bare text link. */
.ld-plan__signin { display: inline-flex; align-items: center; min-height: 44px; }
.ld-page .ld-plan--members .ld-btn--primary { justify-self: start; background: var(--tk-mint); color: var(--tk-charcoal); }
.ld-page .ld-plan--members .ld-btn--primary:hover { background: color-mix(in srgb, var(--tk-mint) 86%, var(--tk-bone)); }

/* Coverage and access (existing copy) */
.ld .access-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tk-space-6); }
.ld .access-rows article { display: grid; gap: var(--tk-space-3); align-content: space-between; padding-top: var(--tk-space-4); border-top: 1px solid var(--ld-rule-strong); min-width: 0; }
.ld .access-rows h3 { margin: 0 0 6px; font-size: var(--tk-type-body-size); font-weight: 700; }
.ld .access-rows p { margin: 0; color: var(--ld-muted); }
.ld .access-rows a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--ld-accent); text-underline-offset: 4px; }

/* Standard and questions (existing copy, light band) */
.ld .landing-standard, .ld .landing-faq { background: var(--tk-light-ground); color: var(--tk-light-text); --ld-muted: var(--tk-light-text-muted); --ld-rule: var(--tk-light-rule); --ld-accent: var(--tk-light-accent);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tk-space-8); max-width: 1280px; margin-inline: auto; padding: var(--tk-space-9) var(--tk-space-6); --tk-focus: var(--tk-light-focus); --tk-loss: var(--tk-light-loss); }
.ld .landing-standard { border-bottom: 1px solid var(--tk-light-rule); }
.ld .landing-standard h2, .ld .landing-faq h2 { margin: 6px 0 0; font-size: var(--tk-type-h1-size); line-height: 1.05; font-weight: 700; font-stretch: 87.5%; text-wrap: balance; }
.ld .landing-standard p:not(.eyebrow) { margin: 0 0 var(--tk-space-3); font-size: var(--tk-type-lead-size); line-height: var(--tk-type-lead-line); max-width: 34em; }
.ld .eyebrow { margin: 0; font-size: var(--tk-type-caption-size); font-weight: 600; letter-spacing: var(--tk-kicker-tracking); text-transform: uppercase; color: var(--ld-muted); }
.ld .landing-standard a, .ld .landing-faq > div:first-child > a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--ld-accent); text-underline-offset: 4px; }
.ld .landing-faq details { border-bottom: 1px solid var(--ld-rule); }
.ld .landing-faq details:first-child { border-top: 1px solid var(--tk-light-text); }
.ld .landing-faq summary { cursor: pointer; padding: 18px 0; min-height: 44px; font-size: var(--tk-type-body-size); font-weight: 700; }
.ld .landing-faq details p { margin: 0 0 18px; max-width: 40em; color: var(--ld-muted); }
.ld .landing-faq details a { color: var(--ld-accent); }
/* The light bands sit inside <main>, whose ground is dark; give the full width the light ground behind them. */
.ld { background: var(--tk-dark-ground); --tk-focus: var(--tk-dark-focus); --tk-loss: var(--tk-dark-loss); }
.ld > .landing-standard, .ld > .landing-faq { box-shadow: 0 0 0 100vmax var(--tk-light-ground); clip-path: inset(0 -100vmax); }

/* Footer (shared markup, dark here) */
.ld-page .site-footer { background: var(--tk-dark-sunk); color: var(--tk-dark-text-muted); border-top: 1px solid var(--tk-dark-rule); display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--tk-space-6);
  max-width: none; padding: var(--tk-space-8) max(var(--tk-space-6), calc((100% - 1280px) / 2 + var(--tk-space-6))); font-size: var(--tk-type-body-size); --tk-focus: var(--tk-dark-focus); --tk-loss: var(--tk-dark-loss); }
.ld-page .site-footer a { color: var(--tk-dark-text); text-underline-offset: 3px; }
.ld-page .site-footer nav { display: grid; gap: 4px; align-content: start; }
.ld-page .site-footer nav a { min-height: 32px; display: inline-flex; align-items: center; }
.ld-page .site-footer p { margin: 4px 0 0; }
.ld-page .footer-identity { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ld-page .footer-identity > div { flex: 1 1 0; min-width: min-content; }
.ld-page .site-mascot { display: block; width: 96px; height: 96px; flex: none; image-rendering: pixelated; background: url("/brand/mascot/pigeon-standing.png") center/96px 96px no-repeat; }
.ld-page .site-mascot > img { display: block; width: 96px; height: 96px; visibility: hidden; }
.ld-page .site-footer .aeo-brand { font-weight: 800; font-stretch: 112.5%; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; font-size: var(--tk-type-body-size); }
.ld-page .site-footer .site-disclaimer, .ld-page .site-footer [data-legal-links] { grid-column: 1 / -1; max-width: 60em; }
.ld-page .site-footer .site-disclaimer:first-of-type { border-top: 1px solid var(--tk-dark-rule); padding-top: var(--tk-space-5); }
.ld-page .site-footer [data-legal-links] { display: flex; flex-wrap: wrap; gap: var(--tk-space-4); }

@media (max-width: 899px) {
  .ld-wrap, .ld-hero__inner { padding-inline: var(--tk-space-4); }
  .ld-band { padding-block: var(--tk-space-8); }
  .ld-hero__inner { min-height: calc(100svh - 112px); padding-top: var(--tk-space-8); padding-bottom: var(--tk-space-6); }
  .ld-backdrop__photo { left: 0; width: 100%; height: 62%; -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 100%); mask-image: linear-gradient(180deg, black 55%, transparent 100%); }
  .ld-backdrop__grade { background: linear-gradient(180deg, rgba(7,10,9,.25) 0%, rgba(7,10,9,.55) 40%, rgba(7,10,9,.95) 75%); }
  .ld-backdrop__credit { top: 10px; bottom: auto; }
  .ld-headline { margin-top: 12px; }
    .ld-ctas { margin-top: 24px; }
  .ld-ctas .ld-btn { flex: 1 1 100%; }
  .ld-front { grid-template-columns: minmax(0, 1fr); }
    .ld-front__line { margin-top: 12px; }
    .ld-card__player { width: 96px; }
  .ld-slate__rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .ld-slate__teams { grid-column: 1 / -1; }
  .ld-trust { grid-template-columns: minmax(0, 1fr); margin-top: 24px; gap: 8px; }
  .ld-steps, .ld-territories, .ld .access-rows, .ld .example-key { grid-template-columns: minmax(0, 1fr); }
  .ld-steps li, .ld-steps li:not(:nth-child(3n + 1)) { padding: var(--tk-space-4) 0; border-left: 0; }
  .ld-split, .ld-plans__grid, .ld .landing-standard, .ld .landing-faq { grid-template-columns: minmax(0, 1fr); gap: var(--tk-space-6); }
  .ld .landing-standard, .ld .landing-faq { padding: var(--tk-space-8) var(--tk-space-4); }
  .ld-plan { padding: var(--tk-space-5) var(--tk-space-4); }
  .ld-founding__plans { grid-template-columns: minmax(0, 1fr); }
  .ld .annotated-example { padding: var(--tk-space-4); }
  .ld-page .site-footer { grid-template-columns: minmax(0, 1fr); padding-inline: var(--tk-space-4); }
}

/* The record (TASK-120): counts from /api/record, written in by landing-record.js; the static line is the fallback. */
.ld-record__live { display: grid; gap: var(--tk-space-3); align-content: start; padding-top: var(--tk-space-4); border-top: 2px solid var(--tk-dark-text); min-width: 0; }
.ld-record__live p { margin: 0; font-size: var(--tk-type-lead-size); line-height: var(--tk-type-lead-line); color: var(--ld-muted); }
.ld-record__live .ld-record__count { color: var(--tk-dark-text); }
.ld-record__live .ld-record__count b { display: block; font-size: var(--tk-type-data-lg-size); line-height: 1; font-weight: 700; font-stretch: var(--tk-type-data-lg-stretch); font-variant-numeric: tabular-nums lining-nums; color: var(--tk-dark-accent); margin-bottom: 6px; }
.ld-record__live .ld-fine { font-size: var(--tk-type-caption-size); }
/* TASK-179 (Design on #746): the record caveat wraps without a lone last word. */
.ld-record__live .ld-record__caveat { text-wrap: pretty; }

/* TASK-117 free-pick card (lib/free-pick-card.ts). Light band, like the prototype's .dd-free. The pick's own terms only:
   no median, no projection, no difference (TASK-117 amendment, #608). The mount (TASK-117 lane) places it in a
   .ld-band.ld-light section after the hero. */
.fp-card { display: grid; gap: var(--tk-space-4); max-width: 58rem; min-width: 0; color: var(--tk-light-text); }
.fp-card p { margin: 0; }
.fp-kicker { font-size: var(--tk-type-label-size); font-weight: 600; color: var(--tk-light-accent); }
.fp-player { margin: 8px 0 0; font-size: var(--tk-type-h1-size); line-height: 1; font-weight: 700; font-stretch: 87.5%; letter-spacing: -.02em; overflow-wrap: break-word; }
.fp-selection { font-size: var(--tk-type-body-size); color: var(--tk-light-text-muted); }
.fp-game, .fp-terms { font-size: var(--tk-type-label-size); color: var(--tk-light-text-muted); font-variant-numeric: tabular-nums; }
.fp-research { margin: var(--tk-space-3) 0 0; display: grid; border-top: 1px solid var(--tk-light-text); }
.fp-research > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--tk-space-3); padding: var(--tk-space-3) 0; border-bottom: 1px solid var(--tk-light-rule); }
.fp-research dt { font-size: var(--tk-type-caption-size); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tk-light-text-muted); padding-top: 4px; }
.fp-research dd { margin: 0; font-size: var(--tk-type-body-size); line-height: 1.55; min-width: 0; }
.fp-story summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--tk-light-accent); }
.fp-story p { max-width: 40em; }
.fp-pending { font-size: var(--tk-type-body-size); padding: var(--tk-space-3) var(--tk-space-4); border: 1px solid var(--tk-light-rule-strong); border-radius: var(--tk-radius-sm); }
.fp-result { display: grid; gap: 6px; padding: var(--tk-space-4); border: 1px solid var(--tk-light-rule-strong); border-radius: var(--tk-radius-sm); }
.fp-outcome { justify-self: start; padding: 2px 8px; border-radius: var(--tk-radius-sm); font-size: var(--tk-type-label-size); font-weight: 700; background: var(--tk-light-sunk); --tk-focus: var(--tk-light-focus); --tk-loss: var(--tk-light-loss); }
.fp-result[data-outcome='win'] .fp-outcome { background: var(--tk-light-accent); color: var(--tk-light-on-accent); }
.fp-result[data-outcome='loss'] .fp-outcome { background: var(--tk-light-loss); color: var(--tk-light-on-accent); }
.fp-bar { display: flex; flex-wrap: wrap; gap: var(--tk-space-2) var(--tk-space-6); font-size: var(--tk-type-label-size); color: var(--tk-light-text-muted); }
.fp-bar b { display: block; font-size: var(--tk-type-data-lg-size); line-height: 1.05; font-weight: 700; font-stretch: var(--tk-type-data-lg-stretch); font-variant-numeric: tabular-nums lining-nums; color: var(--tk-light-text); }
.fp-graded, .fp-correction, .fp-void { font-size: var(--tk-type-caption-size); line-height: 1.5; color: var(--tk-light-text-muted); }
.ld-page .fp-receipt, .ld-page .fp-log { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--tk-light-accent); text-underline-offset: 4px; }
.fp-rule { font-size: var(--tk-type-caption-size); color: var(--tk-light-text-muted); }
.fp-none { font-size: var(--tk-type-body-size); font-weight: 600; }
@media (max-width: 899px) { .fp-research > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }