/* e.css: what E adds on top of C's core (c.css): the three-case hero, the honest microline, the close.
 * Demo styles stay in demo-<name>.css (loaded just before each demo mounts). */

/* ---------- hero microline: "No bank login needed." (the AI has its own section and nav item) ---------- */
.hero .micro { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 22px; margin-top: 12px; }
.nobank { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--text); font-weight: 500; font-size: var(--t-sm); }
.nobank::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--pos-soft) var(--i-check-b) center / 16px no-repeat; }
@media (max-width: 599px) {
  .hero .micro { margin-top: 2px; }
  .hero .micro .nobank { min-height: 34px; }
}

/* ---------- hero: bank lines (tabs) ---------- */
.bank { position: relative; border-radius: var(--r-lg); background: var(--fill); border: 1px solid var(--line); padding: 14px 12px 12px; }
.bank figcaption { padding: 0 6px; min-height: 32px; margin-bottom: 6px; }
.hero-pause { position: relative; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: color .2s var(--ease), box-shadow .2s var(--ease); }
.hero-pause::after { content: ''; position: absolute; inset: -6px; }
.hero-pause:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.hero-pause:focus-visible { box-shadow: inset 0 0 0 1px var(--line-strong), var(--focus-ring); }
.hero-pause .i-play, .hero-pause.is-held .i-pause { display: none; }
.hero-pause.is-held .i-play { display: block; }
.bank-rows { display: grid; gap: 2px; font-family: var(--font-mono); font-size: var(--t-sm); }
.brow { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 9px 12px; border-radius: var(--r-sm); text-align: left; font: inherit; color: var(--text-2); cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.brow + .brow::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px; border-top: 1px dashed var(--line-2); transition: opacity .2s var(--ease); }
.brow[aria-selected='true']::before, .brow[aria-selected='true'] + .brow::before { opacity: 0; }
@media (hover: hover) { .brow:hover:not([aria-selected="true"]) { background: var(--hover-wash); } }
.brow[aria-selected='true'] { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ink); }
.brow[aria-selected='true'] .ba { font-weight: 600; color: var(--text); }
.brow:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink), var(--focus-ring); }
.brow .bd { color: var(--text-3); }
.brow .bn { min-width: 0; overflow-wrap: anywhere; }
.brow em { display: block; font-style: normal; font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; color: var(--muted); margin-top: 1px; letter-spacing: 0; }
/* the dinner Alex paid is an absence, not a statement line: dashed outline, app type, no amount */
.brow-none { font-family: var(--font-sans); box-shadow: inset 0 0 0 1px var(--line-3); background: none; margin-top: 6px; }
.brow-none:not([aria-selected='true']) { background-image: none; outline: 1px dashed var(--line-4); outline-offset: -1px; box-shadow: none; }
.brow-none .bd { font-family: var(--font-mono); }
.brow-none .bn { color: var(--text-3); }
.brow-none .ba { color: var(--faint); }
.brow + .brow-none::before { display: none; }
.brow .ba { white-space: nowrap; }
.btime { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 3px; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: opacity .3s var(--ease); }
.hero-viz.touring .brow[aria-selected='true'] .btime { opacity: .3; }

/* ---------- hero: the Trezzit card (three views in one grid cell, so it never resizes) ---------- */
.tzc { display: grid; padding: 18px 20px; }
.tzv { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; transition: opacity .35s var(--ease), visibility 0s linear 0s; }
.tzv:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
.tzc-head small { overflow-wrap: anywhere; }
.tzc-amt span.money { color: var(--muted); font-size: var(--t-md); }
.tzc-bar { display: flex; margin-top: 16px; height: 8px; }
.tzc-bar i { flex: var(--w) 1 0; min-width: 0; height: 8px; background: var(--seg); transition: flex-grow .6s var(--ease), opacity .4s var(--ease), margin .6s var(--ease); }
.tzc-bar i + i { margin-left: 3px; }
.tzc-bar i:first-child { border-radius: 3px 0 0 3px; }
.tzc-bar i:last-child { border-radius: 0 3px 3px 0; }
.tzc-bar i:only-child { border-radius: 3px; }
.tzc-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--muted); line-height: 1.35; }
.tzc-legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tzc-legend li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tzc-legend .me { color: var(--ink); font-weight: 600; }
/* who owes whom: the same hairline row as the categories, no fill. Any leftover reserve sits under it. */
.tzc-end { margin-top: 2px; }
.tzc-due { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: var(--t-md); font-weight: 600; color: var(--text); }
.tzc-due b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tzc-who { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; }
.tzc-who li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--muted); }
.tzc-who b { font-weight: 500; font-variant-numeric: tabular-nums; }
.tzc-who .av { width: 24px; height: 24px; font-size: var(--t-xs); }
.tzc-items li { grid-template-columns: minmax(0, 1fr) auto !important; }

/* pre-states (animated pages only): the card arrives, then each view's bar splits */
.anim .hero-viz:not(.s1) .tzc { opacity: 0; transform: translateY(18px) scale(.985); }
.anim .tzv:not(.is-split) .tzc-bar i:first-child { flex-grow: 100; border-radius: 3px; }
.anim .tzv:not(.is-split) .tzc-bar i:not(:first-child) { flex-grow: 0; opacity: 0; margin-left: 0; }
.anim .tzv:not(.is-split) .tzc-amt span.money, .anim .tzv:not(.is-split) .tzc-legend li:not(.me) { opacity: 0; }
.tzc-amt span.money, .tzc-legend li { transition: opacity .4s var(--ease); }
.tzv.swap .tzc-label, .tzv.swap .tzc-amt b { opacity: 0; }

@media (min-width: 900px) {
  /* the pair sits inside the gutter with air on both sides; the bank's first line shares the card's "You spent" line */
  .hero-viz { max-width: min(960px, calc(100% - 32px)); grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.08fr); }
  .hero-viz.pinned { align-items: start; }
  .hero-join { align-self: start; }
}
@media (max-width: 899px) {
  .hero-viz { max-width: 460px; }
  .hero-join { height: 36px; }
}
@media (max-width: 599px) {
  /* phones: every bank line is one line (date, merchant, amount), so the card never changes height */
  .bank { padding: 8px 6px 6px; border-radius: var(--r-md); }
  .bank figcaption { font-size: var(--t-xs); margin-bottom: 2px; min-height: 32px; }
  .bank-rows { font-size: var(--t-xs); }
  .brow { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px; padding: 6px 8px; min-height: 44px; }
  .brow .bn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brow em { display: none; }
  .brow-none em { display: inline; margin: 0 0 0 6px; }
  .hero-join { height: 18px; }
  .tzc { padding: 10px 16px 14px; }
  .tzc-cats li { padding: 7px 0; }
  .tzc-due { padding-top: 10px; }
  .tzc-who { margin-top: 8px; }
}
@media (forced-colors: active) {
  .tzc-bar i { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
  .tzc-bar i:first-child { background: Highlight; }
}

/* ---------- close ---------- */
.close-end .close-h { font-size: var(--t-display); letter-spacing: -0.04em; line-height: 1.04; margin-bottom: 28px; }

/* ---------- reserved demo heights (re-measured 320-1920 after E r4; each frame mounts into its final height,
   and drops the reservation once mounted below the screen; the scan then locks to its tallest sample) ---------- */
.verb-demo #scan-demo { min-height: 672px; }
@media (min-width: 490px) { .verb-demo #scan-demo { min-height: 683px; } }
@media (min-width: 600px) { .verb-demo #scan-demo { min-height: 699px; } }
@media (min-width: 720px) { .verb-demo #scan-demo { min-height: 487px; } }
.verb-demo #split-demo { min-height: 637px; }
@media (min-width: 350px) { .verb-demo #split-demo { min-height: 621px; } }
@media (min-width: 370px) { .verb-demo #split-demo { min-height: 579px; } }
@media (min-width: 420px) { .verb-demo #split-demo { min-height: 581px; } }
@media (min-width: 600px) { .verb-demo #split-demo { min-height: 597px; } }
@media (min-width: 640px) { .verb-demo #split-demo { min-height: 566px; } }
.verb-demo #ledger-demo { min-height: 575px; }
@media (min-width: 330px) { .verb-demo #ledger-demo { min-height: 556px; } }
@media (min-width: 340px) { .verb-demo #ledger-demo { min-height: 539px; } }
@media (min-width: 360px) { .verb-demo #ledger-demo { min-height: 519px; } }
@media (min-width: 380px) { .verb-demo #ledger-demo { min-height: 525px; } }
@media (min-width: 460px) { .verb-demo #ledger-demo { min-height: 508px; } }
@media (min-width: 600px) { .verb-demo #ledger-demo { min-height: 524px; } }
@media (min-width: 768px) { .verb-demo #ledger-demo { min-height: 721px; } }
@media (min-width: 880px) { .verb-demo #ledger-demo { min-height: 395px; } }
@media (min-width: 980px) { .verb-demo #ledger-demo { min-height: 399px; } }
@media (min-width: 1200px) { .verb-demo #ledger-demo { min-height: 405px; } }
#chat-demo { min-height: 675px; }
@media (min-width: 330px) { #chat-demo { min-height: 635px; } }
@media (min-width: 340px) { #chat-demo { min-height: 618px; } }
@media (min-width: 360px) { #chat-demo { min-height: 544px; } }
@media (min-width: 390px) { #chat-demo { min-height: 549px; } }
@media (min-width: 410px) { #chat-demo { min-height: 560px; } }
@media (min-width: 480px) { #chat-demo { min-height: 590px; } }
@media (min-width: 640px) { #chat-demo { min-height: 598px; } }
@media (min-width: 1200px) { #chat-demo { min-height: 601px; } }
#chat-demo.chat:not(.ai-hero-demo) { min-height: 0; }
@media (min-width: 900px) {
  .hero-viz:not(.joined) .hero-join { visibility: hidden; }
}

/* E r2: the pair is top-aligned before any script runs (pin() then only corrects sub-pixels), so the
   bank card never moves on load */
@media (min-width: 900px) {
  .hero-viz, .hero-viz.pinned { align-items: start; }
}


/* ---------- E r3: the AI section says what it does, then one button, then the safety line, small ---------- */
.ai-copy .ai-lede { margin-top: 12px; font-size: var(--t-lg); color: var(--muted); line-height: 1.4; }
.ai-copy .ai-links { margin-top: 20px; }
.ai-copy .ai-safe { margin-top: 10px; font-size: var(--t-sm); color: var(--muted); }
/* short laptop screens: the whole hero card, "Owed to you" included, sits above the fold */
@media (min-width: 900px) and (max-height: 800px) {
  .hero-viz { margin-top: 16px; }
}

/* ======================================================================================
   E r4: the hero pair shares the page's content edge (960, like every step frame) and the bank card sits
   centred against the Trezzit card, so the space beside it is split above and below instead of pooling
   under it. The arrow still meets the selected bank line (hero.js pin()).
   ====================================================================================== */
@media (min-width: 900px) {
  .hero-viz { max-width: 960px; }
  .hero-viz .bank, .hero-viz.pinned .bank { align-self: center; margin-top: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* tablets: the stacked pair uses the width instead of a 460px column in a wide page */
  .hero-viz { max-width: 640px; }
  .hero-viz .bank, .hero-viz .tzc { max-width: none; }
}
/* "Owed to you" answers the roommate's next question in one muted line */
.tzc-note { margin-top: 6px; font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 599px) {
  /* phones: the selected bank line keeps 12px inside its outline, like every other card */
  .brow { padding: 6px 12px; gap: 6px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  .tzc-note { margin-top: 4px; }
}
/* the AI section: the headline, one button, the safety line (the chat beside it says what it does) */
.ai-copy .ai-links { margin-top: 24px; }
/* short laptop screens (1200x760, 1024x768): the whole Trezzit card stays above the fold */
@media (min-width: 900px) and (max-height: 800px) {
  .hero .micro .nobank { min-height: 32px; }
}

/* ======================================================================================
   E r5: one action in the hero. The quiet "split one bill" path is a text link beside the no-bank check,
   not a second button, so the hero asks for one thing. "Pay any way" is gone from the card (the AI section
   says Trezzit never moves money), so the card ends on "Owed to you".
   ====================================================================================== */
.split-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--muted); font-size: var(--t-sm); font-weight: 500; text-decoration: none; }
.split-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 599px) {
  .hero .micro { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .hero .micro .split-link { min-height: 30px; }
}
/* the card's last line ("Owed to you", "You owe Alex") sits on the card's base in every view, so the
   views differ only above it; the quiet split link keeps the check's short height on short screens */
.tzc .tzc-end { margin-top: auto; }
@media (min-width: 900px) and (max-height: 800px) {
  .hero .micro .split-link { min-height: 32px; }
}
/* step 1's heading peeks in under the hero at 1440x900 */
@media (min-width: 900px) {
  .hero + .verbs { padding-top: 24px; }
}

/* ---------- E r5: reserved heights re-measured 320-1920 after this round (each frame mounts into exactly
   its final height: home without the sample tiles and payer rows, /ai without chips, /just-me without the
   item list, the inline rent row, the one-line rent history) ---------- */
.verb-demo #scan-demo { min-height: 604px; }
@media (min-width: 490px) { .verb-demo #scan-demo { min-height: 615px; } }
@media (min-width: 600px) { .verb-demo #scan-demo { min-height: 631px; } }
@media (min-width: 720px) { .verb-demo #scan-demo { min-height: 410px; } }
.verb-demo #split-demo { min-height: 703px; }
@media (min-width: 350px) { .verb-demo #split-demo { min-height: 687px; } }
@media (min-width: 370px) { .verb-demo #split-demo { min-height: 645px; } }
@media (min-width: 420px) { .verb-demo #split-demo { min-height: 647px; } }
@media (min-width: 440px) { .verb-demo #split-demo { min-height: 624px; } }
@media (min-width: 600px) { .verb-demo #split-demo { min-height: 640px; } }
@media (min-width: 640px) { .verb-demo #split-demo { min-height: 609px; } }
.verb-demo #ledger-demo { min-height: 593px; }
@media (min-width: 330px) { .verb-demo #ledger-demo { min-height: 574px; } }
@media (min-width: 360px) { .verb-demo #ledger-demo { min-height: 554px; } }
@media (min-width: 380px) { .verb-demo #ledger-demo { min-height: 543px; } }
@media (min-width: 460px) { .verb-demo #ledger-demo { min-height: 527px; } }
@media (min-width: 600px) { .verb-demo #ledger-demo { min-height: 543px; } }
@media (min-width: 768px) { .verb-demo #ledger-demo { min-height: 525px; } }
@media (min-width: 880px) { .verb-demo #ledger-demo { min-height: 345px; } }
#chat-demo:not(.ai-hero-demo) { min-height: 605px; }
@media (min-width: 330px) { #chat-demo:not(.ai-hero-demo) { min-height: 566px; } }
@media (min-width: 340px) { #chat-demo:not(.ai-hero-demo) { min-height: 549px; } }
@media (min-width: 360px) { #chat-demo:not(.ai-hero-demo) { min-height: 515px; } }
@media (min-width: 390px) { #chat-demo:not(.ai-hero-demo) { min-height: 520px; } }
@media (min-width: 410px) { #chat-demo:not(.ai-hero-demo) { min-height: 531px; } }
@media (min-width: 480px) { #chat-demo:not(.ai-hero-demo) { min-height: 561px; } }
@media (min-width: 640px) { #chat-demo:not(.ai-hero-demo) { min-height: 569px; } }
@media (min-width: 1200px) { #chat-demo:not(.ai-hero-demo) { min-height: 572px; } }

/* ======================================================================================
   E r6: every view of the hero card fills the same height with content (groceries 2 rows + owed, pharmacy
   3 rows, dinner 2 rows + you owe), so no view shows a band of empty space. "Owed to you" is the way to the
   roommates page. The "You spent" line fades as one unit. One ask in the hero: the split link lives in the
   footer. The close says the idea the page has shown: one place, whoever paid, that your AI can read.
   ====================================================================================== */
a.tzc-go { text-decoration: none; min-height: 44px; align-items: center; padding-top: 10px; transition: color .2s var(--ease); }
a.tzc-go > span:first-child { margin-right: auto; }
a.tzc-go .tzc-arr { color: var(--accent); font-weight: 600; margin-left: 8px; transition: transform .2s var(--ease); }
@media (hover: hover) { a.tzc-go:hover > span:first-child { text-decoration: underline; } a.tzc-go:hover .tzc-arr { transform: translateX(3px); } }
a.tzc-go:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.tzv.swap .tzc-amt span.money { opacity: 0; }
.close-end .close-h { margin-bottom: 14px; }
.close-end .close-sub { margin: 0 auto 28px; max-width: 44ch; font-size: var(--t-lg); line-height: 1.4; color: var(--muted); text-wrap: balance; }
@media (max-width: 599px) {
  .hero-join { height: 8px; }
}
@media (max-width: 599px) { .br-wide { display: none; } }

/* ---------- E r6: reserved heights re-measured 320-1920 (10px steps) after the scan, grid and month changes;
   each range reserves the larger neighbour at a boundary, so a frame never grows after it mounts ---------- */
.verb-demo #scan-demo { min-height: 631px; }
@media (min-width: 380px) { .verb-demo #scan-demo { min-height: 618px; } }
@media (min-width: 481px) { .verb-demo #scan-demo { min-height: 629px; } }
@media (min-width: 591px) { .verb-demo #scan-demo { min-height: 645px; } }
@media (min-width: 720px) { .verb-demo #scan-demo { min-height: 402px; } }
@media (min-width: 900px) { .verb-demo #scan-demo { min-height: 389px; } }
@media (min-width: 980px) { .verb-demo #scan-demo { min-height: 395px; } }
@media (min-width: 1100px) { .verb-demo #scan-demo { min-height: 359px; } }
@media (min-width: 1200px) { .verb-demo #scan-demo { min-height: 368px; } }
.verb-demo #split-demo { min-height: 691px; }
@media (min-width: 350px) { .verb-demo #split-demo { min-height: 674px; } }
@media (min-width: 370px) { .verb-demo #split-demo { min-height: 632px; } }
@media (min-width: 411px) { .verb-demo #split-demo { min-height: 634px; } }
@media (min-width: 460px) { .verb-demo #split-demo { min-height: 623px; } }
@media (min-width: 591px) { .verb-demo #split-demo { min-height: 639px; } }
@media (min-width: 640px) { .verb-demo #split-demo { min-height: 609px; } }
.verb-demo #ledger-demo { min-height: 540px; }
@media (min-width: 371px) { .verb-demo #ledger-demo { min-height: 546px; } }
@media (min-width: 450px) { .verb-demo #ledger-demo { min-height: 529px; } }
@media (min-width: 591px) { .verb-demo #ledger-demo { min-height: 545px; } }
@media (min-width: 770px) { .verb-demo #ledger-demo { min-height: 527px; } }
@media (min-width: 880px) { .verb-demo #ledger-demo { min-height: 347px; } }
/* sweep: at 900-919 the side-by-side bank card is at its narrowest and "GREEN BASKET MARKET" wrapped to two
   lines once its amount went bold; a slightly tighter row keeps every bank line on one line */
@media (min-width: 900px) and (max-width: 979px) {
  .brow { gap: 6px; padding-inline: 10px; }
}
/* sweep: below 420 the grid hint has its own line above the people, so step 2's reserved height grew
   (re-measured per pixel 320-700, home and /trips) */
.verb-demo #split-demo { min-height: 699px; }
@media (min-width: 322px) { .verb-demo #split-demo { min-height: 688px; } }
@media (min-width: 333px) { .verb-demo #split-demo { min-height: 676px; } }
@media (min-width: 334px) { .verb-demo #split-demo { min-height: 664px; } }
@media (min-width: 340px) { .verb-demo #split-demo { min-height: 700px; } }
@media (min-width: 349px) { .verb-demo #split-demo { min-height: 691px; } }
@media (min-width: 351px) { .verb-demo #split-demo { min-height: 657px; } }
@media (min-width: 380px) { .verb-demo #split-demo { min-height: 660px; } }
@media (min-width: 420px) { .verb-demo #split-demo { min-height: 635px; } }
@media (min-width: 457px) { .verb-demo #split-demo { min-height: 624px; } }
@media (min-width: 591px) { .verb-demo #split-demo { min-height: 640px; } }
@media (min-width: 640px) { .verb-demo #split-demo { min-height: 609px; } }

/* ======================================================================================
   E final (judge notes): the hero arrow ends above the card on phones; the dinner row is an absence in
   the bank's own type; the pharmacy shows its four data.js categories in the same height; the quiet
   "Split a bill, no account" path sits beside the no-bank check; home shares one content edge.
   ====================================================================================== */
.hero-join .join-v { display: none; }
@media (max-width: 899px) {
  /* a vertical arrow drawn for the gap it lives in: it starts under the bank card and stops 2px above the card */
  .hero-join { width: 14px; height: 24px; margin: 2px 0; }
  .hero-join .join-h { display: none; }
  .hero-join .join-v { display: block; width: 14px; height: 22px; transform: none; overflow: visible; }
}
@media (max-width: 599px) {
  .hero-join { height: 18px; margin: 2px 0; }
  .hero-join .join-v { height: 18px; }
}
/* the dinner is not on your statement: the same mono line as the others, muted, with no amount */
.brow-none { font-family: var(--font-mono); }
.brow-none .bn { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow-none .ba { color: var(--faint); }
/* pharmacy: four category rows fill the same height as two rows plus "Owed to you" */
ul.tzc-cats.tzc-four { gap: 0; margin-top: 10px; }
.tzc-four li { padding-block: 3px; }
@media (max-width: 599px) { .tzc-four li { padding-block: 2px; } }
/* "Split a bill, no account" beside the check, one line wherever it fits */
.hero .micro { column-gap: 18px; }
.hero .micro .split-link { min-height: 34px; }
@media (max-width: 599px) {
  .hero .micro { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 14px; }
  .hero .micro .nobank, .hero .micro .split-link { min-height: 28px; }
}
@media (min-width: 600px) { .hero .micro { margin-top: 8px; } }
/* one content edge on home: nav, sections and footer all sit on the 960px column */
.home .nav .wrap, .home .foot .wrap { max-width: calc(960px + 2 * var(--gutter)); }
.brow-none .ba { display: none; }
.brow-none { grid-template-columns: 56px minmax(0, 1fr); }
@media (max-width: 599px) { .brow-none { grid-template-columns: 48px minmax(0, 1fr); } }
@media (max-width: 359px) { .brow-none .bn { white-space: normal; line-height: 1.25; } }
/* the AI section: stacked (phones, tablets) it is centred like the hero and the close; side by side, the copy
   sits centred against the chat instead of leaving a tall empty column under it */
@media (max-width: 979px) {
  .ai-copy { text-align: center; }
  .ai-copy h2 { margin-inline: auto; max-width: 22ch; }
  .ai-copy .ai-links { display: flex; justify-content: center; }
}
@media (min-width: 980px) {
  .ai .ai-grid { align-items: center; }
  .ai .ai-copy { position: static; align-self: center; padding-top: 0; }
}

/* ---------- E final: reserved heights re-measured 320-1920 (10px steps) after the picker, the payer rows, the grid
   summary and the AI layout changed; a boundary between two samples reserves the larger neighbour ---------- */
.verb-demo #scan-demo { min-height: 755px; }
@media (min-width: 380px) { .verb-demo #scan-demo { min-height: 742px; } }
@media (min-width: 410px) { .verb-demo #scan-demo { min-height: 686px; } }
@media (min-width: 481px) { .verb-demo #scan-demo { min-height: 697px; } }
@media (min-width: 591px) { .verb-demo #scan-demo { min-height: 713px; } }
@media (min-width: 720px) { .verb-demo #scan-demo { min-height: 535px; } }
@media (min-width: 820px) { .verb-demo #scan-demo { min-height: 479px; } }
@media (min-width: 900px) { .verb-demo #scan-demo { min-height: 466px; } }
@media (min-width: 971px) { .verb-demo #scan-demo { min-height: 472px; } }
@media (min-width: 1100px) { .verb-demo #scan-demo { min-height: 436px; } }
@media (min-width: 1191px) { .verb-demo #scan-demo { min-height: 446px; } }
.verb-demo #split-demo { min-height: 795px; }
@media (min-width: 330px) { .verb-demo #split-demo { min-height: 783px; } }
@media (min-width: 331px) { .verb-demo #split-demo { min-height: 801px; } }
@media (min-width: 350px) { .verb-demo #split-demo { min-height: 792px; } }
@media (min-width: 360px) { .verb-demo #split-demo { min-height: 758px; } }
@media (min-width: 371px) { .verb-demo #split-demo { min-height: 761px; } }
@media (min-width: 420px) { .verb-demo #split-demo { min-height: 736px; } }
@media (min-width: 450px) { .verb-demo #split-demo { min-height: 717px; } }
@media (min-width: 480px) { .verb-demo #split-demo { min-height: 620px; } }
@media (min-width: 591px) { .verb-demo #split-demo { min-height: 636px; } }
@media (min-width: 640px) { .verb-demo #split-demo { min-height: 606px; } }
@media (min-width: 881px) { .verb-demo #split-demo { min-height: 609px; } }
@media (min-width: 900px) { .verb-demo #split-demo { min-height: 606px; } }
@media (min-width: 981px) { .verb-demo #split-demo { min-height: 609px; } }
@media (min-width: 1100px) { .verb-demo #split-demo { min-height: 606px; } }
@media (min-width: 1191px) { .verb-demo #split-demo { min-height: 609px; } }
.verb-demo #ledger-demo { min-height: 659px; }
@media (min-width: 370px) { .verb-demo #ledger-demo { min-height: 643px; } }
@media (min-width: 371px) { .verb-demo #ledger-demo { min-height: 651px; } }
@media (min-width: 591px) { .verb-demo #ledger-demo { min-height: 667px; } }
@media (min-width: 770px) { .verb-demo #ledger-demo { min-height: 649px; } }
@media (min-width: 880px) { .verb-demo #ledger-demo { min-height: 347px; } }
#chat-demo:not(.ai-hero-demo) { min-height: 605px; }
@media (min-width: 330px) { #chat-demo:not(.ai-hero-demo) { min-height: 566px; } }
@media (min-width: 340px) { #chat-demo:not(.ai-hero-demo) { min-height: 549px; } }
@media (min-width: 360px) { #chat-demo:not(.ai-hero-demo) { min-height: 515px; } }
@media (min-width: 381px) { #chat-demo:not(.ai-hero-demo) { min-height: 520px; } }
@media (min-width: 401px) { #chat-demo:not(.ai-hero-demo) { min-height: 531px; } }
@media (min-width: 471px) { #chat-demo:not(.ai-hero-demo) { min-height: 561px; } }
@media (min-width: 631px) { #chat-demo:not(.ai-hero-demo) { min-height: 569px; } }
@media (min-width: 1191px) { #chat-demo:not(.ai-hero-demo) { min-height: 572px; } }
/* the summary's separator dot was rendering as its own row on phones; grid reservations below 480 re-measured */
.verb-demo #split-demo { min-height: 759px; }
@media (min-width: 330px) { .verb-demo #split-demo { min-height: 747px; } }
@media (min-width: 331px) { .verb-demo #split-demo { min-height: 765px; } }
@media (min-width: 350px) { .verb-demo #split-demo { min-height: 756px; } }
@media (min-width: 360px) { .verb-demo #split-demo { min-height: 722px; } }
@media (min-width: 371px) { .verb-demo #split-demo { min-height: 725px; } }
@media (min-width: 420px) { .verb-demo #split-demo { min-height: 700px; } }
@media (min-width: 450px) { .verb-demo #split-demo { min-height: 681px; } }
@media (min-width: 480px) { .verb-demo #split-demo { min-height: 620px; } }