/* story.css -- the two pages that tell the story: how-it-works and results.
 *
 * WHY ITS OWN FILE AND NOT style.css. style.css is copied byte for byte into
 * funded/public/site.css by tools/sync-site-chrome.sh, so every rule in it also ships to the
 * app. These are marketing-page layouts the app has no use for. boards.css set the precedent.
 *
 * It reads style.css's tokens and adds no colours of its own: one palette site wide is the
 * whole point of the work these pages were built during. */

/* ---- the page head ---------------------------------------------------------
   Short. Both pages open on their evidence, not on a paragraph about it. */
.story-head { padding-top: var(--s6); padding-bottom: 0; }
/* The head introduces the section under it rather than standing apart from it, so the two do
   not each get a full section's rhythm. Stacked, they put the evidence most of a screen down. */
.story-head + .section { padding-top: var(--s5); }
.story-head h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.1rem); max-width: 18ch; }
.story-head .lede { margin-top: var(--s4); max-width: 56ch; color: var(--text); }
.story-head .eyebrow { margin-bottom: var(--s3); }

/* ---- THE SIGNATURE: seven against three -----------------------------------
   The argument this page makes is a difference in LENGTH, so the length is what draws it. Two
   stacks of the same chip, one seven tall and one three tall, side by side and top aligned. You
   see the answer before you read a word, which is the only reason to draw it rather than write
   "three steps instead of seven".

   No bar chart, no percentage, no big number with a small label: the steps themselves are the
   unit, and a reader can count them. */
.lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  margin-top: var(--s6);
  align-items: start;
}
@media (min-width: 760px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }

.lane {
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  padding: var(--s5);
}
.lane--ours { border-color: rgba(201, 169, 97, 0.42); box-shadow: var(--glow-gold-soft); }

.lane__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.lane__who { margin: 0; font-family: var(--ui); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.lane__count { font-family: var(--mono); font-size: 2.6rem; line-height: 1; color: var(--muted); }
.lane--ours .lane__count { color: var(--gold-lit); }
.lane__count small { font-family: var(--ui); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; margin-left: .4em; }

/* The steps as a numbered list, because they ARE a sequence and the count is the point. */
.lane__steps { list-style: none; margin: var(--s5) 0 0; padding: 0; counter-reset: step; }
.lane__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
}
.lane__steps li:first-child { border-top: 0; }
.lane__steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--gold-deep);
}
.lane--ours .lane__steps li { color: var(--text); }
.lane--ours .lane__steps li::before { color: var(--gold); }

/* ---- the three real steps --------------------------------------------------
   Each one is a screenshot and the sentence that explains it. The screenshots are the evidence,
   so they get the width, and the writing sits beside them rather than under a caption. */
.walk { margin-top: var(--s7); display: grid; gap: var(--s7); }
.walk__step { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) {
  .walk__step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s6); }
  /* The middle step is ours, and it turns round so the two DraftKings screens bracket it. A
     reader following the page sees the tool they already use, then ours, then theirs again. */
  .walk__step:nth-child(2) .walk__say { order: 2; }
}
.walk__say h2 { margin: var(--s3) 0 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.walk__say p { margin: var(--s4) 0 0; color: var(--text); max-width: 46ch; }
.walk__n { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.walk__where { color: var(--muted); }
.walk__shot { margin: 0; border: 1px solid var(--card-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); }
.walk__shot img { display: block; width: 100%; height: auto; }

/* ---- the winners' wall -----------------------------------------------------
   Every tile is a real screenshot with a real caption. The caption is TEXT, not an overlay
   stamped into the picture, so a screen reader reads the contest and the payout and so does a
   search engine. */
.wall {
  margin-top: var(--s6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s5);
  /* Each tile is as tall as its own screenshot. Without this the row stretches every card to the
     tallest one and a short screenshot sits above a slab of empty card. */
  align-items: start;
}
/* PADDING AND BOX-SHADOW ARE HERE TO CANCEL style.css, NOT BECAUSE THE DESIGN WANTS THEM.
   style.css already defines .win for the home page's own wall, with padding: 14px and a
   box-shadow, and both files load on this page. A property this rule does not name survives
   from that one, so the screenshot sat in a 14px inset ring with a drop shadow around it,
   which is the exact opposite of the flush, edge-to-edge tile overflow: hidden is for.
   Found by the pre-merge review with a computed style, not by reading either file. */
.win {
  margin: 0;
  padding: 0;
  box-shadow: none;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
}
/* width/height on the img plus these two is what reserves the space before the screenshot
   arrives. Without them the caption and everything under the wall jumps down as each one
   loads, which is a real layout shift on a slow phone and is what the home page still does. */
.win img { display: block; width: 100%; height: auto; }
.win figcaption { padding: var(--s4); border-top: 1px solid var(--line-soft); }
.win__amt { display: block; font-family: var(--mono); font-size: 1.35rem; color: var(--gold-lit); }
.win__con { display: block; margin-top: var(--s2); font-size: var(--t-micro); color: var(--muted); }

/* ---- the part that is not fine print ---------------------------------------
   THE ONE RISK ON THIS PAGE, and it is a risk in the reader's favour. A wall of wins with a
   grey 11px disclaimer under it is the shape every gambling-adjacent site uses, and it is the
   shape that gets read as something to scroll past. This says the true thing at the same size
   as everything else, in the same voice, directly under the evidence it qualifies.
   It costs conversions and it is still correct. */
.honest {
  margin-top: var(--s6);
  border-left: 2px solid var(--gold-deep);
  padding: var(--s2) 0 var(--s2) var(--s5);
  max-width: 64ch;
}
.honest p { margin: 0; color: var(--text); }
.honest p + p { margin-top: var(--s3); color: var(--muted); font-size: var(--t-micro); }

/* ---- the close -------------------------------------------------------------- */
.story-foot { margin-top: var(--s7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.story-foot p { margin: 0; color: var(--muted); font-size: var(--t-micro); }

@media (prefers-reduced-motion: reduce) { .lane, .win, .walk__shot { transition: none; } }