/* /welcome (spec 2026-10-03-landing-page-design.md §4): the page's own chrome. Dark slate, Montserrat display,
   Nunito Sans body. Scene internals come from the app's own CSS (landing-scenes.css, Plan 2). */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --night: #0f172a;
  --frame: #111a2e;
  --panel: #1e293b;
  --rule: #334155;
  --ink: #e2e8f0;
  --ink-2: #cbd5e1;
  --mist: #94a3b8;
  --brand: #667eea; /* login.html: the "Budget's Revolution" title (owner, v5 review) */
  --f-display: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --f-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --f-app: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px);
  --bar-h: 64px;
  --track: 0.18em;
  --excess: #22c55e;
}
html { background: var(--night); scrollbar-color: var(--rule) var(--night); scrollbar-width: thin; scroll-padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); } /* #top and focused controls land below the fixed header */
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; caret-color: var(--ink); }
[hidden] { display: none !important; }
::selection { background: rgba(148, 163, 184, 0.32); color: #ffffff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a:where(:not(.scene *)) { color: inherit; } /* the page's links only: never the app's links inside a scene */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- header ---------- */
.bar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 40; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--gutter); }
.bar-bg { position: fixed; top: 0; left: 0; right: 0; z-index: 39; height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); background: var(--night); border-bottom: 1px solid transparent; opacity: 0; pointer-events: none; }
.bar-bg.on { opacity: 1; }
.bar-bg.edge { border-bottom-color: var(--rule); }
main { padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); }
.bar-mark { display: inline-flex; align-items: center; height: 40px; min-width: 64px; text-decoration: none; color: var(--brand); font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; }
.bar-mark-text { visibility: hidden; }
.bar-mark.show-text .bar-mark-text { visibility: visible; }
.bar-actions { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); }
.link { color: var(--ink); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; }
.link:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--rule); }

/* ---------- buttons ---------- */
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); border-radius: 0; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.cta-solid { background: var(--ink); color: var(--night); }
.cta-solid:hover { background: #ffffff; border-color: #ffffff; }
.cta-outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.cta-outline:hover { border-color: var(--ink); }
.cta-sm { min-height: 36px; padding: 0 16px; font-size: 11px; }
/* Free Trial (owner, 2026-10-09): the demo link in Excess green, on this page and the sign-in pages alike; its outline a
   subtle green to match (owner, 2026-10-10) */
.cta-trial { color: var(--excess); border-color: rgba(34, 197, 94, 0.4); }
.cta-trial:hover { border-color: var(--excess); }

/* ---------- wordmark (the page's signature moment, spec §5) ---------- */
.wm-space { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 8.6vw, 96px); line-height: 1; height: 1.06em; position: relative; }
.wordmark { position: absolute; left: 0; top: 0; transform-origin: 0 0; font: inherit; letter-spacing: -0.01em; color: var(--brand); white-space: nowrap; pointer-events: none; }
.wordmark.floating { position: fixed; z-index: 50; will-change: transform; } /* only the floating mark rides above the header; a static one scrolls under it */
.wm-cut { display: inline-block; overflow: hidden; vertical-align: top; white-space: pre; padding-bottom: 0.22em; margin-bottom: -0.22em; } /* room for the g's descender inside the clip */

/* ---------- hero ---------- */
.hero { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(20px, 5vh, 64px) clamp(40px, 8vh, 96px); display: grid; gap: 20px; justify-items: start; }
.tagline { margin: 0; font-size: clamp(18px, 1.5vw, 22px); color: var(--ink-2); }
.tl-line { display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.beta-note { margin: 0; font-size: 14px; color: var(--mist); }

/* ---------- exhibit rows: one statement beside one scene, sides alternating ---------- */
.exhibit { border-top: 1px solid var(--rule); }
.snap-box { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(64px, 11vh, 128px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.exhibit.flip .ex-text { order: 2; }
.exhibit.flip .snap-box { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.ex-text h2 { margin: 0 0 18px; font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.45; letter-spacing: var(--track); text-transform: uppercase; text-wrap: balance; }
.ex-text h2 .h-line { display: block; }
.ex-text p { margin: 0 0 12px; max-width: 44ch; color: var(--ink-2); }
.ex-text p.quiet { color: var(--mist); }
.ex-scene { min-width: 0; }
/* the categories row (owner, 2026-10-29): the heading stays put while the list opens, and its line wraps evenly */
section[aria-labelledby="h-select"] .snap-box { align-items: start; }
section[aria-labelledby="h-select"] .ex-text p { text-wrap: balance; }

/* predictions (owner, v5 review): the headline over the Prediction Model on the left, the budget panel full height on the right */
.pred-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.pred-left { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; }
/* phones skip the prediction model: it overwhelmed visitors there (owner, 2026-10-11); hidden, it never comes near the
   viewport, so it is never built */
@media (max-width: 767.98px) { .pred-model { display: none; } }
@media (min-width: 1200px) {
  .pred-box { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  .pred-left .ex-text { padding-top: clamp(0px, 5vh, 56px); }
}

/* ---------- vision band ---------- */
.band { border-top: 1px solid var(--rule); }
.band-inner { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(72px, 12vh, 136px); display: grid; gap: clamp(36px, 6vh, 64px); justify-items: center; }
.quote { margin: 0; max-width: 30ch; text-align: center; font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.55; letter-spacing: 0.04em; text-wrap: balance; }
.band .ex-scene { width: 100%; }

/* ---------- closing band ---------- */
.close { background: var(--panel); border-top: 1px solid var(--rule); }
.close-inner { max-width: 960px; margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(72px, 12vh, 128px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.close h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 2.1vw, 30px); letter-spacing: var(--track); text-transform: uppercase; text-wrap: balance; }
.close .actions { justify-content: center; }
.facts { margin: 6px 0 0; font-size: 14px; color: var(--mist); }

/* ---------- footer ---------- */
.foot { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); padding-block: 28px calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mist); }
.foot nav { display: flex; gap: 22px; }
.foot a { text-decoration: none; color: var(--mist); }
.foot a:hover { color: var(--ink); }

/* ---------- scene frame: the window each product shot sits in ---------- */
.scene { position: relative; background: var(--frame); border: 1px solid var(--rule); border-radius: 14px; padding: clamp(12px, 1.6vw, 20px); font-family: var(--f-app); color: var(--ink); font-size: 13px; line-height: 1.4; overflow: hidden; color-scheme: light; /* the app never sets a dark color-scheme, so its native controls draw light */ overflow-anchor: none; /* a scene redraws as it plays: the browser must never anchor the page to something inside one (owner, 2026-10-07: the page moved while it played) */ }
.scene--pending { min-height: 280px; } /* until the scene's own content lands (Plan 4) */
/* the mockup sets the app's scope on the window itself, so from 1200px up the window's 14px, not the app's rem, is the
   base for text the app doesn't size */
@media (min-width: 1200px) { :is(#sc-glance, #sc-ag, #sc-dash-list, #sc-analysis, #sc-plan) > :is(.app-dash, .app-an, .app-pl) { font-size: 14px; } }
.scene .replay { position: absolute; right: 10px; bottom: 10px; z-index: 8; font: 600 10px/1 var(--f-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); background: rgba(15, 23, 42, 0.9); border: 1px solid var(--rule); padding: 8px 11px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.scene.done .replay { opacity: 1; pointer-events: auto; }
.scene .replay:hover { border-color: var(--ink); color: var(--ink); }
.scene .pointer { position: absolute; left: 0; top: 0; z-index: 7; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.pointer.on { opacity: 1; }
.pointer svg { display: block; filter: drop-shadow(0 3px 6px rgba(2, 6, 23, 0.6)); }
.pointer.touch { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(226, 232, 240, 0.35); border: 2px solid rgba(226, 232, 240, 0.9); box-shadow: 0 2px 8px rgba(2, 6, 23, 0.45); }
.pointer.touch svg { display: none; }
.pointer.pressing svg { transform: scale(0.86); transform-origin: 4px 2px; }
.pointer.touch.pressing { transform-origin: center; background: rgba(226, 232, 240, 0.6); }

/* ---------- scenes (Plan 4): the app's own CSS is landing-scenes.css; these rules place, size and night the pieces.
   --app-rem is the app's rem, set once per scene frame. ---------- */
.fade-ready { opacity: 0.3; transform: translateY(24px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-ready.revealed { opacity: 1; transform: none; }
#sc-glance, #sc-drill, #sc-acct, #sc-curve, #sc-dash-list { background: var(--night); }
/* glance: the dashboard's left and right columns side by side; in one column, its phone order */
#sc-glance { --app-rem: clamp(13px, 1.15vw, 16.5px); }
.g-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ex ie" "bar pie" "proj pie"; gap: 12px; align-items: start; }
.g-grid #db-card-excess { grid-area: ex; }
.g-grid .db-income-expense-row { grid-area: ie; }
/* the Income + Assets and Expenses cards fill the Excess card's height beside them (owner, 2026-10-07) */
.g-grid .db-income-expense-row { align-self: stretch; }
.g-grid .db-income-expense-row .db-stat-card { display: flex; flex-direction: column; justify-content: center; }
.g-grid #db-card-excess-bar { grid-area: bar; }
.g-grid #db-projection-card { grid-area: proj; }
.g-grid #db-pie-card { grid-area: pie; }
/* Account Summary in night mode (owner, v2 review): the dashboard's surfaces around the page's own charts */
.scene .app-as { color: var(--ink); }
.scene .as-chart-main, .scene .as-chart-pie { background: var(--panel); border: 1px solid var(--rule); box-shadow: none; }
.scene .as-chart-pie h3 { color: var(--mist); }
.scene .as-charts-row { margin-bottom: 0; } /* the page's gap above its month table */
/* the two Account Summary windows, sized as the mockup sizes them (owner ruling 2026-10-04) */
#sc-acct .as-charts-row { justify-content: normal; gap: 18px; }
@media (min-width: 768px) { #sc-acct .as-charts-row { flex-direction: row; } }
#sc-acct .as-chart-main, #sc-drill .as-chart-main { max-width: none; height: auto; padding: 27px; }
#sc-acct .as-chart-pie { height: auto; padding: 27px; }
#sc-acct :is(.as-chart-main, .as-chart-pie) { box-sizing: content-box; }
#sc-acct .as-chart-pie h3 { line-height: 1.3; }
#sc-acct .chart-wrap, #sc-drill .chart-wrap { flex: none; }
#sc-acct .as-chart-main .chart-wrap { height: 330px; }
#sc-acct .as-chart-pie .chart-wrap { height: 312px; }
#sc-drill .as-chart-main .chart-wrap { height: 380px; }
@media (max-width: 767.98px) {
  #sc-acct :is(.as-chart-main, .as-chart-pie) { flex: none; } /* stacked: as tall as their charts */
  :is(#sc-acct, #sc-drill) :is(.as-chart-main, .as-chart-pie) { padding: 18px; }
  #sc-acct .as-chart-main .chart-wrap { height: 314px; } /* the donut's window, its title included: the swap keeps the height */
  #sc-acct .as-chart-pie .chart-wrap { height: 280px; }
  #sc-drill .as-chart-main .chart-wrap { height: 320px; }
  /* one chart's room (owner, 2026-10-17): the bar chart, then the donut in its place (acct.js sets pie-on) */
  #sc-acct:not(.pie-on) .as-chart-pie, #sc-acct.pie-on .as-chart-main { display: none; }
}
.dr-lift { position: absolute; left: 0; top: 0; width: 0; height: 0; background: #45ba4b; opacity: 0; pointer-events: none; z-index: 2; }
.dr-guide { position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 2px dashed var(--ink-2); opacity: 0; pointer-events: none; z-index: 2; transition: opacity 0.35s ease; }
/* the Prediction Model in night mode */
/* the mockup's subcategory picker, over the panel */
#sc-model .app-ctl { display: grid; gap: 10px; line-height: 1.4; }
#sc-model .sm-select { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #334155; border-radius: 6px; font-size: 13px; background: #0f172a; color: #e2e8f0; }
#sc-model .sm-select span { color: #94a3b8; font-size: 11px; }
#sc-model .sm-panel { background: var(--panel); border-color: var(--rule); max-width: none; }
#sc-model .sm-panel-title { font-size: 12px; padding: 6px 12px; }
#sc-model .sm-chart-body { box-sizing: content-box; height: 270px; min-height: 0; padding: 10px; }
/* the budget panel (Scene B), the page's own night panel, filling its window; the summary, Goals, Unallocated and
   Unassigned sections are cropped (§6.5) */
#sc-ag { padding: 0; background: rgb(15, 15, 30); --app-rem: clamp(13px, 1.1vw, 16px); }
#sc-ag #budgetPanel { width: 100%; min-width: 0; display: flex; border-right: 0; }
/* as tall as its rows, as the mockup's panel is: the app's page is the viewport's height under its header */
#sc-ag .analysis-page { height: auto; }
#sc-ag :is(.panel-content, .bp-scroll) { overflow: visible; }
#sc-ag #budgetTables { padding: 6px 8px 10px; }
/* the wide panel's columns (phones show the app's collapsed rows) */
@media (min-width: 768px) {
  #sc-ag .bp-tbl thead th:nth-child(5) { width: 20% !important; } /* the mockup's Budgeted column (the app's renderer writes 21%) */
  #sc-ag .bp-tbl thead th:nth-child(1) { width: 31% !important; } /* the Class column fits a full-word badge, clear of the next figure */
  #sc-ag .bp-tbl thead th:nth-child(2) { width: 14% !important; }
  #sc-ag .bp-class-btn { width: auto; padding-left: 4px; padding-right: 4px; }
}
#sc-ag :is(.bp-section--summary, .bp-section--unalloc, .bp-section--unassigned) { display: none; }
#sc-ag .bp-auto-btn.pressed { transform: scale(0.96); }
/* the Budget updates popup sits over the panel, not the page */
#sc-ag .modal-overlay { position: absolute; inset: 0; z-index: 5; display: flex; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
/* the mockup's popup: fades in and settles, at its size */
#sc-ag .modal-overlay.open { opacity: 1; }
#sc-ag .modal-box.bcm-box { padding: 18px; width: min(86%, 340px); gap: 10px; transform: translateY(6px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
#sc-ag .modal-overlay.open .bcm-box { transform: none; }
#sc-ag .modal-title { font-size: 15px; }
#sc-ag .bcm-row { font-size: 13px; }
#sc-ag .bcm-chip { font-size: 12.5px; }
#sc-ag .modal-btn { font: 13px/1.3 var(--f-app); }
#sc-ag .modal-btn.pressed { transform: scale(0.95); background: #1d4ed8; }
/* the analysis window in night mode (owner, v5 review: a deliberate deviation from the light page): the dashboard's
   surfaces and text, the upper unit's periwinkle headers dimmed; the page's own layout, copy and chart config */
#sc-analysis { padding: 0; background: #0f172a; color-scheme: dark; --app-rem: clamp(13px, 1.1vw, 16px); }
#sc-analysis .app-an { --text-primary: #e2e8f0; } /* the page's body text, which .app-an carries */
#sc-analysis .analysis-main { overflow: visible; background: #0f172a; }
#sc-analysis .analysis-row { flex-direction: column; background: #131d33; }
#sc-analysis :is(.analysis-left, .analysis-right) { width: 100%; min-width: 0; max-width: none; }
#sc-analysis .chart-card { flex: none; height: 270px; min-height: 0; }
#sc-analysis .itemized-card { flex: none; min-width: 0; }
@media (min-width: 768px) { #sc-analysis .itemized-card { height: 252px; } } /* phones keep the app's own height */
#sc-analysis .synopsis-card { flex: none; min-width: 0; height: auto; }
#sc-analysis .analysis-left .ctrl-bar { min-height: 0; }
#sc-analysis :is(.itemized-header, .synopsis-header) { min-width: 0; }
#sc-analysis :is(.chart-card, .itemized-card, .synopsis-card) { background: #1e293b; border-color: #334155; }
#sc-analysis .ctrl-label { color: #94a3b8; }
#sc-analysis .ctrl-select { color: #e2e8f0; border-color: #475569; background: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"6\"><path d=\"M0 0l4 5 4-5z\" fill=\"%2394a3b8\"/></svg>") right 6px center no-repeat #0f172a; }
#sc-analysis .ctrl-toggle-lbl { color: #cbd5e1; }
#sc-analysis .analysis-unit-upper :is(.itemized-header, .synopsis-header) { background: #2e3a6e; color: #c7d2fe; border-bottom-color: #3f4f8f; }
#sc-analysis .analysis-unit-upper .itemized-header::after { color: #a5b4fc; } /* the phone's expand glyph */
#sc-analysis .itemized-tbl th { background: #1e293b; color: #94a3b8; border-bottom-color: #334155; }
#sc-analysis .itemized-tbl td { border-bottom-color: #283548; }
#sc-analysis .cost-neg { color: #f87171; }
#sc-analysis .cost-pos { color: #4ade80; }
#sc-analysis .analysis-suppress-btn { background: #475569; color: #f1f5f9; }
#sc-analysis .analysis-suppress-btn.pressed { background: #64748b; }
#sc-analysis .analysis-restore-btn { background: #0e7490; } /* its hover teal (spec §12) */
#sc-analysis .analysis-txn-row.pressed td { background: rgba(96, 165, 250, 0.2); } /* the phone tap */
#sc-analysis .analysis-txn-row.analysis-row-suppressed td { background: #3f4a5c; color: #e2e8f0; }
#sc-analysis .synopsis-tbl th { color: #94a3b8; border-bottom-color: #334155; }
#sc-analysis .synopsis-tbl td { color: #e2e8f0; }
#sc-analysis .chart-month-tip { background: #0f172a; border-color: #475569; color: #e2e8f0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
@media (min-width: 768px) { #sc-analysis .ctrl-bar { background: #1e293b; border-color: #334155; } }
@media (max-width: 767.98px) { #sc-analysis .ctrl-card { background: #1e293b; border-color: #334155; } } /* the phone's two control cards */
@media (max-width: 767.98px) { #sc-analysis .ctrl-toggle-lbl input[type="checkbox"]:not(:checked) { background: #334155; } }
/* the Goals page: the app sizes its page to the viewport, the window sizes itself; what the app fixes to the viewport
   (its toasts, the phone drag's miniature) sits in the window */
#sc-plan { padding: 0; background: #0f172a; --app-rem: clamp(13px, 1.1vw, 16px); }
#sc-plan .pgs-vp { position: relative; overflow: hidden; }
#sc-plan .planning-page { height: auto; min-height: 0; overflow: visible; }
#sc-plan :is(.pg-toast-stack, .pg-touch-drag-ghost) { position: absolute; }
#sc-plan .pg-tier-head.silver { color: #ffffff; } /* app #0f172a on #64748b, 3.75:1 (spec §12) */
#sc-plan .pg-chip.pgs-dragging { opacity: 0.4; }
#sc-plan .pg-chip.pgs-lifted { position: absolute; z-index: 6; margin: 0; transform: rotate(-3deg); box-shadow: 0 18px 32px -12px rgba(2, 6, 23, 0.95); outline: 1px solid #cbd5e1; pointer-events: none; } /* the browser's drag image */
#sc-plan .pg-debt-scn-card { transition: filter 0.15s ease, transform 0.12s ease; }
#sc-plan .pg-debt-scn-card.pressed { filter: brightness(1.08); transform: scale(0.97); }
@media (min-width: 768px) {
  #sc-plan .pg-control-panel { display: none !important; } /* the desktop's debt list, in the right-hand control panel: cropped */
  #sc-plan .pg-tier-col { flex: 1 1 0; min-width: 0; } /* the app's tier columns are 370px; the window is narrower */
  #sc-plan .pg-chip-figs { flex-wrap: wrap; row-gap: 0; }
  #sc-plan .planning-page { height: 100%; } /* the app's page fills the viewport, so its tier columns run full height */
  #sc-plan.pgs-measuring .planning-page { height: auto; }
}
@media (max-width: 767.98px) {
  #sc-plan { --app-rem: 15px; }
  #sc-plan .pgs-vp { height: min(760px, calc(100svh - 82px)); } /* one screen, as the app's page is */
}
/* the browser's own confirm(), drawn: the Goals page asks before applying a scenario card */
.sys-confirm { position: absolute; left: 50%; top: 42%; z-index: 6; width: min(88%, 400px); transform: translate(-50%, -46%); opacity: 0; pointer-events: none; background: #ffffff; color: #1f2937; border-radius: 8px; padding: 16px 18px 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); font: 14px/1.45 var(--f-app); transition: opacity 0.2s ease, transform 0.2s ease; }
.sys-confirm.open { opacity: 1; transform: translate(-50%, -50%); }
.sys-origin { font-weight: 600; margin-bottom: 6px; }
.sys-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sys-btn { padding: 6px 16px; border-radius: 16px; font-weight: 600; font-size: 13px; border: 1px solid #c7cbd1; color: #1a56c4; background: #ffffff; transition: transform 0.12s ease; }
.sys-btn.sys-ok { background: #1a56c4; border-color: #1a56c4; color: #ffffff; }
.sys-btn.pressed { transform: scale(0.95); }
/* the setup wizard: the page's own light card, at its own pixel sizes, on the page's light ground */
#sc-ob { background: #f9fafb; padding: clamp(14px, 2.4vw, 28px); color-scheme: light; }
#sc-ob .ob-wrap { margin: 0 auto; }
/* the mockup's line metrics */
#sc-ob :is(.ob-head h1, .ob-body h2, .sub-row) { line-height: 1.3; }
#sc-ob .sub-row input { margin: 0; }
#sc-ob .btn { line-height: 1.2; }
#sc-ob .btn.pressed { transform: scale(0.96); }
/* cash flow: the Recommended Savings card beside the narrowed chart */
.cf-row { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 12px; align-items: start; }
#sc-curve, #sc-dash-list { --app-rem: clamp(13px, 1.1vw, 16px); }
/* the dashboard list beside its Itemized Transactions card */
.dw-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
#sc-dash-list #db-budget-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* the mockup's list */
#sc-dash-list .db-sort-ind { display: none; }
/* the multi-column windows fold to one column by their own width, not the viewport's: under 620px a window can't
   hold two of the app's columns (a narrow desktop, a phone held sideways) */
@media (max-width: 767.98px) {
  .g-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ex" "ie" "pie"; }
  /* the three cards and Spending by Category alone (owner, 2026-10-17: the page overwhelmed phones) */
  #sc-glance :is(#db-card-excess-bar, #db-projection-card), #sc-glance > .replay { display: none; } /* nothing plays there to replay */
  /* the Spending by Category legend in two columns, each entry its swatch and name over its amount and percent, so the
     section's headline and window fit on one screen (owner, 2026-10-17: nothing left out) */
  #sc-glance .db-pie-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  #sc-glance .db-pie-legend-row { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "sw name name" ". amt pct"; gap: 1px 6px; padding: 3px 6px; font-size: 12px; line-height: 1.3; }
  #sc-glance .db-pie-legend-swatch { grid-area: sw; }
  #sc-glance .db-pie-legend-name { grid-area: name; }
  #sc-glance .db-pie-legend-amount { grid-area: amt; }
  #sc-glance .db-pie-legend-pct { grid-area: pct; }
  #sc-glance .db-pie-container { height: 220px; } /* the app's 230px, 10px lower: the last of the fit */
  .cf-row, .dw-grid { grid-template-columns: minmax(0, 1fr); }
}
/* minor contrast lifts on app text (owner, v2 review): each clears 4.5:1 on its card; the Budget and Monthly Equivalent
   labels keep the app's own pink, about 3.2:1 there (owner, 2026-10-29) */
.app-dash .db-card-title, .app-dash .db-stat-sub, .app-dash .db-last-updated, .app-dash .db-projection-band-date,
.app-dash .db-projection-confidence-label, .app-dash .db-acc-title, .app-dash .db-acc-chev, .app-dash .db-cat-chevron,
.app-dash .db-txn-tbl th, .app-pl .pl-savings-sub, .app-pl .pl-paycheck-box .label { color: var(--mist); }
.app-dash .db-bar-ref-label--avg, .app-dash .db-excess-ref-right { color: #60a5fa; }
.app-dash .db-bar-expenses { background: #2563eb; color: #ffffff; }
.app-dash .db-bar-surplus { color: #052e16; }
/* the budget panel (spec §12): Auto Generate takes its hover green, banners keep their hue under a 20% shade */
#sc-ag .bp-auto-btn { background: #15803d; }
#sc-ag .bp-auto-btn:disabled { background: #166534; }
#sc-ag .bp-section--user .bp-cat-header { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); }
#sc-ag .bp-provenance-legend { color: #9ca3af; }
#sc-ag .bp-del-row-btn { color: #a1a1aa; }
/* the wizard (spec §12): the gradient starts at #5a67d8, done steps #1a7f37, idle steps #4b5563 */
#sc-ob .app-ob { --brand: #5a67d8; --done: #1a7f37; }

/* ---------- phones (the app's own breakpoint) ---------- */
@media (max-width: 767.98px) {
  :root { --bar-h: 58px; } /* on :root, so the header, its background layer, main's top padding and the scroll padding agree */
  body { font-size: 16px; }
  .bar .link { font-size: 11px; }
  .actions { width: 100%; }
  .hero .actions .cta, .close .actions .cta { flex: 1 1 100%; }
  .snap-box { grid-template-columns: minmax(0, 1fr); text-align: center; padding-block: 64px; }
  .exhibit.flip .ex-text { order: 0; }
  .exhibit.flip .snap-box { grid-template-columns: minmax(0, 1fr); }
  .ex-text p { margin-inline: auto; }
  .pred-box { grid-template-columns: minmax(0, 1fr); }
  .pred-left { justify-content: flex-start; }
  .scene { text-align: left; }
  .foot { justify-content: center; text-align: center; }
  #sc-glance { --app-rem: 15.5px; }
  #sc-curve, #sc-dash-list, #sc-ag, #sc-analysis { --app-rem: 15px; }
  #sc-model .sm-chart-body { height: 250px; }
  #sc-ag .panel-content { min-width: 0; }
  #sc-ag .bp-proj-box { min-width: 0; padding: 5px 4px; }
  #sc-ag :is(.bp-proj-label, .bp-proj-label--income, .bp-proj-label--expense) { white-space: normal; font-size: calc(0.7 * var(--app-rem)); line-height: 1.25; }
  #sc-analysis .chart-card { height: 240px; }
  #sc-ob .ob-body { padding: 22px 18px 20px; }
  /* fewer things on a phone's screen (owner, 2026-10-17): the panel's legend and Add buttons, the wizard's welcome */
  #sc-ag :is(.bp-legend-collapse, #addCatBtn, #addSubcatBtn), #sc-ob .ob-head { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bar, .scene .pointer, .scene .replay, .dr-guide { transition: none; }
  .fade-ready { opacity: 1; transform: none; transition: none; }
  .sys-confirm, #sc-ag .modal-overlay, #sc-ag .modal-box.bcm-box { transition: none; }
}
/* Request access (spec 2026-10-11-share-tab-design.md §4.3) */
.beta-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.ra { width: min(92vw, 400px); padding: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; }
.ra::backdrop { background: rgba(2, 6, 23, 0.72); }
.ra-form, .ra-thanks { display: grid; gap: 14px; padding: 22px; }
.ra-title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: var(--track); text-transform: uppercase; }
.ra-field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.ra-field em { font-style: normal; color: var(--mist); }
.ra-field input:not(.scene *) { min-height: 44px; padding: 0 12px; font: 16px/1.2 var(--f-body); color: var(--ink); background: var(--night); border: 1px solid var(--rule); border-radius: 0; }
.ra-error { margin: 0; color: #fca5a5; font-size: 13px; }
.ra-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ra-thanks p:not(.scene *) { margin: 0; }