/* Affiliate program page, v2. Dune tokens from web/app/globals.css.
   One family of visuals: 1.75px line icons, the hero map's navy and one green for money.
   Spacing runs on an 8-point rhythm (8 / 16 / 24 / 32 / 40 / 48 / 72 / 96).
   Every hidden-until-seen state lives under html.play; without it (no script, or reduced motion) every section shows finished. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/geist-latin.woff2) format("woff2");
}
:root {
  color-scheme: light;
  --paper: #f7f4ee;
  --surface: #fffdf9;
  --ink: #2b2924;
  --ink2: #6d675c;
  --ink3: #6b665a;
  --line: #e5e0d4;
  --line2: #d5cfc0;
  --linefaint: #f0ece3;
  --hoverwash: #f2eee6;
  --brand: #3d5573;
  --branddeep: #2e4159;
  --brandwash: #eaeef3;
  --sagewash: #eef0e8;
  --sagedeep: #55604a;
  --rose: #8f2155;
  --rosedeep: #7c1b48;
  /* The sign-up button over the night: the same wine as a gradient, the
     landing page's --cta-night-top / --cta-night. A lighter tone reads
     washed out there (design-guide.md, Sean 2026-09-23). */
  --cta-night-top: #a3285f;
  --cta-night: #7c1b48;
  --on-fill: #ffffff;
  --shadow-rgb: 43, 41, 36;
  --rest: 0 2px 10px rgba(var(--shadow-rgb), 0.05);
  --raised: 0 6px 18px rgba(var(--shadow-rgb), 0.08);
  --pad: 24px;
  --measure: 640px;
  --wrap-max: 1280px;
  --rise: cubic-bezier(.2, .75, .15, 1);
  --spring: cubic-bezier(.3, 1.45, .5, 1);

  /* The referral map: a quiet paper chart, its water tuned toward the paper. */
  --sea: #e8e8e1;
  --sea2: #f0efe9;
  --land: #fffdf9;
  --land2: #f7f3ea;
  --coast: rgba(61, 85, 115, .5);
  --shallow: 110, 120, 132;
  --cross: rgba(61, 85, 115, .26);
  --dot: 61, 85, 115;
  --glow: 61, 85, 115;
  --ripple: 61, 85, 115;
  --pin-bg: #fffdf9;
  --pin-line: #d5cfc0;
  --pin-dot: #3d5573;
  --pin-ring: rgba(61, 85, 115, .16);
  --money: #2c7a4f;
  --money-wash: #e4f0e8;
  --money-edge: rgba(44, 122, 79, .22);
  --on-money: #ffffff;
  --money-glow: rgba(44, 122, 79, .3);
  --panel-line: #d5cfc0;
  --panel-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 28px 56px -28px rgba(43, 41, 36, .32), 0 6px 18px -6px rgba(43, 41, 36, .1);
  --lift: 0 0 0 1px rgba(43, 41, 36, .02), 0 32px 56px -20px rgba(43, 41, 36, .36), 0 10px 22px -8px rgba(43, 41, 36, .16);
  --vignette: inset 0 0 90px rgba(96, 112, 130, .1);
  --halo: rgba(61, 85, 115, .08);

  /* The small illustrations: the panel takes the page's other tone, so it
     reads as recessed against whichever band it sits on. */
  --ill: #f7f4ee;
  --ill-card: #fffdf9;
  --ill-line: #dfdbd1;
  --ill-cross: rgba(61, 85, 115, .2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14161b;
    --surface: #1c1f26;
    --ink: #ece7dc;
    --ink2: #b2b4bb;
    --ink3: #a6a9b1;
    --line: #30333b;
    --line2: #40444e;
    --linefaint: #212429;
    --hoverwash: #262a31;
    --brand: #8ea7c6;
    --branddeep: #a9bdd6;
    --brandwash: #27303c;
    --sagewash: #262b23;
    --sagedeep: #b9c8ad;
    --on-fill: #14161b;
    --shadow-rgb: 0, 0, 0;
    --sea: #0a0f15;
    --sea2: #101822;
    --land: #223248;
    --land2: #1a283b;
    --coast: rgba(142, 167, 198, .55);
    --shallow: 142, 167, 198;
    --cross: rgba(142, 167, 198, .22);
    --dot: 214, 229, 248;
    --glow: 142, 167, 198;
    --ripple: 142, 167, 198;
    --pin-bg: #1b2330;
    --pin-line: rgba(255, 255, 255, .15);
    --pin-dot: #dbe8f8;
    --pin-ring: rgba(219, 232, 248, .18);
    --money: #6fdc9a;
    --money-wash: rgba(111, 220, 154, .14);
    --money-edge: rgba(111, 220, 154, .3);
    --on-money: #0b1a11;
    --money-glow: rgba(111, 220, 154, .35);
    --panel-line: #2c3644;
    --panel-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 34px 64px -28px rgba(0, 0, 0, .75), 0 8px 20px -8px rgba(0, 0, 0, .5);
    --lift: 0 0 0 1px rgba(255, 255, 255, .02), 0 1px 0 rgba(255, 255, 255, .06) inset, 0 36px 64px -20px rgba(0, 0, 0, .8), 0 12px 24px -8px rgba(0, 0, 0, .55);
    --vignette: inset 0 0 110px rgba(0, 0, 0, .55);
    --halo: rgba(142, 167, 198, .13);
    --ill: #14161b;
    --ill-card: #222b38;
    --ill-line: #2d3745;
    --ill-cross: rgba(142, 167, 198, .16);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14161b;
  --surface: #1c1f26;
  --ink: #ece7dc;
  --ink2: #b2b4bb;
  --ink3: #a6a9b1;
  --line: #30333b;
  --line2: #40444e;
  --linefaint: #212429;
  --hoverwash: #262a31;
  --brand: #8ea7c6;
  --branddeep: #a9bdd6;
  --brandwash: #27303c;
  --sagewash: #262b23;
  --sagedeep: #b9c8ad;
  --on-fill: #14161b;
  --shadow-rgb: 0, 0, 0;
  --sea: #0a0f15;
  --sea2: #101822;
  --land: #223248;
  --land2: #1a283b;
  --coast: rgba(142, 167, 198, .55);
  --shallow: 142, 167, 198;
  --cross: rgba(142, 167, 198, .22);
  --dot: 214, 229, 248;
  --glow: 142, 167, 198;
  --ripple: 142, 167, 198;
  --pin-bg: #1b2330;
  --pin-line: rgba(255, 255, 255, .15);
  --pin-dot: #dbe8f8;
  --pin-ring: rgba(219, 232, 248, .18);
  --money: #6fdc9a;
  --money-wash: rgba(111, 220, 154, .14);
  --money-edge: rgba(111, 220, 154, .3);
  --on-money: #0b1a11;
  --money-glow: rgba(111, 220, 154, .35);
  --panel-line: #2c3644;
  --panel-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 34px 64px -28px rgba(0, 0, 0, .75), 0 8px 20px -8px rgba(0, 0, 0, .5);
  --lift: 0 0 0 1px rgba(255, 255, 255, .02), 0 1px 0 rgba(255, 255, 255, .06) inset, 0 36px 64px -20px rgba(0, 0, 0, .8), 0 12px 24px -8px rgba(0, 0, 0, .55);
  --vignette: inset 0 0 110px rgba(0, 0, 0, .55);
  --halo: rgba(142, 167, 198, .13);
  --ill: #14161b;
  --ill-card: #222b38;
  --ill-line: #2d3745;
  --ill-cross: rgba(142, 167, 198, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/28px "Geist", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
/* A link sitting inside a sentence has to be told apart by more than its
   colour: against the muted ink of a paragraph the brand blue is only 1.36:1,
   which fails WCAG's 3:1 for colour alone. The closing card's email is the one
   place a link runs inside prose, and it reads the same in both languages even
   though axe only counts the longer Spanish sentence as a text block. */
.close-card p a { text-decoration: underline; }
a:hover { color: var(--branddeep); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { display: block; }
.num { font-variant-numeric: tabular-nums; }
.one { white-space: nowrap; }
/* `white-space` is the shorthand that sets `text-wrap`, so any later rule
   setting `text-wrap` on its own quietly undoes the nowrap half of it. That is
   what `.step p { text-wrap: pretty }` below does to the Get paid caption,
   which carries `.one`: it computed `text-wrap: pretty` and was free to wrap,
   and only looked right because the words were short. A caption promised as
   one line keeps that promise. */
.step p.one { text-wrap: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: 0 40px; }

/* Line icons: one weight everywhere. */
.i { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { display: block; height: 36px; width: 144px; }
.logo .dark { display: none; }
.pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 16px; border-radius: 999px;
  font: 500 15px/24px "Geist", system-ui, sans-serif; white-space: nowrap;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.pill::after { content: ""; position: absolute; inset: -4px 0; }
.pill.quiet { border: 1px solid var(--line2); color: var(--brand); background: var(--surface); }
.pill.quiet:hover { background: var(--hoverwash); color: var(--branddeep); }

/* The join button: the one rose control on the page. */
.join {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 34px; border-radius: 999px;
  background: var(--rose); color: #fff;
  font: 600 17px/24px "Geist", system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(143, 33, 85, .28);
  transition: background 150ms, box-shadow 180ms ease, transform 160ms var(--rise);
}
.join:hover { background: var(--rosedeep); color: #fff; }
.join:active { transform: scale(.98); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--rest);
}

/* ---------- Hero ---------- */
.hero { padding-top: 56px; padding-bottom: 96px; overflow-x: clip; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  grid-template-areas: "copy stage" "strip strip";
  column-gap: 48px; row-gap: 56px; align-items: center;
}
.hero-copy { grid-area: copy; }
h1 { font-size: 56px; line-height: 64px; font-weight: 600; letter-spacing: -0.025em; }
:lang(es) h1 { font-size: 50px; line-height: 58px; }
.lede { text-wrap: pretty; margin-top: 24px; max-width: 440px; font-size: 20px; line-height: 32px; color: var(--ink2); }
/* The two amounts in the lede, what the customer saves and the most an
   affiliate earns: named before the band below spells both out, so they take
   the full ink the rest gives up. */
.lede b { font-weight: 600; color: var(--ink); }
/* The lede is two short paragraphs (Sean, 2026-10-19): the permit line as a
   subheading, a step larger and in full ink, then the offer in the body grey.
   The offer fills its lines; the subheading alone is balanced, so its two
   lines break evenly instead of leaving "building permit." on its own. Both
   balanced and in the same grey, the pair looked ragged (Sean, 2026-10-19).
   The hook's rules carry both classes so the .lede steps in the media queries
   below cannot shrink it back to body size. */
.lede.lede-hook { text-wrap: balance; max-width: 480px; font-size: 24px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.lede-hook + .lede { margin-top: 16px; }
.actions { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.free { display: flex; align-items: center; gap: 8px; padding-left: 2px; font-size: 15px; line-height: 24px; color: var(--ink2); }
.free .i { flex: none; width: 16px; height: 16px; stroke-width: 2.4; color: var(--money); }

/* The stage: the map, and an example affiliate page lying across its lower edge. */
.stage { grid-area: stage; position: relative; container-type: inline-size; }
.stage::before { content: ""; position: absolute; inset: -14% -10% -6% -10%; z-index: -1; pointer-events: none; background: radial-gradient(56% 56% at 58% 42%, var(--halo), transparent 72%); }
/* The page hangs below the map by 48px plus its last customer's row, so a third customer grows it downward and it covers no more of the map. */
.frame { --hang: calc(48px + 40px); position: relative; padding-bottom: var(--hang); }
.mapwrap { position: relative; }
.map {
  position: relative; aspect-ratio: 1000 / 704; overflow: hidden; isolation: isolate; contain: paint;
  border-radius: 28px; border: 1px solid var(--panel-line);
  background: radial-gradient(120% 100% at 72% 38%, var(--sea2) 0%, var(--sea) 70%);
  box-shadow: var(--panel-shadow);
}
.map::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--vignette); pointer-events: none; z-index: 1; }
.chart, .lights { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chart .cross { fill: none; stroke: var(--cross); stroke-width: 1; }
.chart .depth { fill: none; stroke: rgb(var(--shallow)); stroke-linejoin: round; }
.chart .land { fill: url(#lg); }
.chart .coast { fill: none; stroke: var(--coast); stroke-width: 1.6; stroke-linejoin: round; }
.chart .lg1 { stop-color: var(--land); }
.chart .lg2 { stop-color: var(--land2); }

/* The lights: one still layer, three that breathe. */
.lights-wrap { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.lights-wrap.on { opacity: 1; }
.lights { pointer-events: none; }
.tw { animation: breathe 7s ease-in-out infinite; will-change: opacity; }
.tw2 { animation-duration: 9.5s; animation-delay: -3.2s; }
.tw3 { animation-duration: 12s; animation-delay: -6.1s; }
@keyframes breathe { 0%, 100% { opacity: .18; } 50% { opacity: 1; } }

/* The foot under the map: the caption alone, at its right. */
.stage-foot { --ai: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding-right: var(--ai); }

/* Pins: a light, a label, and later a green tick. The CSS sides below are the designed ones; page.js (placePins) then gives each label
   the first side where it sits wholly inside the map, clear of the example page, the captions and the other pins, dropping the town
   when no side has room for it. */
.pin { --gap: 16px; position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 2; }
#pinA { --x: 33%; --y: 60%; }
#pinB { --x: 59.5%; --y: 46.5%; }
#pinC { --x: 33.5%; --y: 27.5%; }
.pin-dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pin-dot); box-shadow: 0 0 0 4px var(--pin-ring), 0 0 22px 3px rgba(var(--glow), .45);
}
.pin-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(var(--ripple), .8); opacity: 0; }
.pin-label {
  position: absolute; top: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: 999px; background: var(--pin-bg); border: 1px solid var(--pin-line);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .4);
  font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.pin[data-side="r"] .pin-label { left: var(--gap); }
.pin[data-side="l"] .pin-label { right: var(--gap); }
.pin.tight .pin-town { display: none; }
.pin-town { margin-left: 8px; color: var(--ink2); }
.pin-town::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px 0; border-radius: 50%; background: currentColor; opacity: .7; vertical-align: middle; }
.pin-ok {
  display: none; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin: 0 -4px 0 8px; border-radius: 50%;
  background: var(--money); color: var(--on-money);
}
.pin-ok svg { display: block; }
.pin.earns .pin-ok { display: inline-flex; }
.pin.earns .pin-dot { background: var(--money); box-shadow: 0 0 0 4px var(--money-wash), 0 0 22px 3px var(--money-glow); }

/* Before the story plays, the pins wait unlit. */

/* The example affiliate page. */
.aff {
  --cw: 344px; --ai: 24px;
  position: absolute; right: var(--ai); bottom: 0; z-index: 3; width: var(--cw); padding: 20px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift);
}
.f-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink2); }
.a-link {
  height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink);
}
.a-link .i { flex: none; width: 16px; height: 16px; color: var(--brand); }
.a-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); height: 61px; }
.a-sum { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -.02em; color: var(--money); transform-origin: right center; }
.a-rows { margin-top: 4px; }
.a-row { position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; height: 40px; }
.a-row + .a-row { border-top: 1px solid var(--linefaint); }
.mk { width: 8px; height: 8px; border-radius: 50%; background: var(--money); }
.d-main { display: flex; align-items: baseline; min-width: 0; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.d-sub { margin-left: 10px; font-size: 14px; font-weight: 400; color: var(--ink3); }
.d-amt { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink); text-align: right; }
.caption { margin-left: auto; text-align: right; font-size: 13px; line-height: 20px; color: var(--ink3); }

/* ---------- The deal band ---------- */
/* Two amounts and the customer's offer, held apart behind a divider. These were
   once three identical tiles, so the customer's $200 read as a third thing the
   affiliate earns: only the two green amounts are what the affiliate earns.
   The rule that governs them is a footnote in the footer (Sean, 2026-10-16:
   "a footnote ... somewhere near in the footer with a superscript"): a small
   raised 1 beside each green amount links down to it. Under the band it was a
   paragraph with a rule above it, and before that a cell of its own, where it
   was a ragged paragraph in the place of a number. */
.deal {
  grid-area: strip; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  grid-template-areas: "earn gets";
}
.deal-earn { grid-area: earn; padding: 0 56px 0 0; }
.deal-lab { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.rates { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.rate { display: flex; flex-direction: column; }
.rate-n { font-size: 50px; line-height: 58px; font-weight: 600; letter-spacing: -0.025em; color: var(--money); }
.rate-l { font-size: 17px; line-height: 26px; color: var(--ink2); }
/* The same 18px under both eyebrows, so the two labels and the two amounts
   below them share one horizontal rhythm across the divider. */
.deal-gets { grid-area: gets; padding: 0 0 0 56px; border-left: 1px solid var(--line); }
.gets-n { display: block; margin-top: 18px; font-size: 50px; line-height: 58px; font-weight: 600; letter-spacing: -0.025em; }
.gets-l { font-size: 17px; line-height: 26px; color: var(--ink2); }
/* In Spanish the unit is a word beside the number, as the app says it ("$200 de descuento"). At the number's own size it would run to
   about 400px and past its column, so it steps down to a caption size and keeps the number's baseline; it is one line like the rest. */
.gets-u { font-size: 22px; line-height: 1; font-weight: 500; letter-spacing: 0; color: var(--ink2); }

/* The footnote marker: a small raised numeral beside an amount, in the link colour, that jumps to its note in the footer. A finger
   cannot land on a 15px mark, so its touch box is an invisible ::before with negative insets (the shape qa/lib/tripwires.ts reads). */
.fnref { margin-left: 3px; font-size: 15px; line-height: 0; font-weight: 600; letter-spacing: 0; vertical-align: super; }
.fnref a { position: relative; }
.fnref a::before { content: ""; position: absolute; inset: -17px -19px; }

/* ---------- Sections ---------- */
/* Each section is a full-bleed band, and the change of tone between one
   band and the next is what separates them: no card, no border, no
   corners. The bands alternate paper / surface so every boundary is a
   change. The hero and the footer already carry their own tone, so the
   run reads head - hero - how - earn - faq - closing - foot with no two
   neighbours alike.

   Which sections get the lighter tone is not free: the plan switcher's
   thumb and the Replay button are painted --surface, so a --surface band
   behind them would swallow them. That keeps #earn on paper and sets the
   whole alternation: #how and #faq take the surface, #earn and the
   closing stay on paper. */
.sec { padding: 96px 0; }
#how, #faq { background: var(--surface); }
h2 { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.sec h2 { margin-bottom: 48px; }
h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.005em; }

/* Entrance polish: a small rise, once, when a block comes into view. */
.rv { transition: opacity 560ms ease calc(var(--i, 0) * 80ms), transform 640ms var(--rise) calc(var(--i, 0) * 80ms); }
.play .rv:not(.in) { opacity: 0; transform: translateY(14px); }

/* The illustration panels: the map's chart paper, in small. */
.ill {
  position: relative; container-type: inline-size; height: 224px; overflow: hidden;
  border-radius: 18px; background: var(--ill); border: 1px solid var(--line); box-shadow: var(--rest);
}
.ill::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ill-cross);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M20 24h8M24 20v8' stroke='black' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 0 0 / 48px 48px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M20 24h8M24 20v8' stroke='black' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 0 0 / 48px 48px;
}
.ill > * { position: relative; }
.ill-card { background: var(--ill-card); border: 1px solid var(--ill-line); border-radius: 14px; box-shadow: 0 10px 24px -12px rgba(var(--shadow-rgb), .3); }

/* How it works: three small scenes told as one story. Get your code (the affiliate's own code locks in, tile by tile,
   and its link writes itself out), Share (the link is copied and travels down to a business, which picks up the welcome
   offer), Get paid (the first and the sixth monthly payment tick off, then the total counts up into a payout to the bank).
   page.js adds each scene's classes in turn (they add up), and the step's number fills as its scene starts. A scene
   holding every class is the finished picture, which is also what shows with no script or with reduced motion: every
   waiting state below lives under html.play. Side by side the three play one after another; stacked, each plays as it
   comes into view. */
.how-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.sec .how-hd h2 { margin-bottom: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step-h { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.step-n {
  flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--brand); color: var(--on-fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 20px; font-weight: 600;
  transition: background-color 320ms ease, color 320ms ease;
}
.play .step:not(.on) .step-n { background: var(--brandwash); color: var(--brand); }
.step p { margin-top: 8px; max-width: 360px; color: var(--ink2); font-size: 16px; line-height: 26px; text-wrap: pretty; }

/* Each scene's parts rise in together, a beat apart, before its story starts. */
@keyframes ill-in { from { opacity: 0; transform: translateY(12px); } }
.play .ill:not(.in) > :not(.sh-token) { opacity: 0; }
.play .ill.in > :not(.sh-token) { animation: ill-in 560ms var(--rise) backwards; }
.play .ill.in > :nth-child(2) { animation-delay: 60ms; }
.play .ill.in > :nth-child(3) { animation-delay: 120ms; }
.play .ill.in > :nth-child(4) { animation-delay: 180ms; }
/* A replay starts from the waiting picture at once, not by running everything backwards. */
.steps.snap *, .steps.snap *::after { transition: none !important; animation: none !important; }

/* ---- Step 1: Get your code. Finished = the code and its link, ready. ---- */
.ill-code { display: grid; place-items: center; }
.cd { width: min(280px, calc(100cqw - 32px)); padding: 14px; display: grid; gap: 10px; }
.cd-top { display: flex; align-items: center; justify-content: space-between; height: 20px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink2); }
.cd-ok {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-fill); transition: opacity 200ms ease, transform 440ms var(--spring);
}
.cd-ok .i { width: 11px; height: 11px; stroke-width: 3; }
.cd-tiles { display: flex; gap: 6px; }
.cd-tiles i {
  flex: 1 1 0; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--ill-line);
  font-style: normal; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); transition: color 120ms ease;
}
.cd-link {
  height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 10px; background: var(--brandwash);
  font-size: clamp(11px, 3.9cqw, 13px); line-height: 20px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.cd-link > .i { flex: none; width: 16px; height: 16px; color: var(--brand); }
.cd-link > span { clip-path: inset(0 0 0 0); transition: clip-path 520ms steps(16, jump-start); }
.cd-link b { font-weight: 600; color: var(--brand); }
/* The code is drawn, not typed: each tile shuffles through a few characters (page.js) and locks in, left to right. A tile
   waits blank until its turn, shuffles in a quieter ink, and lands with a small press of the brand colour. */
.play .ill-code:not(.link) .cd-tiles i:not(.spin):not(.set) { color: transparent; }
.cd-tiles i.spin { color: var(--ink3); }
.play .ill-code .cd-tiles i.set { animation: cd-set 460ms var(--spring); }
@keyframes cd-set { 0% { transform: scale(.88); box-shadow: inset 0 0 0 1.5px var(--brand); } }
/* Then the link that carries it writes itself out, and the card is ready. */
.play .ill-code:not(.link) .cd-link > span { clip-path: inset(0 100% 0 0); }
.play .ill-code:not(.ok) .cd-ok { opacity: 0; transform: scale(.5); }

/* ---- Step 2: Share your link. Finished = copied, sent, and the business holds the offer. ---- */
.ill-share .sh-link {
  position: absolute; left: 20px; right: 20px; top: 32px; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px;
  font-size: clamp(11px, 3.9cqw, 13px); line-height: 20px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.sh-link > .i { flex: none; width: 16px; height: 16px; color: var(--brand); }
.sh-url { flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* A narrow panel (three across on a window near 900px, or a small phone) gives the address the link icon's room. */
@container (max-width: 310px) {
  .ill-share .sh-link { left: 12px; right: 12px; padding-left: 12px; }
  .sh-link > .i, .cd-link > .i { display: none; }
}
.sh-copy {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-fill);
  transition: background-color 200ms ease, color 200ms ease, transform 140ms ease-out;
}
.sh-copy .i { position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; transition: opacity 180ms ease, transform 360ms var(--spring); }
.sh-copy .i-copy { opacity: 0; transform: scale(.5); }
.sh-copy .i-ok { stroke-width: 2.4; }
.play .ill-share:not(.copied) .sh-copy { background: var(--brandwash); color: var(--brand); }
.play .ill-share:not(.copied) .sh-copy .i-copy { opacity: 1; transform: none; }
.play .ill-share:not(.copied) .sh-copy .i-ok { opacity: 0; transform: scale(.5); }
.play .ill-share.press:not(.copied) .sh-copy { transform: scale(.88); }

/* The way down: a dotted track, filled behind the link as it travels. */
.sh-wire {
  position: absolute; left: 50%; top: 76px; width: 2px; height: 64px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--line2) 0 4px, transparent 4px 8px);
}
.sh-wire i { position: absolute; inset: 0; border-radius: 2px; background: var(--brand); transform-origin: 50% 0; transition: transform 540ms cubic-bezier(.65, 0, .35, 1); }
.play .ill-share:not(.send) .sh-wire i { transform: scaleY(0); }
.sh-token {
  position: absolute; left: 50%; top: 76px; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--on-fill);
  box-shadow: 0 6px 14px -4px rgba(var(--shadow-rgb), .45); opacity: 0; pointer-events: none;
}
.sh-token .i { width: 14px; height: 14px; stroke-width: 2.2; }
.play .ill-share.send:not(.got) .sh-token { animation: sh-go 540ms cubic-bezier(.65, 0, .35, 1) both; }
@keyframes sh-go {
  0% { opacity: 0; transform: translateY(0) scale(.7); }
  16% { opacity: 1; transform: translateY(8px) scale(1); }
  84% { opacity: 1; transform: translateY(56px) scale(1); }
  100% { opacity: 0; transform: translateY(64px) scale(.7); }
}

.sh-biz {
  position: absolute; top: 140px; left: 0; right: 0; width: max-content; max-width: calc(100% - 40px); margin: 0 auto;
  height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 12px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.sh-biz > .i { flex: none; width: 18px; height: 18px; color: var(--brand); }
.sh-tag {
  position: absolute; right: -10px; top: -13px; height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center;
  background: var(--brand); color: var(--on-fill); font-size: 12.5px; line-height: 20px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 12px -6px rgba(var(--shadow-rgb), .45);
  transition: opacity 220ms ease, transform 520ms var(--spring);
}
.play .ill-share:not(.got) .sh-tag { opacity: 0; transform: translateY(6px) scale(.8); }
.play .ill-share.got .sh-biz { animation: sh-pop 460ms var(--spring); }
@keyframes sh-pop { 40% { transform: scale(1.04); } }

/* ---- Step 3: Get paid. Finished = the two payments that matter, the first and the sixth, and the total in the bank. ---- */
.pd-track { position: absolute; top: 32px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }
.pd-dot {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-fill); font-size: 14px; line-height: 20px; font-weight: 600;
  transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.pd-dot.pd-last { background: var(--money); color: var(--on-money); }
.pd-dot b { position: absolute; font-weight: 600; opacity: 0; transition: opacity 160ms ease; }
.pd-dot .i { width: 16px; height: 16px; stroke-width: 2.4; transition: opacity 160ms ease, transform 400ms var(--spring); }
.pd-seg { position: relative; flex: none; width: 48px; height: 2px; margin: 0 6px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.pd-seg i { position: absolute; inset: 0; background: var(--brand); transform-origin: 0 50%; transition: transform 300ms cubic-bezier(.45, 0, .55, 1); }
.play .ill-paid:not(.p1) .pd-dot:nth-child(1),
.play .ill-paid:not(.p2) .pd-dot:nth-child(3) { background: var(--ill-card); color: var(--ink3); box-shadow: inset 0 0 0 1.5px var(--line2); }
.play .ill-paid:not(.p1) .pd-dot:nth-child(1) b,
.play .ill-paid:not(.p2) .pd-dot:nth-child(3) b { opacity: 1; }
.play .ill-paid:not(.p1) .pd-dot:nth-child(1) .i,
.play .ill-paid:not(.p2) .pd-dot:nth-child(3) .i { opacity: 0; transform: scale(.4); }
.play .ill-paid:not(.p1) .pd-seg:nth-child(2) i { transform: scaleX(0); }
.pd-cap { position: absolute; top: 72px; left: 0; right: 0; text-align: center; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink2); }

.pd-pay {
  position: absolute; left: 20px; right: 20px; top: 132px; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 10px;
  overflow: hidden; border-color: var(--money-edge); transition: border-color 320ms ease;
}
.pd-bank {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--money-wash); color: var(--money); transition: background-color 320ms ease, color 320ms ease;
}
.pd-bank > .i { width: 20px; height: 20px; }
.pd-ok {
  position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--money); color: var(--on-money); box-shadow: 0 0 0 2px var(--ill-card);
  transition: opacity 200ms ease, transform 460ms var(--spring);
}
.pd-ok .i { width: 10px; height: 10px; stroke-width: 3.2; }
.pd-to { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.pd-amt { flex: none; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--money); transition: color 320ms ease; }
/* One sheen crosses the payout as the money arrives. */
.pd-pay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 25%, var(--money-wash) 50%, transparent 75%);
}
.play .ill-paid:not(.pay) .pd-pay { border-color: var(--ill-line); }
.play .ill-paid:not(.pay) .pd-bank { background: var(--paper); color: var(--ink3); }
.play .ill-paid:not(.pay) .pd-amt { color: var(--ink3); }
.play .ill-paid:not(.paid) .pd-ok { opacity: 0; transform: scale(.4); }
.play .ill-paid.pay .pd-pay::after { animation: pd-sheen 1100ms cubic-bezier(.4, 0, .2, 1); }
@keyframes pd-sheen { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(100%); } }
.play .ill-paid.p1 .pd-dot:nth-child(1),
.play .ill-paid.p2 .pd-dot:nth-child(3) { animation: pd-pop 420ms var(--spring); }
@keyframes pd-pop { 0% { transform: scale(.86); } }

/* What you earn: one stage and one example.
   The stage is a phone showing the affiliate's own page, as the app prints it: the four numbers and the Paying customers list. One customer
   moves through it (a number, never a name), and a Monthly / Yearly switch replays it.
   An affiliate gets no notification and never sees a customer's name, so the phone shows neither.
   Only transform and opacity move (the new row's room opens by grid track). The finished state is the default look; every waiting state lives under html.play. */
#earn { --ep-pad: 40px; }
.ep {
  --sw-track: rgba(61, 85, 115, .04); --sw-line: rgba(61, 85, 115, .14); --sw-thumb: #fffdf9;
  --sw-thumb-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(43, 41, 36, .14), 0 6px 14px -6px rgba(43, 41, 36, .24);
  --ph-edge: rgba(14, 20, 30, .4); --ph-btn: #39424f;
  --ph-drop: 0 48px 80px -32px rgba(10, 16, 26, .55), 0 18px 36px -14px rgba(10, 16, 26, .34);
  --spr-in: cubic-bezier(.2, 1.5, .4, 1);
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ep {
    --sw-track: rgba(0, 0, 0, .3); --sw-line: rgba(255, 255, 255, .07); --sw-thumb: #2f3c50;
    --sw-thumb-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 1px 2px rgba(0, 0, 0, .5), 0 6px 14px -6px rgba(0, 0, 0, .6);
    --ph-edge: rgba(255, 255, 255, .17); --ph-btn: #252d39;
    --ph-drop: 0 48px 80px -32px rgba(0, 0, 0, .75), 0 18px 36px -14px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] .ep {
  --sw-track: rgba(0, 0, 0, .3); --sw-line: rgba(255, 255, 255, .07); --sw-thumb: #2f3c50;
  --sw-thumb-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 1px 2px rgba(0, 0, 0, .5), 0 6px 14px -6px rgba(0, 0, 0, .6);
  --ph-edge: rgba(255, 255, 255, .17); --ph-btn: #252d39;
  --ph-drop: 0 48px 80px -32px rgba(0, 0, 0, .75), 0 18px 36px -14px rgba(0, 0, 0, .55);
}

/* A damped spring (about 8 percent overshoot) for a chip taking its place; the cubic-bezier above is the fallback. */
@supports (transition-timing-function: linear(0, 1)) {
  .ep {
    --spr-in: linear(0, 0.03, 0.107, 0.214, 0.337, 0.464, 0.586, 0.699, 0.798, 0.881, 0.948, 1, 1.037, 1.062, 1.077, 1.083, 1.083, 1.078, 1.07, 1.06, 1.049, 1.039, 1.029, 1.02, 1.013, 1.007, 1.002, 0.998, 1);
  }
}

/* The copy: a title, the plan switch, the caption list, two small facts. */
/* The heading sits inside the copy column and starts on the handset's top
   line. The column's five blocks keep their own gaps (40 / 32 / 28 / 36)
   and nothing more: the handset's extra height stays below the example
   rather than being shared out between the blocks, which opened a wide gap
   under the sentence (Sean, 2026-10-15: "this gap it looks bad"). */
.ep-copy { grid-column: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 0; }
.ep-copy > :first-child { margin-top: 0; }
.ep-hd { margin-bottom: 40px; }
.ep-hd h2 { margin-bottom: 0; }
/* The switch and Replay are 44px tall, the least a thumb needs, which makes the row 4px taller than the 48px the column was built around.
   The 2px margins above and below take that back, so the heading, the sentence and the handset stay exactly where they were. */
.ep-ctl { display: flex; align-items: center; gap: 16px; margin: -2px 0; }
.ep-sw {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none;
  margin: 0; padding: 4px; border: 0; min-inline-size: 0; border-radius: 999px;
  background: var(--sw-track); box-shadow: inset 0 0 0 1px var(--sw-line);
}
.ep-sw::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: var(--sw-thumb); box-shadow: var(--sw-thumb-shadow);
  transition: transform 480ms cubic-bezier(.3, 1.22, .5, 1);
}
.ep:has(#plan-y:checked) .ep-sw::before { transform: translateX(100%); }
.ep-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ep-sw label {
  position: relative; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  font: 500 15px/24px "Geist", system-ui, sans-serif; color: var(--ink2); transition: color 200ms ease;
}
.ep-sw label:hover { color: var(--ink); }
.ep-sw input:checked + label { color: var(--ink); }
.ep-sw input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The column holds four things now, each plainly a different size: the
   heading, the control, one sentence, three facts. It held seven, and the
   caption list retold the story the notifications were already telling.
   The gaps run 32 / 28 / 36 so the column reads as one block beside the
   handset rather than four islands. */
.ep-lists { display: grid; margin-top: 32px; }
.ep-say {
  grid-area: 1 / 1; min-width: 0; max-width: 24em;
  font-size: 22px; line-height: 34px; color: var(--ink2); text-wrap: balance;
  animation: ep-say-in 280ms var(--rise) both;
}
/* The sentence lifts the three words a reader is scanning for — which
   payment, and how much — the same way .lede does in the hero. */
.ep-say b { font-weight: 600; color: var(--ink); }
@keyframes ep-say-in { from { opacity: 0; transform: translateY(8px); } }
.ep:has(#plan-y:checked) .ep-m, .ep:not(:has(#plan-y:checked)) .ep-y { display: none; }

.ep-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; font-size: 18px; line-height: 28px; color: var(--ink2); }
.ep-foot li { display: flex; align-items: center; gap: 8px; }
.ep-foot .i { flex: none; width: 18px; height: 18px; stroke-width: 2.4; color: var(--money); }

/* Replay: only where the story plays at all. */
.ep-replay {
  display: none; align-items: center; justify-content: center; gap: 8px; flex: none; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line2); color: var(--ink2);
  font: 500 13px/20px "Geist", system-ui, sans-serif; white-space: nowrap;
  transition: color 120ms, background-color 120ms, transform 160ms var(--rise);
}
.ep-replay::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.play .ep-replay { display: inline-flex; }
.ep-replay:hover { color: var(--ink); background: var(--sw-track); }
.ep-replay:active { transform: scale(.96); }

/* The field: the light behind the phone, a faint chart grid that fades out from it, and the phone itself, cropped by the card's lower edge. */
.ep-field {
  grid-column: 2; position: relative; min-width: 0; font-size: 13px;
  display: flex; justify-content: center; align-items: center;
  min-height: 43.4em;
}
.ep-field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 52% at 50% 34%, rgba(var(--glow), .38), rgba(var(--glow), 0) 76%);
}
.ep-bg {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: radial-gradient(72% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, 0) 80%); mask: radial-gradient(72% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, 0) 80%);
}
.ep-bg i {
  position: absolute; inset: 0; background: var(--ill-cross);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M20 24h8M24 20v8' stroke='black' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 0 0 / 48px 48px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M20 24h8M24 20v8' stroke='black' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 0 0 / 48px 48px;
}

/* The phone: flat, one dark glass, everything in em so it scales as a whole. The screen takes the page's own tokens, so it follows the
   reader's light or dark theme exactly as the real page does. */
.ph {
  position: relative; z-index: 1; flex: none; width: 20em; height: 43.4em; padding: .42em; border-radius: 2.9em;
  background: #06090d;
  box-shadow: 0 0 0 1px var(--ph-edge), inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 0 0 .2em #0e131a, var(--ph-drop);
  transition: transform 900ms var(--rise), opacity 340ms ease;
}
.ph::before, .ph::after { content: ""; position: absolute; width: .13em; border-radius: .13em; }
.ph::before {
  left: -.13em; top: 7em; height: 10em;
  background: linear-gradient(to bottom, var(--ph-btn) 0 1.6em, transparent 1.6em 3.1em, var(--ph-btn) 3.1em 6.1em, transparent 6.1em 7.1em, var(--ph-btn) 7.1em 10em);
}
.ph::after {
  right: -.13em; top: 10.4em; height: 8.6em;
  background: linear-gradient(to bottom, var(--ph-btn) 0 4.9em, transparent 4.9em 6.5em, var(--ph-btn) 6.5em 8.6em);
}
.play .ep:not(.go) .ph { opacity: 0; transform: translateY(2.4em); }
.ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 2.48em; background: var(--paper); color: var(--ink); }
.ph-screen p { margin: 0; }
.ph-island { position: absolute; top: .72em; left: 50%; width: 5.7em; height: 1.68em; margin-left: -2.85em; border-radius: .84em; background: #000; }
.ph-bar { position: absolute; top: 1.08em; left: 2.1em; right: 1.7em; height: 1.2em; display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.ph-bar svg { display: block; height: .72em; width: auto; fill: currentColor; }
.ph-bar .r { display: flex; align-items: center; gap: .34em; }
.ph-bar .wifi { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ph-clock { font-size: .98em; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }

/* The affiliate's page, scaled to the glass: its title, then the stack for the chosen plan. Both stacks sit in the same place and the switch
   shows one. Every line is one line at every width: the sizes are em, so a narrower phone scales them all together and nothing is ever cut. */
.pa { position: absolute; left: .8em; right: .8em; top: 3.7em; bottom: 0; }
.pa-title { display: flex; align-items: center; gap: .4em; font-size: 1.2em; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
/* The brand's P beside the title, drawn in the page's brand blue so it reads on either theme (the same shape as /brand/permitplotter-p.png). */
.pa-logo { flex: none; height: 1.15em; width: auto; fill: var(--brand); }
.ph-stack { position: absolute; left: 0; right: 0; top: 2.9em; bottom: 0; transition: opacity 240ms ease 80ms, visibility 0s linear 0s; }
.ep:has(#plan-y:checked) .ph-m, .ep:not(:has(#plan-y:checked)) .ph-y { opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms; }

/* The four numbers, the real tiles: a card each, label over figure. */
.pa-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55em; }
.pa-tile { min-width: 0; padding: .7em .85em .75em; border-radius: 1.05em; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--rest); }
.pa-tile dt { font-size: .76em; line-height: 1.4; color: var(--ink3); }
.pa-tile dd { margin-top: .08em; font-size: 1.4em; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--ink); transform-origin: 0 50%; }
.ph-screen .pa-h { margin: 1.1em 0 .6em; font-size: 1.04em; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }

/* The Paying customers list. A row is a number, the plan, how often it pays and the month it started; a chip says where its earning stands:
   Paying (nothing earned yet), On hold, On its way, then Half paid (a monthly customer: the first half is in the bank, the sixth payment has
   not come) or Paid in a month (a yearly customer: the whole month). The chip sits beside the number so the second line, the longest, has
   the row's whole width. The newest customer's row has its own room, which opens when they pay. */
.pa-list { overflow: hidden; border-radius: 1.05em; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--rest); }
/* The Payouts card, as the page shows it once Stripe is set up: a title, one green line, and View payouts as the app draws it. */
.pa-card { margin-top: .55em; padding: .9em .95em .95em; border-radius: 1.05em; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--rest); }
.pa-ct { font-size: .96em; line-height: 1.5; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pa-on { display: flex; align-items: center; gap: .5em; margin-top: .25em; font-size: .84em; line-height: 1.5; font-weight: 500; color: var(--sagedeep); }
.pa-ok { flex: none; width: 1.05em; height: 1.05em; }
/* A link out to Stripe, as the app draws it: navy words and an arrow pointing up and out, not a
   second navy button beside the share card's Copy (Sean, 2026-10-19: it "looks like the copy button"). */
.pa-btn { margin-top: .5em; display: flex; align-items: center; gap: .35em; color: var(--brand); font-size: .8em; line-height: 1.5; font-weight: 600; }
.pa-out { width: .85em; height: .85em; flex: none; }
.pa-new { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 560ms var(--rise); }
.pa-clip { min-height: 0; overflow: hidden; }
.pa-new.is-off { grid-template-rows: 0fr; }
.pa-body { padding: .78em .9em .82em; transition: opacity 360ms ease, transform 560ms var(--rise); }
.pa-body.sep { border-bottom: 1px solid var(--line); }
.pa-new.is-off .pa-body { opacity: 0; transform: translateY(-.7em); }
.pa-top { display: flex; align-items: center; gap: .5em; }
.pa-name { flex: none; font-size: .92em; line-height: 1.5; font-weight: 600; color: var(--ink); }
.pa-chips { display: grid; flex: none; }
.pa-chip {
  grid-area: 1 / 1; justify-self: start; padding: .1em .72em .14em; border-radius: 99px; background: var(--hoverwash); color: var(--ink2);
  font-size: .74em; line-height: 1.5; font-weight: 500; opacity: 0; transform: scale(.92);
  transition: opacity 220ms ease, transform 420ms var(--spr-in);
}
.pa-chip.c-way { background: var(--brandwash); color: var(--branddeep); }
.pa-chip.c-paid, .pa-chip.c-half { background: var(--sagewash); color: var(--sagedeep); }
[data-s="paying"] .c-paying, [data-s="hold"] .c-hold, [data-s="way"] .c-way, [data-s="half"] .c-half, [data-s="paid"] .c-paid { opacity: 1; transform: none; }
.pa-amt { margin-left: auto; flex: none; font-size: .92em; line-height: 1.5; font-weight: 600; color: var(--ink); transition: opacity 240ms ease, transform 420ms var(--rise); }
.pa-new[data-s="paying"] .pa-amt { opacity: 0; transform: translateY(.3em); }
.pa-sub { margin-top: .05em; font-size: .78em; line-height: 1.5; color: var(--ink3); }
@keyframes pa-pop { 0% { transform: scale(.9); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
.play .pa-new[data-s="half"] .c-half, .play .pa-new[data-s="paid"] .c-paid { animation: pa-pop 560ms cubic-bezier(.3, 1.3, .5, 1); }
.pa-list.snap, .pa-list.snap * { transition: none; animation: none; }
.ph-home { position: absolute; left: 50%; bottom: .8em; width: 8em; height: .36em; margin-left: -4em; border-radius: .36em; background: var(--ink); opacity: .85; }

/* The worked example: one line of sums. The total is the one green figure and counts up once. */
/* The example is pushed to the foot of its column, so the copy meets the
   handset at the top AND at the bottom and the slack falls above the
   rule, where the rule already explains it. 52px is the floor. */
.ep-eq { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.ep-eq-lab { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.eq { margin-top: 14px; display: flex; align-items: baseline; gap: 16px 22px; }
.eq-t { min-width: 0; }
.eq-n, .eq-op { display: block; font-size: 30px; line-height: 38px; letter-spacing: -0.02em; }
.eq-n { font-weight: 600; color: var(--ink); }
.eq-op { font-weight: 400; color: var(--ink3); }
.eq-l { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink2); }
.eq-sum .eq-n { font-size: 38px; line-height: 38px; color: var(--money); }
.eq-sum .eq-l { margin-top: 5px; }
.eq > * { transition: opacity 420ms ease calc(var(--k, 0) * 90ms + 160ms), transform 520ms var(--rise) calc(var(--k, 0) * 90ms + 160ms); }
.play .sum:not(.in) .eq > * { opacity: 0; transform: translateY(10px); }

/* The sum steps down a size when its card is narrower, then stands as a ledger: operators in a left gutter, figures in one column. */
@container (max-width: 759px) {
  .eq { display: grid; align-items: start; grid-template-columns: 32px minmax(0, 1fr); gap: 24px 8px; }
  .eq > :nth-child(1) { grid-area: 1 / 2; }
  .eq > :nth-child(2) { grid-area: 2 / 1; }
  .eq > :nth-child(3) { grid-area: 2 / 2; }
  .eq > :nth-child(4) { grid-area: 3 / 1; }
  .eq > :nth-child(5) { grid-area: 3 / 2; }
  .eq-n { font-size: 40px; line-height: 48px; }
  .eq-op { font-size: 32px; line-height: 48px; }
  .eq-sum .eq-n { font-size: 48px; line-height: 56px; }
}
@container (max-width: 279px) {
  .eq-n { font-size: 36px; line-height: 44px; }
  .eq-op { line-height: 44px; }
  .eq-sum .eq-n { font-size: 40px; line-height: 48px; }
}

/* The copy column is 430px between 901 and 1180 (the card is wider than that, so the ledger below does not apply yet): the sum steps down
   a size so its five parts stay on one line, apart from each other. */
@media (min-width: 901px) and (max-width: 1180px) {
  .eq { gap: 12px 14px; }
  .eq-n, .eq-op { font-size: 24px; line-height: 32px; }
  .eq-sum .eq-n { font-size: 30px; line-height: 32px; }
}

/* Narrower: the phone column shrinks, then the phone moves between the switch and the captions. */
@media (max-width: 1180px) {
  #earn { --ep-pad: 40px; }
  .ep { grid-template-columns: minmax(0, 430px) minmax(0, 320px); column-gap: 56px; }
  .ep-field { font-size: 14px; }
  .sum h3 { font-size: 24px; line-height: 32px; }
  .ep-say { font-size: 19px; line-height: 31px; }
  .ep-foot { font-size: 17px; line-height: 26px; }
}
/* Stacked, the copy keeps the page's own left edge, the one the hero, How it
   works and Questions start on: the sections lost their cards on 2026-10-15
   ("surfaces for pictures, not for text"), and an inset left over from the
   card set this block 20 to 32px further in than the rest of the page. */
@media (max-width: 900px) {
  #earn { --ep-pad: 0px; }
  .ep-field { overflow: hidden; }
  .ep-field::before { background: radial-gradient(46% 40% at 50% 44%, rgba(var(--glow), .38), rgba(var(--glow), 0) 76%); }
  .ep { grid-template-columns: minmax(0, 1fr); }
  .ep-copy { display: contents; }
  .ep-copy > *, .ep-field { grid-column: 1; }
  .ep-hd { order: 1; margin: 0 var(--ep-pad); }
  .ep-ctl { order: 3; margin: 22px var(--ep-pad) -2px; }
  .ep-field { order: 4; margin-top: 8px; padding-top: 32px; font-size: min(15px, calc((100cqw - 32px) / 20)); min-height: calc(32px + 43.4em + 56px); }
  .ep-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; z-index: 3; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--ill)); }
  .ep-lists { order: 5; margin: 8px var(--ep-pad) 0; }
  .ep-foot { order: 6; margin: 0 var(--ep-pad); padding-top: 20px; }
  /* Stacked, the copy column is display:contents and every child names its
     place, so the example has to name one too or it lands first. */
  .ep-eq { order: 7; margin: 28px var(--ep-pad) 32px; padding-top: 24px; }
}
/* No corner radius here any more: .ep is not a card, and with the inset gone
   its overflow:hidden would round off the first letter of the heading. */
@media (max-width: 760px) {
  .sum h3 { font-size: 20px; line-height: 28px; }
  .ep-say { font-size: 18px; line-height: 29px; }
  .ep-lists { margin-bottom: 24px; }
  .sum { padding: var(--ep-pad); }
  .eq { margin-top: 24px; }
}
@media (max-width: 560px) {
  .ep-sw { display: grid; flex: 1 1 auto; }
}
@container (max-width: 480px) {
  .ep-replay { width: 44px; padding: 0; gap: 0; font-size: 0; }
}
@media (max-width: 400px) {
  .ep-sw label { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-sw::before, .ph-stack, .pa-new, .pa-body, .pa-chip, .pa-amt { transition-duration: 0s; transition-delay: 0s; }
  .ep-say { animation: none; }
}

/* Who can join: four facts in one row, the same card as the three numbers. */
/* Questions: one accordion, closed until opened. The heading keeps the
   terms link under it, so its column carries the one thing the answers
   keep pointing at, and its text sits on the first question's line
   rather than hanging off the rule above it. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 48px; align-items: start; }
.faq-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; }
.faq-grid h2 { margin-bottom: 0; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.more .i { width: 18px; height: 18px; transition: transform 200ms var(--rise); }
.more:hover .i { transform: translateX(3px); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
  min-height: 72px; padding: 20px 0; font-size: 18px; line-height: 32px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { color: var(--branddeep); }
/* The chevron alone, no disc: a small mark in the muted ink that turns
   when the answer opens. The disc read as a button from another kit. */
.faq summary::after {
  content: ""; order: 2; flex: none; width: 9px; height: 9px; margin: -5px 14px 0 0;
  border-right: 2px solid var(--ink3); border-bottom: 2px solid var(--ink3); border-radius: 1px;
  transform: rotate(45deg); transition: transform 320ms var(--rise), border-color 200ms ease;
}
.faq summary:hover::after { border-color: var(--branddeep); }
.faq details[data-s="open"] summary::after, .faq details[open]:not([data-s]) summary::after { transform: translateY(5px) rotate(225deg); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 48px 24px 0; color: var(--ink2); max-width: var(--measure); text-wrap: pretty; }
.faq-a q { quotes: "\201C" "\201D"; color: var(--ink); font-weight: 500; }
.faq-a .say-line { display: block; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--brandwash); color: var(--branddeep); font-weight: 500; }

/* Closing: the heading, the email line and Apply now stacked on the page's
   left edge at every width, as in the hero (Sean, 2026-10-19). Side by side,
   the button sat at the far right of a wide screen with an empty gap between
   it and the heading. */
.closing { padding-bottom: 104px; }
.close-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.close-card h2 { margin: 0; font-size: 36px; line-height: 44px; }
.close-card p { margin-top: 8px; color: var(--ink2); }

/* ---------- Footer ---------- */
.site-foot { background: var(--surface); border-top: 1px solid var(--line); }
/* The small print: the note the raised 1 beside each amount jumps to. Quiet and small, a real paragraph (it wraps), and when it is the
   jump's target it takes the full ink so the reader sees which words they landed on. */
.fn { max-width: var(--measure); padding-top: 24px; font-size: 13px; line-height: 20px; color: var(--ink3); text-wrap: pretty; }
.fn sup { margin-right: 4px; font-size: 11px; line-height: 0; font-weight: 600; }
/* The footnote's second sentence stands on its own line and never wraps
   (Sean, 2026-10-17). `text-wrap` as well as `white-space`, because
   `white-space` is only the shorthand and a later `text-wrap` would undo half
   of it. The words are short enough to hold one line in the narrowest box the
   page has: 262px of English and 250px of Spanish at 13px, inside the 288px
   the footer leaves at a 320px screen. Lengthen either and it wraps again. */
.fn-2 { display: block; white-space: nowrap; text-wrap: nowrap; }
.fn:target { color: var(--ink); }
.foot-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.foot-links { display: flex; align-items: center; gap: 24px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--ink2); white-space: nowrap; }
.foot-links a:hover { color: var(--ink); }
.lang { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.lang a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink2); white-space: nowrap;
}
.lang a[aria-current] { background: var(--ink); color: var(--paper); }

/* ---------- Wider stages: everything on the stage grows a step ---------- */
@container (min-width: 640px) {
  .aff { --cw: 360px; --ai: 28px; }
  .stage-foot { --ai: 28px; }
}
@container (min-width: 760px) {
  .aff { --cw: 388px; --ai: 32px; padding: 24px; }
  .stage-foot { --ai: 32px; }
  .a-link { height: 48px; font-size: 16px; }
  .a-total { height: 65px; }
  .a-sum { font-size: 36px; line-height: 44px; }
  .a-row { height: 44px; }
  .frame { --hang: calc(48px + 44px); }
  .d-main { font-size: 16px; }
  .d-sub { font-size: 15px; }
  .d-amt { font-size: 16px; }
  .caption { font-size: 14px; }
  .pin { --gap: 20px; }
  .pin-label { height: 38px; padding: 0 16px; font-size: 15px; }
  .pin-ok { width: 22px; height: 22px; margin-right: -8px; }
  .pin-dot { left: -6px; top: -6px; width: 12px; height: 12px; }
}

/* ---------- Narrower stages: smaller card, shorter pin labels ---------- */
@container (max-width: 560px) {
  .stage-foot { --ai: 16px; }
  .aff { --cw: 300px; --ai: 16px; padding: 16px; }
  .a-link { height: 40px; font-size: 14px; }
  .a-total { height: 57px; }
  .a-sum { font-size: 28px; line-height: 36px; }
  .a-row { height: 36px; }
  .frame { --hang: calc(48px + 36px); }
}
@container (max-width: 480px) {
  /* On a small map the Pool company pin stands further east along the South Fork (still East Hampton), so the long Spanish
     "Empresa de piscinas" has room beside it. */
  #pinB { --x: 66%; --y: 43%; }
  .pin-town { display: none; }
  .pin-label { height: 28px; padding: 0 10px; font-size: 12.5px; }
  .pin-ok { width: 16px; height: 16px; }
}
/* On a phone the page lies across the map's lower edge, below it, one column wide.
   It shares the column's own edges: inset by 12px it missed the headline, the
   button and the map by that much, which is all a reader sees (Sean, 2026-10-16:
   "better align ... the hero for mobile"). The overlap deepens so the page reads
   as sitting ON the map rather than bumping it. */
@container (max-width: 520px) {
  .frame { padding-bottom: 0; }
  .aff { position: relative; right: auto; bottom: auto; width: auto; margin: -56px 0 0; }
  .stage-foot { padding-right: 0; }
}

/* The smallest phones: the page's link and its rows step down a size so every line keeps its own room ("Office yearly" never meets
   "$999", the address never meets the box's edge). */
@container (max-width: 360px) {
  .aff { padding: 14px; }
  .a-link { padding: 0 12px; font-size: 13px; }
  .a-link .i { display: none; }
  .d-main { font-size: 14px; }
  .d-sub { margin-left: 6px; font-size: 13px; }
  .d-amt { font-size: 14px; }
}

@media (max-width: 1199px) {
  .hero-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 40px; }
  h1 { font-size: 48px; line-height: 56px; }
  :lang(es) h1 { font-size: 44px; line-height: 52px; }
  .lede { font-size: 18px; line-height: 28px; }
  .lede.lede-hook { font-size: 22px; line-height: 32px; }
  .deal { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .deal-earn { padding: 0 32px 0 0; }
  .deal-gets { padding: 0 0 0 32px; }
  .rates { margin-top: 16px; gap: 20px 24px; }
  .rate-n { font-size: 44px; line-height: 52px; }
  .rate-l { font-size: 16px; line-height: 24px; }
  .gets-n { margin-top: 16px; font-size: 44px; line-height: 52px; }
  .gets-u { font-size: 20px; }
  .gets-l { font-size: 16px; line-height: 24px; }
}
@media (max-width: 1080px) {
  .steps { gap: 16px; }
  /* Stacked, the terms link goes after the answers: it is "read more",
     not an introduction. */
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-lead { display: contents; }
  #faq h2 { order: 1; margin-bottom: 32px; }
  #faq .faq { order: 2; }
  #faq .more { order: 3; margin-top: 24px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "strip"; row-gap: 40px; }
  .deal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "earn" "gets"; }
  .deal-earn { padding: 0 0 24px; }
  .deal-gets { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .lede { max-width: var(--measure); }
  .stage { max-width: 680px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .step { max-width: 520px; }
  .sec { padding: 72px 0; }
  .hero { padding-bottom: 72px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; line-height: 26px; }
  .wrap { padding: 0 16px; }
  .site-head .wrap { height: 56px; }
  .logo img { height: 28px; width: 112px; }

  .hero { padding-top: 32px; }
  .hero-grid { row-gap: 32px; }
  h1, :lang(es) h1 { font-size: 36px; line-height: 44px; }
  .lede { margin-top: 16px; font-size: 17px; line-height: 28px; }
  .lede.lede-hook { font-size: 20px; line-height: 30px; }
  .actions { margin-top: 24px; gap: 16px; }
  .join { height: 56px; padding: 0 30px; }
  .map { border-radius: 20px; }

  .deal-earn { padding-bottom: 20px; }
  .deal-gets { padding-top: 20px; }
  /* Two across only where two fit: below that the labels never wrap, so a
     column too narrow for one would push it past the card edge. */
  .rates { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 20px; }
  .gets-n { margin-top: 14px; font-size: 34px; line-height: 44px; }
  .gets-u { font-size: 17px; }
  .gets-l { font-size: 15px; line-height: 24px; }
  .rate-n { font-size: 34px; line-height: 44px; }
  .rate-l { font-size: 15px; line-height: 24px; }

  h2 { font-size: 30px; line-height: 36px; }
  .sec h2, .how-hd { margin-bottom: 24px; }
  h3 { font-size: 18px; line-height: 28px; }
  .step-h { margin-top: 20px; }



  .faq summary { font-size: 17px; min-height: 64px; }
  #faq h2 { margin-bottom: 24px; }
  .faq-a p { padding-right: 0; padding-bottom: 20px; }

  .closing { padding-bottom: 80px; }
  .close-card { gap: 24px; }
  .close-card h2 { font-size: 28px; line-height: 36px; }

  .foot-row { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding-top: 16px; padding-bottom: 16px; }
}
@media (max-width: 374px) {
  h1, :lang(es) h1 { font-size: 30px; line-height: 40px; }
  h2 { font-size: 26px; line-height: 32px; }
  h3 { font-size: 16px; line-height: 24px; }
  .rate-n { font-size: 30px; line-height: 40px; }
  .rate-l { font-size: 14px; }
  .gets-n { font-size: 30px; line-height: 40px; }
  .gets-u { font-size: 15px; }
  .faq summary { font-size: 15px; gap: 12px; }
  .close-card h2 { font-size: 24px; line-height: 32px; }
}
@media (max-width: 340px) {
  :root { --pad: 16px; }
  .lede { font-size: 16px; line-height: 26px; }
  .lede.lede-hook { font-size: 18px; line-height: 28px; }
}

/* Wide screens keep one column width, so every left edge lines up. Type steps up a size on the hero only. */
@media (min-width: 1700px) {
  .hero { padding-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .tw { animation: none; opacity: .75; }
  .lights-wrap { transition: none; }
  * { scroll-behavior: auto !important; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .light { display: none; }
  :root:not([data-theme="light"]) .logo .dark { display: block; }
  :root:not([data-theme="light"]) .join {
    background: linear-gradient(180deg, var(--cta-night-top), var(--cta-night));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px rgba(124, 27, 72, .4);
  }
  :root:not([data-theme="light"]) .join:hover {
    background: linear-gradient(180deg, #ad2d66, var(--cta-night));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 34px rgba(124, 27, 72, .5);
  }
}
:root[data-theme="dark"] .logo .light { display: none; }
:root[data-theme="dark"] .logo .dark { display: block; }
:root[data-theme="dark"] .join {
  background: linear-gradient(180deg, var(--cta-night-top), var(--cta-night));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px rgba(124, 27, 72, .4);
}
:root[data-theme="dark"] .join:hover {
  background: linear-gradient(180deg, #ad2d66, var(--cta-night));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 34px rgba(124, 27, 72, .5);
}