/* Yield — yieldtodrive.com
   One stylesheet for all three pages. The palette is the app's own token set
   (lib/ui/theme.dart), so the site and the game are visibly the same product.
   Poppins is self-hosted and subset to latin: the page makes no third-party
   request at all, which is what lets the privacy policy say there are no
   cookies and no trackers on this site. */

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --void: #0E1622;
  --surface: #182333;
  --raised: #22314A;
  --line: #2E4059;
  --ink: #F2F6FC;
  --muted: #A8B8CE;
  --faint: #6C7E96;
  --amber: #FFC53D;
  --on-amber: #10192A;

  --page: 46rem;
  --radius: 14px;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--void);
  overflow-x: hidden;
}

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: 4.5rem 0 3rem;
}

.hero__icon {
  width: 108px;
  height: 108px;
  border-radius: 24px;
  display: block;
  margin: 0 auto 1.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

h1 {
  font-size: clamp(2.75rem, 11vw, 4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 .35rem;
}

.hero__sub {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--amber);
  margin: 0 0 1.25rem;
}

.hero__pitch {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 auto;
  max-width: 34rem;
  text-wrap: balance;
}

/* --- store badges --------------------------------------------------------
   Apple's and Google's own artwork, downloaded once and served from /assets
   like everything else here, so the page still makes no third-party request
   (see the note at the top of this file). The two files are byte-identical to
   the official downloads; nothing below edits them. Sources are in the README.

   The two badges are not the same shape and cannot be made so by scaling. At
   a common height the App Store badge is 503 wide against Google Play's 564
   (aspect 2.994 against 3.357), and the corner radius is drawn into each file
   at 26px against 18px. Scaling matches one dimension and leaves the other
   11% out; nothing about scaling touches the corners.

   So the shape is not taken from the files at all. Each anchor is one frame
   -- same width, same height, same radius, same 1px keyline -- and the badge
   is dropped into it OVERSIZED and clipped. Both badge lozenges are pure
   black on a #A6A6A6 keyline (yes, the same grey in both files: the Play
   badge only looks brighter because its line is 4px in a 646px-wide PNG), so
   a black frame with a #A6A6A6 border swallows the seam. What survives the
   clip is the part that matters and the part nobody may redraw: the Apple
   logo, the Play triangle and the two wordmarks.

   Every number below falls out of that:

   - Covering the frame is not enough. Each badge's own keyline is ~1.2px at
     these sizes, so the art has to overshoot the 158 x 45 inside the border
     by MORE than that on all four edges, after the nudges below -- otherwise
     a sliver of its keyline survives the clip and sits under the frame's own
     border as a double line. That is what a 56px Apple (167 wide) and a 76px
     Google PNG (lozenge 171 x 51) buy: 4.2px of margin at the tightest edge,
     against 1.2px of keyline.
   - The wordmarks are optically matched, not just fitted: Apple's ink is .619
     of its art height, Google's .679 of its lozenge, which at these two sizes
     lands both at 34.7px.
   - Neither file is centred on its own ink -- Apple's sits 2.4% low, Google's
     0.8% high -- so without the sub-pixel nudges the two wordmarks would sit
     2px out of line with each other.

   Changing --frame-h means redoing all three. Keep --frame-w at 160: two
   frames and the gap come to 332px, which is what fits inside a 390px phone,
   and `overflow-x: hidden` on the body would swallow anything wider rather
   than show it.

   Worth being clear about what this is: the badges are no longer used exactly
   as supplied. Both stores ask for the badge with its own border and corners
   intact, and this frames them instead. The artwork, the marks and the
   wording are untouched, and the trademark line is in the footer. */

.stores {
  --frame-w: 160px;
  --frame-h: 47px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 2rem;
}

.stores a {
  width: var(--frame-w);
  height: var(--frame-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  border: 1px solid #A6A6A6;
  border-radius: 10px;
  transition: transform .12s ease;
}
.stores a:hover { transform: translateY(1px); }
.stores a:active { transform: translateY(3px); }

.stores img { flex: none; display: block; width: auto; }
.stores__apple { height: 56px; transform: translateY(-1.3px); }
.stores__play { height: 76px; transform: translateY(.6px); }

/* --- screenshot carousel ------------------------------------------------
   A horizontal scroller, as it should be. The two things that were wrong
   with it are fixed at the source rather than by removing it:

   1. It ate vertical swipes on phones. Cause was `scroll-snap-type: x
      mandatory` on a strip that was ~70% of the screen tall, so nearly every
      downward swipe began inside it and the browser committed to the wrong
      axis. Now `proximity` (which lets the browser keep its own axis-locking)
      on a strip sized by HEIGHT, so it stays a predictable share of the
      screen and there is page left above and below to grab.
   2. The scrollbar showed. Hidden on all three engines below.

   No `touch-action` here on purpose: `pan-x` would stop the page scrolling
   from inside the strip and `pan-y` would kill the carousel. The browser's
   native gesture handling beats anything we would specify. */

.shots {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1.5rem;
  -webkit-overflow-scrolling: touch;
  /* Ask nicely first. Chromium and Firefox honour this; macOS with "Show
     scroll bars: Always" has been seen to paint one anyway. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* So don't rely on being obeyed. The strip is made 22px taller than it
     needs to be and the band around it clips that strip off, which puts the
     scrollbar physically outside the visible box on every engine and every
     system setting. The negative margin is what makes the overflow happen;
     the band owns the spacing that used to live here. */
  padding: 0 1.5rem 22px;
  margin: 2.5rem 0 -22px;
}

.shots-band {
  overflow: hidden;
  margin-bottom: 3.5rem;
}

.shots::-webkit-scrollbar { display: none; }

.shots img {
  flex: 0 0 auto;
  height: min(58vh, 560px);
  width: auto;
  scroll-snap-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

/* Wide screens: all five fit, so the row centres and there is nothing to
   scroll or clip. `safe center` so that if it ever does overflow the browser
   falls back to flex-start instead of stranding the left-hand shots. */
@media (min-width: 72rem) {
  .shots {
    justify-content: safe center;
    max-width: 84rem;
    margin-inline: auto;
    padding-inline: 2rem;
  }
  .shots img {
    height: auto;
    width: calc((100% - 4rem) / 5);
    max-width: 264px;
  }
}

/* --- sections ------------------------------------------------------------ */

section { padding: 1rem 0; }

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 2.5rem 0 1.25rem;
}

/* --- faq ----------------------------------------------------------------- */

.faq details {
  border-top: 1px solid var(--line);
  padding: .25rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  padding: 1rem 2rem 1rem 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  position: absolute;
  right: .35rem;
  top: 1.55rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover::after { border-color: var(--amber); }

.faq p {
  color: var(--muted);
  margin: 0 0 1.1rem;
}

/* --- footer -------------------------------------------------------------- */

footer {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  text-align: center;
  color: var(--faint);
  font-size: .875rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Both stores require a credit line wherever their badge is shown: Apple's
   international notice ("trademarks of Apple Inc., registered in the U.S. and
   other countries", the wording their marketing guidelines give) and Google's
   attribution statement. Google lets a clickable badge defer it to the
   destination page; that is not this page, so it is said here. */

.trademarks {
  max-width: 38rem;
  margin: 1.25rem auto 0;
  font-size: .75rem;
  line-height: 1.5;
}

/* --- legal pages --------------------------------------------------------- */

.legal { padding: 3.5rem 0 0; }

.legal h1 {
  font-size: clamp(2rem, 7vw, 2.5rem);
  margin-bottom: .5rem;
}

.legal .updated {
  color: var(--faint);
  font-size: .875rem;
  margin: 0 0 2.5rem;
}

.legal h2 {
  font-size: 1.2rem;
  margin: 2.5rem 0 .75rem;
}

.legal h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.75rem 0 .5rem;
}

.legal p, .legal li { color: var(--muted); }
.legal li { margin-bottom: .5rem; }
.legal ul { padding-left: 1.25rem; }
.legal strong { color: var(--ink); font-weight: 600; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: .9rem;
}
.legal th, .legal td {
  text-align: left;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--muted);
}
.legal th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.scroller { overflow-x: auto; }

.back {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--faint);
  font-size: .875rem;
  text-decoration: none;
}
.back:hover { color: var(--amber); }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
}
.callout p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* --- button --------------------------------------------------------------
   The app's rule holds here too: buttons are filled, one height, one radius.
   No outline or tint variants. */

.btn {
  display: inline-block;
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  padding: .9rem 1.6rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 0 #C9971F;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(1px); box-shadow: 0 3px 0 #C9971F; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 #C9971F; }

.btn-row { margin: 1.5rem 0 2rem; }

.checklist { list-style: none; padding-left: 0; }
.checklist li {
  padding-left: 1.6rem;
  position: relative;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}