/* ============================================================================
   MY FINANCIAL EDGE — COMPOSITION
   Layout only. Every size, colour and duration comes from foundation.css.
   The page is one sheet of graph paper: sections are separated by space, never
   by a background, and the only full-width colour is the closing block.
   ========================================================================== */

body { position: relative; }
main, .nav, .close { position: relative; z-index: 1; }

/* A section's height is rounded up to whole cells in page.js (--snap), so
   every section starts on a grid line and tiles inside it can land on lines. */
.snap { padding-bottom: calc(var(--pad-b, 0px) + var(--snap, 0px)); }

/* The cell grid: a container exactly --content wide whose columns are cells.
   Place things with grid-column spans; negative lines count from the right. */
.cells {
  width: var(--content); margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--cell) - .01px), 1fr));
}

/* ============================================================== canvas == */
.canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* faint colour under the paper, drifting on its own slow rhythms */
.canvas__drift { position: fixed; inset: 0; }
.canvas__drift i {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  will-change: transform;
}
.canvas__drift i:nth-child(1) {
  left: -28vmax; top: -34vmax;
  background: radial-gradient(closest-side, rgba(214, 250, 76, .30), rgba(214, 250, 76, 0));
  animation: drift-a 58s ease-in-out infinite alternate;
}
.canvas__drift i:nth-child(2) {
  right: -30vmax; top: 8vh;
  background: radial-gradient(closest-side, rgba(142, 156, 255, .20), rgba(142, 156, 255, 0));
  animation: drift-b 71s ease-in-out infinite alternate;
}
.canvas__drift i:nth-child(3) {
  left: 18vw; bottom: -46vmax;
  background: radial-gradient(closest-side, rgba(214, 250, 76, .18), rgba(214, 250, 76, 0));
  animation: drift-c 83s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(14vmax, 10vmax) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-12vmax, 14vmax) scale(.92); } }
@keyframes drift-c { to { transform: translate(10vmax, -12vmax) scale(1.1); } }

/* The paper. Vertical lines are centred on the page, so the even-cell
   --content lands its edges on them; horizontal lines count down from the top
   of the document. Every fourth line is a major line. */
.canvas__grid, .canvas__spot, .close {
  --gl: var(--grid-line); --gm: var(--grid-major);
}
.canvas__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, transparent calc(50% - .5px), var(--gm) calc(50% - .5px), var(--gm) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, var(--gm) 1px, transparent 1px),
    linear-gradient(to right, transparent calc(50% - .5px), var(--gl) calc(50% - .5px), var(--gl) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, var(--gl) 1px, transparent 1px);
  background-size:
    calc(var(--cell) * 4) 100%, 100% calc(var(--cell) * 4),
    var(--cell) 100%, 100% var(--cell);
  background-position: 50% 0, 0 0, 50% 0, 0 0;
}

/* ambient cells: page.js lights one now and then */
.canvas__cells i {
  position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell);
  opacity: 0; transition: opacity 2.2s ease-in-out;
}
.canvas__cells i.is-on { opacity: 1; }

/* the spotlight: a darker patch of the same grid that follows the pointer */
.canvas__spot {
  --gl: rgba(10, 14, 26, .16); --gm: rgba(26, 58, 245, .34);
  position: absolute; left: 0; top: 0;
  width: calc(var(--cell) * 7); height: calc(var(--cell) * 7);
  background-image:
    linear-gradient(to right, transparent calc(50% - .5px), var(--gm) calc(50% - .5px), var(--gm) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, var(--gm) 1px, transparent 1px),
    linear-gradient(to right, transparent calc(50% - .5px), var(--gl) calc(50% - .5px), var(--gl) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, var(--gl) 1px, transparent 1px);
  background-size:
    calc(var(--cell) * 4) 100%, 100% calc(var(--cell) * 4),
    var(--cell) 100%, 100% var(--cell);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
  opacity: 0; transition: opacity .8s ease;
  will-change: transform;
}
.canvas__spot.is-on { opacity: 1; }

/* ========================================================= text reveal == */
/* Each line rises from behind a hard mask: the line box clips (padded so
   ascenders, descenders and overhangs never get cut at rest), the text starts
   below it and slides up. Lines follow each other at 85ms. */
.lines { display: block; }
.ln { display: block; overflow: hidden; padding: .14em .16em .2em; margin: -.14em -.16em -.2em; }
.ln__in { display: block; }   /* may wrap: never overflow, even mid-resize */
.reveal .is-split .ln__in { transform: translate3d(0, 140%, 0); }
.reveal .is-split.is-in .ln__in {
  transform: none;
  transition: transform 820ms cubic-bezier(.16, .84, .24, 1) calc(var(--d, 0ms) + var(--i) * 85ms);
}
.reveal .no-anim .ln__in { transition: none !important; }
.is-measuring .ln__in { transform: none !important; transition: none !important; }

/* not split yet: keep it hidden rather than flash, but never forever */
.reveal [data-reveal]:not(.is-split) { visibility: hidden; animation: reveal-failsafe 0s linear 2.5s forwards; }
@keyframes reveal-failsafe { to { visibility: visible; } }

/* blocks that aren't text (the hero key) rise with the last lines */
.reveal [data-rise] { opacity: 0; transform: translateY(calc(14 * var(--p))); }
.reveal [data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease) 760ms, transform 820ms cubic-bezier(.16, .84, .24, 1) 760ms;
}

/* ================================================================= nav == */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-top: calc(var(--u) * .75); pointer-events: none; }
/* The floating tile: the key sits with an even inset on top, right and
   bottom (the bottom inset starts under the key's extrusion). The left inset
   is wider so the logo lines up with the content edge. */
.nav__inner {
  --ni: calc(8 * var(--p));                /* inset around the key */
  --nl: calc(16 * var(--p));               /* left inset, to the logo */
  pointer-events: auto;
  width: calc(var(--content) + var(--nl) * 2 + 2px); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--ni) var(--ni) calc(var(--ni) + calc(3 * var(--p))) var(--nl);
  border: 1px solid transparent; border-radius: var(--radius-tile);
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* quiet paper: the key inside it is what carries the weight */
.nav.is-scrolled .nav__inner {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--hairline); box-shadow: var(--shadow-soft);
}
.logo { display: inline-flex; align-items: center; gap: calc(10 * var(--p)); color: var(--ink); }
.logo__key {
  width: calc(28 * var(--p)); height: calc(28 * var(--p)); flex: none;
  display: grid; place-items: center;
  background: var(--cobalt-500); color: var(--lime-400);
  border: var(--stroke) solid var(--ink); border-radius: calc(8 * var(--p));
  box-shadow: 0 calc(3 * var(--p)) 0 0 var(--ink);
  font: 900 calc(19 * var(--p))/1 var(--sans);
}
.logo__key span { transform: translateY(calc(-1 * var(--p))); }
.logo__name {
  font-family: var(--display); font-stretch: var(--display-stretch);
  font-weight: 850; font-size: calc(17 * var(--p)); letter-spacing: -.02em;
}
.nav__links { display: flex; gap: var(--space-4); margin-left: auto; }
.nav__links a, .nav__login, .logo__name { white-space: nowrap; }
.nav__links a, .nav__login { font-size: var(--type-small); font-weight: 650; color: var(--ink-600); }
.nav__links a:hover, .nav__login:hover { color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: var(--space-3); }

/* ================================================================ hero == */
.hero { padding-top: calc(var(--cell) * 2); --pad-b: calc(var(--cell) * 2); }
.hero__grid { align-items: start; }
.hero__copy { grid-column: 1 / span 10; display: flex; flex-direction: column; gap: var(--space-4); padding-top: calc(var(--cell) * .75); }
.hero__title { max-width: 13ch; }
.hero__sub { max-width: var(--copy-width); }
.hero__actions { margin-top: var(--space-1); }

/* The stage is 10 cells wide. The statement sits a cell and a half down so
   the tally can overlap its corner; the callout hangs off its bottom edge. */
.hero__stage {
  grid-column: -11 / -1;
  position: relative;
  margin-top: var(--snap-t, 0px); min-height: var(--snap-min, 0px);
  padding-top: calc(var(--cell) * 2);      /* statement top lands on a line */
}

.tally {
  position: absolute; z-index: 3; right: 0; top: var(--cell);
  width: calc(var(--cell) * 5); height: calc(var(--cell) * 2);   /* 5 × 2 cells, corners on lines */
  padding: 0 calc(18 * var(--p));
  display: flex; flex-direction: column; justify-content: center; gap: calc(4 * var(--p));
}
.tally__label { font-size: var(--type-small); font-weight: 650; color: var(--ink-2); }
.tally__fig { font-size: max(44px, calc(var(--u) * 3.5)); line-height: 1; white-space: nowrap; }
.tally__fig, .tally__hl { line-height: 1; }
.tally__hl {
  display: inline-block; background: var(--lime-400);
  border-radius: calc(8 * var(--p)); padding: 0 calc(6 * var(--p));
  margin-left: calc(2 * var(--p));
}

.statement {
  position: relative; z-index: 1;
  width: calc(var(--cell) * 9);
  margin-top: var(--snap-t, 0px); min-height: var(--snap-min, 0px);
}
/* the scan line is clipped here, so the statement itself can let its corner
   marks sit outside it */
.scanclip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.statement__head {
  display: flex; flex-direction: column; gap: calc(2 * var(--p));
  padding: calc(16 * var(--p)) calc(20 * var(--p)) calc(12 * var(--p));
}
.statement__acct { font-weight: 750; font-size: var(--type-body); }
.statement__period { font-size: var(--type-small); color: var(--ink-2); }
.statement__rows { counter-reset: none; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--p));
  padding: calc(11 * var(--p)) calc(20 * var(--p));
  border-top: 1px solid var(--ink-100);
}
.row__main { display: flex; flex-direction: column; gap: calc(3 * var(--p)); min-width: 0; }
.row__label { font-weight: 650; line-height: 1.25; }
.row__meta { display: flex; align-items: center; gap: calc(8 * var(--p)); min-height: calc(24 * var(--p)); }
.row__sub { font-size: var(--type-small); color: var(--ink-2); font-weight: 550; }
.row__chip {
  min-height: calc(22 * var(--p)); padding: 0 calc(7 * var(--p));
  font-size: max(12px, calc(12.5 * var(--p)));
  opacity: 0; transform: translateY(calc(3 * var(--p))) scale(.9);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.row.is-found .row__chip { opacity: 1; transform: none; }
.row__amt { font-weight: 600; white-space: nowrap; font-size: var(--type-body); }
.row--plain .row__amt { color: var(--ink-2); }
.row [data-mark] { position: relative; display: inline-block; padding: 0 calc(2 * var(--p)); }

.scanline {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: calc(var(--cell) * 1.2);
  background: linear-gradient(to bottom, rgba(214, 250, 76, 0), rgba(214, 250, 76, .45));
  border-bottom: calc(2 * var(--p)) solid var(--cobalt-500);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
}
.scanline.is-on { opacity: 1; }

.callout {
  position: relative; z-index: 4;
  /* hangs a cell to the left, its top on the statement's bottom line */
  margin: var(--snap-t, 0px) 0 0 calc(var(--cell) * -1);
  min-height: var(--snap-min, 0px);
  width: calc(var(--cell) * 8);
  display: flex; align-items: center; gap: calc(14 * var(--p));
  padding: calc(12 * var(--p)) calc(14 * var(--p)) calc(12 * var(--p)) calc(16 * var(--p));
  opacity: 0; transform: translateY(calc(-10 * var(--p)));
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  visibility: hidden;
}
.callout.is-in { opacity: 1; transform: none; visibility: visible; }
.callout__dot {
  width: calc(12 * var(--p)); height: calc(12 * var(--p)); flex: none;
  background: var(--orange-500); border-radius: calc(3 * var(--p));
}
.callout__text { flex: 1; font-size: var(--type-small); font-weight: 650; line-height: 1.35; }

.hero__marker { position: absolute; z-index: 2; right: calc(var(--cell) * -1.2); bottom: calc(var(--cell) * .1); }

.replay[hidden] { display: none; }
.replay {
  position: absolute; left: 0; top: calc(var(--cell) * .9);
  display: inline-flex; align-items: center; gap: calc(6 * var(--p));
  min-height: 44px; padding: 0 calc(10 * var(--p)) 0 calc(4 * var(--p));
  background: none; border: 0; border-radius: var(--radius-chip); cursor: pointer;
  font-size: var(--type-small); font-weight: 700; color: var(--ink-2);
}
.replay:hover { color: var(--ink); }
.replay svg { width: calc(18 * var(--p)); height: calc(18 * var(--p)); }

/* the odometer: columns of 0–9 0–9 strips, clipped to one line */
.ticker { display: inline-flex; vertical-align: top; height: 1em; line-height: 1; overflow: hidden; }
.ticker__col { display: inline-block; width: 1ch; height: 1em; overflow: hidden; transition: width 380ms var(--ease); }
.ticker__col.is-off { width: 0; }
.ticker__strip { display: flex; flex-direction: column; transition: transform 620ms var(--ease); }
.ticker__strip span { display: block; height: 1em; line-height: 1; text-align: center; }

/* ======================================================= opportunities == */
.opps { padding-top: calc(var(--cell) * 2); --pad-b: calc(var(--cell) * 3); }
.opps__grid { align-items: start; }
.opps__intro {
  grid-column: 1 / span 11; grid-row: 1;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.opps__intro .t-lead { max-width: var(--copy-width); }

/* findings pinned to the paper: different widths, different heights. Each
   render stands on its card, dipping --dip into it; its size comes from the
   art:scale block, so every outline matches. */
.find {
  --dip: calc(var(--cell) * 1);
  --mt: calc(var(--cell) * 3);
  grid-row: 2;
  display: flex; flex-direction: column; gap: calc(8 * var(--p));
  padding: calc(var(--dip) + var(--space-6)) calc(24 * var(--p)) calc(24 * var(--p));
  margin-top: calc(var(--mt) + var(--snap-t, 0px));
  min-height: var(--snap-min, 0px);
  opacity: 0; transform: translateY(calc(-14 * var(--p)));
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.find.is-in { opacity: 1; transform: none; }
/* a rising cascade, left to right: the last finding sits beside the intro */
.find--cash { grid-column: 1 / span 7; --mt: calc(var(--cell) * 4); }
.find--bill { grid-column: 9 / span 6; --mt: calc(var(--cell) * 2.5); }
.find--perk { grid-column: 16 / span 7; --mt: calc(var(--cell) * 1.5); grid-row: 1 / span 2; }
.find__art { z-index: 2; }

.find__art { position: absolute; left: calc(14 * var(--p)); bottom: calc(100% - var(--dip)); }
.find__fig {
  align-self: flex-start;
  font-family: var(--display); font-stretch: var(--display-stretch);
  font-size: var(--type-title); font-weight: 900; line-height: 1.05; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.find__fig [data-mark] { position: relative; display: inline-block; padding: 0 calc(4 * var(--p)); }
.find .t-heading { max-width: 18ch; }
.find__d { color: var(--ink-2); max-width: 30ch; }
.find .link { margin-top: calc(10 * var(--p)); align-self: flex-start; min-height: 44px; }

/* ============================================================ interim == */
/* Placeholder composition for the sections still to rebuild. */
.interim { padding-top: calc(var(--cell) * 2); --pad-b: calc(var(--cell) * 2); }
.interim__grid { align-items: center; row-gap: var(--space-6); }
.interim__copy { grid-column: 1 / span 10; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.interim__visual { grid-column: -10 / -1; align-self: start; margin-top: var(--snap-t, 0px); min-height: var(--snap-min, 0px); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.prio { display: flex; gap: var(--space-2); align-items: flex-start; }
.prio__n {
  width: calc(30 * var(--p)); height: calc(30 * var(--p)); flex: none; display: grid; place-items: center;
  background: var(--cobalt-500); color: var(--white); font-weight: 800;
  border-radius: calc(8 * var(--p));
}
.prio__n--ink { background: var(--ink); }
.prio .chip { margin-top: calc(8 * var(--p)); }
.bar { height: calc(8 * var(--p)); margin: calc(10 * var(--p)) 0 calc(6 * var(--p)); border-radius: 99px; background: var(--ink-50); overflow: hidden; min-width: calc(var(--cell) * 4); }
.bar i { display: block; height: 100%; background: var(--cobalt-500); }
.prio__note { color: var(--ink-2); }
.caps { grid-column: -12 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.cap p:last-child { color: var(--ink-2); margin-top: calc(6 * var(--p)); }
.receipt__label { color: var(--ink-2); font-size: var(--type-small); }
.receipt__rows li { display: flex; justify-content: space-between; padding: calc(10 * var(--p)) 0; border-top: 1px dashed var(--ink-200); font-weight: 600; }

/* ======================================================= closing block == */
/* The one hard cut: the statement ends here, in cobalt. The grid carries on
   across it in white, so it reads as the same paper, inked. */
.close {
  --gl: rgba(255, 255, 255, .09); --gm: rgba(255, 255, 255, .16);
  background-color: var(--cobalt-500); color: var(--white);
  background-image:
    linear-gradient(to right, transparent calc(50% - .5px), var(--gm) calc(50% - .5px), var(--gm) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, var(--gm) 1px, transparent 1px),
    linear-gradient(to right, transparent calc(50% - .5px), var(--gl) calc(50% - .5px), var(--gl) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, var(--gl) 1px, transparent 1px);
  background-size:
    calc(var(--cell) * 4) 100%, 100% calc(var(--cell) * 4),
    var(--cell) 100%, 100% var(--cell);
  background-position: 50% 0, 0 0, 50% 0, 0 0;
  padding-top: calc(var(--cell) * 3);
}
.close__grid { justify-items: center; text-align: center; row-gap: var(--space-4); padding-bottom: calc(var(--cell) * 3); }
.close__grid > * { grid-column: 1 / -1; }
.close__grid .t-title { max-width: 18ch; }
.close__grid .t-lead { color: #D5DBFF; max-width: var(--copy-width); }
.close__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
}
.logo--sm .logo__key { background: var(--ink); width: calc(24 * var(--p)); height: calc(24 * var(--p)); font-size: calc(16 * var(--p)); box-shadow: 0 calc(2 * var(--p)) 0 0 var(--ink); }
.close .logo { color: var(--white); }
.close .logo__name { font-size: calc(15 * var(--p)); }
.close__legal { font-size: var(--type-small); color: #D5DBFF; }

/* the cash offer arm only: a small paper pill with a lime "$" key (lime is
   gained value). Supporting, never the headline. */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.offer-pill {
  display: inline-flex; align-items: center; gap: calc(10 * var(--p));
  min-height: calc(40 * var(--p)); padding: calc(6 * var(--p)) calc(14 * var(--p)) calc(6 * var(--p)) calc(6 * var(--p));
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow-soft);
  font-size: var(--type-small); font-weight: 550; line-height: 1.35; color: var(--ink);
}
.offer-pill[hidden] { display: none; }
.offer-pill b { font-weight: 750; }
.offer-pill__key {
  flex: none; display: grid; place-items: center;
  width: calc(26 * var(--p)); height: calc(26 * var(--p));
  border: 1.5px solid var(--ink); border-radius: calc(7 * var(--p));
  background: var(--lime-400); color: var(--ink);
  box-shadow: 0 calc(2 * var(--p)) 0 0 var(--ink);
  font: 800 calc(14 * var(--p))/1 var(--sans);
}
.offer-pill--close { justify-self: center; border-color: transparent; }

/* ========================================================== diagnostic == */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 14, 26, .5);
  display: grid; place-items: center; padding: 20px; overflow: auto;
}
.overlay[hidden] { display: none; }
.modal {
  width: 100%; max-width: max(560px, calc(var(--cell) * 11));
  max-height: calc(100svh - 40px); overflow: auto;
  padding: var(--space-6) var(--space-6) var(--space-6);
  animation: modal-in 320ms var(--ease) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(calc(-12 * var(--p))); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; top: calc(14 * var(--p)); right: calc(14 * var(--p));
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-chip); cursor: pointer; color: var(--ink-2);
}
.modal__close:hover { color: var(--ink); }
.modal__close svg { width: 18px; height: 18px; }
.modal__progress { display: flex; gap: calc(6 * var(--p)); margin-bottom: var(--space-4); }
.modal__progress i {
  width: calc(22 * var(--p)); height: calc(22 * var(--p));
  border: 1px solid var(--ink-200); border-radius: calc(5 * var(--p));
  background: var(--white); transition: background var(--dur-1) var(--ease);
}
.modal__progress i.is-on { background: var(--lime-400); }
.modal h3 {
  font-family: var(--display); font-stretch: var(--display-stretch);
  font-size: max(24px, calc(var(--u) * 1.9)); font-weight: 850; line-height: 1.12; letter-spacing: -.025em;
  margin-bottom: var(--space-3); text-wrap: balance; padding-right: 32px;
}
.modal p { color: var(--ink-2); margin-bottom: var(--space-3); }
.opt-list { display: flex; flex-direction: column; gap: calc(10 * var(--p)); }
.q2-line { font-weight: 700; color: var(--accent-text) !important; }
.preview-list { margin-bottom: var(--space-4); }
.preview-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: calc(12 * var(--p)) 0; border-bottom: 1px solid var(--ink-100);
  font-weight: 650;
  animation: row-in 360ms var(--ease) both;
}
.preview-row .n { font-family: var(--mono); font-size: var(--type-small); color: var(--accent-text); width: 2ch; }
.preview-row .t { position: relative; display: inline-block; padding: 0 calc(3 * var(--p)); }
@keyframes row-in { from { opacity: 0; transform: translateY(calc(-8 * var(--p))); } to { opacity: 1; transform: none; } }
.key--block { width: 100%; }
.email-err { font-size: var(--type-small); font-weight: 700; color: #B4401A; min-height: 1.4em; margin: calc(6 * var(--p)) 0 calc(10 * var(--p)); }
.is-busy { opacity: .6; pointer-events: none; }
.done-badge {
  width: calc(52 * var(--p)); height: calc(52 * var(--p)); display: grid; place-items: center;
  background: var(--lime-400); border: var(--stroke) solid var(--ink); border-radius: var(--radius-key);
  box-shadow: 0 var(--key-depth) 0 0 var(--ink);
  margin-bottom: var(--space-3);
}
.done-badge svg { width: 55%; height: 55%; }

/* ================================================= tablet: stack the hero == */
@media (max-width: 1100px) and (min-width: 768px) {
  .hero__grid { row-gap: calc(var(--cell) * 1); }
  .hero__copy { grid-column: 1 / -1; }
  .hero__title { max-width: 16ch; }
  .hero__stage { grid-column: 1 / -1; justify-self: center; width: calc(var(--cell) * 10); }   /* (even − 10) / 2 cells: centred on lines */
  .opps__intro { grid-column: 1 / -1; }
  .find--cash { grid-column: 1 / span 8; }
  .find--bill { grid-column: -9 / -1; grid-row: 2; --mt: calc(var(--cell) * 5); }
  .find--perk { grid-column: 3 / span 8; grid-row: 3; --mt: calc(var(--cell) * 3); }
  .interim__copy, .interim__visual, .caps { grid-column: 1 / -1; }
}

/* Between a landscape phone and a small laptop the bar can't hold the
   links, the login and the key on one line: the login goes, the links tighten. */
@media (max-width: 1023px) and (min-width: 768px) {
  .nav__login { display: none; }
  .nav__links { gap: var(--space-3); }
}

/* Touch screens at any width (a phone on its side too): the reading floor and
   a 44px key hold here as they do on a portrait phone. */
@media (pointer: coarse) {
  .nav .key--sm { min-height: 44px; }
  .row__chip { min-height: 24px; font-size: max(14px, calc(12.5 * var(--p))); }
}

/* ======================================================= phone: its own == */
@media (max-width: 767px) {
  .nav__links, .nav__login { display: none; }
  .nav__inner { --ni: 8px; --nl: 14px; gap: var(--space-2); width: calc(100vw - 16px); }
  .nav .key--sm { min-height: 44px; padding: 0 14px; }
  .nav__right { margin-left: auto; }
  .logo__name { font-size: 15px; }

  .cells { display: block; }
  .hero { padding-top: calc(var(--cell) * 2.5); --pad-b: calc(var(--cell) * 1.5); }
  .hero__copy { gap: 20px; }
  /* the tally sits above the statement and only overlaps its top margin,
     so it never covers the account name */
  .hero__stage { margin-top: calc(var(--cell) * 1.5 + var(--snap-t, 0px)); padding-top: calc(var(--cell) * 2); }
  .tally { width: calc(var(--cell) * 5); top: 0; padding: 0 14px; }
  .tally__fig { font-size: 40px; }
  .statement { width: auto; }
  .statement__head { padding: 14px 16px 10px; }
  .row { padding: 10px 16px; }
  .row--plain, .row--wide { display: none; }
  /* the chips stay at the 14px reading floor, so a row's meta may wrap */
  .row__meta { flex-wrap: wrap; gap: 4px 8px; }
  .row__chip { min-height: 24px; font-size: 14px; }
  .offer-pill { text-wrap: balance; }
  .callout { width: auto; margin: calc(var(--cell) + var(--snap-t, 0px)) 0 0; }
  .hero__marker { display: none; }
  .replay { top: 10px; left: -4px; }

  .opps { padding-top: calc(var(--cell) * 2); --pad-b: calc(var(--cell) * 2); }
  .opps__intro { gap: 16px; margin-bottom: 8px; }
  .find { --dip: var(--cell); --mt: calc(var(--cell) * 2.5); padding: calc(var(--dip) + 16px) 20px 20px; }
  .find__art { left: auto; right: 12px; }
  .find .t-heading { max-width: none; }

  .interim { padding-top: calc(var(--cell) * 2); --pad-b: calc(var(--cell) * 1); }
  .interim__visual { margin-top: calc(32px + var(--snap-t, 0px)); }
  .caps { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .close__grid { display: flex; flex-direction: column; align-items: center; padding-bottom: calc(var(--cell) * 2); }
  .close__foot { width: calc(100vw - 40px); display: flex; }
  .modal { padding: 28px 20px 24px; }
}


@media (prefers-reduced-motion: reduce) {
  .canvas__drift i { animation: none; }
  .canvas__cells, .canvas__spot { display: none; }
  .find, .callout, .row__chip, .scanline { transition: none; }
  .preview-row, .modal { animation: none; }
}

/* art:scale — GENERATED by tools/edge-art.py from each render's measured
   outline. Do not hand-edit: replace the PNG in art-src/ and re-run. */
.art { width: calc(var(--art-w) * var(--art-line)); height: auto; max-width: none; }
.art--checking-card { --art-w: 200.4; aspect-ratio: 582 / 463; }   /* 582×463, outline 2.90px */
.art--highlighter { --art-w: 123.7; aspect-ratio: 620 / 536; }   /* 620×536, outline 5.01px */
.art--idle-cash { --art-w: 152.7; aspect-ratio: 614 / 605; }   /* 614×605, outline 4.02px */
.art--recurring { --art-w: 122.4; aspect-ratio: 652 / 670; }   /* 652×670, outline 5.33px */
.art--report-receipt { --art-w: 129.0; aspect-ratio: 666 / 584; }   /* 666×584, outline 5.16px */
.art--unused-benefit { --art-w: 156.0; aspect-ratio: 603 / 456; }   /* 603×456, outline 3.86px */
/* /art:scale */