/* Solitaire Classic - built on the Apple tokens in /DESIGN.md.
   Three rules from that system do the heavy lifting here:
   1. Tiles are full bleed and edge to edge. The surface colour change IS the divider,
      so there are no card borders or section rules.
   2. Exactly one shadow exists, and it belongs to product imagery. Never to cards,
      buttons or text.
   3. Display type is tight (-0.28px), body runs at 17px, and the weight ladder is
      300 / 400 / 600 / 700. Weight 500 is deliberately absent. */

:root {
  --ink:        #08090A;   /* darkest tile */
  --felt:       #071A11;   /* deep green tile */
  --felt-lift:  #0C2418;
  --parchment:  #F4F1E8;   /* the light tile that creates the rhythm */
  --parchment-2:#E9E4D6;
  --on-dark:    #F2F4EF;
  --on-dark-2:  #9AA79B;
  --on-light:   #161A17;
  --on-light-2: #5C6560;
  --gold:       #C9A227;
  --gold-bright:#EBD58B;
  --green:      #1F7A44;
  --green-hi:   #2E9B58;

  --sp-xxs: 4px;  --sp-xs: 8px;   --sp-sm: 12px; --sp-md: 17px;
  --sp-lg: 24px;  --sp-xl: 32px;  --sp-xxl: 48px; --sp-section: 80px;

  --r-sm: 8px; --r-md: 11px; --r-lg: 18px; --r-pill: 9999px;

  /* The system's single shadow. Product imagery only. */
  --product-shadow: rgba(0,0,0,.22) 3px 5px 30px 0;

  --font: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

/* Flex and grid items default to min-width:auto, so they refuse to shrink below their
   min-content and that minimum propagates up as a page-wide minimum width. On a phone
   that pushes the document wider than the viewport and shifts every centred block. */
.nav .inner--wide > *, .duo > *, .stats > *, .foot .inner > * { min-width: 0; }
.inner, .inner--wide { max-width: min(980px, 100%); }
.inner--wide { max-width: min(1180px, 100%); }
img { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: hidden; background: var(--ink); color: var(--on-dark);
  font-family: var(--font);
  font-size: 17px; line-height: 1.47; letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- structure ---------- */

.tile { padding: var(--sp-section) var(--sp-lg); overflow-x: clip; }
.tile--ink { background: var(--ink); }
.tile--felt {
  background:
    radial-gradient(900px 420px at 50% -140px, rgba(201,162,39,.13), transparent 72%),
    var(--felt);
}
.tile--light { background: var(--parchment); color: var(--on-light); }
.tile--light .sub { color: var(--on-light-2); }
.sub { color: var(--on-dark-2); }
.inner, .inner--wide { margin: 0 auto; }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-display); margin: 0; overflow-wrap: break-word; }
h1 { font-size: 56px; font-weight: 600; line-height: 1.07; letter-spacing: -0.28px; text-wrap: balance; }
h2 { font-size: 34px; font-weight: 600; line-height: 1.18; letter-spacing: -0.374px; }
h3 { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
.lead { font-size: 28px; font-weight: 400; line-height: 1.24; letter-spacing: 0.196px; }
.lead-airy { font-size: 24px; font-weight: 300; line-height: 1.5; letter-spacing: 0; }
p { margin: 0 0 var(--sp-md); }
.tile p { max-width: min(68ch, 100%); }
.hero .fine { max-width: min(62ch, 100%); margin-left: auto; margin-right: auto; }
.caption { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
.eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: -0.224px;
  color: var(--gold); margin: 0 0 var(--sp-sm);
}
.tile--light .eyebrow { color: #7A5F0A; }

/* 64px of air above a headline, 48 below - whitespace is the pedestal. */
.tile > .inner > h2:first-child,
.tile > .inner > .eyebrow:first-child { margin-top: 0; }
.tile h2 + p, .tile h2 + .lead { margin-top: var(--sp-lg); }

a { color: inherit; }
.nav nav a, .cta, .cta-quiet, .foot a { transition: color .2s ease, background-color .2s ease; }

/* P2-12: keyboard focus fell back to the UA ring on a near-black ground. */
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
.tile--light a { color: #0B6B33; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 20; overflow-x: clip;
  background: rgba(8,9,10,.72); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav .inner--wide { display: flex; align-items: center; height: 48px; padding: 0 var(--sp-lg); }
.nav .brand {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.374px; text-decoration: none; color: var(--on-dark);
}
.nav nav { margin-left: auto; display: flex; gap: var(--sp-lg); min-width: 0; }
.nav nav a { font-size: 12px; letter-spacing: -0.12px; color: var(--on-dark-2); text-decoration: none; }
.nav nav a:hover { color: var(--on-dark); }

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

.hero { padding-top: 72px; padding-bottom: var(--sp-section); text-align: center; }
.hero h1 { max-width: min(18ch, 100%); margin: 0 auto var(--sp-lg); }
.hero .lead { max-width: min(32ch, 100%); margin: 0 auto var(--sp-lg); color: #DDE4DA; }
.hero .fine { margin-top: var(--sp-md); }

.cta {
  display: inline-block; text-decoration: none;
  background: var(--green); color: #fff;
  font-size: 18px; font-weight: 600; line-height: 1;
  padding: 17px 32px; border-radius: var(--r-pill);
}
.cta:hover { background: #186237; }
.cta-quiet { display: inline-block; margin-left: var(--sp-md); font-size: 17px; text-decoration: none; color: var(--gold-bright); }
.cta-quiet:hover { text-decoration: underline; }

/* The product rests on the tile and picks up the system shadow. Nothing else does. */
.product { margin: var(--sp-xxl) auto 0; max-width: 300px; }
.product img { width: 100%; height: auto; border-radius: 26px; box-shadow: var(--product-shadow); display: block; }

/* Real card art, fanned. The decoration IS the product, which is why it earns the
   system's one shadow. Cards are spread by position first, then rotated, so the fan
   opens instead of clumping at the centre. */
.fan { position: relative; height: 280px; margin: var(--sp-xl) auto 0; max-width: 620px; }
.fan img {
  position: absolute; top: 24px; width: 158px; height: auto;
  border-radius: 10px; box-shadow: var(--product-shadow);
  transform-origin: 50% 120%;
}
.fan img:nth-child(1) { left: 2%;   transform: rotate(-16deg) translateY(16px); z-index: 1; }
.fan img:nth-child(2) { left: 20%;  transform: rotate(-8deg)  translateY(4px);  z-index: 2; }
.fan img:nth-child(3) { left: 38.5%;transform: rotate(0deg)   translateY(-4px); z-index: 3; }
.fan img:nth-child(4) { left: 57%;  transform: rotate(8deg)   translateY(4px);  z-index: 2; }
.fan img:nth-child(5) { left: 75%;  transform: rotate(16deg)  translateY(16px); z-index: 1; }

/* ---------- figures ---------- */

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-xxl); align-items: center; }
.duo--text-first { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.shot img { width: 100%; max-width: 280px; height: auto; border-radius: 24px; box-shadow: var(--product-shadow); display: block; margin: 0 auto; }
figure { margin: 0; }
figcaption { margin-top: var(--sp-md); }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-xl); text-align: center; }
.stats b {
  display: block; font-family: var(--font-display);
  font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: 0;
  color: var(--gold-bright);
}

/* ---------- table ---------- */

table { width: 100%; border-collapse: collapse; margin: var(--sp-lg) 0 0; font-size: 17px;
        display: block; overflow-x: auto; }
th, td { text-align: left; padding: var(--sp-md) var(--sp-sm); border-bottom: 1px solid rgba(0,0,0,.10); vertical-align: top; }
.tile--ink th, .tile--ink td, .tile--felt th, .tile--felt td { border-bottom-color: rgba(255,255,255,.12); }
th { font-weight: 600; }
td.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
#pricing table { max-width: min(68ch, 100%); }

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

/* The query-shaped subhead sits under the marketing headline: quieter than an H2, but
   still a real heading for search to match. Scoped by class, not by adjacency: an
   h2 + h3 selector only ever matches the first h3 in a section. */
.faq h3, .duo h3, .tile--light h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.374px; opacity: .72;
  margin: var(--sp-xl) 0 var(--sp-sm);
}
.duo h3, .tile--light h2 + h3 { margin-top: var(--sp-md); }

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

.foot { background: var(--ink); overflow-x: clip; padding: var(--sp-xxl) var(--sp-lg); border-top: 1px solid rgba(255,255,255,.08); }
.foot .inner { display: flex; gap: var(--sp-lg); flex-wrap: wrap; align-items: baseline; }
.foot a { font-size: 12px; letter-spacing: -0.12px; color: var(--on-dark-2); text-decoration: none; }
.foot a:hover { color: var(--on-dark); }
.foot .fine { font-size: 12px; color: var(--on-dark-2); margin: 0; margin-left: auto; }

/* ---------- motion: CSS only, so the page stays script free ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .duo, .duo--text-first { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg); }
}
@media (max-width: 600px) {
  /* Every ch-based measure is dropped at phone widths: a ch cap cannot resolve against an
     indefinite container and ends up setting a floor wider than the screen. Percentages
     always resolve here, so the column simply follows the viewport. */
  .hero h1, .hero .lead, .hero .fine, .tile p, #pricing table, .inner, .inner--wide {
    max-width: 100% !important;
  }
  /* The two in-page anchors go; Support and Privacy are the links that leave the page. */
  .nav nav a[href^="#"] { display: none; }
  .nav nav { gap: var(--sp-md); }
  .nav .brand { font-size: 15px; }
  .tile { padding: 56px var(--sp-lg); }
  .hero { padding-top: 64px; }
  h1 { font-size: 38px; letter-spacing: -0.2px; }
  h2 { font-size: 28px; }
  .lead { font-size: 21px; line-height: 1.3; }
  .stats b { font-size: 32px; }
  /* Card lefts are percentages of the fan box, so the box must leave room for the
     rightmost card's own width or it overflows the viewport. */
  .fan { height: 168px; max-width: 300px; margin-top: var(--sp-xl); }
  .fan img { width: 80px; top: 14px; border-radius: 7px; }
  .fan img:nth-child(1) { left: 0; }
  .fan img:nth-child(5) { left: 73%; }
  .cta-quiet { display: block; margin: var(--sp-md) 0 0; }
}