/* Layout: PointMaxx. Jeton's page structure in the Windows 11 Bloom palette: blue-grey sky, every compared card floating around the hero,
   one blue headline per section, a full-bleed Bloom band, rounded light panels for the working. */
/* Fonts are served from this site (copied by npm run vendor from @fontsource, SIL Open Font License), so the page
   makes no request to another site. Latin only: other scripts fall back to the system font. */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url(/vendor/fonts/inter-tight-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url(/vendor/fonts/inter-tight-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url(/vendor/fonts/inter-tight-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url(/vendor/fonts/sora-latin-700-normal.woff2) format('woff2'); }
:root {
  --sky-1: #A9BCD3;   /* wallpaper corners */
  --sky-2: #C3D1E1;
  --sky-3: #DFE7F0;   /* wallpaper glow */
  --bloom-1: #7DB4FF; /* petal highlight */
  --bloom-2: #3C87EE;
  --bloom-3: #1A5FDB; /* petal body, the accent */
  --bloom-4: #0B3FBF;
  --bloom-5: #072A8C; /* petal shadow */
  --accent: var(--bloom-3);
  --ink: #0A2366;
  --fg: #0B1A3E;
  --muted: #5B6C84;
  --neg: #5B6C84;     /* negative amounts: muted, but 4.5:1 on the page */
  --err: #C42B48;     /* errors only, 4.5:1 on the page */
  --line: #D6DFEA;
  --bg: #EEF2F7;
  --panel: #F8FAFD;
  --g: clamp(20px, 3.75vw, 64px);
  --sans: 'Inter Tight', 'Segoe UI Variable', 'Segoe UI', Arial, sans-serif;
  --mark: 'Sora', 'Inter Tight', 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
/* Moving between the site's pages (home, FAQ, blog, contact) crossfades instead of flashing; browsers without it just switch. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
html { scroll-behavior: smooth; }
/* With reduced motion: no smooth scrolling and no transitions (the hero and scroll reveals already stand still). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
/* Read by screen readers, not shown. */
.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; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; text-decoration: none; }
.serif { font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.band :focus-visible, .dock :focus-visible { outline-color: #fff; }

/* hero */
.hero { position: relative; overflow: hidden; color: var(--ink); height: 100svh; min-height: 640px; max-height: 1100px; background: var(--sky-2); }
.scene {
  position: absolute; inset: 0; pointer-events: none; transform: scale(1.1); will-change: transform;
  background:
    radial-gradient(48% 52% at 42% 30%, var(--sky-3) 0%, rgba(223, 231, 240, 0) 100%),
    radial-gradient(60% 70% at 0% 0%, var(--sky-1) 0%, rgba(169, 188, 211, 0) 100%),
    linear-gradient(170deg, #B6C7DA 0%, #C9D6E4 45%, #BFCDDD 100%);
}
.nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 36px var(--g) 0; }
.mark { font: 700 40px/1 var(--mark); letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 0.26em; }
.mark-logo { height: 1em; width: auto; display: block; } /* public/brand/logo.svg: the cards and the word, drawn to the font size */
.mark.sm { font-size: 18px; }
.nav-r { display: flex; align-items: center; gap: 8px; }
.link { background: none; border: 0; color: inherit; font: 400 18px var(--sans); padding: 0 24px; height: 52px; border-radius: 12px; cursor: pointer; }
.link:hover { background: rgba(255, 255, 255, 0.35); }
.btn {
  position: relative; display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #fff; font: 400 18px var(--sans);
}
.btn:hover { background: var(--bloom-4); }
.btn input, .file-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.hero-foot { position: absolute; z-index: 2; left: var(--g); right: var(--g); bottom: clamp(110px, 13vh, 150px); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; pointer-events: none; }
.hero-foot > * { pointer-events: auto; }
.hero h1 { font-weight: 500; font-size: clamp(56px, 7.6vw, 128px); line-height: 0.98; letter-spacing: -0.04em; }
.hero-side { width: min(360px, 100%); display: grid; gap: 34px; padding-bottom: 6px; }
.hero-side p { font-size: 24px; line-height: 1.27; letter-spacing: -0.01em; }
.ghosts { display: flex; flex-wrap: wrap; gap: 24px; }
.ghost { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px 0 12px; border: 1.5px solid rgba(10, 35, 102, 0.7); border-radius: 10px; cursor: pointer; font-size: 19px; line-height: 1; letter-spacing: -0.01em; background: rgba(255, 255, 255, 0.18); }
.ghost:hover { background: rgba(255, 255, 255, 0.45); }
.ghost small { display: block; font-size: 9px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 2px; }
.ghost svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* floating cards: hero.js draws them with WebGL into this canvas, layout from orbit.mjs */
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.scene canvas.on { opacity: 1; }
/* soften the cards behind the hero copy, like the Cosmos bottom fade */
.scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 45% at 18% 82%, rgba(201, 214, 228, 0.92) 0%, rgba(201, 214, 228, 0) 100%),
    radial-gradient(35% 35% at 85% 80%, rgba(201, 214, 228, 0.85) 0%, rgba(201, 214, 228, 0) 100%),
    linear-gradient(to top, rgba(201, 214, 228, 0.7) 0%, rgba(201, 214, 228, 0) 35%);
}

/* floating section dock */
.dock {
  position: fixed; z-index: 40; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); overflow-x: auto;
  display: flex; align-items: center; gap: 2px; height: 52px; padding: 4px; border-radius: 22px; background: var(--accent);
  box-shadow: 0 8px 28px rgba(7, 42, 140, 0.28); scrollbar-width: none;
}
.dock a { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 18px; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.dock a:hover { background: rgba(255, 255, 255, 0.14); }
/* Previous and next page: pills in the bar, between the logo and Add statements. The arrow sits inside its circle and
   the pill fills on hover, so nothing moves past its edge. Mid-size screens show just the round arrows. */
.pager { display: flex; align-items: center; gap: 10px; margin: 0 auto; }
.next-page { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 16px; border-radius: 999px; white-space: nowrap;
  background: #fff; color: var(--accent); font-weight: 500; font-size: 15px; text-decoration: none; box-shadow: 0 4px 14px rgba(11, 63, 191, 0.1), inset 0 0 0 1px var(--line);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.next-page.prev-page { padding: 0 16px 0 6px; }
.next-page svg { flex: none; width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--accent); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: background-color 0.2s ease; }
.next-page:hover { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(11, 63, 191, 0.22); }
.next-page:hover svg { background: rgba(255, 255, 255, 0.2); }
.next-page:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 980px) { .next-page span { display: none; } .next-page, .next-page.prev-page { width: 40px; padding: 0; justify-content: center; } .next-page svg { width: 30px; height: 30px; } }
@media (max-width: 559px) { .pager { display: none; } } /* phones: the dock is the way between pages */
/* From 900px: big round arrows at the middle of each side, fixed as the page scrolls. The pages that have them get
   side margins of at least 112px, so no content reaches the arrows (28px from the edge, 60px wide). */
@media (min-width: 900px) {
  [data-page="results"], [data-page="routing"], [data-page="cards"], [data-page="spending"], [data-page="statements"] { --g: max(3.75vw, 112px); }
  .pager { position: fixed; inset: 0; z-index: 40; margin: 0; pointer-events: none; }
  .next-page, .next-page.prev-page { position: fixed; top: 50%; transform: translateY(-50%); width: auto; min-width: 60px; height: 60px; padding: 0 6px; gap: 0; justify-content: center; pointer-events: auto; }
  .next-page { right: 28px; }
  .next-page.prev-page { left: 28px; right: auto; }
  .next-page svg { width: 48px; height: 48px; padding: 13px; stroke-width: 2.6; }
  /* On hover or keyboard focus the arrow opens into a pill naming the page, toward the middle of the screen. */
  .next-page span { display: block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: 16px; transition: max-width 0.3s ease, opacity 0.2s ease, padding 0.3s ease; }
  .next-page:hover span, .next-page:focus-visible span { max-width: 200px; opacity: 1; padding: 0 10px 0 16px; }
  .next-page.prev-page:hover span, .next-page.prev-page:focus-visible span { padding: 0 16px 0 10px; }
}
.dock .home { width: 60px; justify-content: center; padding: 0; }
.dock a[aria-current="page"] { background: rgba(255, 255, 255, 0.2); }
.dock svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
body.dragging .dock, body.picking .dock { display: none; } /* a category choice in the quick check needs the room */

/* Pages: app.js shows one at a time (Home is the hero; Results, Swipe guide, Cards, Spending and Files are their own
   pages), so an element marked hidden must stay hidden whatever display its own rule sets. */
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; } /* a page's heading takes focus for screen readers; no ring for that */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px var(--g) 0; color: var(--ink); }
.bar .mark { font-size: 32px; }
.bar .link:hover { background: rgba(26, 95, 219, 0.08); }
body:not(.view-home) .result { padding-top: 56px; }
body:not(.view-home) .sec { padding-top: 64px; }
body.view-routing .band { margin-top: 40px; min-height: calc(100svh - 100px); }
.nudge { margin-bottom: 24px; max-width: 60ch; }
.nudge a { display: inline-block; color: var(--accent); background: rgba(26, 95, 219, 0.08); border-radius: 999px; padding: 8px 18px; font-size: 15px; font-weight: 500; }
.nudge label { display: inline-block; cursor: pointer; color: #fff; background: var(--accent); border-radius: 999px; padding: 8px 18px; font-size: 15px; font-weight: 500; margin-right: 8px; }
/* Quick estimate: a survey, one category per step, on the quick check's card */
.q-step { width: min(440px, 100%); box-sizing: border-box; margin-top: 14px; display: grid; gap: 14px; }
.q-hint { color: var(--muted); font-size: 15px; }
.q-input { display: flex; min-width: 0; align-items: center; gap: 6px; background: var(--panel); border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); padding: 0 18px; height: 68px; color: var(--muted); font: 500 28px var(--sans); cursor: text; }
.q-input:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.q-input input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; font: 600 32px var(--sans); color: var(--ink); background: none; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.q-input input::-webkit-inner-spin-button, .q-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.q-per { font-size: 15px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.q-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.q-foot .more:disabled { visibility: hidden; }
.q-err { text-align: center; color: var(--err); font-weight: 500; margin-top: 16px; }
.q-note { max-width: 440px; margin: 20px auto 120px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.q-note label, .quick-alt a { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quick-alt { margin-top: 14px; font-size: 15px; }
.nudge a:hover { background: rgba(26, 95, 219, 0.14); }
.files-body { max-width: 760px; margin: 0 auto; padding: 0 var(--g); display: grid; gap: 16px; }

/* Loading: the hero's cards speed up (hero.js) behind a single line, then the Results page opens. */
.loader { position: fixed; inset: 0; z-index: 45; display: grid; place-content: center; text-align: center; gap: 12px; padding: 0 var(--g); color: var(--ink); pointer-events: none;
  background: radial-gradient(42% 26% at 50% 50%, rgba(223, 231, 240, 0.92) 0%, rgba(223, 231, 240, 0) 100%); } /* a soft glow so the words stay readable over moving cards */
.loader-t { font-weight: 500; font-size: clamp(36px, 6vw, 76px); line-height: 1; letter-spacing: -0.045em; }
.loader-s { color: var(--fg); font-size: 17px; }
.hero-foot, .hero .nav, .dock { transition: opacity 0.4s ease; }
body.loading .hero-foot, body.loading .hero .nav, body.loading .dock { opacity: 0; pointer-events: none; }
/* The hand-off: the loader and the cards fade out, then the page fades in. */
.loader, .hero .scene { transition: opacity 0.25s ease; }
body.leaving .loader, body.leaving .hero .scene { opacity: 0; }
body.arriving [data-page]:not([hidden]) { animation: arrive 0.35s ease both; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }

/* shared section pieces */
.tag { display: inline-block; justify-self: center; font-size: 12px; font-weight: 500; color: var(--accent); border: 1px solid rgba(26, 95, 219, 0.45); border-radius: 999px; padding: 3px 12px; }
.sh { display: grid; justify-items: center; text-align: center; gap: 16px; max-width: 760px; margin: 0 auto 48px; padding: 0 var(--g); }
.sh h2 { color: var(--accent); font-weight: 500; font-size: clamp(32px, 3.9vw, 40px); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.sh .sub { color: var(--muted); font-size: 17px; max-width: 52ch; }
.panel { max-width: 960px; margin: 0 auto; background: var(--panel); border-radius: 24px; padding: 8px 28px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 24px rgba(11, 63, 191, 0.05); }
.sec { padding-top: 180px; }
.sec .panel { margin-inline: max(var(--g), calc((100% - 960px) / 2)); }

/* result */
/* one shrinkable column: a long card name in a picker must not widen the whole section past the screen */
.result { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 160px var(--g) 0; }
.result > * { max-width: 100%; }
.msg { color: var(--bloom-4); background: rgba(26, 95, 219, 0.08); border-radius: 12px; padding: 10px 16px; font-size: 14px; margin-bottom: 24px; max-width: 70ch; }
.msg:empty { display: none; }
.meta { color: var(--muted); background: var(--panel); border-radius: 999px; padding: 6px 16px; font-size: 13px; }
.result .tag { margin-top: 40px; }
#names { color: var(--accent); font-weight: 500; font-size: clamp(40px, 5.6vw, 72px); line-height: 1; letter-spacing: -0.035em; max-width: 15ch; text-wrap: balance; margin-top: 20px; }
#names i { font-style: normal; color: var(--fg); }
#names a { color: inherit; text-decoration: none; } /* looks as before; each name opens its card's page */
#names a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; }
#names a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.big { font-weight: 500; font-size: clamp(88px, 12vw, 176px); line-height: 0.9; letter-spacing: -0.055em; margin-top: 56px; color: var(--ink); }
.cap { color: var(--muted); font-size: 16px; margin-top: clamp(22px, 2.6vw, 36px); } /* clear of the comma, which hangs below the number */
.paid { color: var(--muted); font-size: clamp(18px, 2vw, 24px); margin-top: 36px; }
.result .paid + .big { margin-top: clamp(20px, 2.4vw, 34px); } /* the $ reaches above the line box; give it room */
.yearone { color: var(--muted); font-size: 16px; margin-top: 6px; max-width: 60ch; }
.yearone:empty { display: none; }
.yearone b { color: var(--fg); font-weight: 600; }
.gainline { margin-top: 28px; font-size: 18px; line-height: 2; }
.creditline { margin-top: 10px; color: var(--muted); font-size: 15px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.creditline a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.creditline a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Small round icon buttons: the tooltip's (i) and the gear that opens the Credits page. */
.tip-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.tip-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tip-btn:hover, .tip.open .tip-btn { color: var(--accent); background: rgba(26, 95, 219, 0.08); }
.tip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Tooltips: shown by app.js on hover, focus or tap, and placed (fixed, on <body>) above their button and on screen. */
.tip { display: inline-block; vertical-align: middle; }
.tip-body { position: fixed; z-index: 60; width: max-content; max-width: min(280px, calc(100vw - 24px)); background: var(--ink); color: #fff;
  font-size: 13px; line-height: 1.45; text-align: left; padding: 8px 12px; border-radius: 10px; box-shadow: 0 6px 18px rgba(11, 30, 80, 0.18);
  display: none; pointer-events: none; }
.tip-body.open { display: block; }
.gain { color: var(--bloom-4); font-weight: 600; margin-right: 4px; }
.gain.neg { color: var(--neg); }
.sel { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
.sel select {
  appearance: none; -webkit-appearance: none; font: inherit; color: var(--fg); background: var(--panel); border: 0; border-radius: 10px;
  padding: 4px 34px 4px 14px; cursor: pointer; max-width: 100%; text-overflow: ellipsis; line-height: 1.5; box-shadow: inset 0 0 0 1px var(--line);
}
.sel select:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.sel::after { content: ''; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.ladder { display: grid; justify-content: center; justify-items: start; gap: 6px; margin-top: 56px; } /* rows share a left edge so the badges line up */
.ladder button {
  --c: var(--bloom-2);
  display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; padding: 4px 8px; border-radius: 14px; cursor: pointer;
  font: 500 clamp(24px, 7vw, 48px)/1 var(--sans); white-space: nowrap; letter-spacing: -0.03em; color: var(--c); opacity: 0.32; transition: opacity 0.2s;
}
.ladder button:nth-child(2) { --c: var(--bloom-3); }
.ladder button:nth-child(3) { --c: var(--bloom-5); }
.ladder button::before { content: attr(data-n); flex: none; display: grid; place-items: center; font-size: 0.5em; width: 1.7em; height: 1.7em; border-radius: 0.4em; line-height: 1; font-weight: 600; background: var(--c); color: #fff; letter-spacing: 0; } /* sized in its own em so the digit sits inside the square */
.ladder button:hover { opacity: 0.65; }
.ladder button[aria-pressed="true"] { opacity: 1; }
.ladder .f::before { content: '· '; }
.notice { color: var(--muted); margin-top: 24px; max-width: 60ch; }
.notice:empty { display: none; }
.pv { margin-top: 18px; color: var(--muted); font-size: 14px; }
.pv .tip-btn { width: 26px; height: 26px; margin-left: 2px; }
.pv .tip-btn svg { width: 15px; height: 15px; }
.pv a { color: var(--accent); text-decoration: none; }
.pv a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Files page: the missed-value panel is the one bold element; files and held cards stay quiet. */
.missed { background: var(--panel); border-radius: 20px; padding: 24px 28px; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 24px; }
.missed h3 { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.missed p { color: var(--muted); font-size: 15px; margin-top: 6px; max-width: 56ch; }
.missed.done { background: var(--ink); box-shadow: none; padding: 32px; display: grid; justify-items: start; }
.missed.done h3 { color: #fff; font-size: clamp(28px, 3.4vw, 36px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.missed.done p { color: #C8D4E8; font-size: 16px; margin-top: 10px; }
.missed .btn { margin-top: 20px; height: 44px; font-size: 16px; padding: 0 20px; background: #fff; color: var(--ink); }
.missed .btn:hover { background: var(--sky-3); }
.files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.files-body:has(.files:empty) .files-head { justify-content: center; }
.files-body:has(.files:empty) .files-head h3 { display: none; }
.files-head h3, .held h3 { font-size: 16px; font-weight: 600; color: var(--ink); }
.btn.quiet { height: 40px; padding: 0 16px; font-size: 15px; background: var(--panel); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
.btn.quiet:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.files-body:has(.files:empty) .btn.quiet { height: 52px; padding: 0 26px; font-size: 18px; background: var(--accent); color: #fff; box-shadow: none; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.files:empty { display: none; }
.files li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; background: var(--panel); border-radius: 14px; padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--line); }
.files .ext { width: 44px; height: 54px; border-radius: 4px 12px 4px 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: end center; padding-bottom: 8px; font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.files .bad .ext { color: var(--muted); }
.file-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.file-top b { font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.file-state { font-size: 13px; color: var(--muted); }
.file-state.ok::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.figs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; }
.figs dt { font-size: 12px; color: var(--muted); }
.figs dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.file-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.file-note.bad { color: var(--ink); }
.file-note.bad::before { content: "! "; font-weight: 700; }
.files .bad .file-note { color: var(--ink); }
.which { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.which-q { font-size: 14px; font-weight: 500; color: var(--ink); }
.which .sel select { background: #fff; font-size: 15px; min-height: 36px; }
.which .sel select:invalid { box-shadow: inset 0 0 0 1.5px var(--accent); }
.which .last4, .which .hint { font-size: 13px; color: var(--muted); }
.which .hint { flex-basis: 100%; }
.held { margin-top: 16px; }
.held ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.held li { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 999px; padding: 6px 8px 6px 16px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; min-height: 40px; }
.held li b { font-weight: 500; color: var(--fg); }
.held li small { color: var(--muted); font-size: 13px; padding-right: 8px; }
.held li .x { border: 0; background: none; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; }
.held li .x:hover { background: var(--line); color: var(--ink); }
.held li.add { padding: 0; box-shadow: none; background: none; }
.held li.add select { border-radius: 999px; min-height: 40px; background: transparent; color: var(--accent); border: 1px dashed #A9BCD3; box-shadow: none; }
.held li.add select:hover { border-color: var(--accent); box-shadow: none; }
.held li.add .sel::after { color: var(--accent); }
.held-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
@media (max-width: 560px) {
  .files li { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .files .ext { display: none; }
  .figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .which .sel, .which .sel select { width: 100%; }
  .missed, .missed.done { padding: 24px 20px; }
  .held ul { display: grid; }
  .held li { border-radius: 14px; }
  .held li b { flex: 1; }
  .held li.add .sel, .held li.add select { width: 100%; }
}
/* Quick check deck */
/* sized to fit above the bottom bar on an 800px-tall screen: header, card and buttons in one view */
body:not(.view-home) .review { padding: 20px var(--g) 0; }
.review { display: grid; justify-items: center; }
.review .sh h2 { font-size: clamp(26px, 3.2vw, 34px); }
.review .sh .sub { font-size: 15px; }
.qc-prog { width: min(440px, 100%); height: 4px; border-radius: 2px; background: #DCE5F0; margin-top: 28px; overflow: hidden; }
.qc-prog i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; }
.qc { width: min(440px, 100%); margin-top: 14px; }
.qc-card { background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 32px rgba(11, 63, 191, 0.1); transition: opacity 0.18s ease, transform 0.18s ease; }
.qc-card.out { opacity: 0; transform: translateY(-8px); }
.qc-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.qc-card .nm { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.2; overflow-wrap: anywhere; }
.qc-card .sp { color: var(--muted); font-size: 14px; margin-top: 6px; }
.qc-card .q { margin: 22px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.choices { display: grid; gap: 8px; margin-top: 20px; }
.ch { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; font: 400 15px var(--sans); color: var(--fg); background: var(--panel); border: 0; border-radius: 14px; padding: 13px 16px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.ch b { display: block; font-weight: 500; }
.ch small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ch:hover, .ch:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); outline: none; }
.ch.cur { background: rgba(26, 95, 219, 0.05); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ch.cur b { color: var(--accent); font-weight: 600; }
.qc-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.qc-foot .more { font-size: 14px; padding: 4px 0; }
.qc-foot .more:disabled { color: var(--muted); text-decoration: none; cursor: default; opacity: 0.6; }
@media (hover: none) { .deck-keys { display: none; } }
@media (prefers-reduced-motion: reduce) { .qc-card, .qc-prog i { transition: none; } }
.deck-keys { color: var(--muted); font-size: 13px; margin-top: 18px; }
/* Something else: every other category as a pill at its own width, flowing onto lines; Back sits by the question. */
.pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 20px 0 12px; }
.pick-head .q { margin: 0; }
.pick-back { background: none; border: 0; padding: 4px 0; font: 500 14px var(--sans); color: var(--accent); cursor: pointer; }
.pick-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.pick-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-grid button { font: 500 14px var(--sans); line-height: 1; white-space: nowrap; color: var(--fg); background: var(--panel); border: 0; border-radius: 999px; padding: 11px 16px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.15s ease, color 0.15s ease; }
.pick-grid button:hover, .pick-grid button:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); outline: none; }
.deck-done { margin-top: 36px; text-align: center; display: grid; justify-items: center; gap: 18px; }
.deck-done p { color: var(--fg); font-size: 17px; max-width: 40ch; }
.warn { list-style: none; margin: 20px 0 0; padding: 0; max-width: 640px; text-align: left; }
.warn:empty { display: none; }
.warn li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.warn li::before { content: "!"; position: absolute; left: 0; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px/18px var(--sans); text-align: center; }
.warn b { color: var(--fg); font-weight: 600; }
.warn a { color: var(--accent); }
.range { color: var(--muted); font-size: 16px; margin-top: 6px; max-width: 60ch; }
.range:empty { display: none; }
.range b { color: var(--fg); font-weight: 600; }
.range a { color: var(--accent); white-space: nowrap; }

/* routing band */
/* starts at the accent, not the lighter bloom-2, so white text keeps 4.5:1 even in the lightest corner */
.band { background: linear-gradient(160deg, var(--bloom-3) 0%, var(--bloom-4) 60%, var(--bloom-5) 100%); color: #fff; margin-top: 180px; padding: 120px var(--g); }
.band .tag { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.band .sh h2 { color: #fff; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.col { min-width: 0; display: grid; gap: 6px; align-content: start; padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 -4px 16px rgba(0, 0, 0, 0.05); }
.col h3 { font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.col .nums { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 4px; }
.col .nums dt { font-size: 12px; opacity: 0.85; }
.col .nums dd { margin: 0; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.col .nums .net dd { font-weight: 700; }
.col .extra a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.col .extra { color: #fff; font-size: 13.5px; }
.col ul { list-style: none; padding: 0; margin-top: 14px; }
.col li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.col li .a { font-weight: 500; }
.col li .r { grid-column: 1 / -1; color: #fff; font-size: 13.5px; }

/* ranked rows */
.rows { display: grid; }
.row { display: grid; grid-template-columns: 32px minmax(150px, 270px) minmax(0, 1fr) 96px; gap: 0 22px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.rows.plain .row { grid-template-columns: minmax(150px, 270px) minmax(0, 1fr) 96px; }
.row .rk { font-size: 13px; color: var(--muted); }
.row .nm { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.row .nm small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.track { height: 6px; border-radius: 3px; background: #E1E8F1; overflow: hidden; }
.fill { height: 100%; border-radius: 3px; background: #A9C8F5; }
.fill.in { background: var(--accent); }
.row .v { font-size: 16px; font-weight: 500; text-align: right; }
.row .v.neg { color: var(--neg); }
.key { color: var(--muted); font-size: 13px; margin-top: 16px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.key i { width: 18px; height: 6px; border-radius: 3px; background: var(--accent); display: inline-block; }
.more { background: none; border: 0; padding: 6px 4px; font: 500 15px var(--sans); color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
td small label { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--fg); }

/* tables */
.scroll { overflow-x: auto; }
.panel.scroll { padding-top: 20px; padding-bottom: 8px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 14px 0; border-top: 1px solid var(--line); vertical-align: top; }
td { padding-right: 18px; }
thead th { border-top: 0; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-top: 0; padding-bottom: 10px; }
td.r, th.r { text-align: right; padding-right: 18px; }
td small { display: block; color: var(--muted); font-size: 13px; max-width: 54ch; margin-top: 2px; }
td input[type="number"] {
  font: 400 15px var(--sans); color: var(--fg); background: #fff; border: 1px solid var(--line); border-radius: 8px;
  width: 88px; padding: 6px 8px; text-align: right;
}
td input[type="number"]:hover:not(:disabled), td input[type="number"]:focus { border-color: var(--accent); }
td input:disabled { color: var(--muted); background: transparent; }
td .sel select { font-size: 15px; background: #fff; min-width: 200px; }

details.panel { margin: 120px max(var(--g), calc((100% - 960px) / 2)) 0; padding: 0 28px; }
details > summary { list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 22px; font-weight: 400; }
details[open] > summary::after { content: '\2212'; }
details > .inner { padding: 0 0 28px; display: grid; gap: 20px; }
details .sub { color: var(--muted); max-width: 62ch; }

/* outro and footer */
.outro { display: grid; justify-items: center; text-align: center; gap: 28px; padding: 220px var(--g) 200px; }
.outro h2 { color: var(--accent); font-weight: 500; font-size: clamp(48px, 6.6vw, 96px); line-height: 0.95; letter-spacing: -0.045em; }
.outro p { color: var(--muted); font-size: 15px; margin-top: -8px; }
/* What the site does: a plain lead sentence, then three steps side by side (stacked on phones). */
.how { display: grid; gap: 28px; max-width: 1000px; margin-top: 72px; }
.outro .how-lead { color: var(--fg); font-size: clamp(18px, 2vw, 22px); line-height: 1.45; max-width: 46ch; margin: 0 auto; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; text-align: left; }
.how-steps li { counter-increment: step; display: grid; align-content: start; gap: 8px; background: var(--panel); border-radius: 16px; padding: 22px 22px 24px; box-shadow: inset 0 0 0 1px var(--line); }
.how-steps li::before { content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #fff; background: var(--accent); }
.how-steps b { color: var(--ink); font-size: 17px; font-weight: 600; }
.how-steps span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.outro .how-note { font-size: 13px; margin: 0; }
@media (max-width: 760px) { .how-steps { grid-template-columns: minmax(0, 1fr); } .how { margin-top: 48px; } }
.btn.solid { height: 48px; font-size: 16px; }

.foot { margin-top: 112px; padding: 0 var(--g) 96px; } /* the same room above the footer on every page */
.notes { list-style: none; margin: 72px 0 0; padding: 40px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px 40px; color: var(--muted); font-size: 13px; }
.giant {
  font: 700 min(18vw, (100vw - 2 * var(--g)) / 5.3)/0.8 var(--mark); /* PointMaxx is about 5.2em wide: fill the column, no wider */ letter-spacing: -0.055em; margin: 0 0 0 -0.04em; padding-bottom: 0.06em; white-space: nowrap;
  background: linear-gradient(160deg, var(--bloom-1) 0%, var(--bloom-3) 45%, var(--bloom-5) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.base .mark { color: var(--fg); }

.overlay { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(26, 95, 219, 0.94); color: #fff; }
.overlay p { font-weight: 500; font-size: clamp(28px, 5vw, 48px); letter-spacing: -0.03em; text-align: center; padding: 0 24px; }
body.dragging .overlay { display: flex; }

@media (max-width: 820px) {
  .nav { padding-top: 24px; }
  .mark { font-size: 30px; }
  .link { display: none; }
  .btn { height: 44px; padding: 0 18px; font-size: 16px; }
  .hero-foot { flex-direction: column; align-items: flex-start; bottom: 92px; gap: 24px; }
  .hero-side p { font-size: 19px; }
  .ghosts { gap: 12px; }
  .result { padding-top: 112px; }
  .foot { margin-top: 80px; }
  .ladder { margin-top: 44px; }
  .sec, .outro { padding-top: 120px; }
  .band { margin-top: 120px; padding-block: 80px; }
  .panel { padding: 4px 18px; }
  .row { grid-template-columns: 26px minmax(0, 1fr) 84px; gap: 6px 14px; }
  .rows.plain .row { grid-template-columns: minmax(0, 1fr) 84px; }
  .row .track { grid-column: 2 / -1; grid-row: 2; }
  .rows.plain .row .track { grid-column: 1 / -1; }
  .dock a { padding: 0 12px; font-size: 15px; }
  .dock .home { width: 48px; }
}
/* Phones: the logo in the top bar already goes home, so the home icon gives its room to the page links. */
@media (max-width: 480px) {
  .mark, .bar .mark { font-size: 24px; } /* the cards widen the wordmark; keep room for Add statements beside it */
  .btn { white-space: nowrap; }
  .priv-top .back { white-space: nowrap; font-size: 14px; }
  .dock .home { display: none; }
  .dock a { padding: 0 9px; font-size: 14px; }
}
@media (max-width: 360px) {
  .dock a { padding: 0 6px; font-size: 13px; }
}

/* Scroll motion (reveal.js). Only active once the script confirms motion is welcome, so content
   is never hidden without JavaScript or with reduced motion. */
@keyframes rise { from { opacity: 0; transform: translateY(0.45em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
/* The hero plays each time it comes back into view: hidden until .in, then the rise runs again. */
.reveal-on .hero h1 .ln { display: inline-block; }
.reveal-on .hero h1 .ln, .reveal-on .hero-side > * { opacity: 0; }
.reveal-on .hero.in h1 .ln { animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal-on .hero.in h1 .ln + br + .ln { animation-delay: 0.14s; }
.reveal-on .hero.in .hero-side > * { animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.38s; }
.reveal-on .hero.in .hero-side > * + * { animation-delay: 0.5s; }

.reveal-on .rv, .reveal-on .rv-kids > * {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal-on .rv { filter: blur(6px); }
.reveal-on .rv.in, .reveal-on .rv-kids.in > * { opacity: 1; transform: none; filter: none; }
/* Bars grow from zero as their rows arrive. */
.reveal-on .rv-kids:not(.in) .fill { width: 0 !important; }
.reveal-on .rv-kids .fill { transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms + 0.2s); }

/* Closing line: words light up with the scroll. */
.outro h2.lit .w { opacity: 0.16; transition: opacity 0.35s ease; }
.outro h2.lit .w.on { opacity: 1; }

/* The footer wordmark slides up from below; keep its travel from adding page height. */
.reveal-on .foot { overflow-x: visible; overflow-y: clip; }
.reveal-on .giant { will-change: transform; }

/* Cards list rows open the card's own page. */
a.row.to-card { color: inherit; text-decoration: none; }
a.row.to-card:hover .nm { color: var(--accent); }
a.row.to-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* One card's page: the drawn card beside its net, then the breakdown. */
.card-page .back, .card-head { margin-inline: max(var(--g), calc((100% - 960px) / 2)); }
#credits .back { max-width: 760px; margin: 0 auto 8px; padding: 0 var(--g); font-size: 15px; }
#credits .back a { color: var(--accent); text-decoration: none; }
.card-page .back { padding: 0 28px; font-size: 15px; }
.card-page .back a { color: var(--accent); text-decoration: none; }
.card-page .back a:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-head { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center; padding: 0 28px; margin-top: 28px; margin-bottom: 44px; }
/* The card on its page tilts toward the pointer, and a shine follows the pointer across it while hovered. */
.shine { position: relative; border-radius: 16px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease-out; }
.shine::after { content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12) 24%, transparent 46%),
    linear-gradient(105deg, transparent calc(var(--mx, 50%) - 9%), rgba(255, 255, 255, 0.28) var(--mx, 50%), transparent calc(var(--mx, 50%) + 9%));
  mix-blend-mode: screen; }
.shine:hover::after { opacity: 1; }
/* The drawn card, as brushed metal: banded reflections, fine grain, a bevelled edge, pressed lettering, and a highlight
   that follows the pointer (--mx, --my) as the card tilts toward it. */
.cc { position: relative; aspect-ratio: 1.586; border-radius: 16px; padding: 20px 22px; color: rgba(255, 255, 255, 0.94); overflow: hidden; isolation: isolate;
  --hi: color-mix(in oklab, var(--c1) 62%, #fff); --lo: color-mix(in oklab, var(--c2) 80%, #000);
  background:
    radial-gradient(90% 70% at var(--mx, 22%) var(--my, 8%), rgba(255, 255, 255, 0.32), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px, transparent 2px 4px),
    linear-gradient(112deg, var(--lo) 0%, var(--c1) 22%, var(--hi) 38%, var(--c1) 52%, var(--c2) 72%, var(--hi) 88%, var(--c2) 100%);
  background-size: auto, auto, 200% 100%; background-position: 0 0, 0 0, var(--mx, 30%) 0; transition: background-position 0.25s ease-out;
  box-shadow: 0 22px 44px rgba(11, 26, 62, 0.24), 0 2px 6px rgba(11, 26, 62, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; grid-template-areas: "iss iss" "chip ." "name net"; }
.cc::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.08' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cc::after { content: ''; position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent calc(var(--mx, 22%) - 14%), rgba(255, 255, 255, 0.55) var(--mx, 22%), transparent calc(var(--mx, 22%) + 14%)); }
.cc-motif { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; }
.m-waves .cc-motif { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='214' fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-10 60 C 80 20, 160 120, 350 40'/%3E%3Cpath d='M-10 69 C 80 29, 160 129, 350 49'/%3E%3Cpath d='M-10 78 C 80 38, 160 138, 350 58'/%3E%3Cpath d='M-10 87 C 80 47, 160 147, 350 67'/%3E%3Cpath d='M-10 96 C 80 56, 160 156, 350 76'/%3E%3Cpath d='M-10 105 C 80 65, 160 165, 350 85'/%3E%3Cpath d='M-10 114 C 80 74, 160 174, 350 94'/%3E%3Cpath d='M-10 123 C 80 83, 160 183, 350 103'/%3E%3Cpath d='M-10 132 C 80 92, 160 192, 350 112'/%3E%3Cpath d='M-10 141 C 80 101, 160 201, 350 121'/%3E%3Cpath d='M-10 150 C 80 110, 160 210, 350 130'/%3E%3Cpath d='M-10 159 C 80 119, 160 219, 350 139'/%3E%3C/svg%3E"); }
.m-rings .cc-motif { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='214' fill='none' stroke='%23fff' stroke-opacity='.15' stroke-width='1'%3E%3Ccircle cx='300' cy='190' r='20'/%3E%3Ccircle cx='300' cy='190' r='36'/%3E%3Ccircle cx='300' cy='190' r='52'/%3E%3Ccircle cx='300' cy='190' r='68'/%3E%3Ccircle cx='300' cy='190' r='84'/%3E%3Ccircle cx='300' cy='190' r='100'/%3E%3Ccircle cx='300' cy='190' r='116'/%3E%3Ccircle cx='300' cy='190' r='132'/%3E%3Ccircle cx='300' cy='190' r='148'/%3E%3Ccircle cx='300' cy='190' r='164'/%3E%3Ccircle cx='300' cy='190' r='180'/%3E%3Ccircle cx='300' cy='190' r='196'/%3E%3Ccircle cx='300' cy='190' r='212'/%3E%3Ccircle cx='300' cy='190' r='228'/%3E%3C/svg%3E"); }
.m-fine .cc-motif { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='214' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(0 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(12 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(24 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(36 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(48 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(60 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(72 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(84 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(96 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(108 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(120 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(132 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(144 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(156 250 107)'/%3E%3Cellipse cx='250' cy='107' rx='150' ry='38' transform='rotate(168 250 107)'/%3E%3C/svg%3E"); }
.m-mesh .cc-motif { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1'%3E%3Cpath d='M0 12 L12 0 L24 12 L12 24 Z'/%3E%3C/svg%3E"); background-size: 24px 24px; background-repeat: repeat; -webkit-mask-image: linear-gradient(110deg, transparent 35%, #000 80%); mask-image: linear-gradient(110deg, transparent 35%, #000 80%); }
.cc.light .cc-motif { filter: invert(1); opacity: 0.7; }
.cc > * { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.22); }
.cc.light { color: rgba(10, 35, 102, 0.86); }
.cc.light > * { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(0, 0, 0, 0.12); }
.cc-iss { grid-area: iss; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.cc-row { grid-area: chip; align-self: center; display: flex; align-items: center; gap: 12px; }
.cc-tap { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.3)); }
.cc-chip { width: 42px; height: 32px; border-radius: 6px;
  background: linear-gradient(90deg, transparent 31%, rgba(90, 60, 10, 0.35) 31% 33%, transparent 33% 67%, rgba(90, 60, 10, 0.35) 67% 69%, transparent 69%),
    linear-gradient(0deg, transparent 46%, rgba(90, 60, 10, 0.35) 46% 54%, transparent 54%), linear-gradient(135deg, #F6E3A6, #BE9845 50%, #EDD28A);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 10, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2); }
.cc-name { grid-area: name; align-self: end; font-size: 17px; font-weight: 500; line-height: 1.2; padding-right: 12px; }
.cc-net small { display: block; color: inherit; font-size: 10px; font-weight: 600; font-style: normal; letter-spacing: 0.06em; text-align: right; margin-top: 2px; }
.cc-net { grid-area: net; align-self: end; text-align: right; font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: 0.03em; }
.card-sum h2 { color: var(--accent); font-weight: 500; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.card-sum h2 a { color: inherit; text-decoration: none; }
.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Your terms on a card page: one small box under the net, only the settings that apply to the card. */
.terms-box { margin-top: 18px; padding: 12px 16px 14px; background: var(--panel); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); max-width: 460px; }
.terms-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.terms-head b { font-size: 14px; font-weight: 600; color: var(--ink); }
.terms-head .link { font-size: 13px; color: var(--accent); padding: 0; }
.terms-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.term { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.term .sel, .term .sel select { width: 100%; }
.term .sel select { height: 36px; background: #fff; font-size: 15px; }
.term .unit { display: flex; align-items: center; gap: 4px; color: var(--fg); font-size: 15px; }
.term input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--fg); }
.term input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card-tags > span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.card-tags .rank { color: #fff; background: var(--accent); font-variant-numeric: tabular-nums; }
.card-tags .in-setup { color: var(--accent); background: rgba(26, 95, 219, 0.1); font-weight: 500; }
.card-sum h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.card-sum h2 svg { width: 0.55em; height: 0.55em; margin-left: 0.18em; vertical-align: 0.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.card-sum h2 a:hover svg { opacity: 1; }
.card-net { margin-top: 14px; color: var(--muted); font-size: 17px; }
.card-net b { display: block; color: var(--ink); font-size: clamp(44px, 5vw, 60px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.card-sum .sub { margin-top: 14px; color: var(--muted); font-size: 15px; max-width: 48ch; }
.card-part { padding: 24px 28px; margin-bottom: 20px; }
.card-part h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.card-part .sub { color: var(--muted); font-size: 14px; margin-top: 10px; }
.card-part th { white-space: nowrap; }
.card-part .pays-sm { display: none; }
.card-part td:last-child, .card-part th:last-child { padding-right: 0; }
.card-part table.no-earn td:last-child, .card-part table.no-earn th:last-child { display: none; }
.card-part table.no-earn td:nth-child(3), .card-part table.no-earn th:nth-child(3) { padding-right: 0; }
.card-part tr.total td { font-weight: 600; border-top: 1px solid var(--ink); }
/* The card turns over (a button covers it) to show how its net adds up on the back, in the same metal, shaded so
   the figures read. Both faces share the card's colors, set on .flip. */
.flip { position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1); }
.flip.flipped { transform: perspective(1200px) rotateY(180deg); }
.flip > .cc { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cc.cc-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; line-height: 1.25; } /* four rows and two lines of year one fit a phone-width card */
.cc-shade { position: absolute; inset: 0; z-index: -1; background: rgba(6, 16, 40, 0.34); pointer-events: none; }
.cc.light .cc-shade { background: rgba(255, 255, 255, 0.42); }
.cc-bt { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; }
.cc-adds { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; text-shadow: inherit; }
.cc-adds div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; }
.cc-adds dt { font-size: 14px; }
.cc-adds dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-adds .sum { margin-top: 3px; padding-top: 5px; border-top: 1px solid currentColor; }
.cc-adds .sum dt, .cc-adds .sum dd { font-size: 15px; font-weight: 700; }
.cc-y1 { font-size: 12px; opacity: 0.9; }
.flip-hit { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; }
.flip-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.flip-hint { margin-top: 14px; text-align: center; color: var(--muted); font-size: 13px; }
/* Perks read like the rows above: a rule over each, the name, then its detail; two columns where there's room. */
/* Perks as a table, like what the card earns: the perk, then in short what you get. */
.perk-table td { padding-top: 10px; padding-bottom: 10px; font-size: 15px; line-height: 1.45; vertical-align: top; }
.perk-table td:first-child { font-weight: 500; width: 38%; }
.perk-table td:last-child { color: var(--muted); }
@media (max-width: 720px) { /* a phone: each perk's name over what it gives, no header */
  .perk-table thead { display: none; }
  .perk-table tr { display: block; padding: 10px 0; border-top: 1px solid var(--line); }
  .perk-table td { display: block; width: auto !important; padding: 0; border: 0; }
  .perk-table td:last-child { margin-top: 2px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .shine { transform: none; transition: none; } }
@media (max-width: 720px) {
  .card-head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .shine { max-width: 340px; width: 100%; }
  .card-part { padding: 20px; }
  .card-page .back, .card-head { padding: 0 20px; }
  .card-part table { min-width: 0; }
  .card-part .pays { display: none; }
  .card-part .pays-sm { display: block; }
}

/* Quick check: what a merchant's category is worth, and accepting the rest in one tap. */
.rest { margin-top: 20px; }
.card-head img, .cc img { -webkit-user-drag: none; user-select: none; }

/* Which card each statement is from: asked right after the files are read. */
.assign .sh { margin-bottom: 28px; }
.assign-list { list-style: none; margin: 0 auto; padding: 0 var(--g); max-width: 760px; display: grid; gap: 10px; }
.assign-list li { display: grid; gap: 10px; background: var(--panel); border-radius: 14px; padding: 16px 20px; box-shadow: inset 0 0 0 1px var(--line); }
.as-file { min-width: 0; display: grid; gap: 2px; }
.as-file b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.as-file small { color: var(--muted); font-size: 14px; }
.as-pick { display: grid; gap: 4px; justify-items: start; }
.as-pick select { max-width: min(320px, 78vw); }
.as-pick .hint { font-size: 13px; color: var(--muted); }
.assign-go { text-align: center; margin: 28px 0 120px; }
.assign-more { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.assign-more a { color: var(--accent); }
/* Shown only after See my results is pressed with an account still blank; those dropdowns turn red until picked. */
.assign-err { text-align: center; margin: 18px var(--g) 0; color: var(--err); font-size: 15px; font-weight: 500; }
.assign.tried .as-pick .sel select:invalid { box-shadow: inset 0 0 0 1.5px var(--err); }
@media (max-width: 560px) { .as-pick { width: 100%; } }
.as-pick .sel select { background: #fff; font-size: 15px; min-height: 40px; }
.as-pick .sel select:invalid { box-shadow: inset 0 0 0 1.5px var(--accent); }
.card-sum .checked { color: var(--muted); font-size: 13px; margin-top: 12px; }
.card-sum .checked a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* How a category was decided: opened from a merchant's name on the Spending page */
.why-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.why-btn:hover, .why-btn[aria-expanded="true"] { color: var(--accent); text-decoration-color: currentColor; }
tr.why-open td { border-bottom: 0; }
tr.why-row td { border-top: 0; padding-top: 0; }
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--line); }
.why-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.why-steps li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 6px 10px; border-radius: 8px; color: var(--muted); }
.why-steps li span:first-child { color: var(--fg); }
.why-steps li.on { background: rgba(26, 95, 219, 0.08); color: var(--ink); font-weight: 500; }
.why-steps li.on span:first-child { color: var(--accent); }
.why-steps li.later { opacity: 0.45; }
.why-h { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.why-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.why-bars li { display: grid; grid-template-columns: 9em 1fr 3em; gap: 10px; align-items: center; }
.why-bars .track { position: relative; height: 8px; border-radius: 4px; background: var(--line); }
.why-bars .track i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent); }
.why-bars .track b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
.why-bars .num { text-align: right; color: var(--muted); }
.why-name { margin: 16px 0 4px; font: 500 18px var(--sans); letter-spacing: 0.02em; }
.why-name span { background: rgba(26, 95, 219, calc(var(--h) * 0.55)); border-radius: 2px; }
.why-cap { margin: 0; font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
.why-model .why-cap { grid-column: auto; }
@media (max-width: 720px) { .why { grid-template-columns: 1fr; } }
/* The table scrolls sideways on phones; the panel stays in view at the visible width (the panel's padding is 18px a side). */
@media (max-width: 640px) {
  .why { position: sticky; left: 0; width: calc(100vw - 2 * var(--g) - 36px); padding: 14px; }
  .why-steps li { grid-template-columns: 7.5em 1fr; gap: 8px; padding: 6px 8px; }
  .why-bars li { grid-template-columns: 7.5em 1fr 2.6em; }
}

/* Credits page: one panel per card, one row per credit: name, a slider from nothing to all of it, the amount */
.credit-cards { max-width: 760px; margin: 0 auto; padding: 0 var(--g); display: grid; gap: 16px; }
.credit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.credit-head h3 { margin: 0; font-size: 20px; }
.credit-head h3 a { color: var(--ink); text-decoration: none; }
.credit-head h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.credit-head .pill { font-size: 12px; font-weight: 500; color: var(--accent); background: rgba(26, 95, 219, 0.08); border-radius: 999px; padding: 3px 10px; }
.credit-sum { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.credit-sum b { color: var(--ink); font-weight: 600; }
.credit-list { list-style: none; margin: 0; padding: 0; }
.credit-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) 6.5em; align-items: center; gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.credit-name b { font-weight: 500; }
.credit-name small, .credit-val small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.credit-set { position: relative; }
.credit-set input { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* What the statements show: a small tick under the track */
.credit-set:has(.has-found)::after { content: ''; position: absolute; left: var(--found); bottom: -7px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--muted); }
.credit-val { text-align: right; }
.credit-val output { font-size: 16px; font-weight: 600; color: var(--ink); }
.credit-reset { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; }
.credit-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .credit-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .credit-set { grid-column: 1 / -1; grid-row: 2; }
}

/* Example data, said where people look instead of in a banner: a filled tag on
   Results, and one quiet line under each other page's heading. All go once statements are added. */
.ex-tag { justify-self: center; margin-top: 40px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #fff; background: var(--accent); border-radius: 16px; padding: 4px 14px; text-align: center; text-wrap: balance; }
.ex-line label { color: var(--accent); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ex-line { color: var(--muted); font-size: 14px; margin-top: 6px; }
.band .ex-line { color: rgba(255, 255, 255, 0.85); }
.band .ex-line label { color: #fff; }

/* After your own statements are read: a note pointing to the tabs at the bottom that break the result down. */

/* The PRD's disclaimer (A7, M3): every result is an estimate, not advice and not an approval promise. */
.disclaimer { max-width: 640px; margin: 40px auto 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
/* The privacy promise, word for word as in the footer notes: under the Results disclaimer and the closing Add statements button. */
.priv-line { color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; margin: 8px auto 0; max-width: 640px; }
.outro .priv-line { margin-top: 14px; }
/* "Tell us" links to the contact page, where people need them: under Results, on card pages, on unreadable files. */
.priv-line a, .file-note.tell a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.card-sum .checked a.tell { white-space: nowrap; }
.base a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; }

/* The review pop-up: a dialog in the middle of the screen, the page behind it dimmed and a little blurred. */
.review-pop { width: min(440px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 24px; border: 0; border-radius: 20px; color: var(--fg);
  background: var(--panel); box-shadow: 0 24px 60px rgba(11, 30, 80, 0.28), inset 0 0 0 1px var(--line); animation: pop-in 0.3s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
.review-pop::backdrop { background: rgba(11, 26, 62, 0.38); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: dim-in 0.3s ease both; }
.review-pop-t { font-size: 19px; font-weight: 600; color: var(--ink); }
.review-pop-b { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.review-pop-b b { color: var(--fg); font-weight: 600; }
.review-pop-go { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.review-pop-go .btn { height: 44px; padding: 0 20px; display: inline-flex; align-items: center; text-decoration: none; }
.review-pop-go .link { color: var(--muted); font-size: 15px; }
.review-pop-go .btn:focus-visible, .review-pop-go .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes dim-in { from { opacity: 0; } }