/* site.css: what the live site adds on top of E (c.css, e.css): the step numbers drawn by CSS, the hero's
 * one plain sentence, and the plain pages (/split, /splitwise-alternative, /mcp, 404): prose, FAQ, tables,
 * the split tool. Every colour reads one of E's tokens, so the dark theme follows. */

/* step numbers: drawn from data-n, so a heading's text is only its words ("Scan a receipt.", not "1Scan…") */
.verb-n[data-n]::before { content: attr(data-n); }

/* hero: one plain sentence under the lede, quieter than it */
.hero .lede-more { margin: 10px auto 0; max-width: 36em; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); text-wrap: balance; }
@media (min-width: 700px) {
  .hero .lede-more { font-size: var(--t-md); }
}

/* the close's one link line */
.close-sub a, .pg-more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.close-sub a:hover, .pg-more a:hover { text-decoration: underline; }

/* ---------- plain pages ---------- */
.pg-hero { padding: clamp(28px, 5vh, 56px) 0 clamp(20px, 3vw, 36px); }
.pg-hero h1 { font-size: var(--t-display); letter-spacing: -0.042em; line-height: 1.03; font-weight: 700; max-width: 18ch; text-wrap: balance; }
.pg-hero .lede { margin-top: 18px; max-width: 44ch; text-wrap: pretty; }
.pg-hero .cta-row { justify-content: flex-start; margin-top: 24px; }
.pg-hero .micro { margin-top: 12px; }
.crumbs { font-size: var(--t-sm); color: var(--muted); margin-bottom: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--faint); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.pg-sec { padding: clamp(36px, 5vw, 72px) 0 0; }
.pg-sec:last-of-type { padding-bottom: clamp(48px, 6vw, 88px); }
.pg-sec .sh { margin-bottom: 18px; }
.prose { max-width: 44rem; font-size: var(--t-md); line-height: 1.6; color: var(--text); }
.prose > * + * { margin-top: 14px; }
.prose h3 { font-size: var(--t-lg); letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin-top: 28px; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--accent); font-weight: 600; }
.prose strong { color: var(--ink); }
.prose code, .prose pre { font-family: 'Receipt Mono', var(--font-mono); font-size: var(--t-sm); }
.prose pre { overflow-x: auto; padding: 12px 14px; border-radius: var(--r-sm); background: var(--fill); border: 1px solid var(--line); white-space: pre; }
.prose :not(pre) > code { overflow-wrap: anywhere; }

/* numbered steps: the number is drawn by CSS, the heading is only its words */
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: st; }
@media (min-width: 860px) {
  .pg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pg-steps li { counter-increment: st; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 20px; }
.pg-steps h3 { display: flex; gap: 10px; align-items: center; font-size: var(--t-lg); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.pg-steps h3::before { content: counter(st); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0; }
.pg-steps p { margin-top: 8px; color: var(--muted); font-size: var(--t-md); line-height: 1.5; }

/* a worked example / comparison: a hairline table that scrolls inside itself on phones */
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); max-width: 52rem; }
.tbl table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.45; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--divider); }
.tbl thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: var(--t-xs); letter-spacing: .02em; background: var(--fill); }
.tbl tbody th { color: var(--ink); font-weight: 600; }
.tbl td.r, .tbl th.r { text-align: right; white-space: nowrap; }
.tbl tfoot td, .tbl tfoot th { border-top: 1px solid var(--line-strong); font-weight: 700; color: var(--ink); }
.tbl caption { caption-side: bottom; text-align: left; padding: 10px 14px; color: var(--muted); font-size: var(--t-xs); border-top: 1px solid var(--divider); }
.tbl-wide table { min-width: 560px; }

/* FAQ: native details, one hairline list */
.faq { max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 0; font-size: var(--t-md); font-weight: 600; color: var(--ink); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: 22px; line-height: 1; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details > p { padding: 0 0 16px; color: var(--text); font-size: var(--t-md); line-height: 1.6; max-width: 42rem; }
.faq details > p a { color: var(--accent); font-weight: 600; }

/* 404 */
.nf { padding: clamp(48px, 10vh, 120px) 0 clamp(64px, 10vw, 128px); }
.nf h1 { font-size: var(--t-2xl); letter-spacing: -0.04em; line-height: 1.05; font-weight: 700; }
.nf .lede { margin-top: 14px; max-width: 36ch; }
.nf-links { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; max-width: 34rem; }
.nf-links a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); text-decoration: none; color: var(--text); }
.nf-links a:hover { border-color: var(--line-strong); }
.nf-links b { color: var(--ink); font-size: var(--t-md); }
.nf-links span { color: var(--muted); font-size: var(--t-sm); }

/* /mcp: the old doc's sections under E's chat hero */
.doc-toc { margin-top: 8px; }
.doc-toc ol { columns: 2 14rem; column-gap: 24px; padding-left: 22px; margin: 0; }
.doc-toc li { margin-bottom: 6px; break-inside: avoid; }
.prose .prompts { list-style: none; padding: 0; }
.prose .prompts li { padding: 10px 14px; border-radius: var(--r-sm); background: var(--fill); border: 1px solid var(--line); }
.prose .anchor { color: var(--faint); font-weight: 400; text-decoration: none; margin-left: 6px; opacity: 0; }
.prose h2:hover .anchor, .prose .anchor:focus-visible { opacity: 1; }
.prose h2 { font-size: var(--t-xl); letter-spacing: -0.03em; line-height: 1.1; margin-top: 44px; color: var(--ink); scroll-margin-top: 80px; }
.prose h2:first-child { margin-top: 0; }

/* short laptop screens (1200x760, 1024x768): the sentence takes one line and the hero tightens, so the whole
   Trezzit card, "Owed to you" included, still sits above the fold */
@media (min-width: 900px) and (max-height: 800px) {
  .hero { padding-top: 20px; }
  .hero .lede { margin-top: 12px; }
  .hero .lede-more { max-width: none; font-size: var(--t-sm); margin-top: 6px; }
  .hero .cta-row { margin-top: 18px; }
}

/* ---------- /split: sample receipt, then who had what, then the way into the app ---------- */
.pg-tool { padding-top: 8px; }
.pg-tool .demo-frame + .demo-frame { margin-top: clamp(16px, 2.4vw, 24px); }
.pg-cta { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 20px; }
.pg-tool .pg-cta { justify-content: center; margin-top: clamp(20px, 3vw, 28px); }
.pg-more { margin-top: 22px; color: var(--muted); font-size: var(--t-md); }
/* /splitwise-alternative: the grid beside its words on wide screens */
.sw-demo { display: grid; gap: 24px; align-items: start; }
.sw-demo > .demo-frame { margin-inline: 0; width: 100%; max-width: 620px; }
@media (min-width: 1024px) {
  .sw-demo { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 40px; }
}
/* /mcp: the hero's lede and server URL sit in the copy column */
.pg-mcp .ai-hero-copy .lede { margin-top: 16px; font-size: var(--t-md); max-width: 40rem; }
.pg-mcp .ai-hero-copy .url-box { margin-top: 20px; max-width: 34rem; }
.pg-mcp .doc-toc { margin-bottom: 8px; }
.pg-mcp .prose { max-width: 48rem; }

/* ---------- use-case pages (/roommates, /track-spending-without-bank): E's demo hero, then the plain-page sections ---------- */
.pg-uc .sc-copy .crumbs { margin-bottom: 18px; }
.pg-uc .sc-copy .lede { margin-top: 18px; max-width: 34ch; text-wrap: pretty; }
.pg-uc .sc-copy .cta-row { justify-content: flex-start; margin-top: 24px; }
.pg-uc .sc-copy .micro { margin-top: 12px; }
.pg-uc .pg-sec:first-of-type { padding-top: clamp(24px, 4vw, 56px); }
.pg-uc .demo-frame.uc-wide { margin-inline: 0; max-width: 760px; }
.pg-uc .tbl + .prose, .pg-uc .pg-steps + .prose { margin-top: clamp(20px, 2.4vw, 28px); }
/* a worked example's line names carry their amount and, under it, how the line is split */
.tbl th small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: var(--t-xs); }
.tbl th .money { white-space: nowrap; }
.tbl-rm { max-width: 46rem; }
.tbl-rm table { min-width: 0; }
.tbl-rm th, .tbl-rm td { padding-inline: 10px; }
.tbl-rm th:first-child { padding-left: 14px; }
.tbl-rm td:last-child, .tbl-rm th:last-child { padding-right: 14px; }
@media (max-width: 480px) {
  .tbl-rm table { font-size: var(--t-xs); }
  .tbl-rm th, .tbl-rm td { padding-inline: 5px; }
  .tbl-rm th:first-child { padding-left: 12px; }
  .tbl-rm td:last-child, .tbl-rm th:last-child { padding-right: 12px; }
}
/* four footer columns: two by two on phones */
@media (max-width: 720px) {
  .foot nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
}
.prose .mono-in { font-family: 'Receipt Mono', var(--font-mono); font-size: var(--t-sm); white-space: nowrap; padding: 1px 6px; border-radius: 6px; background: var(--fill); border: 1px solid var(--line); }
/* points, not steps: the same three cards without the numbers */
.pg-points h3::before { content: none; }
.tbl-oct { max-width: 36rem; }
/* home hero: "No bank login needed." opens /track-spending-without-bank, quietly */
a.nobank { text-decoration: none; }
a.nobank:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- legal pages (/privacy, /terms, /your-data, /delete-account, /support): long text at a comfortable
   measure; the "On this page" list rides beside it on wide screens. The text itself is the policy's, unchanged. ---------- */
.pg-legal .doc { max-width: 68ch; padding: clamp(28px, 5vh, 56px) 0 clamp(56px, 7vw, 96px); font-size: var(--t-md); line-height: 1.65; color: var(--text); }
.pg-legal .doc > * + * { margin-top: 16px; }
.pg-legal .doc h1 { font-size: var(--t-2xl); letter-spacing: -0.04em; line-height: 1.05; font-weight: 700; color: var(--ink); text-wrap: balance; }
.pg-legal .doc-meta { font-size: var(--t-sm); color: var(--muted); }
.pg-legal .doc-meta strong { color: var(--text); font-weight: 600; }
.pg-legal .doc h2 { font-size: var(--t-lg); letter-spacing: -0.02em; line-height: 1.25; font-weight: 700; color: var(--ink); margin-top: 44px; scroll-margin-top: 88px; }
.pg-legal .doc p[id] { scroll-margin-top: 88px; }
.pg-legal .doc h2 + * { margin-top: 12px; }
.pg-legal .doc strong { color: var(--ink); font-weight: 600; }
.pg-legal .doc a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.pg-legal .doc a:hover { text-decoration-color: currentColor; }
.pg-legal .doc a.c-btn { color: var(--on-fill); text-decoration: none; }
.pg-legal .doc ul, .pg-legal .doc ol { padding-left: 22px; display: grid; gap: 10px; }
.pg-legal .doc li::marker { color: var(--faint); }
.pg-legal .doc code { font-family: 'Receipt Mono', var(--font-mono); font-size: var(--t-sm); overflow-wrap: anywhere; }
.pg-legal .doc .anchor { color: var(--faint); font-weight: 400; text-decoration: none; margin-left: 6px; opacity: 0; transition: opacity .15s var(--ease); }
.pg-legal .doc h2:hover .anchor, .pg-legal .doc .anchor:focus-visible { opacity: 1; }
@media (hover: none) {
  .pg-legal .doc .anchor { display: none; }
}
/* "On this page": a quiet card; a sticky column beside the text on wide screens */
.pg-legal .doc-toc { margin-top: 28px; padding: 16px 18px 14px; border-radius: var(--r-md); background: var(--fill); border: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.4; }
.pg-legal .doc-toc h2 { margin: 0 0 8px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .03em; color: var(--muted); }
.pg-legal .doc-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.pg-legal .doc-toc a { display: block; padding: 5px 0; color: var(--text); text-decoration: none; }
.pg-legal .doc-toc a:hover { color: var(--accent); }
@media (min-width: 640px) {
  .pg-legal .doc-toc ol { display: block; columns: 2; column-gap: 24px; }
  .pg-legal .doc-toc li { break-inside: avoid; }
}
@media (min-width: 1100px) {
  .pg-legal .doc:has(> .doc-toc) { max-width: none; display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 260px); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .pg-legal .doc:has(> .doc-toc) > * { grid-column: 1; }
  .pg-legal .doc:has(> .doc-toc) > .doc-toc { grid-column: 2; grid-row: 1 / span 400; position: sticky; top: 88px; margin-top: 8px; padding: 0 0 0 18px; background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
  .pg-legal .doc:has(> .doc-toc) .doc-toc ol { columns: 1; }
  .pg-legal .doc:has(> .doc-toc) .doc-toc a { padding: 4px 0; color: var(--muted); }
  .pg-legal .doc:has(> .doc-toc) .doc-toc a:hover { color: var(--accent); }
}
/* tables: the site's hairline table, scrolling inside itself on phones */
.pg-legal .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.pg-legal .table-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pg-legal .table-scroll table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.45; }
.pg-legal .table-scroll[aria-label] table { min-width: 0; }
.pg-legal .table-scroll table[data-cols="3"] { min-width: 560px; }
.pg-legal .table-scroll th, .pg-legal .table-scroll td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--divider); }
.pg-legal .table-scroll thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: var(--t-xs); letter-spacing: .02em; background: var(--fill); }
.pg-legal .table-scroll tbody td:first-child { color: var(--ink); font-weight: 600; }

/* /split: the sample-receipt frame reserves the height it mounts to (measured 320-1920 in 1px steps around each
   step), so nothing under it moves when the scan appears */
.pg-split #scan-demo { min-height: 759px; }
@media (min-width: 375px) { .pg-split #scan-demo { min-height: 746px; } }
@media (min-width: 402px) { .pg-split #scan-demo { min-height: 690px; } }
@media (min-width: 481px) { .pg-split #scan-demo { min-height: 701px; } }
@media (min-width: 600px) { .pg-split #scan-demo { min-height: 717px; } }
@media (min-width: 720px) { .pg-split #scan-demo { min-height: 609px; } }
@media (min-width: 814px) { .pg-split #scan-demo { min-height: 587px; } }
/* /mcp: the server URL takes its own full-width line under the label and Copy, so it is never cut off */
.pg-mcp .url-box { grid-template-columns: minmax(0, 1fr) auto; }
.pg-mcp .url-box code { grid-column: 1 / -1; grid-row: 2; }
.pg-mcp .url-box button { grid-column: 2; grid-row: 1; }
/* /track-spending-without-bank: the pharmacy frame reserves the height it settles at once the read lands
   (re-measured 320-1920 on this page, after the scan finishes) */
.pg-jm .demo-frame.res-jm { min-height: 642px; }
@media (min-width: 347px) { .pg-jm .demo-frame.res-jm { min-height: 630px; } }
@media (min-width: 600px) { .pg-jm .demo-frame.res-jm { min-height: 646px; } }
@media (min-width: 720px) { .pg-jm .demo-frame.res-jm { min-height: 510px; } }
@media (min-width: 1000px) { .pg-jm .demo-frame.res-jm { min-height: 470px; } }
.pg-jm .res-jm .so-mid { min-height: 214px; }

/* ---------- release 2, review round 1 ---------- */
/* use-case pages: one measure for prose, FAQ, tables and section heads */
.pg-uc { --measure: 46rem; }
.pg-uc .prose, .pg-uc .faq, .pg-uc .faq details > p, .pg-uc .tbl, .pg-uc .tbl-rm, .pg-uc .tbl-oct { max-width: var(--measure); }
/* the groceries grid fills the container, one content edge with every other frame */
.pg-uc .demo-frame.uc-wide { max-width: none; }
.pg-uc .uc-sw { margin-top: 14px; font-size: var(--t-sm); }
.pg-uc .uc-sw a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-block: -12px; }
/* the closing call to action: compact, like home's close */
.pg-close .cta-row { justify-content: center; }
.pg-close .micro { margin-top: 12px; }
.pg-close .close-h { margin-bottom: 18px; }
/* the worked example on phones: names only (the amount and the split note are in the card above), and at least
   8px between the figures */
@media (max-width: 479px) {
  .tbl-rm th small, .tbl-rm tbody th .money, .tbl-rm tfoot th .money { display: none; }
  .tbl-rm th, .tbl-rm td { padding-inline: 4px; }
  .tbl-rm td.r + td.r, .tbl-rm th.r + th.r { padding-left: 8px; }
}
/* /roommates phones: the hero is the rent card alone; the balance follows the groceries grid it depends on */
@media (max-width: 719px) {
  .rm-hero .rent-bal { display: none; }
  #groceries .rent-bal .bal { margin-top: 16px; }
}
/* breadcrumb: a 44px tap target on phones, with no change to the layout */
@media (max-width: 899px) {
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 8px; margin: -12px -8px; }
}
/* footer: "With Claude or ChatGPT" on one line where the columns have room */
@media (min-width: 900px) {
  .foot nav a { white-space: nowrap; }
}

/* legal pages: a 62ch measure; the TOC is a closed disclosure below 1080px and a sticky, scrollable column beside
   the text from 1080px, marking the section you are in */
.pg-legal .doc { max-width: 62ch; }
.pg-legal .doc a:not(.c-btn) { font-weight: 500; }
.pg-legal .doc a.c-btn-quiet { color: var(--ink); }
.pg-legal .toc-d > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: -12px 0; cursor: pointer; }
.pg-legal .toc-d > summary::-webkit-details-marker { display: none; }
.pg-legal .toc-d > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease); }
.pg-legal .toc-d[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.pg-legal .doc-toc .toc-d > summary h2 { margin: 0; }
.pg-legal .toc-d[open] > ol { margin-top: 12px; }
.pg-legal .doc-toc { padding-block: 12px; }
.pg-legal .doc-toc a[aria-current] { color: var(--ink); font-weight: 600; }
@media (min-width: 1080px) {
  .pg-legal .doc:has(> .doc-toc) { max-width: none; display: grid; grid-template-columns: minmax(0, 62ch) 240px; column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .pg-legal .doc:has(> .doc-toc) > * { grid-column: 1; }
  .pg-legal .doc:has(> .doc-toc) > .doc-toc { grid-column: 2; grid-row: 1 / span 400; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow: auto; overscroll-behavior: contain; margin-top: 8px; padding: 0 0 0 18px; background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
  .pg-legal .doc:has(> .doc-toc) .doc-toc ol { columns: 1; }
  .pg-legal .doc:has(> .doc-toc) .doc-toc a { padding: 4px 0; color: var(--muted); }
  .pg-legal .doc:has(> .doc-toc) .doc-toc a:hover { color: var(--accent); }
  .pg-legal .doc:has(> .doc-toc) .doc-toc a[aria-current] { color: var(--ink); }
  .pg-legal .toc-d > summary { min-height: 0; margin: 0 0 8px; cursor: default; pointer-events: none; }
  .pg-legal .toc-d > summary::after { content: none; }
  .pg-legal .toc-d[open] > ol { margin-top: 0; }
}
/* print: the policy text only */
@media print {
  .nav, .skip, .foot, .doc-toc, .theme-tg, .pg-legal .doc .anchor { display: none !important; }
  .pg-legal .doc { max-width: none; padding: 0; }
  .pg-legal .doc:has(> .doc-toc) { display: block; }
}
.pg-uc .uc-wide .tg-sum { max-width: none; }
/* the balance rows render after the first paint: their three 44px rows are reserved, so nothing under them moves */
#bal-list:empty { min-height: 134px; }

/* ---------- release 2, review round 2 ---------- */
/* a worked example's table waits behind one closed disclosure (the card above already shows the numbers) */
.pg-uc .ex-d { max-width: var(--measure); }
.pg-uc .ex-d > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; font-size: var(--t-md); }
.pg-uc .ex-d > summary::-webkit-details-marker { display: none; }
.pg-uc .ex-d > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin: -4px 0 0 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.pg-uc .ex-d[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.pg-uc .ex-d > summary:hover { text-decoration: underline; }
.pg-uc .ex-d > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.pg-uc .ex-d[open] > .tbl { margin-top: 8px; }
.pg-uc #example .sh { margin-bottom: 6px; }
/* /roommates: the hero is the rent card alone at every width; the balance sits under the groceries grid it follows */
@media (min-width: 1000px) {
  .rm-hero .wrap { grid-template-rows: auto; grid-template-areas: 'copy card'; }
}
#groceries .rent-bal { position: static; }
#groceries .rent-bal .bal { margin-top: 16px; max-width: var(--measure); }
.bal-w { white-space: nowrap; min-width: 0; }
.bal-row > b { white-space: nowrap; }
/* phones: one compact Splitwise line under the hero's CTA; the one by the grid is for wide screens */
.uc-sw-m { display: none; }
.uc-sw-m a { color: var(--accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-block: -12px; }
@media (max-width: 719px) {
  .uc-sw-m { display: block; margin-top: 8px; }
  .pg-uc .uc-sw { display: none; }
}
/* the rent reads as editable at rest where there is no hover (dashed underline, and "Type your rent" beside it) */
@media (hover: none) {
  .rec-edit .money-in-field { border-bottom-color: var(--line-strong); }
}
/* phones: 13px figures with at least 8px between them (rent shares, grid totals) */
@media (max-width: 399px) {
  .rent-card ul.rec-shares { gap: 8px; }
  .rent-card .rec-shares .sp-person { padding-inline: 0; min-width: 0; }
  .rent-card .rec-shares .sp-pa { font-size: var(--t-xs); letter-spacing: 0; }
}
/* the grocery grid on narrow phones: the same frame padding home's grid gets, and "Shared ×9" for the folded row
   wherever the short names are used (below 480px) */
@media (max-width: 379px) {
  #rm-grid.tg, #sw-grid.tg { padding-inline: 10px; }
}
@media (max-width: 479px) {
  .tg .tg-fw { display: none; }
}
/* footer from 900px: one-line links, and the four columns size to their links (no column runs into the next) */
@media (min-width: 900px) {
  .foot nav { grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 24px; }
}
/* the close: the same size as home's */
.pg-close .close-h { font-size: var(--t-display); letter-spacing: -0.04em; line-height: 1.04; }
/* /track: "What you see." is two numbered cards */
@media (min-width: 860px) {
  .pg-steps.pg-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.faq .mono-in { font-family: 'Receipt Mono', var(--font-mono); font-size: var(--t-sm); white-space: nowrap; padding: 1px 6px; border-radius: 6px; background: var(--fill); border: 1px solid var(--line); }
/* /track "Your photo": the open tab is the selected one, and the frame is only as tall as the notice */
.pg-jm .scan .pick-own[aria-expanded='true'] { border-style: solid; border-color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 .5px var(--ink); }
.pg-jm .demo-frame.res-jm:has(.consent-on) { min-height: 0; }
.pg-jm .scan .pick b { white-space: nowrap; }
/* dark: the cream receipt is dimmed and the fade over it goes */
:root[data-theme='dark'] .pg-jm .scan-paper .tz-receipt { filter: brightness(.9) drop-shadow(0 10px 18px rgb(var(--sh) / .14)); }
:root[data-theme='dark'] .pg-jm .scan-fade { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .pg-jm .scan-paper .tz-receipt { filter: brightness(.9) drop-shadow(0 10px 18px rgb(var(--sh) / .14)); }
  :root:not([data-theme='light']) .pg-jm .scan-fade { display: none; }
}
/* /track month: the search column sits centred beside the taller October column */
@media (min-width: 880px) {
  .pg-jm .ledger.mo > .lg-find { align-self: center; }
}
/* /track narrow phones: the answer's source wraps rather than hiding the date */
@media (max-width: 399px) {
  .pg-jm .mo .lg-list .lg-rt small { white-space: normal; }
}
/* legal pages: the TOC rides beside the text from 900px (62ch + 240px fit there); anchors land ~16px under the
   header (the page's scroll-padding alone, no extra margin on the target) */
@media (min-width: 900px) {
  .pg-legal .doc:has(> .doc-toc) { max-width: none; display: grid; grid-template-columns: minmax(0, 62ch) 220px; column-gap: clamp(32px, 5vw, 96px); align-items: start; }
  .pg-legal .doc:has(> .doc-toc) > * { grid-column: 1; }
  .pg-legal .doc:has(> .doc-toc) > .doc-toc { grid-column: 2; grid-row: 1 / span 400; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow: auto; overscroll-behavior: contain; margin-top: 8px; padding: 0 0 0 18px; background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
  .pg-legal .doc:has(> .doc-toc) .doc-toc ol { columns: 1; }
  .pg-legal .doc:has(> .doc-toc) .doc-toc a { padding: 4px 0; color: var(--muted); }
  .pg-legal .doc:has(> .doc-toc) .doc-toc a:hover { color: var(--accent); }
  .pg-legal .doc:has(> .doc-toc) .doc-toc a[aria-current] { color: var(--ink); }
  .pg-legal .toc-d > summary { min-height: 0; margin: 0 0 8px; cursor: default; pointer-events: none; }
  .pg-legal .toc-d > summary::after { content: none; }
  .pg-legal .toc-d[open] > ol { margin-top: 0; }
}
@media (min-width: 1080px) {
  .pg-legal .doc:has(> .doc-toc) { grid-template-columns: minmax(0, 62ch) 240px; column-gap: clamp(48px, 6vw, 96px); }
}
.pg-legal .doc [id][id] { scroll-margin-top: 0; }
/* /delete-account: the quiet button's outline reaches 3:1 on the page in both themes */
.pg-legal .doc a.c-btn-quiet { border-color: var(--faint); }
:root[data-theme='dark'] .pg-legal .doc a.c-btn-quiet { border-color: var(--line-4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .pg-legal .doc a.c-btn-quiet { border-color: var(--line-4); }
}
/* the grid at 320-379 (every page): no category dot in the rows, so the names keep a 66px column ("Cold brew",
   "Shared ×9" on one line); the four people columns take what is left, up to 58px (at least 8px between totals) */
@media (max-width: 379px) {
  .tg .tg-people, .tg .tg-row { grid-template-columns: minmax(66px, 1fr) repeat(var(--n, 4), minmax(0, 58px)); }
  .tg .tg-row .tg-nm > .tg-cat { display: none; }
  .tg .tg-row .tg-nm { padding-right: 2px; font-size: var(--t-xs); }
  .tg .tg-exp svg { display: none; }
  .tg .tg-row .tg-pr { padding-left: 0; }
  .tg .tg-sub-row .tg-nm, .tg .tg-sub-row .tg-pr { padding-left: 8px; }
  .tg .tg-pa { letter-spacing: -0.05em; }
}
@media (max-width: 339px) {
  #rm-grid.tg, #sw-grid.tg, main #split .demo-frame.tg { padding-inline: 6px; }
}
/* /roommates phones: the balance rows fit one line ("Jordan owes you  $806.35"); each bill's note goes under its name */
@media (max-width: 399px) {
  .rent-bal .bal { padding-inline: 14px; }
  .rent-bal .bal-row { gap: 8px; font-size: var(--t-sm); }
  .rent-bal .bal-row > b { font-size: var(--t-sm); }
}
@media (max-width: 479px) {
  .rent-bal .bal-why small { display: block; }
  .rec-edit .rec-help { grid-column: 2; grid-row: 2; }
  .rec-edit .rec-rsub { grid-column: 1 / -1; grid-row: 3; }
}
.pg-jm .scan.consent-on { min-height: 0 !important; }

/* ---------- release 3: /trips and /recurring ---------- */
/* /trips: the hero's second line, "Just one dinner? Split a bill, no account", as quiet as the Splitwise line */
.uc-one { margin-top: 8px; }
.uc-one a { color: var(--accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-block: -12px; }
.uc-one a:hover { text-decoration: underline; }
/* the weekend's settle-up names the group setting it shows (the app's Simplified debt view) */
.settle h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settle-tag { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
/* /recurring: the rent card keeps the roommates card's measure */
#rec-demo { max-width: 820px; margin-inline: 0; }
/* a worked example's one-line note under its table */
.pg-uc .ex-note { margin-top: 10px; max-width: var(--measure); color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.tbl-rc { max-width: 36rem; }
/* worked examples on phones (below 480px): one stacked block per line — its name and split note on top, then each
   person's figure under their name — so no column is squeezed and nothing scrolls sideways */
@media (max-width: 479px) {
  .tbl-st { overflow: visible; }
  .tbl-st table, .tbl-st tbody, .tbl-st tfoot { display: block; }
  .tbl-st thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl-st tr { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: 8px; row-gap: 6px; padding: 12px 14px; border-top: 1px solid var(--divider); }
  .tbl-st tbody tr:first-child { border-top: 0; }
  .tbl-st tfoot tr { border-top: 1px solid var(--divider); }
  .tbl-st tfoot tr:first-child { border-top: 1px solid var(--line-strong); }
  .tbl-st tr > th, .tbl-st tr > td { padding: 0 !important; border: 0; }
  .tbl-st tr > th { grid-column: 1 / -1; }
  .tbl-st td.r { text-align: left; }
  .tbl-st td::before { content: attr(data-l); display: block; font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
  .tbl-st th small, .tbl-st tbody th .money, .tbl-st tfoot th .money { display: revert; }
  .tbl-st th small { display: block; }
  .tbl-rc { --cols: 4; }
}

/* ---------- release 3, review round 1 ---------- */
/* /trips hero: the primary action and the dinner-right-now one side by side; on phones each takes the row */
@media (max-width: 519px) {
  .tr-hero .cta-row .c-btn { flex: 1 1 100%; }
}
/* /trips weekend: "You paid" and "You spent" are one tile style; the bank line sits under them; the settle-up
   card is as tall as its rows */
.trip-you p, .trip-you p:last-child { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.trip-you p span, .trip-you p:last-child span { color: var(--muted); }
.trip-you p b, .trip-you p:last-child b { color: var(--ink); }
.trip > .trip-side, .trip-side > .settle { align-self: start; }
.trip-msg { margin: -4px 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); }
.trip-msg b { color: var(--ink); font-weight: 600; }
.tr-math { margin-top: 16px; }
/* /trips phones: each item's name takes the row's first line, its price and dots the second (rows half as tall) */
@media (max-width: 479px) {
  #split-demo.tg .tg-rows > .tg-row { grid-template-rows: auto auto; row-gap: 0; padding: 8px 0 2px; min-height: 0; }
  #split-demo.tg .tg-rows > .tg-row > .tg-nm { grid-column: 1 / -1; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-sm); padding-right: 0; }
  #split-demo.tg .tg-rows > .tg-row > .tg-nm > span { overflow: hidden; text-overflow: ellipsis; }
  #split-demo.tg .tg-rows > .tg-row > .tg-pr { grid-column: 1; grid-row: 2; align-self: center; padding-left: 0; }
  #split-demo.tg .tg-rows > .tg-row > .tg-dc { grid-row: 2; margin-top: -4px; }
  #split-demo.tg .tg-rows > .tg-row .tg-dot { height: 40px; }
  #split-demo.tg .tg-rows > .tg-row .tg-nm > .tg-cat { display: none; }
}
/* /recurring: the bank's view of a subscription against yours, one line under "Coming up" */
.side-note { margin-top: 14px; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); max-width: var(--measure); }
/* "Coming up": the rent's two sub-lines and two mode tags share one cell; only the current one shows, so a flip of
   the mode never moves the row, the toggle or anything under them */
.up-alt { display: inline-grid; }
.up-alt > span { grid-area: 1 / 1; }
.up-how .up-alt { justify-items: end; }
.up-alt[data-show='auto'] > [data-v='review'], .up-alt[data-show='review'] > [data-v='auto'] { visibility: hidden; }
.up-row { column-gap: 12px; }
.up-row > span:nth-child(2) { min-width: 0; }
.up-row > span:nth-child(2) > b { overflow-wrap: anywhere; }
.up-r { white-space: nowrap; }
@media (max-width: 399px) {
  .up-row, .up-row:has(.up-r) { grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 8px; padding-inline: 10px; }
  .up-row .mr-d, .up-row .mr-d:not(#x) { width: 34px; min-width: 34px; }
  .up-row .mr-d small { letter-spacing: .02em; }
  .up-row .up-r b, .up-row > span:nth-child(2) > b { font-size: var(--t-sm); }
  .up-row .up-how { font-size: var(--t-xs); }
}
@media (max-width: 379px) {
  .tr-hero .cta-row .c-btn { padding-inline: 14px; white-space: normal; }
}
/* the rent card fills the frame from 1000px: the bill on the left, the four shares beside it (no empty band) */
#rec-demo { margin-inline: auto; }
@media (min-width: 1000px) {
  #rec-demo { max-width: none; }
  #rec-demo .rec-sched { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  #rec-demo .rec-sched > * { grid-column: 1; }
  #rec-demo .rec-sched > .rec-shares { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 4px; }
  #rec-demo ul.rec-shares { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  #rec-demo .rec-shares .sp-person { padding: 14px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
}
/* the rent field: dashed underline at rest where there is no hover, and a focus ring on the whole field */
.rec-edit .money-in-field:focus-within { box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ---------- release 3, review round 2 ---------- */
/* a worked example's "See the math" sits right under the demo (or the bank line) it explains */
.pg-uc .demo-frame + .ex-d, .pg-uc .side-note + .ex-d, .pg-uc .rent-card > .ex-d { margin-top: 8px; }
/* bank lines (/trips weekend, /recurring hero): body-small, secondary colour, both amounts bold */
.side-note b, .trip-msg b { color: var(--ink); font-weight: 600; }
/* /recurring rent card from 1000px: the four shares in one row on top, the bill's lines under them */
@media (min-width: 1000px) {
  #rec-demo .rec-sched { grid-template-columns: minmax(0, 1fr); }
  #rec-demo .rec-sched > * { grid-column: 1; grid-row: auto; }
  #rec-demo .rec-sched > .rec-top { order: 0; }
  #rec-demo .rec-sched > .rec-shares { order: 1; grid-column: 1; grid-row: auto; margin: 4px 0 8px; }
  #rec-demo .rec-sched > .rec-edit { order: 2; }
  #rec-demo .rec-sched > .rec-lines { order: 3; }
  #rec-demo .rec-sched > .rec-check { order: 4; }
  #rec-demo ul.rec-shares { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* /trips hero from 520px: the two actions side by side at one height, the primary first; a label that needs two
   lines wraps inside its button rather than dropping the button to a row of its own */
@media (min-width: 520px) {
  .tr-hero .cta-row { flex-wrap: nowrap; align-items: stretch; }
  .tr-hero .cta-row .c-btn { flex: 1 1 0; max-width: 260px; min-width: 0; padding-inline: 16px; white-space: normal; text-align: center; line-height: 1.25; }
}
/* use-case heroes: the title and lede measures in em, not ch (the same widths in DM Sans), so the fallback face
   that shows while DM Sans loads breaks the lines in the same places and nothing below moves when it swaps in */
@media (max-width: 999px) {
  .pg-uc .sc-hero h1 { max-width: 12.672em; }
}
.pg-uc .sc-copy .lede { max-width: 23.256em; }
/* /trips grid beside the copy (1000-1199px): narrower price and dot columns, so "Bean and cheese burrito" keeps
   one line */
@media (min-width: 1000px) and (max-width: 1199px) {
  #split-demo.tg { --col: 62px; --pw: 72px; }
}
@media (min-width: 1000px) and (max-width: 1039px) {
  #split-demo.tg .tg-row .tg-nm { padding-right: 4px; letter-spacing: -0.01em; }
  #split-demo.tg { --pw: 66px; }
}
/* the few widths where the two faces still break a hero line differently (a line that fits by under 3px in one
   face): the taller count is reserved, so the swap moves nothing */
@media (min-width: 356px) and (max-width: 365px) { .pg-tr .sc-hero h1 { min-height: 3lh; } .pg-rm .sc-copy .lede { min-height: 3lh; } }
@media (min-width: 416px) and (max-width: 424px) { .pg-rc .sc-hero h1 { min-height: 3lh; } }
@media (min-width: 406px) and (max-width: 414px) { .pg-jm .sc-hero h1 { min-height: 2lh; } }
@media (min-width: 433px) and (max-width: 449px) { .pg-rm .sc-hero h1 { min-height: 3lh; } }
@media (min-width: 364px) and (max-width: 370px) { .pg-rm .uc-sw-m { min-height: 2lh; } }
/* /trips weekend: where a tip flip would rewrap the Taqueria note or the bank line, the two-line height is kept */
@media (min-width: 402px) and (max-width: 414px) { .trip-bills small:has([data-note='taq']) { display: block; min-height: 2lh; } }
@media (min-width: 517px) and (max-width: 530px), (min-width: 1082px) and (max-width: 1106px) { .trip-msg { min-height: 2lh; } }
/* /recurring "Coming up" below 420px: the Auto / Remind me switch stays on the right of its label (the label
   wraps), and every row keeps to two lines: tighter frame and row padding, small sub-lines, and the rent's
   sub-line drops the mode words its tag already shows */
@media (max-width: 419px) {
  main #rec-side { padding-inline: 12px; }
  .up-row, .up-row:has(.up-r) { padding-inline: 8px; column-gap: 8px; }
  .up-row small, .up-row .up-how { font-size: var(--t-xs); }
  .up-row .up-x { display: none; }
  .upcoming .rec-mode { flex-wrap: nowrap; padding-left: 8px; }
  .upcoming .rec-mode > #mode-l { min-width: 0; }
  .upcoming .rec-mode .seg { flex: none; }
  .upcoming .rec-mode .seg button { padding-inline: 10px; font-size: var(--t-xs); }
}

/* release 3 round 2: reserved demo heights (the tallest of both tip modes and both rent modes), measured per pixel
   320-1300 and every 10px to 1920 after the copy cuts; the grocery grid on /roommates mounts as it nears the screen,
   so its frame is reserved too and the balance under it never moves */
/* #split-demo: 4 steps */
main#main #split-demo.res-trips { min-height: 827px; }
@media (min-width: 420px) { main#main #split-demo.res-trips { min-height: 797px; } }
@media (min-width: 480px) { main#main #split-demo.res-trips { min-height: 754px; } }
@media (min-width: 640px) { main#main #split-demo.res-trips { min-height: 717px; } }
/* #trip-demo: 11 steps */
main#main #trip-demo { min-height: 871px; }
@media (min-width: 328px) { main#main #trip-demo { min-height: 845px; } }
@media (min-width: 349px) { main#main #trip-demo { min-height: 822px; } }
@media (min-width: 357px) { main#main #trip-demo { min-height: 796px; } }
@media (min-width: 361px) { main#main #trip-demo { min-height: 772px; } }
@media (min-width: 369px) { main#main #trip-demo { min-height: 749px; } }
@media (min-width: 402px) { main#main #trip-demo { min-height: 722px; } }
@media (min-width: 415px) { main#main #trip-demo { min-height: 699px; } }
@media (min-width: 531px) { main#main #trip-demo { min-height: 693px; } }
@media (min-width: 900px) { main#main #trip-demo { min-height: 424px; } }
@media (min-width: 1107px) { main#main #trip-demo { min-height: 412px; } }
/* #rec-side: 3 steps */
main#main #rec-side { min-height: 613px; }
@media (min-width: 334px) { main#main #rec-side { min-height: 597px; } }
@media (min-width: 600px) { main#main #rec-side { min-height: 613px; } }
/* #rec-demo: 4 steps */
main#main #rec-demo { min-height: 701px; }
@media (min-width: 377px) { main#main #rec-demo { min-height: 684px; } }
@media (min-width: 490px) { main#main #rec-demo { min-height: 681px; } }
@media (min-width: 1120px) { main#main #rec-demo { min-height: 700px; } }
/* #rm-grid: 5 steps */
main#main #rm-grid { min-height: 692px; }
@media (min-width: 380px) { main#main #rm-grid { min-height: 706px; } }
@media (min-width: 420px) { main#main #rm-grid { min-height: 681px; } }
@media (min-width: 480px) { main#main #rm-grid { min-height: 638px; } }
@media (min-width: 640px) { main#main #rm-grid { min-height: 605px; } }