/* THE FRONT PAGE (index.html), 2026-09-27. The masthead, the chat rail, the support bubble and
 * the consent panel come from chrome.css; everything else on the page is here. fp- is the
 * namespace for the sections under the hero; the hero keeps the live site's own class names
 * (.hero, .bento, .tool, .tile, .pp-mini, .gx) and every one of its rules is scoped to it.
 *
 * The page is dark in both themes, as the live front page has always been: the hero, the
 * ticker and the gold read the same whoever is looking. Two display faces, each in one token:
 * --font-hero (Sora, the product's face) for the hero, --font-display (Fraunces, the same token
 * rewards.css declares) for the section titles under it.
 */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-opsz.woff2") format("woff2");
}

:root {
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-ui: "Inter", "Libre Franklin", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-hero: "Sora", "Libre Franklin", "Segoe UI", Arial, sans-serif;
  --font-sys-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fp-ground: #0a0a09;
  --fp-ground-2: #0e0d0b;
  --fp-panel: #141311;
  --fp-panel-2: #1d1b17;
  --fp-glass: rgba(14, 13, 11, 0.78);
  --fp-ink: #f1ece0;
  --fp-muted: #b9b2a3;
  --fp-faint: #857d6e;
  --fp-gold: #c9a961;
  --fp-gold-lit: #e6c97c;
  --fp-gold-deep: #6e5730;
  --fp-gilt: linear-gradient(176deg, #f0d693 0%, #d4b26a 38%, #b8954d 70%, #8d6f36 100%);
  --fp-gilt-ink: #17130a;
  --fp-line: rgba(201, 169, 97, 0.34);
  --fp-line-soft: rgba(241, 236, 224, 0.1);
  --fp-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.95);
  --fp-glow: 0 0 0 1px rgba(230, 201, 124, 0.22), 0 18px 60px -22px rgba(230, 201, 124, 0.45);
  --fp-live: #7fcb98;

  --fp-wrap: 1248px;
  --fp-gutter: 24px;

  /* Shades and tints the components use, named for what they are. */
  --fp-black-30: rgba(0, 0, 0, 0.3);
  --fp-black-70: rgba(0, 0, 0, 0.7);
  --fp-gold-10: rgba(201, 169, 97, 0.1);
  --fp-gold-5: rgba(201, 169, 97, 0.05);
  --fp-gold-8: rgba(201, 169, 97, 0.08);
  --fp-ground-55: rgba(10, 10, 9, 0.55);
  --fp-lit-20: rgba(230, 201, 124, 0.2);
  --fp-lit-60: rgba(230, 201, 124, 0.6);
  --fp-mask: #000;
  --fp-night-62: rgba(8, 8, 7, 0.62);
  --fp-white-40: rgba(255, 255, 255, 0.4);

  /* The hero's own shades (the live site's values, named here rather than written in rules). */
  --fp-btn-ink: #141208;
  --fp-green: #79c393;
  --fp-hit: #79d45c;
  --fp-miss: #ff7a4d;
  --fp-free-ink: #a6ef8b;
  --fp-free-42: rgba(121, 212, 92, 0.42);
  --fp-free-9: rgba(121, 212, 92, 0.09);
  --fp-hit-7: rgba(121, 212, 92, 0.07);
  --fp-hit-16: rgba(121, 212, 92, 0.16);
  --fp-hit-24: rgba(121, 212, 92, 0.24);
  --fp-hit-38: rgba(121, 212, 92, 0.38);
  --fp-miss-16: rgba(255, 122, 77, 0.16);
  --fp-miss-30: rgba(255, 122, 77, 0.3);
  --fp-card-top: rgba(241, 236, 224, 0.035);
  --fp-card-bot: rgba(241, 236, 224, 0.01);
  --fp-gold-12: rgba(201, 169, 97, 0.12);
  --fp-gold-15: rgba(201, 169, 97, 0.15);
  --fp-gold-18: rgba(201, 169, 97, 0.18);
  --fp-gold-25: rgba(201, 169, 97, 0.25);
  --fp-gold-30: rgba(201, 169, 97, 0.3);
  --fp-gold-70: rgba(201, 169, 97, 0.7);
  --fp-line-12: rgba(241, 236, 224, 0.12);
  --fp-grid-5: rgba(241, 236, 224, 0.05);
  --fp-black-90: rgba(0, 0, 0, 0.9);
  --fp-ground-45: rgba(10, 10, 9, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.fp {
  margin: 0;
  background: var(--fp-ground);
  color: var(--fp-ink);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.fp img { max-width: 100%; display: block; }
:where(body.fp) a { color: inherit; }
.fp :focus-visible { outline: 2px solid var(--fp-gold-lit); outline-offset: 3px; border-radius: 4px; }
.fp h1, .fp h2, .fp h3, .fp p { margin: 0; }
/* Every heading has a size before any class gives it one, so a heading added without a class
   still reads as a heading. The classes below set the sizes actually used. */
h1 { font-size: 2.6rem; line-height: 1.05; }
h2 { font-size: 1.9rem; line-height: 1.1; }
h3 { font-size: 1.35rem; line-height: 1.2; }
.fp-wrap,
.fp .masthead .wrap { width: 100%; max-width: calc(var(--fp-wrap) + 2 * var(--fp-gutter)); margin: 0 auto; padding: 0 var(--fp-gutter); }

/* The masthead stays dark here in either theme, like the page under it. */
.fp .masthead { background-color: var(--fp-night-62); }
:root[data-theme="light"] .fp .masthead { background-color: var(--fp-night-62); }

.fp-eyebrow { font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.34em; text-transform: uppercase; color: var(--fp-gold); }
.fp-display { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 144; letter-spacing: -0.015em; color: var(--fp-ink); }
.fp-arrow { width: 16px; height: 16px; flex: none; }

.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid var(--fp-line);
  border-radius: 10px;
  background: var(--fp-ground-55);
  color: var(--fp-ink);
  font: 600 16px/1 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, filter 160ms ease;
}
.fp-btn:hover { border-color: var(--fp-gold-lit); color: var(--fp-gold-lit); background: var(--fp-gold-10); }
.fp-btn--gilt { border-color: var(--fp-gold-deep); background: var(--fp-gilt); color: var(--fp-gilt-ink); box-shadow: 0 1px 0 var(--fp-white-40) inset, 0 16px 36px -16px var(--fp-lit-60); }
.fp-btn--gilt:hover { color: var(--fp-gilt-ink); background: var(--fp-gilt); filter: brightness(1.07); }
.fp-btn--small { min-height: 46px; padding: 0 20px; font-size: 14px; border-radius: 999px; }

/* ================================================================== HERO: FOUR BLOCKS
   A bento of the four tools, each drawn in miniature (2026-09-30). On a wide screen:

     +-----------+----------------------+
     |  Props    |  Generator (wide)    |
     |  (tall,   +-----------+----------+
     |  live)    |  Widgets  |  Pick'em |
     +-----------+-----------+----------+

   Both big blocks put their buttons ABOVE the fold: Props reads tag, sentence, buttons, then
   the chart fills the rest of the tall block; the Generator keeps its words and buttons in a
   left column beside the drawing. 900 to 1099px: Props and the Generator side by side, the two
   small blocks under them. Below 900px, one column. Every rule is scoped to .hero. */
.sprite { position: absolute; }
.hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 76px;
  font: 400 17px/1.6 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(640px 420px at 26% 58%, var(--fp-hit-7), transparent 64%),
    radial-gradient(700px 460px at 76% 56%, var(--fp-gold-15), transparent 62%);
}
.hero .wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.hero a { color: inherit; text-decoration: none; }
.hero h1, .hero h2 { font-family: var(--font-hero); font-weight: 600; margin: 0; }
.hero h1 { color: var(--fp-ink); }
.hero .seal { width: 22px; height: 22px; flex: none; }

.hero .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 8px;
  font: 600 16px/1 var(--font-ui); white-space: nowrap;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.hero .btn-gold { background: var(--fp-gold); color: var(--fp-btn-ink); }
.hero .btn-gold:hover { background: var(--fp-gold-lit); }
.hero .btn-ghost { border: 1px solid var(--fp-gold-30); color: var(--fp-gold-lit); }
.hero .btn-ghost:hover { border-color: var(--fp-gold); background: var(--fp-gold-12); }

.hero .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--fp-gold); margin-bottom: 16px; }
.duo-h1 { font-size: clamp(38px, 4.1vw, 56px); line-height: 1.04; letter-spacing: -0.026em; text-wrap: balance; }
.duo-h1 span:last-child { color: var(--fp-gold-lit); }

.bento {
  position: relative; display: grid; gap: 16px; margin-top: 26px;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 2fr);
  grid-template-areas: "wid props" "pick gen";
}
/* Every block is the same card: one hairline, one radius, one padding. */
.tool, .tile {
  position: relative; min-width: 0; padding: 22px; border-radius: 20px;
  border: 1px solid var(--fp-line-12);
  background: linear-gradient(180deg, var(--fp-card-top), var(--fp-card-bot)), var(--fp-ground);
}
/* The tag sits over the name in every block, so the names start on one line whatever their length. */
.bento .tool-head { flex-direction: column; align-items: flex-start; gap: 10px; }
/* THE TWO WIDE BLOCKS read the same way: words and buttons in a left column of one width, the
   drawing beside them, landscape. The buttons come straight after the words so both sit above the
   fold. The markup order is the old one, so every test that reads it still can. */
.tool {
  display: grid; column-gap: 24px;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas: "head view" "what view" "act view" "fine view" ". view";
}
.tool--props { grid-area: props; }
.tool--gen { grid-area: gen; }
.tool .tool-head { grid-area: head; }
.tool .tool-what { grid-area: what; }
.tool .hero-actions { grid-area: act; }
.tool .hero-fine { grid-area: fine; }
.bento .tool .gen, .bento .tool .pp-mini { grid-area: view; margin-top: 0; align-self: stretch; }
.tool .hero-actions .btn { max-width: 100%; padding: 0 18px; font-size: 15px; }
/* Landscape: the chart takes the height the row gives it and asks for less of its own. */
.bento .ppm-plot { min-height: 140px; }
.tile--widgets { grid-area: wid; }
.tile--pickem { grid-area: pick; }
/* Pick'em shares its row with the Generator, the tallest drawing, so it shows four picks there
   and three anywhere shorter. */
@media (max-width: 1099px), (max-height: 860px) { .pk-rows li:nth-child(n+4) { display: none; } }
/* With Pick'em taken off at the edge, the widgets block runs down the whole left column. */
.tile--widgets:last-child { grid-row: 1 / span 2; }

/* THE LIGHT. Two hairlines in the grid's own gaps, the gap between the columns and the gap between
   the rows, with a glow running along each one in turn. Wide layout only, and still when reduced
   motion is asked for. */
.bento-beam { display: none; pointer-events: none; }
@media (min-width: 1100px) {
  /* Each beam is the full width of its gap and clips what runs past the grid's ends; the hairline
     is drawn down its middle and the glow runs along it. */
  .bento-beam { display: block; position: relative; z-index: 1; overflow: hidden; --beam-dir: 90deg; }
  .bento-beam::before, .bento-beam::after { content: ""; position: absolute; border-radius: 2px; }
  .bento-beam::before { background: linear-gradient(var(--beam-dir), transparent, var(--fp-gold-15) 10%, var(--fp-gold-15) 90%, transparent); }
  .bento-beam::after {
    background: linear-gradient(var(--beam-dir), transparent 0%, var(--fp-gold-70) 30%, var(--fp-ink) 50%, var(--fp-gold-70) 70%, transparent 100%);
    filter: drop-shadow(0 0 3px var(--fp-gold-lit)) drop-shadow(0 0 6px var(--fp-gold));
    animation: beam-x 5.6s cubic-bezier(0.45, 0, 0.3, 1) infinite;
  }
  .bento-beam--row { grid-column: 1 / -1; grid-row: 2; align-self: start; height: 16px; margin-top: -16px; }
  .bento-beam--row::before, .bento-beam--row::after { left: 0; right: 0; top: 7px; height: 2px; }
  .bento-beam--row::after { right: auto; width: 26%; }
  .bento-beam--col { --beam-dir: 180deg; grid-column: 2; grid-row: 1 / -1; justify-self: start; width: 16px; margin-left: -16px; }
  .bento-beam--col::before, .bento-beam--col::after { top: 0; bottom: 0; left: 7px; width: 2px; }
  .bento-beam--col::after { bottom: auto; height: 34%; animation-name: beam-y; animation-delay: -2.8s; }
}
@keyframes beam-x { from { transform: translateX(-110%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateX(400%); opacity: 0; } }
@keyframes beam-y { from { transform: translateY(-110%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateY(300%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bento-beam::after { animation: none; opacity: 0; } }
.tool-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tool-tag {
  flex: none; font: 700 10.5px/1 var(--font-ui); letter-spacing: 0.15em; text-transform: uppercase;
  padding: 6px 9px 5px; border-radius: 999px; border: 1px solid var(--fp-gold-30); color: var(--fp-gold-lit); background: var(--fp-gold-12);
}
.tool-tag--free { border-color: var(--fp-free-42); color: var(--fp-free-ink); background: var(--fp-free-9); }
.tool-name { font-size: 24px; line-height: 1.15; letter-spacing: -0.012em; color: var(--fp-ink); }
.hero .tool-what { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--fp-muted); max-width: 54ch; }
.tool .gen, .tool .pp-mini { margin-top: 20px; align-self: stretch; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.hero .hero-fine { margin-top: 12px; font-size: 13.5px; color: var(--fp-faint); }
.hero .hero-fine b { color: var(--fp-muted); font-weight: 500; }
/* Inside a card the drawings are screens, not floating panels: no drop shadow. */
.bento .pp-mini, .bento .gen { box-shadow: none; border-color: var(--fp-line-12); background: var(--fp-panel); }

/* THE SMALL BLOCKS. The whole card is the link. */
.tile { display: flex; flex-direction: column; color: inherit; transition: border-color 160ms, background 160ms; }
.tile:hover { border-color: var(--fp-gold-30); }
.tile:focus-visible { outline: 2px solid var(--fp-gold-lit); outline-offset: 3px; }
.hero .tile-what { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fp-muted); }
.tile-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--fp-gold-lit); }
.tile-go .fp-arrow { width: 16px; height: 16px; transition: transform 160ms; }
.tile:hover .tile-go .fp-arrow { transform: translateX(3px); }
.hm, .pk {
  padding: 12px; border: 1px solid var(--fp-line-12); border-radius: 14px; background: var(--fp-panel);
  font-size: 11px; color: var(--fp-muted);
}
.tile .hm, .tile .pk { margin-top: 18px; }
.hero .hm-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 9px; white-space: nowrap; }
.hm-cap b { font: 600 12px/1 var(--font-hero); color: var(--fp-ink); }
.hm-cap span { font-size: 10px; color: var(--fp-faint); }
/* The heat map: a player's position and a blank bar for his name, then his over rate at each
   market's line. Green is over more often than not, orange under, the same two colours as the
   chart beside it. */
.hm-grid { display: grid; grid-template-columns: minmax(52px, 1.1fr) repeat(4, minmax(0, 1fr)); gap: 3px; }
.hm-h { font-size: 9px; font-weight: 600; letter-spacing: 0.02em; color: var(--fp-faint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; }
.hm-p { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hm-p i { font-style: normal; font-size: 9px; font-weight: 700; color: var(--fp-faint); width: 16px; flex: none; }
.hm-p em, .pk-who em { display: block; flex: 1; min-width: 0; height: 7px; border-radius: 4px; background: var(--fp-line-12); }
.hm-c {
  display: grid; place-items: center; height: 22px; border-radius: 5px; background: var(--fp-panel-2);
  font: 600 10.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fp-ink);
}
.hm-c.hm-na { color: var(--fp-faint); background: none; box-shadow: inset 0 0 0 1px var(--fp-grid-5); }
.hm-c[data-t="1"] { background: var(--fp-miss-30); }
.hm-c[data-t="2"] { background: var(--fp-miss-16); }
.hm-c[data-t="3"] { background: var(--fp-line-12); }
.hm-c[data-t="4"] { background: var(--fp-hit-24); }
.hm-c[data-t="5"] { background: var(--fp-hit-38); }
/* Pick'em: the day's card, one side chosen on each row. */
.pk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pk-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 9px; border-radius: 9px; background: var(--fp-ground); border: 1px solid var(--fp-grid-5); }
.pk-who { display: grid; gap: 5px; flex: 1; min-width: 0; }
.pk-who em { flex: none; width: 70%; max-width: 110px; }
.pk-who small { font-size: 10.5px; color: var(--fp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pk-ou { display: inline-flex; gap: 3px; flex: none; padding: 2px; border-radius: 7px; background: var(--fp-panel-2); }
.pk-ou b { font-size: 10px; font-weight: 600; padding: 5px 8px; border-radius: 5px; color: var(--fp-faint); }
.pk-ou b.is-on { background: var(--fp-gold); color: var(--fp-btn-ink); }

/* THE PROPS PREVIEW. The real tool's chart in miniature: bars are the last ten games, green over
   the line and orange under it in the same two colours props.css uses. The brass pill is the
   handle and the only gold thing on the panel. */
.pp-mini {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--fp-gold-30); border-radius: 16px; background: var(--fp-panel); padding: 16px 16px 12px;
  box-shadow: 0 60px 100px -50px var(--fp-black-90), 0 30px 60px -40px var(--fp-hit-16);
}
.ppm-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ppm-face {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--fp-panel-2);
  border: 1px solid var(--fp-line-12); display: grid; place-items: center;
  font: 600 14px/1 var(--font-hero); color: var(--fp-faint);
}
.ppm-who { min-width: 0; }
.hero .ppm-name { font: 600 17px/1.2 var(--font-hero); color: var(--fp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppm-ghost { display: inline-block; width: 132px; max-width: 100%; height: 12px; border-radius: 6px; background: var(--fp-line-12); vertical-align: middle; }
.hero .ppm-meta { margin-top: 3px; font-size: 12.5px; color: var(--fp-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .ppm-hit { text-align: right; font-size: 12.5px; color: var(--fp-faint); line-height: 1.25; white-space: nowrap; }
.hero .ppm-hit b { display: block; font: 600 24px/1 var(--font-hero); letter-spacing: -0.02em; color: var(--fp-hit); font-variant-numeric: tabular-nums; }
.hero .ppm-hit.is-cold b { color: var(--fp-miss); }
.hero .ppm-hit em { font-style: normal; color: var(--fp-ink); font-variant-numeric: tabular-nums; }

.ppm-picks { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.ppm-picks::-webkit-scrollbar { display: none; }
/* When the chips run past the edge the last one fades rather than being cut; the script sets
   .is-scrolly only while there is more to see. */
.ppm-picks.is-scrolly { -webkit-mask-image: linear-gradient(90deg, var(--fp-mask) 82%, transparent); mask-image: linear-gradient(90deg, var(--fp-mask) 82%, transparent); }
.ppm-pick {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px;
  border: 1px solid var(--fp-line-12); color: var(--fp-muted); font-size: 13px; font-weight: 500;
  transition: border-color 160ms, color 160ms, background 160ms;
}
.ppm-pick:hover { border-color: var(--fp-gold-30); color: var(--fp-ink); }
.ppm-pick[aria-pressed="true"] { border-color: var(--fp-gold); color: var(--fp-ink); background: var(--fp-gold-12); }
.ppm-pick .ppm-chipface { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--fp-panel-2); flex: none; }
.ppm-pick small { font-size: 10.5px; letter-spacing: 0.08em; color: var(--fp-faint); font-weight: 600; }

/* The chart. The plot is a fixed height so a player switch never moves anything below it. */
.ppm-chart { margin-top: 14px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ppm-plot {
  position: relative; flex: 1; min-height: 176px; touch-action: pan-y; cursor: ns-resize;
  border-bottom: 1px solid var(--fp-line-12);
  background: repeating-linear-gradient(180deg, transparent 0 43px, var(--fp-grid-5) 43px 44px);
}
.ppm-bars { position: absolute; inset: 18px 70px 0 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ppm-bar {
  position: relative; height: var(--h, 0%); min-height: 3px; display: flex; flex-direction: column; justify-content: flex-start;
  transition: height 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ppm-bar i { position: absolute; inset: 0; border-radius: 5px 5px 2px 2px; background: var(--fp-miss); opacity: 0.78; transition: background 160ms, opacity 160ms; }
.ppm-bar.is-over i { background: var(--fp-hit); opacity: 0.92; }
.ppm-v {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); font: 600 11px/1 var(--font-ui);
  color: var(--fp-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ppm-line { position: absolute; left: 0; right: 0; bottom: var(--at, 50%); height: 0; border-top: 2px dashed var(--fp-gold); pointer-events: none; transition: bottom 90ms linear; }
/* The pill has its own lane: the bars stop 70px short of the right edge and the pill lives in
   that gap, so it can sit at any height without covering a bar's number. */
.ppm-pill {
  position: absolute; right: 0; top: 0; transform: translateY(-50%); pointer-events: auto; touch-action: none; cursor: grab;
  min-width: 58px; height: 28px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--fp-gold); color: var(--fp-btn-ink); font: 700 13px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px -6px var(--fp-gold-70);
}
/* A 44px target on a 28px pill, without the pill getting fatter. */
.ppm-pill::before { content: ""; position: absolute; inset: -8px -6px; }
.ppm-pill:active { cursor: grabbing; }
.ppm-pill:focus-visible { outline: 2px solid var(--fp-gold-lit); outline-offset: 3px; }
.ppm-opps { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-top: 6px; padding-right: 70px; }
.ppm-opps span { font-size: 10px; letter-spacing: 0.02em; color: var(--fp-faint); text-align: center; white-space: nowrap; overflow: hidden; }
.ppm-at { font-weight: inherit; }
.hero .ppm-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 11.5px; color: var(--fp-faint); }
.ppm-cue { color: var(--fp-gold-lit); font-weight: 600; letter-spacing: 0.04em; }
.pp-mini.is-dragging .ppm-line { transition: none; }
.pp-mini.is-swapping .ppm-bar { transition: none; }
/* The fallback's bar heights and line position. The CSP refuses style attributes, so a number in
   the markup reaches the layout through rules like these; the script sets them through the CSSOM. */
.ppm-bar[data-h="52"] { --h: 52%; } .ppm-bar[data-h="56"] { --h: 56%; } .ppm-bar[data-h="59"] { --h: 59%; }
.ppm-bar[data-h="65"] { --h: 65%; } .ppm-bar[data-h="67"] { --h: 67%; } .ppm-bar[data-h="69"] { --h: 69%; }
.ppm-bar[data-h="71"] { --h: 71%; } .ppm-bar[data-h="75"] { --h: 75%; } .ppm-bar[data-h="78"] { --h: 78%; }
.ppm-bar[data-h="89"] { --h: 89%; } .ppm-line[data-h="67"] { --at: 67%; }

/* THE GENERATOR PREVIEW. Landscape, like the real tool. The accent is spent in three places:
   the Build button, the chosen slate and the progress sweep. A real capture at
   assets/hero/generator.png replaces the whole drawing through .has-img. */
.gen {
  position: relative; border: 1px solid var(--fp-gold-30); border-radius: 16px; background: var(--fp-panel); overflow: hidden;
  box-shadow: 0 60px 100px -50px var(--fp-black-90), 0 30px 60px -40px var(--fp-gold-25);
}
.gen-shot { display: none; width: 100%; height: auto; }
.gen.has-img .gen-shot { display: block; }
.gen.has-img .gx{display:none}
.gx { font-size: 12px; line-height: 1.35; color: var(--fp-muted); }
.gx-num { font-family: var(--font-sys-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.gx-bar { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--fp-ground); border-bottom: 1px solid var(--fp-line-12); }
.gx-seal { width: 17px; height: 17px; flex: none; opacity: 0.9; }
.gx-bar b { font-family: var(--font-hero); font-size: 12.5px; font-weight: 600; color: var(--fp-ink); letter-spacing: -0.01em; white-space: nowrap; }
/* The slate strip. Every number under it is only true for that slate; lock times are Pacific. */
.hero .gx-sub {
  display: flex; align-items: center; gap: 8px; padding: 6px 13px; background: var(--fp-panel);
  border-bottom: 1px solid var(--fp-line-12); font-size: 9.5px; letter-spacing: 0.04em; color: var(--fp-faint); white-space: nowrap; overflow: hidden;
}
.hero .gx-sub b { color: var(--fp-muted); font-weight: 600; }
.hero .gx-sub .gx-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fp-gold-deep); flex: none; }
.hero .gx-sub .gx-lock { margin-left: auto; color: var(--fp-faint); }
.gx-body { display: grid; grid-template-columns: 184px minmax(0, 1fr); }
.gx-rail { padding: 13px 11px; border-right: 1px solid var(--fp-line-12); display: flex; flex-direction: column; min-width: 0; }
.hero .gx-step { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--fp-ink); }
.hero .gx-step:not(:first-child) { margin-top: 12px; }
.hero .gx-step b {
  width: 15px; height: 15px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--fp-gold-deep); background: var(--fp-gold-12); color: var(--fp-gold-lit); font-size: 9px; font-weight: 600;
}
.hero .gx-field {
  margin: 0; padding: 6px 8px; border: 1px solid var(--fp-line-12); border-radius: 6px; background: var(--fp-ground); color: var(--fp-ink); font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-field--num { font-family: var(--font-sys-mono); font-variant-numeric: tabular-nums; text-align: right; }
.hero .gx-file {
  margin: 0 0 6px; padding: 5px 8px; border: 1px dashed var(--fp-gold-deep); border-radius: 6px; background: var(--fp-gold-12);
  color: var(--fp-ink); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-slates { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9px; }
.gx-slates th { text-align: left; font-weight: 500; font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fp-faint); padding: 0 3px 3px; }
.gx-slates th:nth-child(2) { width: 40px; }
.gx-slates th:nth-child(3) { width: 58px; }
.gx-slates th:nth-child(n+2), .gx-slates td:nth-child(n+2) { text-align: right; }
.gx-slates td { padding: 4px 3px; border-top: 1px solid var(--fp-line-12); color: var(--fp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-slates tr.on td { color: var(--fp-ink); background: var(--fp-gold-12); }
.gx-slates tr.on td:first-child { box-shadow: inset 2px 0 0 var(--fp-gold); }
.hero .gx-ask { margin: 0 0 4px; font-size: 9.5px; color: var(--fp-faint); }
/* Settings names four real dials (homepage-claims-match-the-code.test.mjs reads each label back
   out of generator.html). */
.gx-ft { margin-top: 12px; margin-bottom: 14px; padding-top: 10px; border-top: 1px solid var(--fp-line-12); }
.hero .gx-ft-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 9.5px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fp-faint); margin: 0 0 7px;
}
.hero .gx-ft-head em { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 9.5px; color: var(--fp-faint); opacity: 0.8; }
.gx-ft-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gx-ft-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 9px; color: var(--fp-faint); min-width: 0; }
.gx-ft-rows span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-ft-rows b { color: var(--fp-muted); font-weight: 600; white-space: nowrap; }
/* margin-top:auto pins Build to the bottom of the rail, where the real tool keeps it. */
.gx-go {
  cursor: pointer; margin-top: auto; display: block; text-align: center; padding: 9px; border-radius: 7px;
  background: linear-gradient(180deg, var(--fp-gold-lit), var(--fp-gold)); color: var(--fp-btn-ink);
  font-weight: 700; font-size: 11px; white-space: nowrap; box-shadow: 0 6px 18px -8px var(--fp-gold-70);
}
.gx-out { padding: 11px 12px 12px; min-width: 0; display: flex; flex-direction: column; background: var(--fp-ground-45); }
.gx-out-state { margin-top: -2px; font-size: 9.5px; color: var(--fp-green); }
.gx-out-state.is-working { color: var(--fp-gold-lit); }
/* The sweep: zero width at rest; home.js gives it a width and a duration only while a build runs. */
.gx-prog { height: 2px; border-radius: 2px; background: var(--fp-panel-2); margin: 8px 0 10px; overflow: hidden; }
.gx-prog i { display: block; height: 100%; width: 0; border-radius: 2px; opacity: 1; background: linear-gradient(90deg, var(--fp-gold-deep), var(--fp-gold-lit)); }
.gx-prog i.is-done { opacity: 0; transition: opacity 0.5s ease 0.25s; }
.gx-cards { display: grid; gap: 7px; align-content: start; }
.gx-lu { border: 1px solid var(--fp-line-12); border-radius: 8px; background: var(--fp-ground); padding: 7px 8px; display: grid; gap: 6px; }
.gx-lu header, .gx-lu footer { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.gx-lu header { font-size: 10px; font-weight: 600; color: var(--fp-ink); }
/* Salary against the cap, never a bare figure: the real card reads "$49,800 / $50,000". */
.gx-cap { font-family: var(--font-sys-mono); font-variant-numeric: tabular-nums; font-size: 8.5px; color: var(--fp-faint); letter-spacing: -0.02em; white-space: nowrap; }
.gx-cap b { color: var(--fp-muted); font-weight: 600; }
.gx-lu footer { font-size: 9px; color: var(--fp-faint); padding: 0; border-top: 0; }
.gx-lu footer span { white-space: nowrap; }
/* Nine slots, nine columns: the roster shape a DFS player recognises at a glance. FLEX is the
   widest label and it sets the cell. */
.gx-slots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1.5px; }
.gx-slots i {
  font-style: normal; text-align: center; padding: 3px 0; border-radius: 3px;
  background: var(--fp-panel-2); box-shadow: inset 0 0 0 1px var(--fp-line-12);
  font-size: 6.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--fp-muted); white-space: nowrap;
}
.gx-dl { margin-top: 10px; display: block; text-align: center; padding: 8px; border-radius: 7px; border: 1px solid var(--fp-gold-30); color: var(--fp-gold-lit); font-weight: 600; font-size: 10px; }
/* The build, played once when it scrolls into view (home.js). */
.gx-lu, .gx-dl { transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.7, 0.3, 1); }
.gx-go { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease; }
.gx.is-pressing .gx-go { transform: translateY(1px) scale(0.985); box-shadow: 0 0 0 4px var(--fp-gold-18); }
/* The rewind must not animate: home.js empties the finished panel before playing the build. */
.gx.is-rewinding .gx-lu, .gx.is-rewinding .gx-dl, .gx.is-rewinding .gx-exp i { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ppm-bar, .ppm-line, .ppm-pick { transition: none; }
  .gx-lu, .gx-dl, .gx-go, .gx-exp i { transition: none; }
}
/* Below 1100 the wide blocks take the full width, one under the other, and the two small blocks
   share the row under them. Below 820 the wide blocks stack their own insides too. */
@media (max-width: 1099px) {
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "props props" "gen gen" "wid pick"; }
  .tile--widgets:last-child { grid-row: auto; grid-column: 1 / span 2; }
}
@media (max-width: 899px) {
  .duo-h1 { font-size: clamp(34px, 8.4vw, 48px); }
}
@media (max-width: 819px) {
  .tool { display: flex; flex-direction: column; }
  .tool .tool-what { order: 1; }
  .tool .hero-actions { order: 2; }
  .tool .hero-fine { order: 3; }
  .bento .tool .gen, .bento .tool .pp-mini { order: 4; margin-top: 20px; }
  .tool .hero-actions .btn { padding: 0 24px; font-size: 16px; }
}
@media (max-width: 719px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "props" "gen" "wid" "pick"; gap: 14px; }
  .tile--widgets:last-child { grid-column: auto; }
  .tool, .tile { padding: 18px 12px; border-radius: 18px; }
  .tool-head, .tool .tool-what, .tool .hero-actions, .tool .hero-fine, .tile > * { margin-left: 4px; margin-right: 4px; }
  .tile > .hm, .tile > .pk { margin-left: 0; margin-right: 0; }
  .bento .pp-mini { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 680px) {
  .hero { padding: 36px 0 56px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .tool-name { font-size: 21px; }
  .hero .tool-what { font-size: 15px; }
  .pp-mini { padding: 14px 12px 10px; }
  .ppm-bars, .ppm-opps { gap: 4px; }
  .ppm-bars { right: 60px; }
  .ppm-opps { padding-right: 60px; }
  .ppm-pill { min-width: 52px; padding: 0 8px; font-size: 12.5px; }
  .ppm-v { font-size: 10px; }
  .ppm-opps span { font-size: 9px; }
  .ppm-at { display: none; }
  .hero .ppm-hit b { font-size: 21px; }
  .ppm-face { width: 40px; height: 40px; }
  /* The panel stacks on a phone: the rail on top, the lineups under it. The second slate row,
     Settings and the third lineup card go. */
  .gx-body { grid-template-columns: 1fr; }
  .gx-rail { border-right: 0; border-bottom: 1px solid var(--fp-line-12); }
  .gx-out { border-left: 0; border-top: 1px solid var(--fp-line-12); background: none; }
  .gx-slates tbody tr:not(.on) { display: none; }
  .gx-lu:nth-of-type(3) { display: none; }
  .gx-go { margin-top: 16px; }
  .gx-ft { display: none; }
}
/* A short laptop still sees both buttons (measured at 1152 x 720 and 1366 x 768). */
@media (min-width: 900px) and (max-height: 860px) {
  .hero { padding-top: 26px; padding-bottom: 56px; }
  .hero .kicker { margin-bottom: 8px; font-size: 14px; }
  .duo-h1 { font-size: clamp(34px, 3.4vw, 46px); }
  .bento { margin-top: 14px; }
  .hero .tool-what { margin-top: 6px; font-size: 14.5px; }
  .tool .gen, .tool .pp-mini { margin-top: 14px; }
  .hero-actions { margin-top: 14px; }
  .hero .hero-fine { margin-top: 8px; }
  .tool .gx-ft { display: none; }
  .tool .gx-lu:nth-of-type(3) { display: none; }
  .ppm-plot { min-height: 150px; }
  .ppm-picks { margin-top: 10px; }
  .ppm-chart { margin-top: 10px; }
  /* The bento on a short laptop: the kicker and the small blocks' sentences go, so the
     Generator's button still clears the fold under the first row. */
  .hero .kicker { display: none; }
  .hero .tile-what { display: none; }
  .bento .ppm-plot { min-height: 110px; }
  .bento .ppm-foot { display: none; }
  .tool, .tile { padding: 18px 20px; }
  .bento .tool-head { gap: 8px; }
  .tile .hm, .tile .pk { margin-top: 14px; }
  .pk-rows li { padding-top: 4px; padding-bottom: 4px; }
}
/* The narrowest phones lose every other bar's value before they collide. */
@media (max-width: 380px) {
  .ppm-bar:nth-child(even) .ppm-v { display: none; }
  .ppm-bars, .ppm-opps { gap: 3px; }
  .ppm-bars { right: 54px; }
  .ppm-opps { padding-right: 54px; }
  .ppm-opps span { font-size: 8.5px; letter-spacing: -0.02em; }
  .ppm-pill { min-width: 48px; padding: 0 6px; font-size: 12px; }
}
@media (max-width: 520px) {
  .hero .wrap { padding: 0 16px; }
}
/* The chat tab sits on the right edge below 860px. The hero clears it, as the sections under it
   do, so the chart's last label and the buttons' right edge are never under the tab. Not below
   340px: there the cleared column is too narrow for a team code under each of the ten bars. */
@media (min-width: 340px) and (max-width: 859px) {
  .hero .wrap { padding-right: calc(var(--sf-rail-tab, 44px) + 4px); }
}

/* Player pictures: playerImage() from /player-image.js, initials on the team colour when the
   row names a team, the plain gold disc otherwise. */
.pimg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.pimg__disc { stroke: var(--fp-gold); stroke-width: 1; }
.pimg__txt { font: 600 14px var(--font-ui); letter-spacing: 0.02em; }
.pimg--plain .pimg__disc { fill: var(--fp-panel-2); }
.pimg--plain .pimg__txt { fill: var(--fp-gold-lit); }
/* Same as style.css: once a headshot or a club logo loads, the initials go (a cut-out headshot
   has a clear ground, so they would show through it), and a logo sits on a light plate. */
.pimg--photo .pimg__txt { visibility: hidden; }
.pimg--logo .pimg__disc { fill: var(--parchment, #f1ece0); }

/* ================================================================== THE BEST LINE AT EACH BOOK
   One row per sportsbook (home-lines.js): book, player, market, side and line, price, and one
   estimated-edge chip. It scrolls when the rows are wider than the window, pauses on hover, on
   focus and on its own button, and stands still under reduced motion. */
.fp-lines { border-top: 1px solid var(--fp-line-soft); border-bottom: 1px solid var(--fp-line-soft); background: var(--fp-ground-2); }
.fp-lines[hidden] { display: none; }
/* The right padding clears the chat tab, which sits on the right edge at every width. */
.fp-lines__bar { display: flex; align-items: center; gap: 20px; min-height: 72px; padding: 0 calc(var(--sf-rail-tab, 44px) + 8px) 0 var(--fp-gutter); }
.fp-lines__label {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font: 600 12px/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fp-gold-lit);
}
.fp-lines__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fp-hit); box-shadow: 0 0 10px var(--fp-hit); }
.fp-lines__window {
  position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--fp-mask) 4%, var(--fp-mask) 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--fp-mask) 4%, var(--fp-mask) 96%, transparent);
}
.fp-lines__window:focus-visible { outline: 2px solid var(--fp-gold-lit); outline-offset: 2px; }
.fp-lines.is-static .fp-lines__window { -webkit-mask-image: none; mask-image: none; }
.fp-lines__track { display: flex; width: max-content; }
.fp-lines.is-moving .fp-lines__track { animation: fp-scroll var(--fp-lines-dur, 60s) linear infinite; }
.fp-lines.is-paused .fp-lines__track,
.fp-lines__window:hover .fp-lines__track,
.fp-lines__window:focus-within .fp-lines__track { animation-play-state: paused; }
@keyframes fp-scroll { to { transform: translateX(-50%); } }
.fp-lines__list { display: flex; margin: 0; padding: 0; list-style: none; }
.fp-lines__item { display: flex; align-items: center; gap: 12px; padding: 12px 26px 12px 22px; border-left: 1px solid var(--fp-line-soft); white-space: nowrap; }
.fp-lines.is-static .fp-lines__list > .fp-lines__item:first-child { border-left: 0; padding-left: 0; }
.fp-lines__face { width: 34px; height: 34px; flex: none; }
.fp-lines__body { display: grid; gap: 5px; }
.fp-lines__book { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fp-muted); }
.fp-lines__sport { padding: 3px 6px; border: 1px solid var(--fp-line-soft); border-radius: 3px; font-size: 9.5px; letter-spacing: 0.1em; color: var(--fp-faint); }
.fp-lines__row { display: flex; align-items: center; gap: 10px; }
.fp-lines__group { display: inline-flex; align-items: baseline; gap: 10px; }
.fp-lines__who { font: 600 14px/1.2 var(--font-ui); color: var(--fp-ink); }
.fp-lines__mkt { font: 500 13px/1.2 var(--font-ui); color: var(--fp-muted); }
.fp-lines__pick { font: 600 13px/1.2 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fp-ink); }
.fp-lines__price { font: 600 13px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.fp-lines__price { color: var(--fp-gold-lit); }
.fp-lines__edge {
  align-self: center; padding: 4px 8px; border: 1px solid var(--fp-free-42); border-radius: 3px; background: var(--fp-free-9);
  font: 600 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fp-free-ink);
}
.fp-lines__end { flex: none; display: flex; align-items: center; gap: 14px; font: 500 12px/1.2 var(--font-ui); color: var(--fp-faint); }
.fp-lines__end a { display: inline-flex; align-items: center; gap: 6px; color: var(--fp-ink); text-underline-offset: 3px; }
.fp-lines__end a:hover { color: var(--fp-gold-lit); }
.fp-lines__pause {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--fp-line); border-radius: 4px; background: transparent; color: var(--fp-ink); cursor: pointer;
}
.fp-lines__pause[hidden] { display: none; }
.fp-lines__pause:hover { border-color: var(--fp-gold-lit); color: var(--fp-gold-lit); }
.fp-lines__icon { width: 14px; height: 14px; }
.fp-lines__icon--play, .fp-lines.is-paused .fp-lines__icon--pause { display: none; }
.fp-lines.is-paused .fp-lines__icon--play { display: block; }
@media (max-width: 899px) {
  .fp-lines__bar { flex-wrap: wrap; gap: 10px 16px; padding: 14px calc(var(--sf-rail-tab, 44px) + 8px) 14px var(--fp-gutter); }
  .fp-lines__window { order: 3; flex-basis: 100%; }
  /* Two classes, so it beats the page's `.fp p { margin: 0 }`. */
  .fp-lines__bar > .fp-lines__end { margin-left: auto; }
  .fp-lines__item { padding: 10px 20px 10px 16px; }
  .fp-lines__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fp-lines__asof { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-lines.is-moving .fp-lines__track { animation: none; }
  .fp-lines__window { overflow-x: auto; }
  .fp-lines__list[aria-hidden="true"] { display: none; }
}

/* ================================================================== FEATURES */
.fp-features { padding: clamp(36px, 5vw, 56px) 0; }
.fp-features__grid { display: grid; gap: 16px; }
@media (min-width: 620px) { .fp-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fp-features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
/* Tag, icon, title, text, link: the text row takes the slack, so the four links sit on one line. */
.fp-feature {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  justify-items: center;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2vw, 26px);
  border: 1px solid var(--fp-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fp-gold-5), transparent 60%), var(--fp-panel);
  text-align: center;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.fp-feature__tag {
  padding: 4px 10px;
  border: 1px solid var(--fp-line);
  border-radius: 999px;
  color: var(--fp-muted);
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fp-feature__tag--free { border-color: var(--fp-gold-lit); color: var(--fp-gold-lit); }
/* Phones: a compact row, the icon on the left and the words beside it, so four cards are one
   screen of reading, not four. */
@media (max-width: 619px) {
  .fp-feature {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: none;
    justify-items: start;
    align-items: start;
    column-gap: 16px;
    row-gap: 8px;
    padding: 20px 18px;
    text-align: left;
  }
  .fp-feature > * { grid-column: 2; }
  .fp-feature > .fp-feature__icon { grid-column: 1; grid-row: 1 / span 5; width: 44px; height: 44px; margin-top: 2px; }
  .fp-feature__title { font-size: 24px; }
  .fp-feature__text { max-width: none; font-size: 15px; }
}
.fp-feature:hover { border-color: var(--fp-gold-lit); box-shadow: var(--fp-glow); transform: translateY(-2px); }
.fp-feature__icon { width: 56px; height: 56px; fill: none; stroke: var(--fp-gold-lit); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fp-feature__icon circle:only-of-type { fill: var(--fp-gold-lit); }
.fp-feature__icon .fp-dash { stroke-dasharray: 3 3; }
.fp-feature__title { font-size: clamp(26px, 2.2vw, 30px); line-height: 1.1; }
.fp-feature__text { max-width: 28ch; color: var(--fp-muted); font-size: 15px; line-height: 1.5; text-wrap: balance; }
.fp-feature__go { display: inline-flex; align-items: center; align-self: end; gap: 8px; margin-top: 2px; color: var(--fp-gold-lit); font: 600 15px/1 var(--font-ui); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ================================================================== REWARDS TEASER */
.fp-rewards { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--fp-line-soft); background: radial-gradient(60% 80% at 70% 0%, var(--fp-gold-8), transparent 70%); }
.fp-rewards__head { display: grid; gap: 18px; align-items: center; margin-bottom: 28px; }
@media (min-width: 900px) {
  .fp-rewards__head { grid-template-columns: minmax(0, 1fr) auto auto; gap: 28px; }
}
.fp-rewards__title { margin-top: 10px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; }
.fp-rewards__coin img { width: clamp(96px, 11vw, 150px); height: auto; filter: drop-shadow(0 18px 36px var(--fp-black-70)) drop-shadow(0 0 24px var(--fp-lit-20)); }
.fp-rewards__cta { display: grid; gap: 10px; justify-items: start; }
.fp-rewards__cta p { font: 500 16px/1.3 var(--font-ui); color: var(--fp-gold-lit); }
.fp-rewards__board { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-ui); color: var(--fp-muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fp-rewards__board:hover { color: var(--fp-gold-lit); }
.fp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .fp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fp-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
.fp-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  height: 100%;
  overflow: hidden;
  padding-bottom: 18px;
  border: 1px solid var(--fp-line);
  border-radius: 12px;
  background: var(--fp-panel);
  text-align: center;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.fp-tile:hover { border-color: var(--fp-gold-lit); transform: translateY(-3px); box-shadow: var(--fp-glow); }
.fp-tile__art { position: relative; width: 100%; aspect-ratio: 1 / 0.86; overflow: hidden; }
.fp-tile__art img { width: 100%; height: 100%; object-fit: cover; }
.fp-tile__art::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(0deg, var(--fp-panel), transparent); }
.fp-tile__name { font: 600 clamp(22px, 2vw, 26px)/1.1 var(--font-display); font-variation-settings: "opsz" 96; color: var(--fp-ink); }
.fp-tile__what { padding: 0 12px; font: 400 13px/1.45 var(--font-ui); color: var(--fp-muted); min-height: 2.9em; }
.fp-tile__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 9px 16px; border: 1px solid var(--fp-line); border-radius: 999px; font: 600 13px/1 var(--font-ui); color: var(--fp-ink); }
.fp-tile:hover .fp-tile__go { border-color: var(--fp-gold-lit); color: var(--fp-gold-lit); }

/* ================================================================== FAQ */
.fp-faq { padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--fp-line-soft); }
.fp-faq__title { font-size: clamp(28px, 3vw, 38px); margin-bottom: 18px; }
.fp-faq__cols { display: grid; gap: 0 48px; }
@media (min-width: 900px) { .fp-faq__cols { grid-template-columns: 1fr 1fr; } }
.fp-faq__list { border-top: 1px solid var(--fp-line-soft); }
.fp-faq details { border-bottom: 1px solid var(--fp-line-soft); }
.fp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
  font: 600 15.5px/1.35 var(--font-ui);
  color: var(--fp-ink);
}
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary::after { content: "+"; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--fp-line); border-radius: 50%; color: var(--fp-gold-lit); font: 400 16px/1 var(--font-ui); transition: transform 160ms ease; }
.fp-faq details[open] summary::after { transform: rotate(45deg); }
.fp-faq details p { padding: 0 0 16px; color: var(--fp-muted); font-size: 15px; line-height: 1.55; }
.fp-faq details a { color: var(--fp-gold-lit); }

/* ================================================================== SIGN UP WITH OUR LINKS
   The props page's sign-up card (props.css .pp-signup), drawn here in the front page's tokens
   because this page does not load props.css. One slim band above the footer: the heading and
   the paid-link sentence, then one row per site. Rows stack on a phone, sit side by side from
   720px, and the five share one line from 1100px. */
.fp-signup { padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--fp-line-soft); }
.pp-signup--band {
  display: grid; gap: 18px; padding: 20px;
  border: 1px solid var(--fp-line); border-radius: 14px; background: var(--fp-panel); color: var(--fp-ink);
}
.pp-signup--band .pp-signup__head { display: grid; gap: 6px; }
.pp-signup--band .pp-signup__h { margin: 0; font: 600 22px/1.2 var(--font-display); color: var(--fp-ink); }
.pp-signup--band .pp-signup__sub { margin: 0; color: var(--fp-muted); font-size: 13.5px; line-height: 1.45; }
.pp-signup--band .pp-signup__fine { margin: 0; color: var(--fp-muted); font-size: 12px; line-height: 1.45; }
.pp-signup--band .pp-signup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-signup--band .pp-signup__row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--fp-line-soft); border-radius: 10px; background: var(--fp-ground-2);
}
.pp-signup--band .pp-signup__mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--fp-line); background: var(--fp-panel-2); color: var(--fp-gold-lit);
  font: 700 13px/1 var(--font-ui); letter-spacing: 0.02em;
}
.pp-signup--band .pp-signup__name { font: 600 15px/1.25 var(--font-ui); color: var(--fp-ink); overflow-wrap: break-word; min-width: 0; }
.pp-signup--band .pp-signup__go { min-height: 40px; padding: 0 18px; white-space: nowrap; }
@media (min-width: 720px) {
  .pp-signup--band .pp-signup__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .pp-signup--band { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 3.2fr); align-items: center; gap: 28px; }
  .pp-signup--band .pp-signup__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pp-signup--band .pp-signup__row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 10px; padding: 12px; }
  .pp-signup--band .pp-signup__mark { width: 34px; height: 34px; }
  .pp-signup--band .pp-signup__go { grid-column: 1 / -1; width: 100%; }
}

/* ================================================================== FOOTER */
.fp-foot { padding: 48px 0 32px; border-top: 1px solid var(--fp-line); background: var(--fp-ground-2); color: var(--fp-muted); font-size: 14px; }
.fp-foot__top { display: grid; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--fp-line-soft); }
@media (min-width: 1000px) { .fp-foot__top { grid-template-columns: 1.1fr 1.6fr 1.2fr; gap: 40px; } }
.fp-foot__mark { display: inline-flex; align-items: center; gap: 12px; color: var(--fp-ink); text-decoration: none; font: 600 16px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.fp-foot__mark img { width: 44px; height: 44px; }
.fp-foot__tag { margin-top: 14px; font-size: 13px; }
.fp-foot__social { margin-top: 14px; }
.fp-foot__social a, .fp-foot__cols a { color: var(--fp-muted); text-decoration: none; }
.fp-foot__social a:hover, .fp-foot__cols a:hover { color: var(--fp-ink); }
.fp-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fp-foot__cols ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.fp-foot__h { font: 600 15px/1.2 var(--font-ui); color: var(--fp-ink); }
.fp-foot__small { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.fp-foot__signup form { display: grid; gap: 10px; margin-top: 14px; }
.fp-foot__field { display: flex; border: 1px solid var(--fp-line); border-radius: 10px; overflow: hidden; background: var(--fp-black-30); }
.fp-foot__field:focus-within { border-color: var(--fp-gold-lit); }
.fp-foot__field input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 0; background: transparent; color: var(--fp-ink); font: 400 16px var(--font-ui); }
.fp-foot__field input:focus { outline: none; }
.fp-foot__field input::placeholder { color: var(--fp-faint); }
.fp-foot__go { width: 56px; border: 0; background: var(--fp-gilt); color: var(--fp-gilt-ink); cursor: pointer; display: grid; place-items: center; }
.fp-foot__go .fp-arrow { width: 20px; height: 20px; }
.fp-foot__signup label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--fp-muted); }
.fp-foot__signup label input { margin: 2px 0 0; accent-color: var(--fp-gold); flex: none; }
.fp-foot__signup label a { color: var(--fp-gold-lit); }
.fp-foot__fine { margin-top: 22px; font: 500 13px/1.55 var(--font-ui); color: var(--fp-muted); }
.fp-foot__fine a { color: var(--fp-gold-lit); }
.fp-foot__mark-line { margin-top: 8px; font-size: 12px; color: var(--fp-faint); }

/* ================================================================== PHONES */
@media (max-width: 859px) {
  .fp-rewards__head { padding-right: calc(var(--sf-rail-tab, 44px) + 4px); }
  /* The sign-up band's buttons sit at its right edge: keep them clear of the chat tab. */
  .pp-signup--band { margin-right: calc(var(--sf-rail-tab, 44px) + 4px); }
}
@media (max-width: 560px) {
  :root { --fp-gutter: 16px; }
  .fp-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-tiles > li:last-child:nth-child(odd) { grid-column: span 2; }
}
@supports (-webkit-touch-callout: none) {
  .fp-foot__field input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-btn, .fp-feature, .fp-tile, .fp-faq summary::after { transition: none; }
  .fp-feature:hover, .fp-tile:hover { transform: none; }
}

/* Just above the burger breakpoint the nav row is one dropdown too wide (the Referrals group,
   2026-09-30): the seal carries the brand there and the wordmark steps out, as on every other page
   (style.css). The link keeps its aria-label. */
@media (min-width: 1101px) and (max-width: 1239px) {
  .fp .brand__name { display: none; }
}
/* A phone keeps the slate strip whole: "Locks 10:00 AM Pacific" is never cut. */
@media (max-width: 619px) {
  .hero .gx-sub { gap: 6px; padding: 6px 10px; letter-spacing: 0.01em; }
}
.hero .gx-games { display: contents; }
@media (max-width: 380px) { .hero .gx-games { display: none; } }