/* U.S. Tax Recovery — concept landing page, Direction A (Winner's Red)
   Static, no framework. Raw hex lives only in :root; everything else uses var(). */

/* Archivo, self-hosted: only the condensed width the headlines use (62%),
   weights 600-900, Latin. 25 KB, against 90 KB for Google's full variable
   file, and no render-blocking trip to two Google servers first. */
@font-face {
  font-family: "Archivo";
  src: url("assets/archivo-condensed-latin.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 62%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- brand colour (raw hex lives only here) ---- */
  --color-red: #A70102;
  --color-red-deep: #7E0001;
  --color-cream: #F4EDE2;
  --color-ink: #141111;
  --color-body: #3A3434;
  --color-muted: #6E6666;
  --color-line: #E7E1DA;
  --color-white: #FFFFFF;
  --color-gold: #C9A24B;
  /* The steps either side of the brand red and cream, for faces with depth:
     a lit top, a shaded foot, and the edge you see under a pressable button. */
  --color-red-hot: #C8191A;
  --color-red-shade: #940102;
  --color-red-edge: #5E0001;
  --color-red-night: #5C0000;
  --color-cream-lit: #FFFBF4;
  --color-cream-shade: #E7DCC9;
  --color-cream-dark: #EDE7DD;
  --color-gold-deep: #9C7A2E;
  --color-star: #E9A23B;

  /* ---- type ---- */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.375rem, 1rem + 5.6vw, 5.875rem);
  --fs-h2: clamp(1.875rem, 1.25rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;

  /* ---- spacing (8px scale) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* ---- layout ---- */
  --content-max: 1160px;
  --wide-max: 1320px;
  --narrow-max: 820px;
  --pad-inline: clamp(1.25rem, 4vw, 4rem);

  /* ---- radii ---- */
  --radius-pill: 999px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  /* ---- motion ---- */
  --ease-decel: cubic-bezier(.16,.8,.24,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-ink) 10%, transparent);
  --shadow-md: 0 24px 48px -24px color-mix(in srgb, var(--color-ink) 55%, transparent);
  --shadow-red: 0 26px 50px -20px color-mix(in srgb, var(--color-red-deep) 65%, transparent);

  --focus-color: var(--color-ink);
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-body);
  font: 400 var(--fs-body)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
label { display: block; }
input { font: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-2); top: -120px; z-index: 100;
  background: var(--color-ink); color: var(--color-white);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-weight: 700; transition: top var(--dur-fast) var(--ease-decel);
}
.skip-link:focus { top: var(--sp-2); }

/* Phones: no grey box flashing over whatever was tapped. Pressed states
   (:active) and keyboard focus rings still show. */
html { -webkit-tap-highlight-color: transparent; }

:is(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.display {
  /* No word left alone on the last line of a headline. */
  text-wrap: balance;
  font-family: var(--font-display);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.98;
  color: var(--color-ink);
}

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.wrap--wide { max-width: var(--wide-max); }
.wrap--narrow { max-width: var(--narrow-max); }

.band { position: relative; }
.band--red { background: var(--color-red); color: var(--color-cream); --focus-color: var(--color-cream); }
.band--cream { background: var(--color-cream); }
.band--white { background: var(--color-white); }

.section-head { max-width: 46em; margin-bottom: var(--sp-5); }
.section-head h2 { margin-bottom: var(--sp-2); }
.section-lead {
  font: 500 var(--fs-lead)/1.55 var(--font-text);
  color: var(--color-muted);
  max-width: 34em;
}
.band--red .section-lead { color: color-mix(in srgb, var(--color-cream) 88%, transparent); }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-1); height: 56px; min-height: 44px; padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  font: 700 1.0625rem/1 var(--font-text);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-decel), box-shadow var(--dur-fast) var(--ease-decel), background-color var(--dur-fast) var(--ease-decel);
}
.btn:active { transform: translateY(0); }

.btn--red { background: var(--color-red); color: var(--color-white); }
.btn--cream { background: var(--color-cream); color: var(--color-red); }
.btn--nav { height: 44px; padding: 0 var(--sp-3); font-size: 0.9375rem; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.cta-row__alt { font: 600 1rem/1 var(--font-text); opacity: .92; padding: var(--sp-1) 0; }
.band--red .cta-row__alt { color: var(--color-cream); }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}
.site-header .bar {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 84px; padding-block: var(--sp-2);
  transition: min-height var(--dur-med) var(--ease-decel);
}
.site-header.is-condensed .bar { min-height: 62px; }

.logo { display: inline-flex; }
/* The logo, redrawn sharp from the original (2026-10-01) and a size up. */
.logo-frame {
  position: relative; display: block;
  width: clamp(190px, 17vw, 232px);
  aspect-ratio: 640 / 145;
  transition: width var(--dur-med) var(--ease-decel);
}
/* Condensed on scroll only where there is room for it. Applied everywhere, it
   grew the phone logo from 129px to 160px after the first scroll (it out-ranks
   the phone size below) and pushed the menu button off a 375px screen. */
@media (min-width: 1180px) {
  .site-header.is-condensed .logo-frame { width: clamp(160px, 13.5vw, 200px); }
}
.logo-base { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Arriving: the whole logo pops in once, a fast fade and a small scale-up with
   a hair of overshoot. Pure CSS, so it runs on the first paint and the logo is
   never hidden if the script fails. Transform and opacity only (no layout
   shift); no fill mode, so no transform is left behind when it ends. It does
   not run at all under reduced motion, and nothing replays it on hover. */
@media (prefers-reduced-motion: no-preference) {
  .logo-frame { animation: logoPop 360ms cubic-bezier(.34, 1.56, .64, 1) 1; }
}
@keyframes logoPop {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto; border-radius: var(--radius-sm);
}
.nav-toggle__box { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle__box::before, .nav-toggle__box::after, .nav-toggle__box span {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-decel), opacity var(--dur-fast) var(--ease-decel), top var(--dur-fast) var(--ease-decel);
}
.nav-toggle__box::before { top: 0; }
.nav-toggle__box span { top: 6px; }
.nav-toggle__box::after { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after { top: 6px; transform: rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: var(--sp-4); margin-left: var(--sp-2); }
.site-nav a {
  font: 600 0.9375rem/1 var(--font-text); color: var(--color-ink);
  padding: var(--sp-1) 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-color: var(--color-red); }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.phone-link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 44px; min-width: 44px; padding-inline: var(--sp-1);
  font: 700 0.9375rem/1 var(--font-text); color: var(--color-ink); border-radius: var(--radius-sm);
}
.phone-link svg { color: var(--color-red); flex: none; }
.header-actions__login {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: 10px;
  font: 700 0.9375rem/1 var(--font-text); color: var(--color-ink); border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
}
.header-actions__login:hover { color: var(--color-red); }
@media (max-width: 430px) {
  .header-actions__login { font-size: 0.8125rem; padding-inline: 6px; }
}

/* The menu button takes over below 1180px, not 900px. The full row — logo,
   five links, phone number, Log in, the button — measures 1174px, so from
   900 to 1179 it did not fit: first the labels broke into two lines, and
   once they were held to one, the row ran 41px off a 1024px screen and
   146px off a 900px one. */
@media (max-width: 1179px) {
  /* Written as `.site-header .bar` on purpose: the base rule above is that
     specific, so a bare `.bar` here loses the cascade and the desktop 32px
     gap survives onto phones — which is exactly what pushed the menu button
     22px off the right edge of a 390px screen. */
  .site-header .bar { gap: var(--sp-2); }
  .logo-frame { width: clamp(112px, 33vw, 176px); }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    /* Hung from the header's own bottom edge. It used to sit at a fixed
       62px under an 85px header, so the open menu slid 23px up behind the
       bar and cut the bottom off the Start my refund button. The header is
       sticky, so it is the positioned ancestor and 100% is its real height. */
    position: absolute; top: 100%; left: 0; right: 0; z-index: 39;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-white); border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
    padding: var(--sp-2) var(--pad-inline) var(--sp-3);
    max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform var(--dur-med) var(--ease-decel), opacity var(--dur-med) var(--ease-decel), visibility var(--dur-med);
    margin-left: 0;
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .site-nav a { padding: var(--sp-2) 0; min-height: 44px; display: flex; align-items: center; gap: var(--sp-1); border-bottom: 1px solid var(--color-line); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav__phone { color: var(--color-red); font-weight: 700; }
  .site-nav__phone svg { flex: none; }
  /* On a phone the number becomes a call button: the icon stays, the digits
     go, and the menu button moves to the far edge where people look for it. */
  .header-actions .phone-link span { display: none; }
  .header-actions { order: 2; gap: var(--sp-1); }
  .nav-toggle { order: 3; margin-left: 0; }
  .btn--nav { padding: 0 var(--sp-2); font-size: 0.8125rem; }
}
@media (min-width: 1180px) {
  .site-nav__phone { display: none; }
}
/* The button keeps the brand's own words on a phone. It used to swap to
   "Get started" below 430px to save room — the most generic call to action
   on the web, in place of the one the brand system names. The room comes from
   Log in instead: an existing client's link, not a new one's, so on a phone it
   moves into the menu and the bar keeps the button that earns the business. */
.site-nav__login { display: none; }
@media (max-width: 560px) {
  .site-header .bar { gap: var(--sp-1); }
  .header-actions { gap: 0; }
  .header-actions__login { display: none; }
  .site-nav__login { display: block; }
  .btn--nav { padding: 0 var(--sp-2); white-space: nowrap; }
}
/* The smallest phones have no room for the call icon; the number is still
   the first thing in the menu and in the hero. */
@media (max-width: 370px) {
  .header-actions .phone-link { display: none; }
}
body.nav-lock { overflow: hidden; }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.hero {
  overflow: hidden;
  padding-block: var(--sp-7) var(--sp-8);
  background:
    radial-gradient(120% 130% at 78% 40%, #C21311 0%, #A70102 42%, var(--color-red-deep) 78%, #5C0000 100%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__copy { max-width: 45rem; position: relative; z-index: 2; }
/* The headline is there from the first paint, not waiting on the script,
   and rises in once, in CSS alone. (The full-screen intro curtain that used
   to cover it on a first visit is gone: QA, 2026-10-01, "not overwhelming".) */
.hero__copy { animation: heroUp .55s var(--ease-decel) both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__title { font-size: var(--fs-hero); color: var(--color-cream); margin-bottom: var(--sp-3); }
.hero__lead {
  font: 500 var(--fs-lead)/1.55 var(--font-text);
  color: color-mix(in srgb, var(--color-cream) 90%, transparent);
  max-width: 30em; margin-bottom: var(--sp-4);
}

.hero-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.hero-art__layer { position: absolute; }
.hero-art__layer--parallax { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 120ms linear; }
.hero-art__layer img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px color-mix(in srgb, black 40%, transparent)); }

@media (max-width: 767px) {
  .hero { padding-block: var(--sp-6) var(--sp-5); }
  .hero__inner { display: flex; flex-direction: column; }
  .hero__copy { order: 1; max-width: none; }
  .hero-art { order: 2; position: relative; inset: auto; height: 210px; margin-top: var(--sp-4); }
  /* The layers carry desktop positions inline; these win on a phone only. */
  .hero-art__layer:nth-child(1) { top: 0 !important; left: 74% !important; width: 17% !important; }
  .hero-art__layer:nth-child(2) { top: 6% !important; left: 4% !important; width: 58% !important; }
  .hero-art__layer:nth-child(3) { top: 12% !important; left: 44% !important; width: 48% !important; }
}

/* ---------------------------------------------------------------------- */
/* Floating / drift motion                                                 */
/* ---------------------------------------------------------------------- */

.floaty {
  animation: floaty var(--float-dur, 8s) ease-in-out infinite alternate;
  animation-delay: var(--float-delay, 0s);
}
@keyframes floaty {
  0%   { transform: translateY(calc(var(--float-y, 10px) * -1)) rotate(calc(var(--float-r, 2deg) * -1)); }
  100% { transform: translateY(var(--float-y, 10px)) rotate(var(--float-r, 2deg)); }
}

.side-drift-field { position: relative; height: 0; }
.side-drift { position: absolute; display: none; }
@media (min-width: 1200px) {
  .side-drift { display: block; }
}
.side-drift img { filter: drop-shadow(0 16px 24px color-mix(in srgb, var(--color-ink) 22%, transparent)); opacity: .9; }

/* ---------------------------------------------------------------------- */
/* Trust strip                                                             */
/* ---------------------------------------------------------------------- */

/* The figures are the headline.
   Ethan, 2026-09-01: "a big SINCE 2001", and trust factors treated as a
   marketing decision rather than a decoration. This strip used to set every
   proof point as a small bold line under a small picture, so 2001 read at the
   same size as "Not a cent up front". Now each figure is set in the display
   face, large, the way a scoreboard reads, with a one-line caption under it.
   The IRS credential leads and keeps its words, because it is the one proof a
   stranger can check for themselves — the link is the point of it.
   Every figure here is cleared in the Claims Register: since 2001 (Ethan,
   2026-08-27), $6 million since 2024 — never "every year" (2026-08-27), and
   nothing up front (fully contingent, confirmed 2026-08-28). */
.trust__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3);
  padding-block: var(--sp-5);
}
.trust__grid > * { min-width: 0; }
.trust__item--credential { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3); }
.trust__badge { flex: none; width: 92px; height: auto; aspect-ratio: 378 / 398; object-fit: contain; }
.trust__name { display: block; color: var(--color-ink); font: 700 1.125rem/1.25 var(--font-text); margin-bottom: 4px; }
.trust__link { color: var(--color-red); font: 700 0.9375rem/1.4 var(--font-text); text-decoration: underline; text-underline-offset: 2px; }
span.trust__link { color: var(--color-body); font-weight: 600; text-decoration: none; }
.trust__item--stat { display: flex; flex-direction: column; }
.trust__kicker {
  color: var(--color-red); font: 800 0.75rem/1 var(--font-text);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.trust__fig {
  color: var(--color-ink); margin: 6px 0 6px;
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(2.75rem, 1.9rem + 2.4vw, 4.25rem); line-height: 0.9; letter-spacing: -0.005em;
  font-variant-numeric: lining-nums;
}
.trust__cap { color: var(--color-muted); font-size: 0.9375rem; line-height: 1.4; }
@media (min-width: 1024px) {
  /* Top-aligned, not centred: centring each column let a one-line caption
     pull its figure lower than its neighbours, so $6M sat below 2001 and $0. */
  .trust__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 0; align-items: start; }
  .trust__item--credential { align-self: center; }
  .trust__badge { width: 108px; }
  .trust__item--credential { grid-column: auto; padding-right: var(--sp-4); align-self: center; }
  .trust__item--stat { padding-inline: var(--sp-4); border-left: 1px solid var(--color-line); }
}

/* ---------------------------------------------------------------------- */
/* How it works                                                            */
/* ---------------------------------------------------------------------- */

.steps { padding-block: var(--sp-7); }
.steps__list { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.steps__list > * { min-width: 0; }
.steps__item { max-width: 26rem; }
.steps__art { position: relative; width: 116px; height: 116px; margin-bottom: var(--sp-3); }
.steps__art img { width: 100%; height: 100%; object-fit: contain; }
.steps__num {
  position: absolute; right: -6px; bottom: -6px;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-ink); color: var(--color-cream); border: 2px solid var(--color-gold);
  font: 800 0.9375rem/1 var(--font-display); font-stretch: 62%;
}
.steps__item h3 { font: 800 var(--fs-h3)/1.25 var(--font-text); color: var(--color-ink); margin-bottom: var(--sp-1); letter-spacing: -0.01em; }
.steps__item p { color: var(--color-muted); font-size: 1rem; }

@media (min-width: 768px) {
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .steps__item { max-width: none; }
}

/* ---------------------------------------------------------------------- */
/* Why USTR                                                                */
/* ---------------------------------------------------------------------- */

.why { padding-block: var(--sp-7); }
.why__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
.why__grid > * { min-width: 0; }
.why__copy h2 { color: var(--color-cream); }
.why__list { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.why__list li { padding-left: 30px; position: relative; }
.why__list li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.why__list b { display: block; color: var(--color-cream); font: 700 1.0625rem/1.3 var(--font-text); }
.why__list span { display: block; color: color-mix(in srgb, var(--color-cream) 82%, transparent); font-size: 0.9375rem; margin-top: 2px; }
/* The fee promise leads the list, set apart in the headline face. */
.why__list li.why__promise {
  margin-bottom: var(--sp-1); padding: 18px 20px 18px 58px; border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-gold) 70%, transparent);
  background: color-mix(in srgb, var(--color-red-night) 45%, transparent);
}
.why__list li.why__promise::before { left: 20px; top: 20px; width: 26px; height: 26px; }
.why__list .why__promise b {
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem); line-height: 0.95; letter-spacing: 0.005em; text-wrap: balance;
}
.why__list .why__promise span { margin-top: 8px; font-size: 1rem; }

.browser-frame { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-white); }
.browser-frame__bar {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--sp-2);
  background: #EDE7DD; border-bottom: 1px solid var(--color-line);
}
.browser-frame__bar span:not(.browser-frame__url) {
  width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--color-ink) 22%, transparent);
}
.browser-frame__url {
  margin-left: var(--sp-2); font-size: 0.75rem; color: var(--color-muted); font-family: var(--font-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.why__proof figcaption {
  margin-top: var(--sp-2); font-size: 0.875rem; color: color-mix(in srgb, var(--color-cream) 82%, transparent);
}
.why__proof figcaption a { color: var(--color-cream); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 960px) {
  .why__grid { grid-template-columns: 1.05fr 1fr; gap: var(--sp-7); }
}

/* ---------------------------------------------------------------------- */
/* Portal                                                                  */
/* ---------------------------------------------------------------------- */

.portal { padding-block: var(--sp-7); }
.portal__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
.portal__grid > * { min-width: 0; }
.portal__art { position: relative; }
.portal-frame--desktop { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.portal-frame--desktop .browser-frame__bar { background: #F1EDE6; }
.portal-frame--phone {
  position: absolute; right: -4%; bottom: -12%; width: 34%;
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md);
  border: 6px solid var(--color-ink);
}
.portal__list { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.portal__list b { display: block; color: var(--color-ink); font: 700 1.0625rem/1.3 var(--font-text); }
.portal__list span { display: block; color: var(--color-muted); font-size: 0.9375rem; margin-top: 2px; }

@media (max-width: 599px) {
  .portal-frame--phone { width: 40%; right: 2%; }
}
@media (min-width: 960px) {
  .portal__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-7); }
  .portal__copy { order: 2; }
  .portal__art { order: 1; }
}

/* ---------------------------------------------------------------------- */
/* FAQ                                                                     */
/* ---------------------------------------------------------------------- */

.faq { padding-block: var(--sp-7); }
.faq h2 { margin-bottom: var(--sp-4); }
.faq__list { display: grid; gap: var(--sp-2); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item__h { margin: 0; }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-3); min-height: 44px; text-align: left;
  font: 700 1.0625rem/1.4 var(--font-text); color: var(--color-ink);
}
.faq-item__icon { position: relative; flex: none; width: 22px; height: 22px; }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-red);
  transform: translate(-50%, -50%); transition: transform var(--dur-fast) var(--ease-decel);
}
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 14px; }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.faq-item__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-decel); }
.faq-item.is-open .faq-item__wrap { grid-template-rows: 1fr; }
.faq-item__a { overflow: hidden; min-height: 0; }
.faq-item__a p { padding-bottom: var(--sp-3); max-width: 42em; color: var(--color-body); }

/* ---------------------------------------------------------------------- */
/* Final CTA                                                               */
/* ---------------------------------------------------------------------- */

.final { position: relative; overflow: hidden; padding-block: var(--sp-7); text-align: center; }
.final__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.final .cta-row { justify-content: center; }
.final h2 { color: var(--color-cream); font-size: var(--fs-h2); }
.final p { max-width: 34em; color: color-mix(in srgb, var(--color-cream) 90%, transparent); font: 500 var(--fs-lead)/1.55 var(--font-text); margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer { background: var(--color-cream); color: var(--color-body); padding-block: var(--sp-6) var(--sp-4); border-top: 1px solid var(--color-line); }
/* Room under the last footer links for the floating calculator button, which
   otherwise sat on top of "Useful links" and "Privacy" on a phone. */
@media (max-width: 1179px) { .site-footer { padding-bottom: calc(var(--sp-4) + 72px); } }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding-bottom: var(--sp-5); }
.footer__grid > * { min-width: 0; }
.footer__brand img { height: 34px; width: auto; margin-bottom: var(--sp-2); }
.footer__tagline { font-style: italic; color: var(--color-muted); font-size: 0.9375rem; }
.footer__col p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-body); }
.footer__col a:hover { color: var(--color-red); text-decoration: underline; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; align-items: center;
  padding-top: var(--sp-4); border-top: 1px solid var(--color-line);
  font-size: 0.8125rem; color: var(--color-muted);
}
.footer__bottom nav { display: flex; gap: var(--sp-3); }
.footer__bottom a:hover { color: var(--color-red); }
.footer__bottom nav { flex-wrap: wrap; }
.footer__consent { font: inherit; color: inherit; padding: 0; background: none; border: 0; cursor: pointer; }
.footer__consent:hover { color: var(--color-red); }

/* The Google Analytics question (script.js). Bottom left on a wide screen,
   clear of the calculator button on the right; a full-width sheet on a phone,
   where the calculator button steps aside until it is answered. */
.consent {
  position: fixed; z-index: 75; left: var(--sp-3); bottom: var(--sp-3); width: min(400px, calc(100vw - 2 * var(--sp-3)));
  background: var(--color-white); color: var(--color-body); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-2) var(--sp-3) var(--sp-3);
  font-size: 0.9375rem; line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent p { margin: 0 0 var(--sp-2); }
.consent a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: var(--sp-1); }
.consent__actions button {
  min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
  font: 700 0.9375rem/1 var(--font-text); cursor: pointer;
}
.consent__yes { background: var(--color-red); color: var(--color-white); border: 0; }
.consent__yes:hover { background: var(--color-red-deep); }
.consent__no { background: none; color: var(--color-ink); border: 1.5px solid var(--color-line); }
.consent__no:hover { border-color: var(--color-ink); }
.consent button:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
@media (max-width: 599px) {
  .consent { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
             padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .consent__actions button { flex: 1; }
  .has-consent-bar .calc-launcher { display: none; }
}

@media (min-width: 620px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.1fr 1fr 1.15fr 1.15fr; gap: var(--sp-4) var(--sp-5); }
}
.footer__col--contact p + p { margin-top: var(--sp-2); }
.footer__col--links p { margin-bottom: var(--sp-1); font-weight: 700; color: var(--color-ink); font-size: 0.9375rem; }
.footer__col--links ul { display: grid; gap: 6px; }
.footer__col--links a { font-size: 0.9375rem; line-height: 1.5; }

/* ---------------------------------------------------------------------- */
/* Modal                                                                   */
/* ---------------------------------------------------------------------- */

.modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-3);
  background: color-mix(in srgb, var(--color-ink) 62%, transparent);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-decel);
}
.modal.is-open { opacity: 1; }
.modal[hidden] { display: none; }

.modal__dialog {
  --focus-color: var(--color-ink);
  position: relative; width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto;
  background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  transform: translateY(14px) scale(.98); transition: transform var(--dur-med) var(--ease-decel);
}
.modal.is-open .modal__dialog { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute; top: var(--sp-2); right: var(--sp-2); width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; color: var(--color-ink);
}
.modal__close:hover { background: var(--color-cream); }
.modal__head { margin-bottom: var(--sp-3); padding-right: var(--sp-6); }
.modal__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: var(--sp-1); }
.modal__head p { color: var(--color-muted); }
.modal__frame { border-radius: var(--radius-md); overflow: hidden; background: var(--color-cream); min-height: 420px; }
.modal__frame iframe { width: 100%; height: 640px; max-height: 70vh; border: 0; display: block; }

@media (max-width: 599px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal__dialog { max-width: none; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ---------------------------------------------------------------------- */
/* Calculator popup                                                        */
/* ---------------------------------------------------------------------- */

.calc-launcher {
  position: fixed; z-index: 69; right: var(--sp-3); bottom: var(--sp-3);
  min-height: 48px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-white); box-shadow: var(--shadow-md);
  font: 700 0.9375rem/1 var(--font-text);
}
.calc-launcher:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
.calc-launcher[hidden] { display: none; }
/* The start flow hides its portal button when the enquiry went by email. */
.btn.start__go[hidden] { display: none; }
.start__sent { margin: -4px 0 14px; font-size: 0.9375rem; color: var(--color-muted); overflow-wrap: anywhere; }
.start__sent strong { color: var(--color-ink); }
.start__sent[hidden] { display: none; }
@media (max-width: 599px) {
  .calc-launcher { right: var(--sp-2); bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); }
}

.calc {
  position: fixed; z-index: 70;
  right: var(--sp-3); bottom: var(--sp-3); width: 336px;
  background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  border: 1px solid var(--color-line);
  transform: translateY(24px); opacity: 0; transition: transform var(--dur-med) var(--ease-decel), opacity var(--dur-med) var(--ease-decel);
}
.calc.is-open { transform: translateY(0); opacity: 1; }
.calc[hidden] { display: none; }
.calc h2 { font-size: 1.375rem; padding-right: var(--sp-6); margin-bottom: var(--sp-2); }
.calc__dismiss { position: absolute; top: var(--sp-1); right: var(--sp-1); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--color-muted); }
.calc__dismiss:hover { background: var(--color-cream); color: var(--color-ink); }
.calc label { font: 600 0.875rem/1.3 var(--font-text); color: var(--color-body); margin-bottom: 6px; }
.calc input {
  width: 100%; height: 48px; padding: 0 var(--sp-2); margin-bottom: var(--sp-2);
  border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); font-size: 1rem; color: var(--color-ink);
}
.calc input:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 1px; }
.calc__result { min-height: 44px; font-size: 0.9375rem; color: var(--color-muted); margin-bottom: var(--sp-2); }
.calc__result.is-active { color: var(--color-ink); }
.calc__result strong { color: var(--color-red); }
.calc .btn { width: 100%; }

@media (max-width: 599px) {
  .calc { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 0; padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------- */
/* Scroll reveal                                                           */
/* ---------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 640ms var(--ease-decel), transform 640ms var(--ease-decel); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.trust__item.reveal:nth-child(1) { transition-delay: 0ms; }
.trust__item.reveal:nth-child(2) { transition-delay: 80ms; }
.trust__item.reveal:nth-child(3) { transition-delay: 160ms; }
.trust__item.reveal:nth-child(4) { transition-delay: 240ms; }

.steps__item.reveal:nth-child(1) { transition-delay: 0ms; }
.steps__item.reveal:nth-child(2) { transition-delay: 100ms; }
.steps__item.reveal:nth-child(3) { transition-delay: 200ms; }

.faq-item.reveal:nth-child(1) { transition-delay: 0ms; }
.faq-item.reveal:nth-child(2) { transition-delay: 60ms; }
.faq-item.reveal:nth-child(3) { transition-delay: 120ms; }
.faq-item.reveal:nth-child(4) { transition-delay: 180ms; }
.faq-item.reveal:nth-child(5) { transition-delay: 240ms; }

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-art__layer--parallax { transform: none; }
  html { scroll-behavior: auto; }
}


/* ---------------------------------------------------------------------- */
/* Casino moments. Each one happens once, on its own trigger, and stays    */
/* small: a win should feel like a win without the page shouting.         */
/* ---------------------------------------------------------------------- */

/* Arriving: the logo pops in once in the header (.logo-frame, above). (A
   full-screen intro used to hold the page for 1.7s on a first visit; removed
   2026-10-01.) */

/* 30%, landing like a slot reel: each digit spins and stops, the second a
   beat after the first. */
.reels { display: inline-flex; }
.reel { display: inline-block; height: 1lh; overflow: hidden; vertical-align: top; }
.reel__strip { display: flex; flex-direction: column; transform: translateY(0); }
.reel__strip > span { display: block; height: 1lh; }
/* The digits on a reel are drawn by CSS, not written into the page: search
   engines read a page's text after its scripts run, and written-in strips
   made the headline read "The IRS kept 3030123456789…% of your win". The
   number itself is in the page once, in the sr-only span beside the reel. */
.reels:empty::before { content: attr(data-value); }
.reels [data-d]::before { content: attr(data-d); }
.reels.is-spinning .reel__strip { transition: transform var(--spin, 1.2s) cubic-bezier(.16, 1.12, .3, 1); }

/* The 3D chip, flipping frame by frame with the scroll. */
.chip-flip { display: block; width: 100%; height: auto; }

/* A glint across each button, the light catching a chip: once, on its own
   delay (set by the script) so two never flash together, then still.
   Hovering sends one across straight away. It used to repeat every 7s on
   every button; Ethan asked for less motion, so it plays once. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 32%; z-index: -1;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-white) 70%, transparent), transparent);
  animation: glint 7s var(--glint-delay, 2.6s) 1;
}
.btn--red::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-white) 38%, transparent), transparent); }
.btn:focus-visible::after { animation: glintNow .75s ease-out 1; }
.btn:active { transform: translateY(1px) scale(.985); }
@keyframes glint { 0% { left: -45%; } 14%, 100% { left: 130%; } }
@keyframes glintNow { from { left: -45%; } to { left: 130%; } }

/* Bulbs around the closing band, the sign over a casino door. They chase for
   a few seconds when the band comes into view, then stay lit. */
/* No marquee.
   It was bulbs around the closing band — first as small cream dots, then as
   gold bulbs on a rail. Ethan, on both: "it just looks unprofessional." A
   casino feel has to come from the palette, the type and the objects, not
   from light bulbs drawn around a box. */

.final__inner { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .reels.is-spinning .reel__strip { transition: none; }
  .btn::after { animation: none; display: none; }
}


/* The flipping chip: a canvas over the first frame, drawn from decoded frames
   so nothing can blink between them. */
.chip-flip-box { position: relative; display: block; }
.chip-flip-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chip-flip-box.is-live img { visibility: hidden; }

/* How it works, dealt like cards: face down until they reach you, then turned
   over one after another. Without the script they are simply face up. */
.steps__item { perspective: 1400px; }
.card { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .9, .25, 1.05); }
.card__front, .card__back {
  border-radius: var(--radius-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card__front {
  position: relative; height: 100%; padding: var(--sp-4);
  background: var(--color-white); border: 1px solid var(--color-line);
  box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--color-ink) 45%, transparent);
}
.card__back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  background:
    url("assets/puffed-chip.webp") center / 44% no-repeat,
    repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--color-cream) 18%, transparent) 14px 16px),
    repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--color-cream) 18%, transparent) 14px 16px),
    var(--color-red);
  border: 6px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-line), 0 22px 40px -28px color-mix(in srgb, var(--color-ink) 55%, transparent);
}
.js-deal .steps__item:not(.is-dealt) .card { transform: rotateY(180deg) translateY(10px); }
.steps__item:nth-child(2) .card { transition-delay: .16s; }
.steps__item:nth-child(3) .card { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .js-deal .steps__item:not(.is-dealt) .card { transform: none; }
  .card { transition: none; }
}

/* Face up, a playing card — not a feature card.
   Dealt face down and turned over, then landing as an icon in the top-left
   corner over a left-aligned title: the exact shape of a SaaS "features" row,
   which is what these read as the moment the flip finished. A card from a deck
   carries its rank in the corner and again upside down in the opposite one,
   with the figure in the middle. So that is what the face does now: rank and
   a diamond in two corners, the object centred as the figure. The <ol> still
   gives the order to a screen reader; the corners are decoration. */
.steps__list { counter-reset: deal; }
.steps__item { counter-increment: deal; }
.card__front { text-align: center; padding: var(--sp-5) var(--sp-5) var(--sp-5); }
.card__front::before, .card__front::after {
  content: counter(deal) "\A\2666";
  white-space: pre; position: absolute; text-align: center;
  color: var(--color-red); font: 800 1.625rem/0.92 var(--font-display); font-stretch: 62%;
  pointer-events: none;
}
.card__front::before { top: 16px; left: 18px; }
.card__front::after { bottom: 16px; right: 18px; transform: rotate(180deg); }
.steps__item .steps__art { margin-inline: auto; width: 124px; height: 124px; }
.steps__num { display: none; }

/* If the script never arrives, the cards turn themselves over anyway. */
.js-deal:not(.deal-ready) .steps__item .card { animation: autoDeal .01s 4s forwards; }
@keyframes autoDeal { to { transform: none; } }

/* ---------------------------------------------------------------------- */
/* Inner pages (search-facing content pages)                              */
/* Calm white/cream layout, ~65ch reading column, no new motion — reuses  */
/* .reveal and the .btn glint that already exist.                         */
/* ---------------------------------------------------------------------- */

.breadcrumb { font-size: 0.8125rem; color: var(--color-muted); margin-bottom: var(--sp-2); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:last-child)::after { content: "\2192"; opacity: .5; }
.breadcrumb a { font-weight: 600; }
.breadcrumb a:hover { color: var(--color-red); }
.breadcrumb li[aria-current] { color: var(--color-ink); font-weight: 600; }

.page-head { padding-block: var(--sp-5) var(--sp-6); }
.page-head h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.page-head__lead { font: 500 var(--fs-lead)/1.55 var(--font-text); color: var(--color-muted); max-width: 38em; }
.page-head__art { flex: none; width: 88px; height: 88px; object-fit: contain; margin-bottom: var(--sp-3); }

.prose__section { padding-block: var(--sp-6); }
.prose { max-width: 65ch; }
.prose p { margin-bottom: var(--sp-3); font-size: var(--fs-body); line-height: 1.7; }
.prose h2 {
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.05;
  color: var(--color-ink); font-size: var(--fs-h3); margin: 0 0 var(--sp-2);
}
.prose section + section { margin-top: var(--sp-5); }
.prose h3 { font: 700 1.125rem/1.35 var(--font-text); color: var(--color-ink); margin: 0 0 var(--sp-1); }
.prose ul, .prose ol { margin: 0 0 var(--sp-3); padding-left: 1.25em; display: grid; gap: var(--sp-1); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: var(--fs-body); line-height: 1.6; }
.prose li::marker { color: var(--color-red); }
.prose a { color: var(--color-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--color-ink); }
.prose figure { margin: var(--sp-4) 0; }

.callout { background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--sp-3); margin: var(--sp-4) 0; }
.callout p:last-child { margin-bottom: 0; }

.compare-table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0 var(--sp-4); }
.compare-table th, .compare-table td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--color-line); vertical-align: top; font-size: 1rem; }
.compare-table th { font: 700 0.9375rem/1.3 var(--font-text); color: var(--color-ink); background: var(--color-cream); }
.compare-table td { color: var(--color-body); }
@media (max-width: 599px) {
  .compare-table { font-size: 0.9375rem; }
  .compare-table th, .compare-table td { padding: var(--sp-1); }
}

@media (min-width: 1024px) { .trust-strip__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------------- */
/* Page heads, on the inner pages                                          */
/*                                                                         */
/* Every page other than the home page opened on a flat cream band with a   */
/* heading and a line of text and nothing else: no art, no red, none of the */
/* casino the home page runs on. Six of the nine carried no content image   */
/* at all. This gives them the hero's own treatment — red ground, a pair of */
/* puffed objects floating against it, the same parallax on a mouse — so    */
/* arriving on About or a guide feels like the same company.                */
/* ---------------------------------------------------------------------- */

/* The page head, as a photograph rather than a flat panel.
   ustaxrecovery.com opens on a dark casino photo with a little text over it,
   and it reads calmer and more expensive than a bright red block does. This
   is that, in the brand's own colours: the photograph, a dark scrim so the
   words always clear AA, and one puffed object as the brand's signature
   rather than as the whole picture. */
.page-head--art { position: relative; overflow: hidden; background: #140A0A; }
.page-head--art > .wrap { position: relative; z-index: 3; }
.page-head--art .page-head__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 1;
}
/* Warm the photograph towards the brand and keep the text legible over any
   part of it. Two stops, so the left side where the words sit is darkest. */
.page-head--art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(18,8,8,.92) 0%, rgba(18,8,8,.62) 42%, rgba(18,8,8,.12) 78%, rgba(18,8,8,0) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--color-red-deep) 22%, transparent), transparent 55%);
}
/* No floating object over the photograph. One puffed icon hovering in the
   corner of a real casino interior read as a sticker dropped on a stock
   photo — two illustration languages in one frame, belonging to neither.
   The objects earn their place on the flat bands further down the page,
   where they are the only picture. */
.page-head--art .breadcrumb a,
.page-head--art .breadcrumb li[aria-current] { color: color-mix(in srgb, var(--color-cream) 80%, transparent); }
.page-head--art .breadcrumb a:hover { color: var(--color-cream); }
.page-head--art h1 { color: var(--color-cream); }
.page-head--art .page-head__lead { color: color-mix(in srgb, var(--color-cream) 90%, transparent); }
.page-head--art .page-head__copy { max-width: 58%; }
.page-head--art { padding-block: var(--sp-6) var(--sp-6); min-height: 270px; }

@media (max-width: 900px) {
  .page-head--art { min-height: 0; }
  .page-head--art .page-head__copy { max-width: 100%; }
  .page-head--art .page-head__photo { opacity: 1; }
  .page-head--art::after {
    background: linear-gradient(180deg, rgba(18,8,8,.58) 0%, rgba(18,8,8,.86) 100%);
  }
  /* The home hero turns .hero-art into a 210px block in the flow on a phone,
     which is right there and wrong here: it took the art out from behind the
     words and pushed the heading 306px down an empty band. */
  .page-head--art .hero-art { position: absolute; inset: 0; order: 0; height: auto; margin-top: 0; opacity: .5; }
  .page-head--art .hero-art__layer { top: auto !important; bottom: -8% !important; }
  .page-head--art .hero-art__layer:nth-child(1) { left: 64% !important; width: 30% !important; }
  .page-head--art .hero-art__layer:nth-child(2) { left: 86% !important; width: 22% !important; }
}

.step-row { display: flex; align-items: flex-start; gap: var(--sp-5); }
.step-row__art { flex: none; width: 128px; }
.step-row__art img { width: 100%; height: auto; filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--color-ink) 22%, transparent)); }
.step-row__body { min-width: 0; }

/* A photograph that runs the full width of its band, with the copy over it.
   Cropped tall on a phone so the face is never cut off. */
.photo-band { position: relative; overflow: hidden; padding-block: 0; }
.photo-band__img { display: block; width: 100%; height: clamp(320px, 46vw, 560px); object-fit: cover; }
.photo-band__over {
  position: absolute; inset: 0; display: grid; align-items: end;
  /* Dark where the words sit, not only at the very edge. The caption is set
     var(--sp-5) up from the bottom, where the old 78%-to-nothing ramp had
     already thinned to about 60% — and on the how-it-works photo that lands
     on a light grey letter, so cream type over it read as a smudge. Held
     dark through the bottom third, then let go. */
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color-ink) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-ink) 70%, transparent) 30%,
    transparent 72%);
}
.photo-band__over .wrap { padding-bottom: var(--sp-5); }
.photo-band__over p { color: var(--color-cream); font: 600 var(--fs-lead)/1.5 var(--font-text); max-width: 32em; text-shadow: 0 1px 12px color-mix(in srgb, var(--color-ink) 55%, transparent); }

/* Stacked on a phone. Side by side, an 84px picture plus its gap left the
   words about 220px of a 390px screen, and a guide's opening paragraph ran
   two or three words to a line down the right-hand side. The picture reads
   just as well above its heading, and the words get the whole width. */
@media (max-width: 767px) {
  .step-row { flex-direction: column; gap: var(--sp-2); }
  .step-row__art { width: 72px; }
}

/* The one-line answer, ahead of the detail.
   Each step ran 41 to 59 words in one block, which is eight to twelve lines
   on a phone and reads as a wall. The words are all still here for search;
   this just puts the answer first, so somebody scanning gets it in one line
   and somebody researching reads on. */
.step-lead {
  font: 600 1.0625rem/1.45 var(--font-text);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}
.step-row__body .prose p:not(.step-lead),
.step-row__body p:not(.step-lead) { font-size: 0.9375rem; line-height: 1.65; color: var(--color-body); }
@media (max-width: 767px) {
  .step-lead { font-size: 1rem; }
  .step-row__body p:not(.step-lead) { font-size: 0.9062rem; }
}

/* The IRS badge is a real seal, not one of the puffed objects: it is round,
   it carries fine type, and it is the one picture on the site a stranger can
   go and verify. It gets its own size so it never renders as a smudge. */
.step-row__art--badge { width: 104px; }
.step-row__art--badge img { filter: none; }

/* ---------------------------------------------------------------------- */
/* Card grids                                                              */
/*                                                                         */
/* The inner pages were prose: a heading and then four or five sentences   */
/* of running text, which is right for a guide and wrong for the page      */
/* somebody skims before deciding to call. The pattern every good site     */
/* uses for this is a grid of small cards — icon, short heading, one line  */
/* — so the whole section can be read in about four seconds. The prose     */
/* stays underneath where it earns its keep.                               */
/* ---------------------------------------------------------------------- */

.cardGrid {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-4);
  /* Deliberately NOT three equal columns.
     Three identical cards in a row is the single most recognisable AI-built
     section on the web, and it is what this was until it got called out. The
     first card carries the point and is given the room to say so; the other
     two support it. Same content, real hierarchy. */
  grid-template-columns: 1.45fr 1fr 1fr;
}
.cardGrid > .pcard:first-child {
  padding: var(--sp-4);
  background: var(--color-red);
  border-color: transparent;
  color: var(--color-cream);
}
.band--white .cardGrid > .pcard:first-child { background: var(--color-red); border-color: transparent; }
.cardGrid > .pcard:first-child .pcard__title { color: var(--color-cream); font-size: 1.25rem; }
.cardGrid > .pcard:first-child .pcard__line { color: color-mix(in srgb, var(--color-cream) 88%, transparent); font-size: 1rem; }
.cardGrid > .pcard:first-child .pcard__line a { color: var(--color-cream); text-decoration-thickness: 2px; }
.cardGrid > .pcard:first-child .pcard__icon { width: 64px; height: 64px; }
.cardGrid > .pcard:first-child .pcard__num { background: var(--color-cream); color: var(--color-red); }

@media (max-width: 1023px) {
  .cardGrid { grid-template-columns: 1fr 1fr; }
  .cardGrid > .pcard:first-child { grid-column: 1 / -1; }
}
/* Inside the narrow reading column the three-across split has no room.
   1.45fr/1fr/1fr of a 620px column left the two supporting cards about 170px
   wide, and their copy broke every two words ("Your U.S. non- / resident
   return, / Form 1040-NR,") on the casino-tax-refund and treaty pages — a row
   that read as broken, not as hierarchy. Here the lead card takes the full
   width on top and the other two share the row beneath: the same order of
   importance, at a width the words fit. */
.wrap--narrow .cardGrid { grid-template-columns: 1fr 1fr; }
.wrap--narrow .cardGrid > .pcard:first-child { grid-column: 1 / -1; }
.cardGrid--tight { gap: var(--sp-2); }
/* A card's own spacing wins inside a reading column. .prose p (0,1,1) out-
   ranks .pcard__line (0,1,0), so on the casino and treaty pages every <p> in a
   card — the title included — picked up the column's paragraph gap, and each
   title floated a paragraph's height above its own line. The flex gap is the
   spacing a card means to have. */
.prose .pcard p { margin: 0; }

.pcard {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-decel), box-shadow var(--dur-fast) var(--ease-decel);
}
.band--white .pcard { background: var(--color-cream); border-color: transparent; }
@media (hover: hover) {
  .pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* The object, small and square, the way an icon chip reads — not the big
   floating render the bands use. */
.pcard__icon { width: 52px; height: 52px; object-fit: contain; flex: none; }
.pcard__icon--badge { width: 46px; height: 46px; }

.pcard__title {
  margin-top: var(--sp-1);
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.05;
  font-size: 1.0625rem; color: var(--color-ink);
}
.pcard__line { font-size: 0.875rem; line-height: 1.6; color: var(--color-body); margin: 0; }

/* A number instead of an icon, for the steps. */
.pcard__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-red); color: var(--color-cream);
  font: 800 0.9375rem/1 var(--font-text); flex: none;
}

@media (max-width: 767px) {
  .cardGrid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .pcard { padding: var(--sp-3); }
}

/* The line that follows a grid keeps the prose measure, not the grid's. */
.cardGrid__after { max-width: 65ch; margin-top: var(--sp-3); font-size: var(--fs-body); color: var(--color-body); }

/* ---------------------------------------------------------------------- */
/* Inner-page sections                                                    */
/* A page is a run of things to look at, each with a line or two of copy: */
/* a numbered list beside a product panel, a row of objects, a photograph. */
/* Ethan, 2026-09-30, pointing at three sections of nolly.com: the home    */
/* page works because every section is a picture and a few words, and the */
/* inner pages read as articles. The long copy search needs is kept, and   */
/* folded into .detail at the foot of the page, where it reads as an       */
/* answer you can open rather than a wall you have to climb.              */
/* ---------------------------------------------------------------------- */

.sect { padding-block: var(--sp-7); }
.sect--tight { padding-block: var(--sp-6); }
.section-head--center { text-align: center; margin-inline: auto; }

/* Copy beside a picture. */
.split { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1.08fr; gap: var(--sp-6); }
  .split--flip .split__copy { order: 2; }
}
.split__object { width: 92px; height: auto; margin-bottom: var(--sp-3); filter: drop-shadow(0 16px 22px color-mix(in srgb, var(--color-ink) 22%, transparent)); }
.split__text { color: var(--color-body); font-size: var(--fs-body); line-height: 1.6; max-width: 34em; }
.split__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-2); color: var(--color-red); font: 700 1rem/1 var(--font-text); text-decoration: underline; text-underline-offset: 3px; }

/* Numbered steps with rules between them, the number set in the display
   face. Read top to bottom in a few seconds; the detail lives further down. */
.numlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.numlist li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--sp-2); padding-block: var(--sp-3); border-bottom: 1px solid var(--color-line); }
.numlist__n { color: var(--color-red); font: 800 1.75rem/1 var(--font-display); font-stretch: 62%; }
.numlist h3 { margin: 0 0 4px; color: var(--color-ink); font: 700 var(--fs-h3)/1.25 var(--font-text); letter-spacing: -0.01em; }
.numlist p { margin: 0; color: color-mix(in srgb, var(--color-ink) 78%, var(--color-muted)); font-size: 1.0625rem; line-height: 1.55; }

/* A coloured ground with a real screen on it. The screenshot is the
   portal a client actually signs in to, not a drawing of one. */
.panel { position: relative; margin: 0; border-radius: calc(var(--radius-lg) * 1.5); }
.panel--red {
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--color-red) 82%, white) 0%, var(--color-red) 45%, var(--color-red-deep) 100%);
  box-shadow: var(--shadow-red);
}
.panel--plain { display: grid; place-items: center; }
.panel__shot { position: relative; z-index: 1; }
.panel__shot img { display: block; width: 100%; height: auto; }
.panel__object {
  position: absolute; z-index: 2; width: clamp(96px, 7vw + 40px, 150px); height: auto;
  right: -18px; bottom: -26px; transform: rotate(-10deg);
  filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--color-ink) 35%, transparent));
}
.panel__cap { position: relative; z-index: 1; margin-top: var(--sp-3); color: var(--color-cream); font: 600 1rem/1.4 var(--font-text); }
.panel__phone {
  width: min(300px, 74%); height: auto; border-radius: 32px;
  box-shadow: 0 0 0 10px var(--color-ink), var(--shadow-md);
}

/* What we handle: an object and two lines each, no boxes. The objects
   carry the row; a card around each would only turn it back into a
   feature grid. */
.handle { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-3); }
@media (min-width: 1024px) { .handle { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.handle li { text-align: center; }
.handle img { display: block; width: auto; height: 112px; margin: 0 auto var(--sp-3); object-fit: contain; filter: drop-shadow(0 16px 22px color-mix(in srgb, var(--color-ink) 22%, transparent)); }
.handle h3 { margin: 0 0 6px; color: var(--color-ink); font: 700 1.125rem/1.3 var(--font-text); letter-spacing: -0.01em; }
.handle p { margin: 0 auto; max-width: 24ch; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.55; }

/* The long version, folded. Everything a search engine and a careful reader
   wants is still on the page; nobody has to scroll past it to reach the end. */
.detail { border-top: 1px solid var(--color-line); }
.detail details { border-bottom: 1px solid var(--color-line); }
.detail summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 64px; padding-block: var(--sp-2); cursor: pointer; list-style: none;
  color: var(--color-ink); font: 700 1.0625rem/1.35 var(--font-text);
}
.detail summary::-webkit-details-marker { display: none; }
.detail summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 2px solid var(--color-red); border-bottom: 2px solid var(--color-red);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.detail details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.detail summary:focus-visible { outline: 2px solid var(--color-red); outline-offset: 4px; border-radius: 4px; }
.detail__body { padding-bottom: var(--sp-3); }
.detail__body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .detail summary::after { transition: none; } }

/* Section headlines at the size the system defines. No rule ever gave a
   section h2 a size, so every one fell back to the browser's 1.5em — 27px —
   and only the closing "Let's get it back." used --fs-h2. Beside the 56px
   statement headlines on the nolly.com sections Ethan pointed at, 27px reads
   as a label. Scoped to the new inner-page sections; home is unchanged. */
.sect .section-head .display { font-size: var(--fs-h2); line-height: 0.95; margin-bottom: var(--sp-2); }
.sect--tight .section-head .display { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
.sect .numlist { margin-top: var(--sp-4); }

/* Nav labels stay on one line. "How it works" and "Log in" were breaking
   into two stacked lines in the header at 1440px, with room to spare —
   the flex row shrank them before anything else, and a two-word link with
   no nowrap takes the shrink by wrapping. */
.site-nav a, .header-actions__login, .header-actions .phone-link { white-space: nowrap; }

/* A section's objects may break out of their panel, never out of the page:
   the cheque hanging off the portal panel's corner ran 3px past a 390px
   screen. clip, not hidden, so nothing becomes a scroll container and the
   sticky header is unaffected. */
.sect { overflow-x: clip; }
/* On a phone the panel runs nearly edge to edge, so the cheque's -18px
   overhang reached 3px past the screen and the clip shaved it. A smaller
   overhang keeps the break-out without the crop. */
@media (max-width: 767px) { .panel__object { right: -6px; bottom: -18px; } }

/* ---------------------------------------------------------------------- */
/* More pieces for inner-page sections                                    */
/* ---------------------------------------------------------------------- */

/* Rows of three or two objects. */
@media (min-width: 1024px) {
  .handle--3 { grid-template-columns: repeat(3, 1fr); max-width: 60rem; margin-inline: auto; }
  .handle--2 { grid-template-columns: repeat(2, 1fr); max-width: 44rem; margin-inline: auto; }
}
.handle a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Three items in the two-column phone grid left the third alone in a half-width
   column; it takes the full row instead. */
@media (max-width: 1023px) { .handle--3 > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: 22rem; } }
.handle__note { max-width: 46em; margin: var(--sp-5) auto 0; text-align: center; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.55; }

/* One figure, very large, on the red ground — the way the trust strip sets
   its numbers, scaled up to carry a whole section. */
.bignum { color: var(--color-cream); }
.bignum__kicker { display: block; color: var(--color-cream); font: 800 0.8125rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; }
.bignum__fig {
  display: block; margin: 10px 0 8px; color: var(--color-cream);
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(4.5rem, 2.5rem + 9vw, 9.5rem); line-height: 0.85; letter-spacing: -0.01em;
}
.bignum__fig--tel { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem); line-height: 0.95; white-space: nowrap; text-decoration: none; }
.bignum__cap { display: block; max-width: 26em; color: color-mix(in srgb, var(--color-cream) 88%, transparent); font: 600 1rem/1.45 var(--font-text); }

/* Which games are withheld, as two short lists under the 30%. */
.games { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid color-mix(in srgb, var(--color-cream) 28%, transparent); }
.games h3 { margin: 0 0 var(--sp-1); color: var(--color-cream); font: 800 0.75rem/1.2 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; }
.games ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.games li { color: var(--color-cream); font: 600 0.9375rem/1.3 var(--font-text); }
.games li::before { content: "\2666"; margin-right: 8px; color: var(--color-gold); font-size: 0.8em; }
.games__col--off li { color: color-mix(in srgb, var(--color-cream) 72%, transparent); }
.games__col--off li::before { content: "\2014"; color: color-mix(in srgb, var(--color-cream) 55%, transparent); }

/* The treaty, as arithmetic set in the display face. Words, not figures:
   nothing here may read as a promised amount. */
.formula { display: grid; gap: 10px; color: var(--color-cream); }
.formula__term { font-family: var(--font-display); font-stretch: 62%; font-weight: 800; font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.375rem); line-height: 1; text-transform: uppercase; }
.formula__op { display: flex; align-items: center; gap: 10px; color: var(--color-gold); font: 800 clamp(1.75rem, 1rem + 2vw, 2.75rem)/1 var(--font-display); }
.formula__word { color: var(--color-gold); font: 700 0.8125rem/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; }
.formula__sub { display: block; margin-top: 2px; color: color-mix(in srgb, var(--color-cream) 80%, transparent); font: 600 0.875rem/1.35 var(--font-text); text-transform: none; margin-top: 6px; }

/* Label-and-value rows with rules between them, for an address or hours. */
.factlist { margin: var(--sp-4) 0 0; border-top: 1px solid var(--color-line); }
.factlist div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-2); padding-block: var(--sp-2); border-bottom: 1px solid var(--color-line); }
.factlist dt { color: var(--color-muted); font: 700 0.8125rem/1.5 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; }
.factlist dd { margin: 0; color: var(--color-ink); font: 600 1.0625rem/1.45 var(--font-text); }
.factlist a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 3px; }
.factlist a:hover { text-decoration-color: var(--color-red); }
@media (max-width: 480px) { .factlist div { grid-template-columns: 1fr; gap: 2px; } }

/* Two forms side by side; the one a Canadian usually gets is the red one. */
.versus { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (min-width: 768px) { .versus { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.versus__card { position: relative; padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: calc(var(--radius-lg) * 1.2); background: var(--color-cream); text-align: center; }
.versus__card--yours { background: var(--color-red); color: var(--color-cream); box-shadow: var(--shadow-red); }
.versus__card img { display: block; height: 120px; width: auto; margin: 0 auto var(--sp-3); filter: drop-shadow(0 16px 22px color-mix(in srgb, var(--color-ink) 25%, transparent)); }
.versus__flag { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-cream); color: var(--color-red); font: 800 0.75rem/1.4 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.versus__name { display: block; color: var(--color-ink); font-family: var(--font-display); font-stretch: 62%; font-weight: 800; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; text-transform: uppercase; }
.versus__card--yours .versus__name { color: var(--color-cream); }
.versus__who { display: block; margin-top: 8px; color: var(--color-ink); font: 700 1.0625rem/1.35 var(--font-text); }
.versus__card--yours .versus__who { color: var(--color-cream); }
.versus__what { display: block; margin-top: 6px; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.5; }
.versus__card--yours .versus__what { color: color-mix(in srgb, var(--color-cream) 85%, transparent); }
.versus__vs { display: none; }
@media (min-width: 768px) {
  .versus__vs { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: var(--color-ink); color: var(--color-cream); font: 800 1rem/1 var(--font-display); font-stretch: 62%; letter-spacing: 0.04em; border: 3px solid var(--color-gold); }
}

/* A large object on a quiet ground, for a section whose picture is a thing. */
.panel--cream { display: grid; place-items: center; min-height: 18rem; padding: var(--sp-5); background: var(--color-cream); }
.band--cream .panel--cream { background: var(--color-white); }
.panel__hero-object { width: min(260px, 70%); height: auto; filter: drop-shadow(0 26px 34px color-mix(in srgb, var(--color-ink) 28%, transparent)); }
.panel__cap a { color: var(--color-cream); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.split__note { margin-top: var(--sp-3); color: var(--color-muted); font-size: 0.875rem; line-height: 1.55; max-width: 38em; }
.split__text + .split__text { margin-top: var(--sp-2); }

/* An object breaks out of a panel's corner; it never sits on the words.
   Bottom-right, it landed on whatever text ended there: the ↗ on "Check the
   list yourself", the end of the 2001 caption, the hours on the phone panel.
   Captions keep their right edge clear of it, and on a big-figure panel —
   whose top-right corner is always empty — the object moves up there. */
.panel__cap, .bignum__cap { padding-right: clamp(64px, 6vw + 20px, 112px); }
.panel__object--top { top: -30px; bottom: auto; right: -16px; transform: rotate(12deg); }
@media (max-width: 767px) { .panel__object--top { top: -22px; right: -6px; } }
/* A link inside a sentence stays inline. The 44px inline-flex box is for a
   link that stands alone; inside a paragraph it stretched its own line, so
   "More" and "See every step" sat a line-gap below the words before them.
   Links in running text are exempt from the target-size rule (WCAG 2.5.8). */
.handle p a { display: inline; min-height: 0; }

/* ====================================================================== */
/* Start my refund                                                        */
/*                                                                        */
/* The one button that earns the business, built like a slot machine's   */
/* spin button rather than a web pill: a lit, convex face on a body you   */
/* can see the thickness of, which rises under the cursor and sinks when  */
/* pressed. The rim lights gold as you reach for it. At its end sits the  */
/* brand's chip, carrying the arrow; the chip turns over on hover while   */
/* the arrow holds still and leans the way it goes.                       */
/* One markup everywhere (scripts/build_site.py, cta_button):             */
/*   button.btn.btn--cta.btn--red|--cream > .btn__label + .btn__chip      */
/* ====================================================================== */

.btn.btn--cta {
  --face-top: var(--color-red-hot);
  --face: var(--color-red);
  --face-foot: var(--color-red-shade);
  --edge: var(--color-red-edge);
  --ink: var(--color-white);
  --glow: color-mix(in srgb, var(--color-red-deep) 62%, transparent);
  --rim: transparent;
  --lift: 0px;
  --depth: 4px;
  height: 58px; padding: 0 9px 0 28px; gap: 14px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--face-top) 0%, var(--face) 50%, var(--face-foot) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 34%, transparent),
    inset 0 -2px 0 color-mix(in srgb, black 16%, transparent),
    inset 0 0 0 1.5px var(--rim),
    0 var(--depth) 0 var(--edge),
    0 calc(var(--depth) + 12px) 24px -10px var(--glow);
  transform: translateY(var(--lift));
  transition:
    transform 180ms var(--ease-decel),
    box-shadow 180ms var(--ease-decel);
}
.btn.btn--cta.btn--cream {
  --face-top: var(--color-cream-lit);
  --face: var(--color-cream);
  --face-foot: color-mix(in srgb, var(--color-cream) 55%, var(--color-cream-shade));
  --edge: var(--color-gold-deep);
  --ink: var(--color-red);
  --glow: color-mix(in srgb, black 48%, transparent);
}
.btn__label {
  position: relative;
  font: 800 1.0625rem/1 var(--font-text); letter-spacing: 0.005em;
  text-shadow: 0 1px 0 color-mix(in srgb, black 20%, transparent);
}
.btn--cream .btn__label { text-shadow: 0 1px 0 color-mix(in srgb, var(--color-white) 80%, transparent); }

/* The arrow at the end of a Start my refund button. It was a poker chip
   until 2026-10-27, when Ethan chose a plain arrow (option B: "the buttons
   to not have that little chip"). It takes the button's own text colour, so
   it reads on the red button and on the cream one alike. */
.btn__chip {
  position: relative; flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; color: currentColor;
  transition: transform 220ms cubic-bezier(.2, .9, .25, 1.12);
}
.btn__chip svg { position: relative; width: 18px; height: 18px; color: currentColor; }

@media (hover: hover) {
  .btn.btn--cta:hover {
    --lift: -2px; --depth: 6px;
    --rim: color-mix(in srgb, var(--color-gold) 90%, transparent);
    transform: translateY(var(--lift));
  }
  .btn.btn--cta:hover .btn__chip { transform: translateX(3px); }
  .btn.btn--cta:hover .btn__chip svg { transform: none; }
}
.btn.btn--cta:active {
  --lift: 3px; --depth: 1px;
  transform: translateY(var(--lift));
  transition-duration: 70ms;
}
.btn.btn--cta:active .btn__chip { transform: translateX(1px); }
/* The pill keeps its shape when it has focus; the global focus rule rounds
   corners to 8px, which squared the button off on keyboard focus. */
.btn:focus-visible { border-radius: var(--radius-pill); outline-offset: 5px; }
.btn.btn--cta:focus-visible { --rim: color-mix(in srgb, var(--color-gold) 90%, transparent); }

/* Bigger where it is the page's one decision. */
.hero .btn.btn--cta, .final .btn.btn--cta { height: 62px; padding-left: 32px; gap: 16px; }
.hero .btn--cta .btn__label, .final .btn--cta .btn__label { font-size: 1.125rem; }
.hero .btn--cta .btn__chip, .final .btn--cta .btn__chip { width: 24px; height: 24px; }

/* In the header. */
.btn.btn--cta.btn--nav { height: 46px; padding: 0 6px 0 18px; gap: 10px; --depth: 3px; }
.btn--nav .btn__label { font-size: 0.9375rem; }
.btn--nav .btn__chip { width: 20px; height: 20px; }
.btn--nav .btn__chip svg { width: 13px; height: 13px; }
@media (hover: hover) { .btn.btn--cta.btn--nav:hover { --depth: 4px; } }
@media (max-width: 640px) {
  .btn--nav .btn__chip { display: none; }
  .btn.btn--cta.btn--nav { padding: 0 var(--sp-2); }
}
@media (max-width: 430px) {
  .btn.btn--cta.btn--nav { height: 42px; padding: 0 14px; }
  .btn--nav .btn__label { font-size: 0.8125rem; }
}
.calc .btn.btn--cta { justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .btn.btn--cta, .btn__chip, .btn__chip svg { transition: none; }
  .btn.btn--cta:hover .btn__chip, .btn.btn--cta:hover .btn__chip svg { transform: none; }
}

/* No attract mode. The chip used to turn over by itself every few seconds on
   the hero, the closing band and the in-post call to action; with several on
   a page it was one motion too many (Ethan, 2026-10-01: "not too
   overwhelming"). It turns only when a hand reaches for the button. */

/* ====================================================================== */
/* Page heads on red felt                                                 */
/*                                                                        */
/* The inner pages opened on a casino photograph, and it read as AI. The  */
/* casino is now in the ground itself: brand red lit from one corner, a   */
/* fine felt grain, and the double gold line printed round a card table,  */
/* with the page's own puffed objects resting on it.                      */
/* ====================================================================== */

.page-head--felt {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--sp-6);
  color: var(--color-cream);
  --focus-color: var(--color-cream);
  background:
    radial-gradient(ellipse 58% 120% at 84% 128%, transparent 0 62.4%, color-mix(in srgb, var(--color-gold) 62%, transparent) 62.6% 63%, transparent 63.3%),
    radial-gradient(ellipse 58% 120% at 84% 128%, transparent 0 66.1%, color-mix(in srgb, var(--color-gold) 34%, transparent) 66.3% 66.5%, transparent 66.8%),
    radial-gradient(120% 150% at 82% 18%, var(--color-red-hot) 0%, var(--color-red) 40%, var(--color-red-deep) 78%, var(--color-red-night) 100%);
}
.page-head--felt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.page-head--felt > .wrap { position: relative; z-index: 2; }
.page-head--felt .page-head__copy { position: relative; max-width: 40rem; }
.page-head--felt h1 { color: var(--color-cream); font-size: var(--fs-h2); line-height: 0.96; margin-bottom: var(--sp-2); text-wrap: balance; }
.page-head--felt .page-head__lead { color: color-mix(in srgb, var(--color-cream) 90%, transparent); }
.page-head--felt .page-head__lead a { color: var(--color-cream); text-decoration: underline; text-underline-offset: 3px; }
.page-head--felt .breadcrumb { color: color-mix(in srgb, var(--color-cream) 72%, transparent); }
.page-head--felt .breadcrumb a { color: color-mix(in srgb, var(--color-cream) 90%, transparent); }
.page-head--felt .breadcrumb a:hover { color: var(--color-white); }
.page-head--felt .breadcrumb li[aria-current] { color: var(--color-cream); min-width: 0; }
.breadcrumb li[aria-current] span { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head--felt .breadcrumb ol { flex-wrap: nowrap; min-width: 0; }

.head-art { position: absolute; inset: 0; pointer-events: none; }
.head-art__obj { position: absolute; display: block; transition: transform 160ms linear; }
.head-art__obj img { width: 100%; height: auto; filter: drop-shadow(0 26px 30px color-mix(in srgb, black 42%, transparent)); }
.head-art__obj--1 {
  right: calc(var(--pad-inline) + 1%); top: 50%; width: clamp(180px, 19vw, 280px);
  transform: translate(var(--mx, 0px), calc(-50% + var(--my, 0px)));
}
.head-art__obj--2 {
  right: calc(var(--pad-inline) + 22%); bottom: 4%; width: clamp(78px, 7.5vw, 116px);
  transform: translate(var(--mx, 0px), var(--my, 0px));
}
@media (max-width: 959px) {
  .page-head--felt { padding-block: var(--sp-5); }
  .head-art { display: contents; }
  .head-art__obj--2 { display: none; }
  /* On a phone the object rests in the top corner and the words run round
     it, rather than sitting behind them or pushing them down a band. */
  .head-art__obj--1 {
    position: relative; float: right; right: auto; top: auto; transform: none;
    width: clamp(84px, 25vw, 136px); margin: -4px -6px 8px 10px;
    shape-outside: circle(48%);
  }
}

/* The chip above a post's title, and the line of facts under it. */
.post-chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 13px;
  margin-bottom: var(--sp-2); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-cream) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-gold) 75%, transparent);
  color: var(--color-cream); font: 800 0.75rem/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase;
}
.post-meta { margin-top: var(--sp-3); font: 600 0.875rem/1.5 var(--font-text); color: color-mix(in srgb, var(--color-cream) 82%, transparent); }

/* The final band on the same felt, with a chip and a cheque resting on it. */
.final.band--red {
  isolation: isolate;
  background: radial-gradient(110% 150% at 50% 0%, var(--color-red-hot) 0%, var(--color-red) 46%, var(--color-red-deep) 100%);
}
.final.band--red::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.final__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.final__inner { z-index: 1; }
.final__obj { position: absolute; display: block; }
.final__obj img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px color-mix(in srgb, black 40%, transparent)); }
.final__obj--l { left: max(3vw, calc(50% - 600px)); top: 16%; width: clamp(84px, 9vw, 140px); }
.final__obj--l img { transform: rotate(-14deg); }
.final__obj--r { right: max(3vw, calc(50% - 610px)); bottom: 12%; width: clamp(120px, 12vw, 190px); }
.final__obj--r img { transform: rotate(10deg); }
@media (max-width: 899px) {
  .final__obj--l { left: -22px; top: 10px; width: 74px; }
  .final__obj--r { right: -30px; bottom: 6px; width: 104px; }
  .final__obj img { opacity: .9; }
}

/* ====================================================================== */
/* A post                                                                 */
/* ====================================================================== */

.post--has-hero .post-head { padding-bottom: calc(var(--sp-6) + 96px); }
.post-hero { position: relative; z-index: 3; margin-top: -96px; }
.post-hero__fig {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--color-cream);
  box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--color-ink) 70%, transparent);
}
.post-hero__fig img { width: 100%; height: clamp(220px, 36vw, 470px); object-fit: cover; }
@media (max-width: 599px) {
  .post--has-hero .post-head { padding-bottom: calc(var(--sp-5) + 64px); }
  .post-hero { margin-top: -64px; }
  .post-hero__fig { border-radius: var(--radius-md); }
}

.post-layout { padding-block: var(--sp-6) var(--sp-7); }
.post-layout > * { min-width: 0; }
.post-body { max-width: 70ch; }
.post-layout:not(.post-layout--toc) .post-body { margin-inline: auto; }
@media (min-width: 1100px) {
  .post-layout--toc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  .post-layout--toc .post-body { margin-inline: auto 0; max-width: 72ch; justify-self: center; }
  /* The list scrolls inside the panel when it is long, so the start card
     under it never falls below the bottom of the screen. */
  .post-toc { position: sticky; top: 100px; max-height: calc(100vh - 124px); display: flex; flex-direction: column; padding-bottom: var(--sp-2); }
  .post-toc ol { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .toc-cta { flex: none; }
  .post-toc-m { display: none; }
}
@media (max-width: 1099px) { .post-toc { display: none; } }
.post-toc__title, .post-toc-m summary {
  font: 800 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-red);
}
.post-toc__title { margin-bottom: var(--sp-2); }
.post-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-line); }
.post-toc a {
  display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent;
  font: 600 0.875rem/1.4 var(--font-text); color: var(--color-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.post-toc a:hover { color: var(--color-ink); }
.post-toc a[aria-current="location"] { color: var(--color-red); border-left-color: var(--color-red); }
.toc-cta { margin-top: var(--sp-4); padding: var(--sp-3); border-radius: var(--radius-md); background: var(--color-cream); }
.toc-cta__q { margin: 0 0 var(--sp-2); font: 700 0.9375rem/1.35 var(--font-text); color: var(--color-ink); }
.toc-cta { padding: var(--sp-2) 14px; }
.toc-cta .btn.btn--cta { width: 100%; height: 50px; padding: 0 6px 0 14px; gap: 8px; justify-content: space-between; }
.toc-cta .btn__label { font-size: 0.9375rem; }
.toc-cta .btn__chip { width: 22px; height: 22px; }
.toc-cta__alt { display: inline-block; margin-top: 10px; font-size: 0.875rem; color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.post-toc-m { margin-bottom: var(--sp-4); border-radius: var(--radius-md); background: var(--color-cream); }
.post-toc-m summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--sp-3); cursor: pointer; list-style: none; }
.post-toc-m summary::-webkit-details-marker { display: none; }
.post-toc-m summary::after { content: "+"; font-size: 1.25rem; font-weight: 700; }
.post-toc-m[open] summary::after { content: "\2212"; }
.prose .post-toc-m ol { list-style: decimal; margin: 0; padding: 0 var(--sp-3) var(--sp-3) calc(var(--sp-3) + 1.1em); gap: 6px; }
.prose .post-toc-m li { font-size: 0.9375rem; line-height: 1.45; }
.prose .post-toc-m a { color: var(--color-ink); text-decoration: none; }

.post-body > p, .post-body li { line-height: 1.75; }
.post-body h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); line-height: 1;
  margin: var(--sp-6) 0 var(--sp-2); scroll-margin-top: 110px; text-wrap: balance;
}
.post-body > h2:first-child, .post-toc-m + h2 { margin-top: 0; }
.post-body h3 { font: 700 1.1875rem/1.35 var(--font-text); margin: var(--sp-4) 0 var(--sp-1); color: var(--color-ink); }
.post-body h2 + h3 { margin-top: var(--sp-2); }
.post-figure { margin: var(--sp-5) 0; }
.post-figure img { width: 100%; border-radius: var(--radius-md); }
.post-figure figcaption { margin-top: var(--sp-1); font-size: 0.875rem; color: var(--color-muted); }
.post-callout {
  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
  background: var(--color-cream); border-radius: var(--radius-md); border-left: 4px solid var(--color-gold);
}
.prose .post-callout__label { margin: 0 0 var(--sp-1); color: var(--color-red); font: 800 0.75rem/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; }
.post-callout > :last-child, .post-qa > :last-child { margin-bottom: 0; }
.post-qa { margin: var(--sp-3) 0; padding: 2px 0 2px var(--sp-3); border-left: 3px solid var(--color-red); }
.post-body .post-qa > h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.post-short ul { margin: 0; }
.table-scroll {
  margin: var(--sp-4) 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
}
.post-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9375rem; }
.post-table th, .post-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); line-height: 1.5; }
.post-table thead th { background: var(--color-cream); color: var(--color-ink); font-weight: 700; }
.post-table tr:last-child > * { border-bottom: 0; }
.post-table caption { padding: 10px 14px; text-align: left; font-weight: 700; color: var(--color-ink); }
@media (max-width: 600px) {
  .post-body .table-scroll { overflow: visible; border: 0; border-radius: 0; }
  .post-table { min-width: 0; }
  .post-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .post-table, .post-table tbody, .post-table tr, .post-table td { display: block; width: 100%; }
  .post-table tr { margin-bottom: var(--sp-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
  .post-table td { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 12px; padding: 10px 14px; }
  .post-table td::before { content: attr(data-label); font-weight: 700; color: var(--color-ink); }
  .post-table td:first-child { display: block; background: var(--color-cream); font-weight: 700; color: var(--color-ink); }
  .post-table td:first-child::before { content: none; }
  .post-table td:empty { display: none; }
  .post-table tr > * { border-bottom: 1px solid var(--color-line); }
  .post-table tr > :last-child { border-bottom: 0; }
}
.post-body blockquote { margin: var(--sp-4) 0; padding-left: var(--sp-3); border-left: 3px solid var(--color-gold); font-style: italic; }
.post-body hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--sp-5) 0; }

.post-cta {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-4);
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--radius-lg);
  color: var(--color-cream); overflow: hidden; isolation: isolate; --focus-color: var(--color-cream);
  background: radial-gradient(120% 150% at 88% 0%, var(--color-red-hot) 0%, var(--color-red) 44%, var(--color-red-deep) 100%);
  box-shadow: var(--shadow-red);
}
.post-cta__obj { width: 112px; transform: rotate(-10deg); filter: drop-shadow(0 16px 20px color-mix(in srgb, black 40%, transparent)); }
.prose .post-cta p { margin: 0 0 var(--sp-2); color: color-mix(in srgb, var(--color-cream) 92%, transparent); font-size: 1rem; line-height: 1.55; }
.prose .post-cta .post-cta__title {
  margin-bottom: var(--sp-1); color: var(--color-cream);
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1;
}
.prose .post-cta .cta-row { margin-top: var(--sp-1); }
.prose .post-cta a { color: var(--color-cream); font-weight: 600; text-decoration: none; }
@media (max-width: 599px) {
  .post-cta { grid-template-columns: 1fr; padding: var(--sp-4) var(--sp-3); }
  .post-cta__obj { position: absolute; right: -14px; top: -10px; width: 86px; opacity: .95; z-index: -1; }
  .prose .post-cta .post-cta__title { padding-right: 56px; }
}

.post-note { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--color-line); }
.prose .post-note p { font-size: 0.875rem; line-height: 1.6; color: var(--color-muted); margin: 0; }
.prose .post-note strong { color: var(--color-body); }

.post-related { padding-block: var(--sp-6); }
.post-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.post-related__head h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.post-related__all { color: var(--color-red); font-weight: 700; white-space: nowrap; }

.read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; pointer-events: none; }
.read-progress span {
  display: block; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--color-red), var(--color-gold));
}

/* Legal pages read as documents. */
.legal h2 { margin-top: var(--sp-5); }
.legal > h2:first-child { margin-top: 0; }

/* ====================================================================== */
/* The blog                                                               */
/* ====================================================================== */

.blog-search { position: relative; margin-top: var(--sp-4); max-width: 34rem; }
.blog-search svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.blog-search input {
  width: 100%; height: 58px; padding: 0 22px 0 52px; border-radius: var(--radius-pill);
  border: 2px solid transparent; background: var(--color-white); color: var(--color-ink); font-size: 1.0625rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, black 6%, transparent), 0 18px 34px -18px color-mix(in srgb, black 55%, transparent);
  -webkit-appearance: none; appearance: none;
}
.blog-search input:focus { outline: none; border-color: var(--color-gold); }
.blog-search input::placeholder { color: var(--color-muted); }

.blog-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-3);
  color: var(--color-red); font: 800 0.8125rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase;
}
.blog-label::before { content: "\2666"; color: var(--color-gold); font-size: 0.9em; }

.blog-featured { padding-block: var(--sp-6) var(--sp-3); }
.feat-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .feat-grid { grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr 1fr; }
  .feat--main { grid-row: 1 / 3; }
}
.feat {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--color-cream);
  transition: transform 260ms var(--ease-decel), box-shadow 260ms var(--ease-decel);
}
.feat__img { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-cream-dark); }
.feat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-decel); }
.feat__copy { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-3); }
.feat__title { font: 700 1.1875rem/1.3 var(--font-text); color: var(--color-ink); letter-spacing: -0.01em; transition: color 200ms; }
.feat--main .feat__copy { padding: var(--sp-4); gap: 12px; }
.feat--main .feat__title {
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem); line-height: 1; letter-spacing: -0.005em; text-wrap: balance;
}
@media (min-width: 1024px) {
  .feat--side { flex-direction: row; }
  .feat--side .feat__img { flex: 0 0 42%; aspect-ratio: auto; }
  .feat--side .feat__title { font-size: 1.0625rem; }
}
@media (hover: hover) {
  .feat:hover { transform: translateY(-3px); box-shadow: 0 26px 46px -30px color-mix(in srgb, var(--color-ink) 60%, transparent); }
  .feat:hover .feat__img img { transform: scale(1.045); }
  .feat:hover .feat__title { color: var(--color-red); }
}

.blog-all { padding-block: var(--sp-5) var(--sp-7); scroll-margin-top: 80px; }
.blog-all__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.blog-all__head .blog-label { margin: 0; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-white);
  color: var(--color-ink); font: 700 0.875rem/1 var(--font-text); white-space: nowrap;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.topic-chip span { color: var(--color-muted); font-weight: 600; font-size: 0.8125rem; }
.topic-chip:active { transform: scale(.97); }
.topic-chip[aria-pressed="true"] { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }
.topic-chip[aria-pressed="true"] span { color: color-mix(in srgb, var(--color-white) 78%, transparent); }
@media (max-width: 767px) {
  .topic-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--pad-inline) * -1); padding: 2px var(--pad-inline) 6px;
  }
  .topic-chips::-webkit-scrollbar { display: none; }
}
.blog-count { margin-bottom: var(--sp-3); color: var(--color-muted); font-size: 0.875rem; }
.blog-empty { padding: var(--sp-5) var(--sp-3); text-align: center; background: var(--color-cream); border-radius: var(--radius-lg); }
.blog-empty[hidden] { display: none; }
.blog-empty p { margin-bottom: var(--sp-1); }

.bgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .bgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .bgrid { grid-template-columns: repeat(3, 1fr); } }
.bgrid > li { display: flex; min-width: 0; }
.bgrid > li[hidden] { display: none; }
.bcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: var(--sp-3) var(--sp-3) var(--sp-3); border-radius: var(--radius-lg);
  background: var(--color-white); border: 1px solid var(--color-line);
  transition: transform 240ms var(--ease-decel), box-shadow 240ms var(--ease-decel), border-color 240ms var(--ease-decel);
}
.band--cream .bcard { border-color: transparent; }
/* A card from the deck: the diamond in its corner, as on How it works. */
.bcard::after {
  content: "\2666"; position: absolute; top: 18px; right: 20px;
  color: var(--color-red); opacity: .16; font-size: 1.05rem; line-height: 1;
  transition: opacity 240ms, transform 240ms var(--ease-decel);
}
.bcard__topic { display: inline-flex; align-items: center; gap: 10px; color: var(--color-red); font: 800 0.75rem/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; }
.bcard__topic img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--color-ink) 20%, transparent)); }
.bcard__title { margin: 4px 0 0; font: 700 1.125rem/1.35 var(--font-text); color: var(--color-ink); letter-spacing: -0.01em; transition: color 200ms; }
.bcard__excerpt {
  color: var(--color-muted); font-size: 0.9375rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bcard__meta { margin-top: auto; padding-top: 6px; color: var(--color-muted); font: 600 0.8125rem/1.3 var(--font-text); }
@media (hover: hover) {
  .bcard:hover {
    transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-red) 28%, var(--color-line));
    box-shadow: 0 24px 42px -28px color-mix(in srgb, var(--color-ink) 55%, transparent);
  }
  .bcard:hover .bcard__title { color: var(--color-red); }
  .bcard:hover::after { opacity: .9; transform: scale(1.25); }
}
/* Filtering deals the cards again, a few at a time. */
.bgrid.is-dealing > li:not([hidden]) { animation: dealIn 460ms var(--ease-decel) both; animation-delay: calc(var(--d, 0) * 32ms); }
@keyframes dealIn { from { opacity: 0; transform: translateY(16px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }

/* ====================================================================== */
/* Proof: the IRS letter, and reviews from Google                         */
/* ====================================================================== */

.doccard {
  margin: 0; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--color-white); border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
}
.doccard__bar {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: var(--color-cream-dark); border-bottom: 1px solid var(--color-line); color: var(--color-muted);
}
.doccard__bar svg { flex: none; }
.doccard__bar span {
  flex: 1; min-width: 0; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--color-white); border: 1px solid var(--color-line);
  font: 600 0.75rem/1.2 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doccard__img { background: var(--color-cream); }
.doccard__img img { width: 100%; height: auto; }
.doccard figcaption { padding: 14px 18px; border-top: 1px solid var(--color-line); color: var(--color-body); font-size: 0.9375rem; line-height: 1.5; }
.doccard figcaption b { color: var(--color-ink); }

/* Two documents fanned: the IRS's own list, and the letter under it. */
.proof-fan { position: relative; display: grid; }
.proof-fan > * { grid-area: 1 / 1; }
.proof-fan .browser-frame { position: relative; z-index: 1; margin-right: 12%; }
.proof-fan .doccard { position: relative; z-index: 2; margin: 34% 0 0 16%; transform: rotate(2.2deg); transform-origin: 20% 0; }
.proof-fan .reveal.doccard { transform: translateY(26px) rotate(5deg); opacity: 0; transition: transform 900ms cubic-bezier(.2, .9, .25, 1.05), opacity 500ms; }
.proof-fan .reveal.doccard.is-visible { transform: rotate(2.2deg); opacity: 1; }
@media (max-width: 599px) {
  .proof-fan .browser-frame { margin-right: 6%; }
  .proof-fan .doccard { margin: 40% 0 0 8%; }
}
.why__proof .proof-fan + figcaption { margin-top: var(--sp-3); }

.reviews { padding-block: var(--sp-7); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.reviews__head .section-head { margin-bottom: 0; }
.reviews__head h2 { font-size: var(--fs-h2); line-height: 0.95; }
.gbadge {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  border-radius: var(--radius-pill); background: var(--color-white); border: 1px solid var(--color-line);
  color: var(--color-ink); font: 700 0.9375rem/1 var(--font-text); white-space: nowrap;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.gbadge svg { width: 22px; height: 22px; flex: none; }
.rgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .rgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .rgrid { grid-template-columns: repeat(3, 1fr); } }
.rcard {
  display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
  padding: var(--sp-4) var(--sp-4) var(--sp-3); border-radius: var(--radius-lg);
  background: var(--color-white); border: 1px solid var(--color-line);
  box-shadow: 0 20px 40px -34px color-mix(in srgb, var(--color-ink) 55%, transparent);
}
.band--white .rcard { background: var(--color-cream); border-color: transparent; box-shadow: none; }
.rcard__top { display: flex; align-items: center; gap: 12px; }
.rcard__av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--color-white); font: 700 1.125rem/1 var(--font-text); }
.rcard__name { display: block; color: var(--color-ink); font: 700 1rem/1.25 var(--font-text); }
.rcard__meta { display: block; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.35; }
.rcard__g { width: 20px; height: 20px; margin-left: auto; flex: none; }
.rcard__stars { display: flex; gap: 2px; color: var(--color-star); font-size: 1.0625rem; line-height: 1; }
.rcard__stars span { display: inline-block; }
.rcard blockquote { margin: 0; color: var(--color-body); font-size: 1rem; line-height: 1.65; }
.reveal.is-visible .rcard__stars span { animation: starPop 420ms cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(240ms + var(--i, 0) * 70ms); }
@keyframes starPop { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
.rgrid > li.reveal:nth-child(2) { transition-delay: 70ms; }
.rgrid > li.reveal:nth-child(3) { transition-delay: 140ms; }
.rgrid > li.reveal:nth-child(5) { transition-delay: 70ms; }
.rgrid > li.reveal:nth-child(6) { transition-delay: 140ms; }
.reviews__note { margin-top: var(--sp-4); color: var(--color-muted); font-size: 0.875rem; }

/* The nav says where you are. */
.site-nav a[aria-current="page"] { border-color: var(--color-red); }
@media (max-width: 1179px) { .site-nav a[aria-current="page"] { color: var(--color-red); } }

/* The trust figures land like reels when they come into view. */
.trust__fig .reel { height: 1lh; }

@media (prefers-reduced-motion: reduce) {
  .bgrid.is-dealing > li { animation: none; }
  .reveal.is-visible .rcard__stars span { animation: none; }
  .proof-fan .reveal.doccard { transform: rotate(2.2deg); opacity: 1; }
  .head-art__obj { transition: none; }
}

/* ====================================================================== */
/* Start my refund: the step-by-step start                                */
/*                                                                        */
/* What opens when somebody presses the button. Four quick screens that   */
/* ask what the Fillout form asked, one decision each, with a progress    */
/* bar, a Back, and a Continue; then the Fillout ending, word for word.   */
/* Ethan, 2026-09-30, pointing at Nolly's order flow: "the actual initial */
/* start... when you click on something like that." The red strip at the */
/* top answers the one question everybody has — what is this costing me — */
/* and once they give a figure, it shows them what the IRS kept instead.  */
/* ====================================================================== */

.modal__dialog.start {
  display: flex; flex-direction: column;
  width: 100%; max-width: 480px; max-height: min(820px, calc(100dvh - 40px));
  padding: 0; overflow: hidden; border-radius: 26px;
  background: var(--color-cream-lit);
}
.start__top {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2);
  padding: 20px 24px 18px; color: var(--color-cream);
  background: radial-gradient(130% 170% at 92% 0%, var(--color-red-hot) 0%, var(--color-red) 44%, var(--color-red-deep) 100%);
}
.start__top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.start__kicker { color: var(--color-cream); font: 800 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; }
.start__sub { margin-top: 6px; color: color-mix(in srgb, var(--color-cream) 80%, transparent); font-size: 0.875rem; }
.start__figure { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.start__fig {
  color: var(--color-cream); font-family: var(--font-display); font-stretch: 62%; font-weight: 800;
  font-size: 2.5rem; line-height: 0.9; font-variant-numeric: tabular-nums;
}
.start__figcap { margin-top: 4px; color: color-mix(in srgb, var(--color-cream) 80%, transparent); font-size: 0.75rem; }

.start__bar { display: flex; align-items: center; gap: 14px; padding: 16px 18px 4px 24px; }
.start__progress { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.start__progress span { position: relative; height: 4px; overflow: hidden; border-radius: 4px; background: var(--color-line); }
.start__progress span::after {
  content: ""; position: absolute; inset: 0; background: var(--color-red);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 460ms var(--ease-decel);
}
.start__progress span.is-on::after { transform: scaleX(1); }
.start__close {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-cream); color: var(--color-ink); transition: background-color var(--dur-fast);
}
.start__close:hover { background: var(--color-cream-shade); }

.start__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.start__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 10px; }
.start__step[hidden] { display: none; }
.start__count { margin-bottom: 10px; color: var(--color-red); font: 800 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; }
.start__title { margin-bottom: 8px; font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem); line-height: 0.95; text-wrap: balance; }
.start__title:focus { outline: none; }
.start__lead { margin-bottom: 18px; color: var(--color-muted); font-size: 1rem; line-height: 1.5; }
.start__lead a { color: var(--color-red); font-weight: 700; }

.start__opts { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.start__opts--years { grid-template-columns: 1fr 1fr; }
.start__opts--years .opt--wide { grid-column: 1 / -1; }

.opt { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opt input { position: absolute; top: 50%; left: 16px; width: 1px; height: 1px; opacity: 0; margin: 0; }
.opt__card {
  display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 14px 16px;
  border-radius: 16px; background: var(--color-white); border: 1.5px solid var(--color-line);
  transition: border-color 160ms, background-color 160ms, box-shadow 200ms, transform 120ms;
}
@media (hover: hover) { .opt:hover .opt__card { border-color: color-mix(in srgb, var(--color-red) 45%, var(--color-line)); } }
.opt:active .opt__card { transform: scale(.985); }
.opt input:focus-visible + .opt__card { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.opt input:checked + .opt__card {
  border-color: var(--color-red); background: color-mix(in srgb, var(--color-red) 4%, var(--color-white));
  box-shadow: 0 0 0 1px var(--color-red), 0 16px 28px -20px color-mix(in srgb, var(--color-red-deep) 70%, transparent);
}
.opt__icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: var(--color-cream); }
.opt__icon img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--color-ink) 18%, transparent)); }
.opt__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.opt__title { color: var(--color-ink); font: 700 1.0625rem/1.25 var(--font-text); }
.opt__desc { color: var(--color-muted); font-size: 0.875rem; line-height: 1.4; }
.opt__tick {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto;
  border-radius: 50%; border: 1.5px solid var(--color-line); color: transparent;
  transition: background-color 160ms, border-color 160ms;
}
.opt input:checked + .opt__card .opt__tick {
  background: var(--color-red); border-color: var(--color-red); color: var(--color-white);
  animation: tickPop 340ms cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes tickPop { from { transform: scale(.35); } to { transform: none; } }
.start__opts--years .opt__card { justify-content: space-between; min-height: 60px; }
.start__opts--years .opt__title { font-family: var(--font-display); font-stretch: 62%; font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: 0.01em; }
.start__opts--years .opt--wide .opt__title { font-family: var(--font-text); font-stretch: 100%; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.opt--quiet { margin-top: 10px; }
.opt--quiet .opt__card { min-height: 50px; padding: 10px 14px; gap: 10px; border-style: dashed; background: transparent; }
.opt--quiet .opt__tick { order: -1; margin-left: 0; width: 22px; height: 22px; border-radius: 7px; }
.opt--quiet .opt__title { font-size: 0.9375rem; font-weight: 600; }
.opt--quiet input:checked + .opt__card { border-style: solid; }

.start__money {
  display: flex; align-items: center; gap: 8px; height: 72px; padding: 0 18px;
  border-radius: 16px; background: var(--color-white); border: 1.5px solid var(--color-line); cursor: text;
  transition: border-color 160ms, box-shadow 160ms;
}
.start__money:focus-within { border-color: var(--color-red); box-shadow: 0 0 0 1px var(--color-red); }
.start__money-sign { color: var(--color-red); font: 800 2.125rem/1 var(--font-display); font-stretch: 62%; }
.start__money input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--color-ink); font: 800 2.375rem/1 var(--font-display); font-stretch: 62%; letter-spacing: 0.01em;
}
.start__money input::placeholder { color: color-mix(in srgb, var(--color-muted) 40%, transparent); }
.start__money input:disabled { color: var(--color-muted); }
.start__money-cur { color: var(--color-muted); font: 700 0.8125rem/1 var(--font-text); letter-spacing: 0.08em; }
.start__calc { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--color-cream); color: var(--color-body); font-size: 0.9375rem; line-height: 1.5; }
.start__calc strong { color: var(--color-red); }

.start__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld--full { grid-column: 1 / -1; }
.fld__label { color: var(--color-ink); font: 700 0.8125rem/1.2 var(--font-text); }
.fld input, .fld textarea {
  width: 100%; min-height: 52px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid var(--color-line); background: var(--color-white); color: var(--color-ink); font-size: 1rem;
  transition: border-color 160ms, box-shadow 160ms;
}
.fld textarea { min-height: 88px; padding: 12px 14px; resize: vertical; font: inherit; font-size: 1rem; line-height: 1.5; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--color-red); box-shadow: 0 0 0 1px var(--color-red); }
.fld input[aria-invalid="true"] { border-color: var(--color-red); background: color-mix(in srgb, var(--color-red) 4%, var(--color-white)); }
.start__note summary { padding: 6px 0; cursor: pointer; list-style: none; color: var(--color-red); font: 700 0.9375rem/1.3 var(--font-text); }
.start__note summary::-webkit-details-marker { display: none; }
.start__note summary::before { content: "+ "; }
.start__note[open] summary::before { content: "\2212 "; }
.start__note summary span { color: var(--color-muted); font-weight: 600; }
.start__note[open] summary { margin-bottom: 6px; }
.start__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.start__error { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--color-red) 8%, var(--color-white)); color: var(--color-red-deep); font: 600 0.9375rem/1.4 var(--font-text); }
.start__error[hidden] { display: none; }
.start__trust {
  display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--color-line); color: var(--color-muted); font: 600 0.8125rem/1.4 var(--font-text);
}
.start__trust img { flex: none; width: 28px; height: 28px; object-fit: contain; }
.start__trust--lock svg { flex: none; color: var(--color-red); }

.start__review { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--color-cream); }
.start__review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.start__stars { color: var(--color-star); letter-spacing: 2px; font-size: 1rem; }
.start__review svg { width: 18px; height: 18px; }
.start__review blockquote { margin: 0; color: var(--color-body); font-size: 0.9375rem; line-height: 1.5; }
.start__review figcaption { margin-top: 6px; color: var(--color-ink); font: 700 0.8125rem/1.2 var(--font-text); }

.start__foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom)) 24px;
  border-top: 1px solid var(--color-line); background: var(--color-cream-lit);
}
.start__foot[hidden] { display: none; }
.start__back { min-height: 44px; padding: 0 4px; color: var(--color-ink); font: 700 1rem/1 var(--font-text); text-decoration: underline; text-underline-offset: 3px; }
.start__back[hidden] { display: none; }
.start__next { margin-left: auto; }
.btn.btn--cta.start__next { height: 54px; }
.start__next[disabled] { cursor: progress; opacity: .75; }

.start__done { padding-top: 6px; text-align: center; }
.start__seal { position: relative; width: 116px; height: 116px; margin: 4px auto 16px; }
.start__seal img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--color-ink) 28%, transparent)); }
.start__seal span {
  position: absolute; right: -4px; bottom: 2px; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--color-ink); color: var(--color-cream); border: 3px solid var(--color-gold);
}
.start__seal span svg { width: 18px; height: 18px; }
.start__done .start__lead { max-width: 30ch; margin-inline: auto; }
.btn.start__go { display: inline-flex; margin: 6px auto 0; }
.start__after { margin-top: 16px; color: var(--color-muted); font-size: 0.875rem; line-height: 1.5; }
.start__after a { color: var(--color-red); font-weight: 700; white-space: nowrap; }
.start__step.is-current.start__done .start__seal img { animation: sealIn 760ms cubic-bezier(.2, 1.3, .4, 1) both; }
.start__step.is-current.start__done .start__seal span { animation: tickPop 420ms 380ms cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes sealIn { from { opacity: 0; transform: translateY(18px) rotate(-200deg) scale(.6); } to { opacity: 1; transform: none; } }

.start__step.is-entering { animation: stepIn 360ms var(--ease-decel) both; }
.start__step.is-entering.is-back { animation-name: stepInBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

@media (max-width: 599px) {
  .modal__dialog.start { max-width: none; max-height: calc(100dvh - 12px); border-radius: 24px 24px 0 0; }
  .start__top { padding: 18px 18px 14px; }
  .start__fig { font-size: 2.125rem; }
  .start__bar { padding: 14px 12px 2px 18px; }
  .start__body { padding: 16px 18px 10px; }
  .start__foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) 18px; }
  .start__opts--years .opt__title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .start__step.is-entering, .opt input:checked + .opt__card .opt__tick,
  .start__step.is-current.start__done .start__seal img, .start__step.is-current.start__done .start__seal span { animation: none; }
  .start__progress span::after { transition: none; }
}
/* The amount box shows its own focus ring; the field inside it must not draw
   a second, square one. Same for the option inputs, whose card shows focus. */
.start__money input:focus-visible { outline: none; }
/* One height for every step, so the card stays still and only what is in it
   changes; a short step leaves room, a long one scrolls inside the card. */
.modal__dialog.start { height: min(720px, calc(100dvh - 40px)); }
@media (max-width: 599px) { .modal__dialog.start { height: min(760px, calc(100dvh - 16px)); } }
/* The fan, rearranged so the list keeps its point: the highlighted row with
   U.S. Tax Recovery Inc. on it sits 60-81% down the IRS screenshot, between
   about a third and nine-tenths across. The list now sits to the right and
   the letter rests low and to the left, below that row, over the screenshot's
   empty sidebar. */
.proof-fan .browser-frame { margin: 0 0 0 10%; }
.proof-fan .doccard { width: 64%; margin: 46% 0 0 0; transform: rotate(-2.4deg); transform-origin: 0 0; }
.proof-fan .reveal.doccard { transform: translateY(26px) rotate(-6deg); }
.proof-fan .reveal.doccard.is-visible { transform: rotate(-2.4deg); }
.proof-fan .doccard figcaption { font-size: 0.8125rem; padding: 10px 14px; }
@media (max-width: 599px) {
  .proof-fan .browser-frame { margin: 0; }
  .proof-fan .doccard { width: 84%; margin: 60% 0 0 4%; }
}
@media (prefers-reduced-motion: reduce) { .proof-fan .reveal.doccard { transform: rotate(-2.4deg); } }
.proof-fan .browser-frame, .proof-fan .doccard { align-self: start; }
/* On a phone the six reviews are a row to swipe through, not six screens of
   scrolling: each card most of the width, the next one peeking in. */
@media (max-width: 719px) {
  .rgrid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--pad-inline) * -1); padding: 4px var(--pad-inline) 12px;
    scroll-padding-inline: var(--pad-inline);
  }
  .rgrid::-webkit-scrollbar { display: none; }
  .rgrid > li { flex: 0 0 86%; scroll-snap-align: start; }
}
/* Six links now, with Blog, and a button with a chip in it: at the old
   spacing the row ran 21px past its column at 1180 (and off the screen by
   11) and 43px into the right margin at 1440. Tighter gaps, measured to fit
   from 1180 up. */
@media (min-width: 1180px) {
  .site-header .bar { gap: var(--sp-3); }
  .site-nav { gap: 18px; margin-left: 0; }
  .header-actions { gap: 10px; }
}

/* ====================================================================== */
/* A statement and a fan of chips                                         */
/* In place of the stock-style photographs. The chips are the hero's own  */
/* renders, each at another point in its flip; the script turns them with */
/* the scroll, each at its own pace, and they float a little at rest.     */
/* ====================================================================== */
.chiparc { overflow: hidden; padding-block: var(--sp-7) var(--sp-6); text-align: center; }
.chiparc__copy { max-width: 60rem; }
.chiparc__title { margin-bottom: var(--sp-3); font-size: clamp(2.5rem, 1.3rem + 5vw, 5.75rem); line-height: 0.9; text-wrap: balance; }
.chiparc__lead { max-width: 34em; margin: 0 auto; color: var(--color-muted); font: 500 var(--fs-lead)/1.55 var(--font-text); }
.band--red .chiparc__title { color: var(--color-cream); }
.chiparc__fan { position: relative; max-width: 1180px; height: clamp(190px, 19vw, 290px); margin: var(--sp-5) auto 0; }
.chiparc__chip { position: absolute; display: block; width: clamp(84px, 11vw, 168px); transform: translate(-50%, -50%) scale(var(--s, 1)); }
.chiparc__chip img, .chiparc__chip .chip-flip-box { width: 100%; }
.chiparc__chip .floaty { display: block; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--color-ink) 26%, transparent)); }
.chiparc__chip:nth-child(1) { left: 7%;  top: 60%; --s: .78; }
.chiparc__chip:nth-child(2) { left: 21%; top: 36%; --s: .92; }
.chiparc__chip:nth-child(3) { left: 35.5%; top: 64%; --s: 1.04; }
.chiparc__chip:nth-child(4) { left: 50%; top: 40%; --s: 1.2; }
.chiparc__chip:nth-child(5) { left: 64.5%; top: 66%; --s: 1.04; }
.chiparc__chip:nth-child(6) { left: 79%; top: 36%; --s: .92; }
.chiparc__chip:nth-child(7) { left: 93%; top: 60%; --s: .78; }
.chiparc__fan.reveal { transform: none; }
.chiparc__fan.reveal .chiparc__chip { opacity: 0; }
.chiparc__fan.reveal.is-visible .chiparc__chip { animation: chipToss 900ms cubic-bezier(.2, 1.15, .35, 1) both; animation-delay: calc(var(--n) * 70ms); }
@keyframes chipToss {
  from { opacity: 0; transform: translate(-50%, 10%) scale(calc(var(--s, 1) * .55)) rotate(-24deg); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(var(--s, 1)); }
}
@media (max-width: 699px) {
  .chiparc { padding-block: var(--sp-6) var(--sp-5); }
  .chiparc__fan { height: 150px; margin-top: var(--sp-4); }
  .chiparc__chip { width: 23vw; }
  .chiparc__chip:nth-child(1), .chiparc__chip:nth-child(7) { display: none; }
  .chiparc__chip:nth-child(2) { left: 12%; }
  .chiparc__chip:nth-child(3) { left: 31%; }
  .chiparc__chip:nth-child(5) { left: 69%; }
  .chiparc__chip:nth-child(6) { left: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .chiparc__fan.reveal .chiparc__chip { opacity: 1; animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Refund calculator page                                                  */
/* ---------------------------------------------------------------------- */

/* The calculator: the two amounts on the left, the answer on red felt on the
   right, the way the start flow shows its figure in the red strip. */
.rcalc {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  max-width: 1040px; margin-inline: auto;
  border-radius: calc(var(--radius-lg) * 1.4); overflow: hidden;
  background: var(--color-cream); box-shadow: var(--shadow-md);
}
@media (min-width: 900px) { .rcalc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
/* Grid items default to min-width:auto, and a text input's default width
   (size=20 at this font) is wider than a phone: without this the card ran
   off the right edge, clipped by the section. */
.rcalc > * { min-width: 0; }
.rcalc__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.rcalc__label { display: block; color: var(--color-ink); font: 700 1.125rem/1.3 var(--font-text); }
.rcalc__label span { color: var(--color-muted); font-weight: 600; }
.rcalc__hint { margin: 4px 0 12px; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.5; }
.rcalc .start__money { height: 76px; }
.rcalc__years { grid-template-columns: 1fr 1fr; }
.rcalc__years .opt__card { min-height: 60px; }
.rcalc .start__money input:focus-visible { outline: none; }
.rcalc__out {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: radial-gradient(120% 90% at 30% 15%, color-mix(in srgb, var(--color-red) 82%, white) 0%, var(--color-red) 48%, var(--color-red-deep) 100%);
  color: var(--color-cream);
}
.rcalc__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid color-mix(in srgb, var(--color-cream) 22%, transparent); }
.rcalc__k { font: 700 0.875rem/1.2 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-cream); }
.rcalc__v { font: 800 clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem)/1 var(--font-display); font-stretch: 62%; color: var(--color-cream); font-variant-numeric: tabular-nums; }
.rcalc__row--back .rcalc__v { color: var(--color-gold); }
.rcalc:not(.has-back) .rcalc__row--back .rcalc__v { color: color-mix(in srgb, var(--color-cream) 45%, transparent); }
.rcalc__note { margin: var(--sp-1) 0 var(--sp-2); min-height: 3em; font-size: 1rem; line-height: 1.55; color: var(--color-cream); }
.rcalc__out .btn { align-self: flex-start; }
.rcalc__small { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: color-mix(in srgb, var(--color-cream) 78%, transparent); }

/* The worked example beside "How the figure is worked out". */
.rc-example { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-md); }
.rc-example__kicker { margin: 0 0 var(--sp-1); color: var(--color-red); font: 700 0.8125rem/1.2 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; }
.rc-example__table { margin: 0; }
.rc-example__note { margin: var(--sp-2) 0 0; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.5; }
.rc-example__table th { background: transparent; font-weight: 600; color: var(--color-body); }
.rc-example__table td { text-align: right; color: var(--color-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-example__total th, .rc-example__total td { border-bottom: 0; color: var(--color-red); font: 800 1.375rem/1 var(--font-display); font-stretch: 62%; letter-spacing: 0.01em; }
.rc-example__total th { font-size: 1.125rem; text-transform: uppercase; }

/* A visible title for a page's own FAQ (the FAQ page itself hides its). */
.faq__title { font-size: var(--fs-h2); line-height: 0.95; }

/* ---------------------------------------------------------------------- */
/* Returning clients: two ways back in                                     */
/* ---------------------------------------------------------------------- */

.paths { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); max-width: 1040px; margin-inline: auto; }
@media (min-width: 760px) { .paths { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
.paths__card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: calc(var(--radius-lg) * 1.4);
  background: var(--color-cream); color: var(--color-body);
}
.paths__card p { margin: 0 0 var(--sp-2); font-size: 1.0625rem; line-height: 1.6; max-width: 34em; }
.paths__card .btn { margin-top: auto; }
.paths__card--main {
  background: radial-gradient(120% 90% at 30% 15%, color-mix(in srgb, var(--color-red) 82%, white) 0%, var(--color-red) 48%, var(--color-red-deep) 100%);
  color: var(--color-cream); box-shadow: var(--shadow-red);
}
.paths__obj { width: auto; height: 84px; filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--color-ink) 30%, transparent)); }
.paths__title { margin: 0; color: var(--color-ink); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); line-height: 0.95; }
.paths__card--main .paths__title { color: var(--color-cream); }

/* ---------------------------------------------------------------------- */
/* Five checks: each check, then what you find for us                      */
/* ---------------------------------------------------------------------- */

.checks li > div > p:not(.checks__us) { margin-bottom: var(--sp-2); }
.checks__us {
  margin: 0; padding: 12px 16px; border-radius: 12px;
  background: var(--color-cream); color: var(--color-body) !important; font-size: 1rem; line-height: 1.55;
}
.checks__us b { color: var(--color-red); }
.checks__us a { color: var(--color-red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.inline-link { color: var(--color-red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.inline-link::after { content: " \2192"; }
.calc__more { display: inline-block; margin: 0 0 14px; color: var(--color-red); font: 700 0.875rem/1.4 var(--font-text); text-decoration: underline; text-underline-offset: 3px; }

/* Short screens: the step-3 review would be cut off mid-sentence by the
   footer (1280x720, 375x667), and in phone landscape the red strip left a
   108px window for the question itself. */
@media (max-height: 760px) { .start__review { display: none; } }
@media (max-height: 500px) { .start__top { display: none; } }
.steps__calc { margin-top: var(--sp-4); text-align: center; font-size: 1.0625rem; }
.steps__calc .inline-link { white-space: normal; }

/* 404: one way home, then the four places most people were heading. */
.lost__cta { margin-top: var(--sp-3); }
.lost { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); max-width: 1040px; margin-inline: auto; }
@media (min-width: 900px) { .lost { grid-template-columns: repeat(4, 1fr); } }
.lost__tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%;
  padding: var(--sp-4) var(--sp-3); border-radius: var(--radius-lg); background: var(--color-cream);
  text-align: center; color: var(--color-body); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-decel), box-shadow var(--dur-fast) var(--ease-decel);
}
.lost__tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lost__tile img { width: auto; height: 84px; margin-bottom: var(--sp-1); filter: drop-shadow(0 12px 16px color-mix(in srgb, var(--color-ink) 22%, transparent)); }
.lost__tile b { color: var(--color-ink); font: 700 1.0625rem/1.3 var(--font-text); }
.lost__tile span { font-size: 0.9375rem; line-height: 1.45; color: var(--color-muted); }

/* ---------------------------------------------------------------------- */
/* Menu dropdowns: How it works and Blog open one level down               */
/* ---------------------------------------------------------------------- */
.nav-item { position: relative; display: inline-flex; align-items: center; gap: 0; }
.nav-sub-toggle {
  display: inline-grid; place-items: center; width: 26px; height: 32px; margin-left: 1px;
  border: 0; border-radius: 6px; background: none; color: var(--color-ink); cursor: pointer;
}
.nav-sub-toggle:hover { color: var(--color-red); }
.nav-sub-toggle svg { transition: transform var(--dur-fast) var(--ease-decel); }
.nav-item.is-open .nav-sub-toggle svg { transform: rotate(180deg); }
.nav-item.is-inside > a { border-color: var(--color-red); }
.nav-sub {
  position: absolute; top: calc(100% + 14px); left: -16px; z-index: 60;
  display: grid; gap: 2px; min-width: 300px; padding: 8px;
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms var(--ease-decel), transform 160ms var(--ease-decel), visibility 160ms;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* the gap the pointer crosses */
.nav-item:hover .nav-sub, .nav-item.is-open .nav-sub { opacity: 1; visibility: visible; transform: none; }
.site-nav .nav-sub a {
  display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 10px; white-space: normal;
}
.site-nav .nav-sub a b { font: 700 0.9375rem/1.25 var(--font-text); color: var(--color-ink); }
.site-nav .nav-sub a span { font: 500 0.8125rem/1.35 var(--font-text); color: var(--color-muted); }
.site-nav .nav-sub a:hover, .site-nav .nav-sub a:focus-visible { background: var(--color-cream); }
.site-nav .nav-sub a[aria-current="page"] b { color: var(--color-red); }
@media (max-width: 1179px) {
  .nav-item { display: grid; grid-template-columns: 1fr 44px; align-items: center; border-bottom: 1px solid var(--color-line); }
  .site-nav .nav-item > a { border-bottom: 0; }
  .nav-sub-toggle { width: 44px; height: 44px; margin: 0; }
  .nav-sub {
    position: static; grid-column: 1 / -1; display: none; min-width: 0; padding: 0 0 8px 14px;
    border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav-sub::before { content: none; }
  .nav-item.is-open .nav-sub { display: grid; }
  .site-nav .nav-sub a { min-height: 44px; padding: 8px 0; border-radius: 0; }
  .site-nav .nav-sub a span { display: none; }
}

/* ---------------------------------------------------------------------- */
/* "Do you qualify?": three ticks and a button, straight after a page    */
/* head, answering the first thing a visitor wonders (2026-10-02).        */
/* ---------------------------------------------------------------------- */
.qualify { padding-block: clamp(2.25rem, 1.4rem + 3vw, 4rem); border-bottom: 1px solid var(--color-line); }
.qualify__title { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: .95; margin-bottom: var(--sp-3); color: var(--color-ink); }
.qualify__list { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.qualify__list li { display: flex; gap: 14px; align-items: flex-start; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  background: var(--color-cream); border-radius: var(--radius-lg); }
.qualify__tick { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-red); color: var(--color-white); }
.qualify__list b { display: block; font: 800 1.125rem/1.25 var(--font-text); color: var(--color-ink); margin: 6px 0 4px; }
.qualify__list span:not(.qualify__tick) { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--color-body); }
.qualify__list a { color: var(--color-red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.qualify__next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.qualify__calc { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.qualify__calc:hover { color: var(--color-red); }
@media (min-width: 900px) { .qualify__list { grid-template-columns: repeat(3, 1fr); } }
/* A visible title over a page's question list (the FAQ page keeps its own hidden one). */
.faq__title { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: .95; margin-bottom: var(--sp-3); }
/* A button in a page head, under the lead. */
.page-head__copy .cta-row { margin-top: var(--sp-3); }

/* Official pages an article relies on (refs_block in build_site.py). */
.post-refs { margin-top: var(--sp-5); padding: var(--sp-3); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.post-body .post-refs__title { margin: 0 0 var(--sp-1); font: 800 1rem/1.3 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--color-ink); }
.post-refs ul { margin: 0; padding-left: 1.1em; }
.post-refs li { margin: 4px 0; font-size: 0.9375rem; }
.post-refs a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.post-refs a:hover { color: var(--color-red); }
/* Two plain links under the start button in an article. */
.post-cta__more { margin-top: var(--sp-2); font-size: 0.9375rem; }
.post-cta__more a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------- */
/* What to have ready (home). Shown while the portal is off the public    */
/* site, in the place of the portal preview: content/portal-later/.       */
/* ---------------------------------------------------------------------- */

.ready { padding-block: var(--sp-7); }

.ready__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }

.ready__grid > * { min-width: 0; }

.ready__list { list-style: none; margin: var(--sp-4) 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }

.ready__list li { padding-left: var(--sp-3); border-left: 3px solid var(--color-red); }

.ready__list b { display: block; color: var(--color-ink); font: 700 1.0625rem/1.3 var(--font-text); }

.ready__list li > span { display: block; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.55; margin-top: 2px; }

.ready__list a { color: var(--color-red); font-weight: 600; }

/* Puffed objects on a red panel, in place of a screenshot. */
.panel--objects { display: grid; place-items: center; gap: var(--sp-3); min-height: 18rem; text-align: center; }

.panel--objects .panel__hero-object { width: min(340px, 78%); }

.panel--objects .panel__cap { padding-right: 0; margin-top: 0; }

@media (min-width: 960px) {
  .ready__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-7); }
}

/* On a phone the reviews scroll sideways; the row takes keyboard focus so
   arrow keys can scroll it too (axe: scrollable-region-focusable). */
.rgrid:focus-visible { outline: 3px solid var(--color-red); outline-offset: 4px; border-radius: var(--radius-md); }

/* A real photograph in a section, in place of an illustration panel. */
.panel--photo { position: relative; }
.panel--photo .panel__img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-lg) * 1.5); box-shadow: var(--shadow-md); }

/* Visual audit 2026-11-12 ------------------------------------------------ */
/* No headline ends on a single stranded word at any width. */
h1, h2 { text-wrap: balance; }
/* Phones: the two link lists sit side by side, so the footer is about half as tall. */
@media (max-width: 619px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
  .footer__brand, .footer__col--contact { grid-column: 1 / -1; }
  .footer__col--links ul { gap: 12px; }
  .footer__col--links li { line-height: 1.35; }
}
/* Phones: the topic row fades at the right edge, a hint that it scrolls. */
@media (max-width: 767px) {
  .topic-chips { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
/* Very narrow phones: balancing plus the joined last two words can strand a
   middle word ("CASINO" alone); plain wrapping fills the lines instead. */
@media (max-width: 359px) { h1, h1.display { text-wrap: wrap; } .page-head__copy h1.display { font-size: 1.625rem; } }

/* ==== V5 homepage (approved 2026-11-13) ==== */
/* V4 "Jackpot": the slot pays out a refund cheque as the 30% reels land. */
.v4art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.v4art img { display: block; width: 100%; height: auto; }
.v4glow { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%) translateX(56%);
  background: radial-gradient(closest-side, rgba(255, 214, 140, .22), rgba(255, 190, 110, .08) 55%, transparent 72%);
  animation: v4glow 4.5s ease-in-out 2.6s infinite; }
@keyframes v4glow { 0%, 100% { opacity: .75; } 18% { opacity: 1.15; } }
.v4slot { position: absolute; left: 61%; top: 47%; width: 37%; transform: translateY(-50%); }
.v4slot__body { animation: v4in .8s cubic-bezier(.2, 1, .3, 1) both; }
.v4play .v4slot__body { animation: v4in .8s cubic-bezier(.2, 1, .3, 1) both, v4jolt .42s ease-in-out .3s both; }
.v4again .v4slot__body { animation: v4jolt .42s ease-in-out .05s both; }
.v4slot__body > img { filter: drop-shadow(0 34px 40px rgba(40, 0, 0, .45)); position: relative; z-index: 1; }
@keyframes v4in { from { opacity: 0; transform: translateY(36px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes v4jolt { 0%, 100% { rotate: 0deg; } 30% { rotate: -1.6deg; } 60% { rotate: 1.1deg; } }
/* The three reels really spin: each strip blurs through the symbols and lands
   on an exact crop of that reel from the artwork, so the stop is seamless. */
.v4reel { position: absolute; z-index: 0; overflow: hidden; background: #EFE4D2; }
.v4reel.r1 { left: 18.5%; top: 29%; width: 15%; height: 22.5%; --stop: 1.75s; }
.v4reel.r2 { left: 35%; top: 30%; width: 14.5%; height: 22.5%; --stop: 2.15s; }
.v4reel.r3 { left: 51%; top: 31.5%; width: 14.5%; height: 23%; --stop: 2.55s; }
.v4reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(70, 20, 10, .32), transparent 28%, transparent 72%, rgba(70, 20, 10, .32)); }
.v4reel__strip { position: absolute; left: 0; right: 0; top: 0; height: 900%; display: flex; flex-direction: column; }
.v4reel__strip img { flex: 1 1 0; width: 100%; height: 100%; min-height: 0; object-fit: fill; }
.v4play .v4reel::after, .v4again .v4reel::after { animation: v4shade var(--stop) linear both; }
@keyframes v4shade { 0%, 25% { opacity: 0; } 32%, 92% { opacity: 1; } 100% { opacity: 0; } }
.v4play .v4reel__strip, .v4again .v4reel__strip { animation: v4reelspin calc(var(--stop) - .55s) cubic-bezier(.15, .05, .2, 1.03) .55s both; }
@keyframes v4reelspin { from { transform: translateY(-88.89%); filter: blur(1.2px); } 85% { filter: blur(.6px); } to { transform: translateY(0); filter: none; } }
/* Slot spin, rebuilt: reel windows are cut out of the artwork, clean symbol
   strips spin behind the frame, and the untouched artwork fades back in once
   the last reel stops, so the final frame is the original image exactly. */
.v4slot__body { position: relative; }
.v4slot__body > img.v5full { position: relative; z-index: 2; }
.v4slot__body > img.v5cut { position: absolute; inset: 0; z-index: 1; }
.v5reels { position: absolute; inset: 0; z-index: 0; }
.v5reel { position: absolute; overflow: hidden;
  background: linear-gradient(#cdb99a, #efe3cf 22%, #f6ecdc 50%, #efe3cf 78%, #cdb99a); }
.v5reel.r1 { left: 18.5%; top: 29%; width: 15%; height: 22.5%; --dur: 1.1s; }
.v5reel.r2 { left: 35%; top: 30%; width: 14.5%; height: 22.5%; --dur: 1.45s; }
.v5reel.r3 { left: 51%; top: 31.5%; width: 14.5%; height: 23%; --dur: 1.8s; }
.v5strip { position: absolute; left: 0; right: 0; top: 0; height: 1200%; display: flex; flex-direction: column; }
.v5strip span { flex: 1 1 0; min-height: 0; display: grid; place-items: center; }
.v5strip img { width: 74%; height: auto; }
.v4play .v5strip { animation: v5spin var(--dur) cubic-bezier(.3, .02, .18, 1.02) .5s both; }
@keyframes v5spin { from { transform: translateY(-91.667%); } to { transform: translateY(0); } }
.v4play .v4slot__body > img.v5full { animation: v5hide 2.55s linear both; }
@keyframes v5hide { 0%, 15% { opacity: 1; } 16%, 89% { opacity: 0; } 100% { opacity: 1; } }
/* The cheque slides out of the payout tray: clipped at the tray's top edge. */
.v4pay { position: absolute; left: 16%; top: 80.5%; width: 46%; height: 90%; z-index: 3; clip-path: inset(0 -60% -200% -60%); }
.v4pay img { transform: translateY(14%) rotate(5deg); filter: drop-shadow(0 18px 20px rgba(40, 0, 0, .4)); transform-origin: 50% 0; }
.v4play .v4pay img { animation: v4print 1.3s cubic-bezier(.25, .9, .25, 1) 1.2s both; }
@keyframes v4print { from { transform: translateY(-104%) rotate(0deg); } 70% { transform: translateY(18%) rotate(6deg); } to { transform: translateY(14%) rotate(5deg); } }
.v4again .v4pay img { animation: none; }
@keyframes v4reprint { 0% { transform: translateY(14%) rotate(5deg); } 8%, 67% { transform: translateY(-104%) rotate(0deg); } 90% { transform: translateY(18%) rotate(6deg); } 100% { transform: translateY(14%) rotate(5deg); } }
.v4dice { position: absolute; left: 55%; top: 80%; width: 13%; animation: v4roll 1.25s cubic-bezier(.2, .9, .25, 1.05) .35s both; }
.v4dice img { filter: drop-shadow(0 18px 18px rgba(40, 0, 0, .4)); }
@keyframes v4roll { from { opacity: 0; transform: translate(-30vw, -60px) rotate(760deg); } 75% { transform: translate(-10px, 6px) rotate(8deg); } to { opacity: 1; transform: none; } }
.v4stack { position: absolute; left: 93%; top: 52%; width: 14%; animation: v4drop .9s cubic-bezier(.3, 1.35, .5, 1) .7s both; }
.v4stack img { filter: drop-shadow(0 22px 22px rgba(40, 0, 0, .45)); }
@keyframes v4drop { from { opacity: 0; transform: translateY(-140%); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.v4coin { position: absolute; left: 96%; top: 6%; width: 9%; perspective: 600px; animation: v4in .7s ease-out .5s both; }
.v4coin img { animation: v4spin 6s cubic-bezier(.45, 0, .2, 1) .9s infinite; filter: drop-shadow(0 14px 16px rgba(40, 0, 0, .4)); }
@keyframes v4spin { 0% { transform: rotateY(0deg); } 22%, 100% { transform: rotateY(1080deg); } }
.v4spark { position: absolute; width: 22px; aspect-ratio: 1; background: #F6E3B4; opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: v4twinkle 4.5s ease-in-out infinite; }
.v4spark.s1 { left: 60%; top: 4%; animation-delay: 3.4s; }
.v4spark.s2 { left: 95%; top: 46%; width: 16px; animation-delay: 3.65s; }
.v4spark.s3 { left: 63%; top: 86%; width: 14px; animation-delay: 3.9s; }
.v4spark.s4 { left: 88%; top: -6%; width: 18px; animation-delay: 3.55s; }
@keyframes v4twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 8% { opacity: 1; transform: scale(1) rotate(45deg); } 18% { opacity: 0; transform: scale(.3) rotate(90deg); } }
@media (max-width: 767px) {
  /* Phone: one centred stage. The slot is the hero, the cheque prints toward
     you, dice and chips frame its base; nothing crowds the headline. */
  .v4art { order: 2; position: relative; inset: auto; height: min(86vw, 360px); margin-top: var(--sp-3); }
  .v4glow { width: 112%; left: 50%; top: 42%; transform: translate(-50%, -50%); }
  .v4slot { left: 50%; top: 0; width: 66%; transform: translateX(-50%); }
  .v4dice { left: 2%; top: auto; bottom: 12%; width: 23%; }
  .v4stack { left: auto; right: 2%; top: auto; bottom: 10%; width: 21%; }
  .v4coin { display: none; }
}

/* How it works: the objects tossed onto the page along a gold path, no boxes. */
.v4steps { position: relative; list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.v4path { position: absolute; left: 16%; right: 16%; top: 4%; height: 150px; width: 68%; overflow: visible; }
.v4path path { fill: none; stroke: var(--color-gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 12; }
.v4steps.reveal .v4path path { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.3, .7, .2, 1) .5s; }
.v4steps.reveal.is-visible .v4path path { clip-path: inset(0 0 0 0); }
.v4step { position: relative; text-align: center; display: grid; justify-items: center; align-content: start; }
.v4step__art { height: clamp(170px, 17vw, 240px); width: 100%; display: grid; place-items: center; }
.v4step:nth-child(3) .v4step__art { transform: translateY(-34px); }
.v4step__art img { max-height: 100%; max-width: 78%; width: auto; height: auto; filter: drop-shadow(0 26px 26px color-mix(in srgb, var(--color-ink) 28%, transparent)); }
.v4steps.reveal { transform: none; }
.v4step:nth-child(2) .v4step__art img { max-height: 66%; }
.v4step:nth-child(3) .v4step__art img { max-width: 62%; max-height: 92%; }
.v4step:nth-child(4) .v4step__art img { max-width: 70%; }
.v4steps.reveal .v4step__art .floaty { opacity: 0; display: grid; place-items: center; height: 100%; }
.v4steps.reveal.is-visible .v4step__art .floaty { animation: v4toss .95s cubic-bezier(.2, 1.15, .35, 1) both, floaty var(--float-dur, 8s) ease-in-out 1.2s infinite alternate; animation-delay: calc(var(--n) * 220ms), calc(var(--n) * 220ms + 1s); }
@keyframes v4toss { from { opacity: 0; transform: translateY(46%) scale(.55) rotate(-26deg); } to { opacity: 1; transform: none; } }
.v4step__num { margin-top: var(--sp-3); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-red); color: var(--color-cream); font: 800 1.25rem/1 var(--font-display); font-stretch: 75%;
  box-shadow: inset 0 0 0 3px var(--color-red), inset 0 0 0 5px color-mix(in srgb, var(--color-gold) 90%, white), 0 8px 16px -8px rgba(60, 0, 0, .6); }
.v5idx { margin-top: var(--sp-3); width: 40px; height: 54px; border-radius: 6px; display: grid; place-content: center; gap: 1px;
  background: var(--color-cream); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-gold) 85%, white), 0 10px 18px -10px rgba(60, 0, 0, .55);
  color: var(--color-red); font: 800 1.35rem/.9 var(--font-display); font-stretch: 62%; text-align: center; transform: rotate(-4deg); }
.v5idx i { font-style: normal; font-size: .8em; }
.v4step:nth-child(3) .v5idx { transform: rotate(3deg); }
.v4step h3 { margin-top: var(--sp-2); font: 800 var(--fs-h3)/1.25 var(--font-text); color: var(--color-ink); letter-spacing: -.01em; max-width: 16em; }
.v4step p { margin-top: var(--sp-1); color: var(--color-muted); max-width: 22em; }
@media (max-width: 767px) {
  .v4steps { grid-template-columns: 1fr; gap: var(--sp-5); }
  .v4path { display: none; }
  .v4step:nth-child(3) .v4step__art { transform: none; }
  .v4step__art { height: 210px; }
  .v4step .v4step__art img { max-height: 190px !important; max-width: 72% !important; }
  .v4step:nth-child(2) .v4step__art img { max-height: 180px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .v4art *, .v4art { animation: none !important; }
  .v4steps.reveal .v4step__art .floaty { opacity: 1; animation: none !important; }
  .v4steps.reveal .v4path path { clip-path: none; transition: none; }
}


.ready__photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -36px rgba(60, 10, 10, .55); }
.ready__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ready__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px;
  color: var(--color-cream); font: 600 1rem/1.4 var(--font-text);
  background: linear-gradient(transparent, rgba(40, 6, 6, .72)); }
.ready__photo figcaption::before { content: "\2666"; color: var(--color-gold); margin-right: 8px; }

.card__back{background:url("/assets/casino/chip-face.webp") center / 44% no-repeat,repeating-linear-gradient(45deg,transparent 0 14px,color-mix(in srgb,var(--color-cream) 18%,transparent) 14px 16px),repeating-linear-gradient(-45deg,transparent 0 14px,color-mix(in srgb,var(--color-cream) 18%,transparent) 14px 16px),var(--color-red)!important}

/* ---- How it works: three even objects, chips on one gold rail ---------- */
.hw { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); position: relative; }
.hw::before { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: calc(220px + 23px); border-top: 2px dotted var(--color-gold); }
.hw__step { position: relative; display: grid; justify-items: center; text-align: center; align-content: start; }
.hw__art { height: 220px; width: 100%; display: grid; place-items: end center; padding-bottom: 14px; }
.hw__art .floaty { display: grid; place-items: end center; }
.hw__art img { width: auto; height: auto; max-width: 210px; max-height: 190px; filter: drop-shadow(0 22px 22px color-mix(in srgb, var(--color-ink) 26%, transparent)); }
.hw__step:nth-child(1) .hw__art img { max-height: 196px; }
.hw__step:nth-child(2) .hw__art img { max-height: 176px; }
.hw__step:nth-child(3) .hw__art img { max-width: 220px; }
.hw__num { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-red); color: var(--color-cream); font: 800 1.25rem/1 var(--font-display); font-stretch: 75%;
  box-shadow: inset 0 0 0 3px var(--color-red), inset 0 0 0 5px #D9B86A, 0 8px 16px -8px rgba(60, 0, 0, .6); }
.hw__text h3 { margin-top: var(--sp-3); font: 800 var(--fs-h3)/1.25 var(--font-text); color: var(--color-ink); letter-spacing: -.01em; }
.hw__text p { margin: var(--sp-1) auto 0; color: var(--color-muted); max-width: 22em; }
.hw.reveal { transform: none; opacity: 1; }
.hw.reveal .hw__step { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-decel), transform .6s var(--ease-decel); transition-delay: calc(var(--n) * 160ms); }
.hw.reveal.is-visible .hw__step { opacity: 1; transform: none; }
.hw__cta { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-4); }
@media (min-width: 768px) and (max-width: 1099px) {
  .hw__art { height: 180px; } .hw::before { top: calc(180px + 23px); }
  .hw__art img { max-width: 170px; max-height: 150px; } .hw__step:nth-child(1) .hw__art img { max-height: 156px; } .hw__step:nth-child(2) .hw__art img { max-height: 140px; }
}
@media (max-width: 767px) {
  /* phone: a vertical timeline, chip and rail on the left, object and words on the right */
  .hw { grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-5); }
  .hw::before { left: 22px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 2px dotted var(--color-gold); }
  .hw__step { grid-template-columns: 46px 1fr; grid-template-areas: "num art" "num text"; justify-items: start; text-align: left; column-gap: var(--sp-3); }
  .hw__num { grid-area: num; align-self: start; margin-top: 4px; }
  .hw__art { grid-area: art; height: auto; place-items: start; padding-bottom: 0; }
  .hw__art .floaty { place-items: start; }
  .hw__art img, .hw__step:nth-child(n) .hw__art img { max-width: 132px; max-height: 112px; }
  .hw__text { grid-area: text; } .hw__text h3 { margin-top: var(--sp-2); } .hw__text p { margin-left: 0; }
  .hw__cta { margin-top: var(--sp-5); justify-content: flex-start; }
}

/* ---- Jackpot meter: a mechanical odometer in a marquee frame ----------- */
.jp { position: relative; overflow: hidden; text-align: center; padding-block: var(--sp-7);
  background: radial-gradient(80% 110% at 50% 0%, #C8191A 0%, var(--color-red) 46%, var(--color-red-deep) 100%); }
.jp__wrap { position: relative; display: grid; justify-items: center; gap: var(--sp-3); }
.jp__eyebrow { color: #E2C27A; font: 800 .9rem/1 var(--font-text); letter-spacing: .22em; text-transform: uppercase; }
.jp__eyebrow::before, .jp__eyebrow::after { content: "\2666"; margin: 0 .7em; font-size: .8em; }
.jp__title { color: var(--color-cream); font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.6rem); line-height: .95; margin: 0 0 var(--sp-2); text-wrap: balance; }
.jp__frame { position: relative; padding: clamp(20px, 2.2vw, 28px); border-radius: 32px;
  background: linear-gradient(#5a0c0c, #2a0606); box-shadow: inset 0 0 0 2px #C9A24B, inset 0 0 0 4px #2a0606, 0 30px 60px -30px rgba(0, 0, 0, .75); }
/* chasing marquee bulbs: real bulbs placed around the frame by script */
.jp__bulbs { position: absolute; inset: 0; pointer-events: none; }
.jp__bulb { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFFBEA, #FFD976 55%, #C9922E); box-shadow: 0 0 6px 2px rgba(255, 205, 110, .75);
  animation: jpChase 1s steps(1) infinite; }
.jp__bulb:nth-child(even) { animation-delay: -.5s; }
@keyframes jpChase { 0% { opacity: 1; } 50% { opacity: .28; box-shadow: none; } }
.odo { position: relative; display: flex; align-items: center; gap: clamp(3px, .45vw, 7px); padding: clamp(10px, 1.3vw, 16px) clamp(12px, 1.7vw, 22px);
  border-radius: 18px; background: linear-gradient(#1c1212, #0b0707); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .45); }
.odo__cur, .odo__sep, .odo__dot { color: #E2C27A; font: 800 clamp(2rem, .9rem + 4.8vw, 5.2rem)/1 var(--font-display); font-stretch: 62%; }
.odo__sep, .odo__dot { margin-inline: -1px; align-self: flex-end; }
.odo__reel { --h: clamp(2.5rem, 1.1rem + 5.6vw, 6rem); position: relative; width: calc(var(--h) * .6); height: var(--h); overflow: hidden; border-radius: 7px;
  background: linear-gradient(#e6d6bc, #fdf7ec 30%, #fdf7ec 70%, #ddcaab); }
.odo__reel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(70, 20, 10, .42), transparent 30%, transparent 70%, rgba(70, 20, 10, .42)); }
.odo__strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; will-change: transform; }
.odo__strip span { height: var(--h); display: grid; place-items: center; color: var(--color-red); font: 800 calc(var(--h) * .86)/1 var(--font-display); font-stretch: 62%; }
.odo__reel--c { --h: clamp(1.6rem, .7rem + 3.2vw, 3.6rem); align-self: flex-end; background: linear-gradient(#2e1d0f, #4a3016 50%, #2e1d0f); }
.odo__reel--c .odo__strip span { color: #F2D58E; }
.jp__more { color: var(--color-cream); font: 800 clamp(1.5rem, 1rem + 1.8vw, 2.4rem)/1 var(--font-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: .02em; }
.jp__cta { margin-top: var(--sp-2); }
.jp__obj { position: absolute; pointer-events: none; height: auto; filter: drop-shadow(0 22px 22px rgba(40, 0, 0, .45)); }
.jp__obj--l { left: 0; bottom: -4%; width: clamp(96px, 10vw, 160px); transform: rotate(-6deg); }
.jp__obj--r { right: 1%; top: 2%; width: clamp(72px, 7.5vw, 116px); animation: floaty 8s ease-in-out infinite alternate; }
@media (max-width: 767px) {
  .jp { padding-block: var(--sp-6) var(--sp-7); }
  .jp__eyebrow { letter-spacing: .12em; font-size: .78rem; }
  .odo { gap: 2px; padding: 8px 10px; }
  .odo__reel { --h: 2.3rem; } .odo__reel--c { --h: 1.5rem; }
  .odo__cur, .odo__sep, .odo__dot { font-size: 1.9rem; }
  .jp__frame { padding: 16px; border-radius: 24px; } .jp__bulb { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
  .jp__obj--l { left: -14px; bottom: -6%; width: 80px; } .jp__obj--r { right: -8px; top: -2%; width: 58px; }
}
@media (max-width: 380px) { .odo__reel { --h: 2.05rem; } .odo__reel--c { --h: 1.35rem; } .odo__cur, .odo__sep, .odo__dot { font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .jp__bulb, .jp__obj--r { animation: none; } .hw.reveal .hw__step { opacity: 1; transform: none; transition: none; } }
/* QA polish 2026-11-13: closing-band props collide with the copy on small phones */
@media (max-width: 479px) { .final__obj { display: none; } }
/* ==== /V5 homepage ==== */

/* ==== Site upgrade (2026-11-14): tagline, track record, route, ticket, open pill ==== */
/* The logo's own line, used in a few chosen places only. */
.jp__tag { margin: .2rem 0 var(--sp-1); color: #E2C27A; font: italic 600 clamp(1rem, .9rem + .5vw, 1.25rem)/1.3 var(--font-text); letter-spacing: .01em; }

/* About: the bignum year spins in like the trust figures. */
.spin-fig .reel { height: 1lh; }
.panel__object--leaf { width: clamp(92px, 6vw + 40px, 140px); transform: rotate(14deg); }

/* About: the track record, four stops on a gold rail. */
.record__rail { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); position: relative; }
.record__rail::before { content: ""; position: absolute; left: 12%; right: 12%; top: 58px; border-top: 2px dashed color-mix(in srgb, var(--color-gold) 70%, transparent); }
.record__stop { position: relative; text-align: center; }
.record__obj { display: grid; place-items: center; width: 116px; height: 116px; margin: 0 auto var(--sp-2); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--color-cream) 70%); box-shadow: 0 0 0 6px var(--color-white), 0 0 0 7px color-mix(in srgb, var(--color-gold) 55%, transparent), var(--shadow-md); }
.record__obj img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--color-ink) 22%, transparent)); }
.record__when { display: block; color: var(--color-red); font: 800 clamp(2rem, 1.4rem + 1.6vw, 2.75rem)/1 var(--font-display); font-stretch: 62%; letter-spacing: .01em; }
.record__stop h3 { margin: .35rem 0 .3rem; color: var(--color-ink); font: 700 1.125rem/1.25 var(--font-text); }
.record__stop p { margin: 0 auto; max-width: 24ch; color: color-mix(in srgb, var(--color-ink) 75%, var(--color-muted)); font-size: 1rem; line-height: 1.5; }
.record__stop a { color: var(--color-red); font-weight: 700; }
@media (max-width: 899px) {
  .record__rail { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
  .record__rail::before { display: none; }
}
@media (max-width: 420px) { .record__obj { width: 96px; height: 96px; } }

/* How it works: the route from slip to cheque, on a red band. */
.route__eyebrow { margin: 0 0 .5rem; color: #E2C27A; font: 800 .9rem/1 var(--font-text); letter-spacing: .22em; text-transform: uppercase; }
.route__eyebrow::before, .route__eyebrow::after { content: "\2666"; margin: 0 .7em; font-size: .8em; }
.route .display { color: var(--color-cream); }
.route__track { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); position: relative; }
.route__track::before { content: ""; position: absolute; left: 10%; right: 10%; top: 52px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--color-cream) 22%, transparent); }
.route__track::after { content: ""; position: absolute; left: 10%; top: 52px; height: 4px; width: 0; border-radius: 4px; background: linear-gradient(90deg, #E2C27A, var(--color-gold)); box-shadow: 0 0 12px color-mix(in srgb, #E2C27A 60%, transparent); }
.route__track.is-visible::after { width: 80%; transition: width 2.4s cubic-bezier(.3, .7, .2, 1) .3s; }
.route__stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--color-cream); }
.route__obj { display: grid; place-items: center; width: 108px; height: 108px; margin-bottom: var(--sp-2); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--color-cream) 72%); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-red-deep) 60%, transparent), 0 0 0 7px #E2C27A, 0 18px 30px -14px rgba(0,0,0,.55); }
.route__obj img { width: 70%; height: 70%; object-fit: contain; }
.route__when { color: #E2C27A; font: 800 .8rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; }
.route__what { margin: .45rem 0 .3rem; font: 800 clamp(1.25rem, 1rem + .7vw, 1.6rem)/1.05 var(--font-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: .01em; }
.route__how { max-width: 20ch; font-size: .975rem; line-height: 1.45; color: color-mix(in srgb, var(--color-cream) 88%, transparent); }
.route__tag { font-style: italic; color: #F3DFA8; font-weight: 600; }
.route__stop--win .route__obj { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-red-deep) 60%, transparent), 0 0 0 7px #E2C27A, 0 0 34px 6px color-mix(in srgb, #E2C27A 45%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .route__track.is-visible .route__stop--win .route__obj { animation: route-glow 2.6s ease-in-out 2.4s 2; }
}
@keyframes route-glow { 50% { transform: scale(1.06); } }
@media (max-width: 899px) {
  .route__track { grid-template-columns: 1fr; gap: var(--sp-3); max-width: 420px; margin-inline: auto; }
  .route__track::before { left: 47px; right: auto; top: 30px; bottom: 30px; width: 4px; height: auto; }
  .route__track::after { left: 47px; top: 30px; width: 4px; height: 0; background: linear-gradient(180deg, #E2C27A, var(--color-gold)); }
  .route__track.is-visible::after { width: 4px; height: calc(100% - 60px); transition: height 2.4s cubic-bezier(.3, .7, .2, 1) .3s; }
  .route__stop { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto auto; column-gap: var(--sp-2); align-items: start; text-align: left; }
  .route__obj { grid-row: 1 / 4; width: 96px; height: 96px; margin: 0; }
  .route__when { align-self: end; padding-top: .9rem; }
  .route__what { margin: .3rem 0 .2rem; }
  .route__how { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .route__track::after { transition: none !important; } }

/* Calculator: the result prints as a payout ticket. */
.payticket { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2); background: #FBF6EC; border-radius: 6px; color: var(--color-ink); box-shadow: 0 22px 38px -22px rgba(0,0,0,.6);
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.payticket__head { display: flex; justify-content: space-between; padding-bottom: .6rem; border-bottom: 2px dashed color-mix(in srgb, var(--color-red) 35%, transparent); color: var(--color-red); font: 800 .78rem/1 var(--font-text); letter-spacing: .3em; text-transform: uppercase; }
.payticket .rcalc__row { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.payticket .rcalc__k { color: color-mix(in srgb, var(--color-ink) 70%, var(--color-muted)); }
.payticket .rcalc__v { color: var(--color-ink); }
.payticket .rcalc__row--back .rcalc__v { color: var(--color-red); }
.rcalc:not(.has-back) .payticket .rcalc__row--back .rcalc__v { color: color-mix(in srgb, var(--color-ink) 30%, transparent); }
.payticket__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.payticket__bars { flex: 0 0 auto; width: 112px; height: 30px; background: repeating-linear-gradient(90deg, var(--color-ink) 0 2px, transparent 2px 4px, var(--color-ink) 4px 5px, transparent 5px 8px, var(--color-ink) 8px 11px, transparent 11px 13px); opacity: .85; }
.payticket__tag { color: var(--color-red); font: italic 600 .95rem/1.3 var(--font-text); text-align: right; }
.rcalc.has-back .payticket { animation: ticket-print .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes ticket-print { from { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .rcalc.has-back .payticket { animation: none; } }

/* Contact and FAQ: open now? */
.openpill { display: inline-flex; align-items: center; gap: .55rem; margin: var(--sp-2) 0 0; padding: .45rem .85rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-cream) 16%, transparent); color: var(--color-cream); font: 700 .9rem/1.2 var(--font-text); }
.openpill__dot { width: 9px; height: 9px; border-radius: 50%; background: #C9C1B6; flex: 0 0 auto; }
.openpill.is-open .openpill__dot { background: #3DDC84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); }
@media (prefers-reduced-motion: no-preference) { .openpill.is-open .openpill__dot { animation: pill-pulse 2s ease-out infinite; } }
@keyframes pill-pulse { 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.openpill--ink { background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-ink); }
.openpill--ink.is-open .openpill__dot { background: #1E9E5A; }
.panel__object--phone { width: clamp(120px, 9vw + 40px, 190px); right: -26px; bottom: -30px; transform: rotate(-8deg); }

.askcard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); background: var(--color-cream); box-shadow: var(--shadow-sm); }
.askcard__obj { width: 112px; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--color-ink) 22%, transparent)); }
.askcard__title { display: block; color: var(--color-ink); font: 800 1.6rem/1.05 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.askcard p { margin: .35rem 0 0; color: color-mix(in srgb, var(--color-ink) 75%, var(--color-muted)); }
.askcard .openpill { margin-top: .6rem; }
@media (max-width: 699px) {
  .askcard { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: var(--sp-3); }
  .askcard__obj { width: 96px; }
}

/* Reviews: a rosette by the heading. */
.reviews__head .section-head { position: relative; }
.reviews__rosette { position: absolute; left: -84px; top: -6px; width: 64px; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--color-ink) 22%, transparent)); }
@media (max-width: 1279px) { .reviews__rosette { position: static; display: block; width: 52px; margin-bottom: .6rem; } }

/* Refer a friend: one $25 chip per friend. */
.referchip__inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1.5rem, 1rem + 4vw, 5rem); max-width: 980px; }
.referchip__chip { width: clamp(180px, 12vw + 120px, 300px); height: auto; transform: rotate(-10deg); filter: drop-shadow(0 26px 30px rgba(0,0,0,.4)); }
.referchip .display { color: var(--color-ink); margin: 0 0 .6rem; }
.referchip p { color: color-mix(in srgb, var(--color-ink) 75%, var(--color-muted)); font-size: 1.125rem; margin: 0 0 var(--sp-3); }
.referchip__chip { filter: drop-shadow(0 26px 30px color-mix(in srgb, var(--color-ink) 30%, transparent)) !important; }
@media (max-width: 699px) { .referchip__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* Thank you: what happens next. */
.nextsteps__list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); text-align: center; }
.nextsteps__list img { display: block; width: 104px; height: 104px; object-fit: contain; margin: 0 auto var(--sp-2); filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--color-ink) 22%, transparent)); }
.nextsteps__list b { display: block; color: var(--color-ink); font: 800 1.5rem/1.05 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.nextsteps__list span { display: block; margin: .4rem auto 0; max-width: 26ch; color: color-mix(in srgb, var(--color-ink) 75%, var(--color-muted)); }
@media (max-width: 699px) { .nextsteps__list { grid-template-columns: 1fr; } }
.section-head--center .blog-label { justify-content: center; }
.route .display, .referchip .display, .record .display, .nextsteps .display { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); line-height: .95; }
.panel__object--phone { bottom: -46px; right: -30px; }
@media (min-width: 900px) { .panel:has(.panel__object--phone) .openpill { margin-right: 110px; } }
.openpill > span:last-child { text-wrap: balance; }
/* ==== /Site upgrade (2026-11-14) ==== */

/* ==== Type scale (Ethan, 2026-11-14) ====
   Big bold type is kept for the moments that earn it: the home hero, the
   recovered-for-our-clients meter, the cheque-first / IRS-kept-30% bands and the
   closing "Let's get it back." Every other heading (page titles, article titles,
   section heads) is back on the ustr-landing scale (--fs-h2, 48px at most), which
   reads better beside photos and lists. */
:root { --fs-xl: clamp(2.8rem, 1.3rem + 5.6vw, 6.25rem); }
/* Big, but three lines on a laptop ("The IRS kept 30% / of your win. / Let's get it back."), not a five-line tower (Ethan, 2026-11-14). */
.hero__title { font-size: clamp(2.75rem, 1rem + 5.4vw, 6rem); line-height: 0.9; letter-spacing: -0.008em; }
.jp__title { font-size: clamp(3rem, 1.3rem + 6.6vw, 7rem); line-height: 0.86; }
/* Every other section heading: the ustr-landing scale, never smaller. */
main section h2.display { font-size: var(--fs-h2); line-height: 0.95; text-wrap: balance; }
main section h2.display.chiparc__title { font-size: var(--fs-xl); line-height: 0.88; }
main section h2.display.jp__title { font-size: clamp(3rem, 1.3rem + 6.6vw, 7rem); line-height: 0.86; }
.final h2, main section.final h2.display { font-size: clamp(3.2rem, 1.4rem + 7vw, 7.5rem); line-height: 0.86; }
.sect { padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); }
/* ==== /Type scale ==== */

/* ==== Earlier QA fixes (kept) ==== */
.nw { white-space: nowrap; }
@media (max-width: 699px) {
  /* the gold arcs crossed the intro copy on phones; keep the felt, drop the arcs */
  .page-head--felt { background: radial-gradient(120% 150% at 82% 18%, var(--color-red-hot) 0%, var(--color-red) 40%, var(--color-red-deep) 78%, var(--color-red-night) 100%); }
  .calc-launcher.is-near-end { opacity: 0; pointer-events: none; }
}
.calc-launcher { transition: opacity .25s ease; }
@media (max-width: 899px) {
  /* phone object sat on the open/closed pill and ran off the edge */
  .panel:has(.panel__object--phone) { padding-bottom: 96px; }
  .panel__object--phone { width: 120px; right: 8px; bottom: -18px; }
}
/* page-head object never overlaps the headline on wide screens */
/* Page and article heads (Ethan, 2026-11-14: "can't it be long ways"): the
   headline runs wide across the band in two or three lines instead of a
   narrow stack; the lead stays a readable measure. The objects sit in the
   right third, so 62% never touches them. */
@media (min-width: 960px) {
  .page-head--felt .page-head__copy { max-width: min(54rem, 62%); }
  .page-head--felt h1 { max-width: none; text-wrap: pretty; }
  .page-head--felt .page-head__lead { max-width: 36rem; }
}
/* ==== /Earlier QA fixes ==== */

/* ==== Motion polish (2026-11-14) ====
   Small, once-only movements that make the page feel finished without
   pulling the eye: photos settle from a slight zoom, the object on a photo
   drops into place a beat later.
   Nothing loops; all of it is off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .panel--photo.reveal .panel__img { transform: scale(1.035); transition: transform 1400ms var(--ease-decel); }
  .panel--photo.reveal.is-visible .panel__img { transform: none; }
  .panel--photo.reveal .panel__object { opacity: 0; translate: 0 -14px; rotate: -8deg; transition: opacity 600ms var(--ease-decel) 420ms, translate 700ms cubic-bezier(.2, 1.4, .4, 1) 420ms, rotate 700ms cubic-bezier(.2, 1.4, .4, 1) 420ms; }
  .panel--photo.reveal.is-visible .panel__object { opacity: 1; translate: 0 0; rotate: 0deg; }
}
/* ==== /Motion polish ==== */
/* the arrow after "Call 1-866-..." sat against the number */
.split__link span[aria-hidden="true"] { margin-left: 0.3em; }
/* IRS proof (2026-11-14): the real irs.gov page leads, big enough to read,
   with the IRS letter tucked over its lower corner (as nolly.com shows its listing). */
.proof-fan .browser-frame { margin: 0; }
/* The IRS screenshot is cut to USTR's row only (wide, short), so the letter
   tucks in just under it. */
.proof-fan .doccard { width: 44%; justify-self: start; margin: 25% 0 0 -5%; }
@media (max-width: 1023px) { .proof-fan .browser-frame { margin-right: 0; } .proof-fan .doccard { width: 52%; margin: 27% 0 0 -2%; } }
@media (min-width: 960px) {
  .why__grid { grid-template-columns: 0.95fr 1.15fr; gap: var(--sp-6); }
  .why__proof .proof-fan { max-width: none; }
}
/* The IRS screenshot needs its width to be readable: thin padding around it. */
.panel--red:has(.proof-fan) { padding: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); width: 100%; }
.panel--red:has(.proof-fan) .panel__cap { margin-top: var(--sp-3); }

/* Trust strip on a phone: the credential across the top, then the three
   figures in one row. Kicker + figure carry each one ("Since 2001",
   "Recovered $20M", "Up front $0"); the long captions are desktop-only. */
@media (max-width: 1023px) {
  .trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
  .trust__item--credential { grid-column: 1 / -1; }
  .trust__fig { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem); }
  .trust__cap { display: none; }
  .trust__grid::after { content: "We only get paid after you get paid."; grid-column: 1 / -1; margin-top: calc(var(--sp-2) * -1); color: var(--color-ink); font: 700 1rem/1.4 var(--font-text); }
}

/* No one-word last lines in running text (QA 2026-11-14). */
p, li, dd, figcaption, .faq-item__q span, .why__list b, .site-footer a { text-wrap: pretty; }

/* ==== How our fee works (Ethan, 2026-11-14: one big bold line and a plain sentence) ==== */
.fee { padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); }
.fee__inner { text-align: center; }
main section h2.display.fee__title { font-size: var(--fs-xl); line-height: 0.88; color: var(--color-red); margin: 0 auto var(--sp-3); }
.fee__lead { max-width: 38rem; margin: 0 auto; color: var(--color-ink); font: 500 clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem)/1.55 var(--font-text); }
/* ==== /How our fee works ==== */

/* Hover effects only where there is a real pointer. On a phone a tap sets
   :hover and leaves it on, so a lifted shadow stayed stuck on buttons, the
   Google badge and the tiles after they were tapped. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--red:hover { background: var(--color-red-deep); box-shadow: var(--shadow-red); }
  .btn--cream:hover { background: var(--color-white); box-shadow: var(--shadow-md); }
  .btn:hover::after { animation: glintNow .75s ease-out 1; }
  .btn:active { transform: translateY(1px) scale(.985); }
  a.post-chip:hover { background: color-mix(in srgb, var(--color-cream) 26%, transparent); }
  .topic-chip:hover { border-color: var(--color-red); }
  .gbadge:hover { border-color: var(--color-red); box-shadow: var(--shadow-sm); }
  .lost__tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .calc-launcher:hover { background: var(--color-red); }
}

/* Links inside FAQ answers look like links: red and underlined. */
.faq-item__a a { color: var(--color-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.band--red .faq-item__a a { color: var(--color-cream); }