/* Malai's public pages. Tokens and components are carried over from design/tokens.css and the Ledger base: Forest hero, canvas,
   70% white cards with the white edge, capsule day bars, rows, card faces. Only the page layout is new. */

@font-face { font-family: "Manrope"; src: url("/fonts/manrope-4.505-hq.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; font-feature-settings: "liga" 0; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-1.700-hq.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --canvas: #F3F4F1; --card: #FFFFFF; --well: #ECEEE9; --ghost: #F3F4F1; --ghost-on-canvas: #E7E8E5;
  --hairline: #E9EBE7; --hairline-strong: #DDE1DA;
  --ink-1: #101410; --ink-2: #3F4540; --ink-3: #454B46; --ink-ring: #858B86; --ink-on-dark: #FFFFFF;
  --ink-on-dark-2: rgba(255, 255, 255, 0.90); --ink-on-dark-3: rgba(255, 255, 255, 0.86);
  --forest-ink: #1B7A4A; --forest-ink-hover: #176A40; --forest-press: #135C37; --forest-hero: #0E3B27; --in-text: #125F38;
  --forest-300: #93D2AB; --hero-raised: rgba(255, 255, 255, 0.10); --hero-line: rgba(255, 255, 255, 0.14);
  --attention: #7F3A05; --attention-tint: #FDF1DC; --accent: #F26A21;
  --hatch-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2l4-4M0 8l8-8M6 10l4-4' stroke='%23FFFFFF' stroke-opacity='0.22' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  --glass-card: rgba(255, 255, 255, 0.70); --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  --drop: 0 14px 30px -22px rgba(16, 20, 16, 0.30);
  --font-sans: "Manrope", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-card: 32px; --r-inner: 24px; --r-cell: 12px; --r-small: 8px; --r-pill: 999px;
  --c-lg: 56px; --c-md: 44px;
  --t3: 120ms; --t4: 160ms; --t5: 200ms; --t6: 240ms; --t12: 480ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --scale-press: 0.97;
  /* the page's left edge. The Forest bands run 16 from the screen and pull their contents back to this line. */
  --inset: max(32px, calc((100vw - 1248px) / 2));
  --edge: 16px;
  --sec: 80px;
  interpolate-size: allow-keywords;
}
@media (max-width: 720px) { :root { --inset: 16px; --sec: 64px; } }
@media (prefers-reduced-motion: reduce) { :root { --scale-press: 1; } }

[data-tag="food"] { --tag-tint: #FDE1D5; --tag-ink: #6C2D0A; --tag-bar: #AF6340; }
[data-tag="groceries"] { --tag-tint: #DEEED6; --tag-ink: #294D0D; --tag-bar: #5D8943; }
[data-tag="shopping"] { --tag-tint: #FBDFEB; --tag-ink: #68284A; --tag-bar: #AA5D83; }
[data-tag="transport"] { --tag-tint: #D7EAFF; --tag-ink: #0A4475; --tag-bar: #437EB9; }
[data-tag="fuel"] { --tag-tint: #F6E5CF; --tag-ink: #603800; --tag-bar: #A07020; }
[data-tag="bills"] { --tag-tint: #EDE9CF; --tag-ink: #4F4200; --tag-bar: #8A7B1D; }
[data-tag="rent"] { --tag-tint: #CEF0ED; --tag-ink: #00524E; --tag-bar: #008E89; }
[data-tag="subscriptions"] { --tag-tint: #EBE3FC; --tag-ink: #4B346F; --tag-bar: #856AB2; }
[data-tag="health"] { --tag-tint: #FFDFDE; --tag-ink: #6E282B; --tag-bar: #B25D5F; }
[data-tag="insurance"] { --tag-tint: #DEEAF3; --tag-ink: #28465A; --tag-bar: #5C7F98; }
[data-tag="family"] { --tag-tint: #F5E2E6; --tag-ink: #5D343E; --tag-bar: #9C6A75; }
[data-tag="investments"] { --tag-tint: #D9EEE1; --tag-ink: #0C4F33; --tag-bar: #468A68; }
[data-tag="loans"] { --tag-tint: #F1E5DD; --tag-ink: #563C26; --tag-bar: #937359; }
[data-tag="income"] { --tag-tint: #D8EFDC; --tag-ink: #085023; --tag-bar: #448C56; }
[data-tag="transfers"], [data-tag="cardbills"], [data-tag="cash"] { --tag-tint: #E9E8E5; --tag-ink: #44423C; --tag-bar: #7D7A73; }

* { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--canvas); color: var(--ink-1); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--forest-ink); outline-offset: 2px; }
.hero :focus-visible, .proof :focus-visible { outline-color: var(--forest-300); }
.skip { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink-1); color: #fff; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }

.wash { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(75% 46% at 100% 0%, rgba(147, 210, 171, 0.42), transparent 70%),
  radial-gradient(60% 40% at 0% 50%, rgba(242, 106, 33, 0.07), transparent 70%),
  radial-gradient(75% 48% at 100% 100%, rgba(59, 111, 203, 0.16), transparent 70%); }

.wrap { padding-inline: var(--inset); }
.i { width: 20px; height: 20px; flex: none; display: block; fill: currentColor; }
.logo { width: 20px; height: 20px; flex: none; display: block; }
.logo.sm { width: 18px; height: 18px; }
.num { font-variant-numeric: tabular-nums; }
.in { color: var(--in-text); }
.press { transition: transform var(--t4) var(--ease-out), background-color var(--t4) ease; }
.press:active { transform: scale(var(--scale-press)); transition-duration: 0ms, 0ms; }

/* ------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--c-md); padding: 0 20px; border-radius: var(--r-pill); font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.btn.lg { height: var(--c-lg); padding: 0 28px; font-size: 16px; line-height: 24px; }
.btn.sm { height: 44px; padding: 0 16px; font-size: 14px; }
.btn.primary { background: var(--forest-ink); color: #fff; }
.btn.primary:active { background: var(--forest-press); }
.btn.secondary { background: var(--glass-card); box-shadow: var(--glass-edge), 0 0 0 1px rgba(16, 20, 16, 0.08); color: var(--ink-1); }
.btn.secondary:active { background: var(--ghost-on-canvas); }
.btn.white { background: #fff; color: var(--ink-1); }
.btn.ghost-dark { background: var(--hero-raised); color: #fff; box-shadow: inset 0 0 0 1px var(--hero-line); }
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { background: var(--forest-ink-hover); }
  .btn.secondary:hover { background: #fff; }
  .top nav a:hover, .foot nav a:hover { color: var(--ink-1); text-decoration: underline; text-underline-offset: 4px; }
  details summary:hover { color: var(--forest-ink-hover); }
}

/* ------------------------------------------------ top */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.mark { width: 40px; height: 40px; display: block; flex: none; }
.top nav { display: flex; gap: 32px; color: var(--ink-2); font-weight: 500; margin-left: auto; margin-right: 16px; }
.top nav a { text-decoration: none; padding-block: 10px; }
@media (max-width: 860px) { .top nav { display: none; } }
@media (max-width: 720px) {
  .top nav { display: flex; gap: 20px; margin-right: 0; }
  .top nav a:first-child, .top .btn { display: none; }
}

/* ------------------------------------------------ the opening: words, then the Forest */
.intro { padding-top: 16px; }
h1 { font-size: 72px; line-height: 76px; font-weight: 500; letter-spacing: -0.035em; }
h1 span { display: block; text-wrap: balance; }
.intro-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 24px; }
.lede { max-width: 56ch; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.doors { display: flex; flex: none; flex-wrap: wrap; gap: 12px; }
.promise { margin-top: 12px; font-weight: 600; color: var(--ink-1); }
@media (max-width: 1099px) {
  h1 { font-size: 56px; line-height: 60px; }
  .intro-row { display: block; }
  .intro-row .doors { margin-top: 24px; }
}
@media (max-width: 720px) {
  .intro { padding-top: 16px; }
  h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.03em; }
  .lede { font-size: 18px; line-height: 28px; }
  .doors { display: grid; grid-template-columns: 1fr; }
  .doors .btn { width: 100%; }
  .btn.lg { padding: 0 20px; }
  .top { min-height: 72px; }
}

/* ------------------------------------------------ Forest */
.hero, .proof {
  color: var(--ink-on-dark);
  background: radial-gradient(110% 80% at 100% 0%, rgba(255, 255, 255, 0.13), transparent 58%), linear-gradient(165deg, #15523B 0%, #0E3B27 50%, #0A2D1D 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 20px 36px -24px rgba(14, 59, 39, 0.70);
  border-radius: var(--r-card);
  margin-inline: var(--edge);
  padding-inline: calc(var(--inset) - var(--edge));
}
.hero { margin-top: 24px; padding-block: 32px 24px; }
@media (max-width: 720px) { .hero, .proof { padding-inline: 20px; } .hero { margin-top: 24px; padding-block: 24px 20px; } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: 48px; row-gap: 20px; }
.hero-fig { display: flex; flex-direction: column; align-items: flex-start; }
.hero-strip { grid-column: 1 / -1; }
.label { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.hero .label { font-size: 16px; line-height: 24px; color: var(--ink-on-dark-3); }
.sample { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--hero-raised); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-on-dark); vertical-align: 1px; }
.fig { display: block; font-weight: 600; white-space: nowrap; font-variant-numeric: proportional-nums; }
.fig-xl { margin-top: 8px; font-size: 104px; line-height: 104px; letter-spacing: -0.035em; }
.fig-l { margin-top: 4px; font-size: 40px; line-height: 48px; letter-spacing: -0.025em; }
.fig-l.quiet { color: var(--ink-2); }
.point { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--ink-on-dark-2); }
.point .i { margin-top: 4px; }
.point b { font-weight: 600; color: #fff; }
@media (max-width: 1099px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .fig-xl { font-size: 80px; line-height: 84px; } }
@media (max-width: 720px) { .fig-xl { font-size: 64px; line-height: 68px; } .point { font-size: 16px; line-height: 24px; margin-top: 8px; } }

/* the day strip: capsules on raised tracks, white fading down, today in orange, days to come hatched */
.hint { margin-top: auto; padding-top: 16px; color: var(--ink-on-dark-2); font-weight: 500; }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-touch { display: inline; } .hint-mouse { display: none; } }
.strip, .strip-axis { --gap: 10px; }
.strip { --bar-min: 20px; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: var(--gap); height: 120px; touch-action: pan-y; cursor: pointer; border-radius: var(--r-small); user-select: none; -webkit-user-select: none; }
.strip .d { position: relative; height: 100%; }
.strip .d .tr { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--hero-raised); overflow: hidden; }
.strip .d.future { cursor: default; }
.strip .d.future .tr { background: var(--hatch-on-dark); }
.strip .d .b { position: absolute; left: 0; right: 0; bottom: 0; height: max(var(--h), var(--bar-min)); border-radius: var(--r-pill); background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.50)); transform-origin: bottom; animation: grow var(--t12) var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 16ms); }
.strip .d.today .b { background: var(--accent); box-shadow: 0 0 12px rgba(242, 106, 33, 0.65); }
.strip .d.cap .b { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 40%, rgba(255, 255, 255, 0.22)); }
.strip .d.is-sel .tr { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
@keyframes grow { from { transform: scaleY(0); } }
.strip-axis { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: var(--gap); margin-top: 8px; height: 20px; }
.strip-axis span { justify-self: center; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-on-dark-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.strip:focus-visible { outline-offset: 4px; }
@media (max-width: 1099px) { .strip, .strip-axis { --gap: 5px; } }
@media (max-width: 720px) { .strip, .strip-axis { --gap: 3px; } .strip { --bar-min: 8px; height: 104px; } }

/* the day's rows, on a raised panel */
.daypanel { position: relative; padding: 12px 20px 8px; border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); min-height: 252px; }
.day-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; min-height: 44px; padding-right: 100px; padding-block: 2px 8px; }
.day-top b { font-size: 18px; line-height: 24px; font-weight: 600; white-space: nowrap; }
.day-sum { font-weight: 500; color: var(--ink-on-dark-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-nav { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.icon-btn { width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--hero-raised); color: #fff; cursor: pointer; font: inherit; }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
.hero-strip { order: 3; }
@media (max-width: 1099px) {
  .hero-strip { order: 2; }
  .daypanel { order: 3; }
}
@media (max-width: 720px) { .daypanel { padding: 12px 16px 8px; min-height: 264px; } }

/* ------------------------------------------------ rows, as the app draws them */
.rows { margin-top: 8px; }
.row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 0; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--hairline); }
.ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ghost); color: var(--ink-2); flex: none; }
.ic[data-tag] { background: var(--tag-tint); color: var(--tag-ink); }
.ic.face { background: #fff; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.ic.att { background: var(--attention-tint); color: var(--attention); }
.who { min-width: 0; }
.who b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; overflow-wrap: anywhere; }
.who small { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--tag-bar); vertical-align: 1px; }
.end { text-align: right; white-space: nowrap; }
.end b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.row.moved .who b { color: var(--ink-2); }
.row.moved .end b { color: var(--ink-3); font-weight: 500; }
.hero .rows { margin-top: 0; }
.hero .row { padding: 8px 0; }
.hero .row + .row::before { background: var(--hero-line); }
.hero .who small { color: var(--ink-on-dark-3); }
.hero .row.moved .who b, .hero .row.moved .end b { color: var(--ink-on-dark-2); }
.hero .end b.in { color: #fff; }
.hero .ic.face { box-shadow: none; }
.hero .dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }

.when { width: 40px; text-align: center; }
.when b { display: block; font-size: 22px; line-height: 26px; font-weight: 600; }
.when small { display: block; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.when.soon b { color: var(--attention); }

/* ------------------------------------------------ cards */
.card { position: relative; background: var(--glass-card); box-shadow: var(--glass-edge), var(--drop); border-radius: var(--r-card); padding: 24px; }
.card h3 { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.015em; }
.card-sub { margin-top: 8px; color: var(--ink-2); font-weight: 500; text-wrap: pretty; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.mail-note { font-weight: 500; color: var(--ink-2); }

/* the same screen, carried on below the Forest */
.now-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: 16px; }
.needs { display: flex; align-items: center; gap: 16px; padding: 24px; }
.needs b { display: block; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; }
.needs p { color: var(--ink-2); font-weight: 500; }
.faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cardface { position: relative; overflow: hidden; min-height: 132px; padding: 14px 16px; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 1px 2px rgba(16, 20, 16, 0.10), 0 10px 20px -12px rgba(16, 20, 16, 0.40); }
.cardface::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140px 90px at 0 0, rgba(255, 255, 255, 0.16), transparent 70%); }
.f-hdfc { --c1: #004B8D; --c2: #00305C; } .f-sbi { --c1: #22409A; --c2: #162B6B; } .f-icici { --c1: #9E2329; --c2: #74191E; }
.cf-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.cf-tile { width: 28px; height: 28px; border-radius: var(--r-small); background: #fff; display: grid; place-items: center; color: var(--ink-2); }
.cf-tile .i, .cf-tile .logo { width: 18px; height: 18px; }
.cf-mid { position: relative; z-index: 1; display: block; min-width: 0; }
.cf-fig { display: block; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.cf-sub { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.92); }
@media (max-width: 1099px) { .now-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .faces { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 16px; }
  .faces::-webkit-scrollbar { display: none; }
  .cardface { flex: none; width: 196px; scroll-snap-align: start; }
  .now-row { gap: 12px; margin-top: 12px; }
  .needs { padding: 16px 20px; }
}

/* ------------------------------------------------ sections */
.sec { margin-top: var(--sec); }
.sec-head { max-width: 860px; }
.kicker { margin-bottom: 8px; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--ink-2); }
h2 { font-size: 48px; line-height: 54px; font-weight: 500; letter-spacing: -0.028em; text-wrap: balance; }
.sub { margin-top: 16px; max-width: 64ch; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.sec-head + * { margin-top: 32px; }
@media (max-width: 720px) {
  h2 { font-size: 32px; line-height: 38px; letter-spacing: -0.022em; }
  .sub { font-size: 16px; line-height: 24px; }
  .kicker { font-size: 16px; line-height: 24px; }
  .sec-head + * { margin-top: 24px; }
}

.month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.month-col { display: flex; flex-direction: column; gap: 16px; }
.left-over p { margin-top: 8px; color: var(--ink-2); font-weight: 500; }
.month-col > .left-over { flex: 1; }
.card-end { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); color: var(--ink-2); font-weight: 500; text-wrap: pretty; }
@media (max-width: 1099px) { .month-grid { grid-template-columns: minmax(0, 1fr); } }

/* money with no text */
.walk-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 32px; }
.walk-copy p { margin-top: 12px; color: var(--ink-2); font-weight: 500; text-wrap: pretty; }
.walk-copy h3 { font-size: 32px; line-height: 38px; letter-spacing: -0.02em; }
.sms { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.sms-when { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.raw { margin-top: 2px; font-family: var(--font-mono); font-size: 14px; line-height: 21px; color: var(--ink-1); overflow-wrap: anywhere; }
.gap-line { width: 2px; height: 32px; margin: 6px 0 6px 19px; background-image: linear-gradient(var(--accent) 60%, transparent 60%); background-size: 2px 8px; transform-origin: top; }
.sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding: 16px 20px; border-radius: var(--r-inner); background: var(--well); }
.sum span { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.sum b { display: block; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.sum div:last-child b { color: var(--attention); }
.found { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 16px 20px; border-radius: var(--r-inner); background: var(--attention-tint); }
.found .ic.att { background: rgba(255, 255, 255, 0.7); }
.found b { display: block; font-size: 18px; line-height: 26px; font-weight: 600; }
.found p { color: var(--ink-2); font-weight: 500; }
.walk.is-armed .gap-line { transform: scaleY(0); }
.walk.is-armed .sms:last-of-type, .walk.is-armed .sum, .walk.is-armed .found { opacity: 0; transform: translateY(8px); }
.walk.is-in .gap-line { transform: none; transition: transform var(--t12) var(--ease-out); }
.walk.is-in .sms:last-of-type, .walk.is-in .sum, .walk.is-in .found { opacity: 1; transform: none; transition: opacity var(--t6) var(--ease-out), transform var(--t6) var(--ease-out); }
.walk.is-in .sms:last-of-type { transition-delay: 360ms; }
.walk.is-in .sum { transition-delay: 720ms; }
.walk.is-in .found { transition-delay: 1080ms; }
@media (max-width: 1099px) { .walk-card { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 720px) {
  .walk-card { padding: 20px; }
  .walk-copy h3 { font-size: 24px; line-height: 32px; }
  .sum { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .found { padding: 16px; }
  .card { padding: 20px; }
}

.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: stretch; }
.sec-head + .two-up { margin-top: 32px; }
@media (max-width: 860px) { .two-up { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .sec-head + .two-up { margin-top: 24px; } }

/* how it works */
.way { display: flex; flex-direction: column; }
.way-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ic.big { width: 48px; height: 48px; background: var(--ghost); color: var(--ink-1); }
.ic.big .i { width: 24px; height: 24px; }
.status { padding: 4px 12px; border-radius: var(--r-pill); background: #E6F4EB; color: var(--in-text); font-size: 14px; line-height: 20px; font-weight: 600; text-align: center; }
.status.soon { background: var(--attention-tint); color: var(--attention); }
/* a raw bank line becoming a clear row: the design lead's hero idea, placed where each is true */
.read { margin-top: 12px; padding: 12px 16px 2px; border-radius: 20px; background: var(--ghost); }
.read .raw mark { color: inherit; font-weight: 600; border-radius: 4px; background: #CDEAD7; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.read .row { margin-top: 2px; }
.read.is-armed .raw mark { background: transparent; }
.read.is-armed .row { opacity: 0; transform: translateY(-8px); }
.read.is-in .raw mark { background: #CDEAD7; transition: background-color var(--t5) ease 240ms; }
.read.is-in .row { opacity: 1; transform: none; transition: opacity var(--t6) var(--ease-out) 720ms, transform var(--t6) var(--ease-out) 720ms; }
.steps { counter-reset: s; margin-top: 12px; }
.steps li { counter-increment: s; position: relative; padding: 8px 0 8px 36px; color: var(--ink-2); font-weight: 500; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--ghost-on-canvas); display: grid; place-items: center; font-size: 14px; line-height: 24px; font-weight: 600; color: var(--ink-1); }
.way .card-foot { margin-top: auto; padding-top: 16px; }

/* ------------------------------------------------ the proof band */
.proof { margin-top: var(--sec); padding-block: 64px; }
.proof-top { max-width: 760px; }
.proof-act { margin-top: 24px; }
.proof-act .btn { background: #FFFFFF; color: var(--ink-1); }
.proof h2 { font-size: 64px; line-height: 68px; letter-spacing: -0.032em; }
.proof .sub { color: var(--ink-on-dark-2); }
.doc code { display: inline-block; font-family: var(--font-mono); font-size: 14px; padding: 2px 8px; border-radius: 6px; background: var(--ghost-on-canvas); overflow-wrap: anywhere; }
@media (max-width: 1099px) { .proof h2 { font-size: 48px; line-height: 54px; } }
@media (max-width: 720px) {
  .proof { padding-block: 32px; }
  .proof h2 { font-size: 36px; line-height: 42px; }
}

/* screens */
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--inset)); padding-inline: var(--inset); padding-bottom: 24px; }
.shots::-webkit-scrollbar { display: none; }
.shot { min-width: 220px; scroll-snap-align: center; }
.shot img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 0 0 1px rgba(16, 20, 16, 0.06), 0 24px 40px -28px rgba(16, 20, 16, 0.40); }
.shot figcaption { margin-top: 12px; }
.shot b { display: block; font-size: 18px; line-height: 24px; font-weight: 600; }
.shot span { display: block; color: var(--ink-2); font-weight: 500; font-size: 15px; line-height: 22px; }
@media (max-width: 720px) { .shots { grid-auto-columns: 74vw; scroll-padding-inline: 16px; } }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.faq-list { display: grid; }
details { border-top: 1px solid var(--hairline-strong); }
details:last-child { border-bottom: 1px solid var(--hairline-strong); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; font-size: 18px; line-height: 26px; font-weight: 500; cursor: pointer; list-style: none; transition: color var(--t4) ease; }
summary::-webkit-details-marker { display: none; }
summary .i { width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--t5) var(--ease-in-out); }
details[open] summary .i { transform: rotate(180deg); }
.faq-a { padding-bottom: 20px; max-width: 68ch; color: var(--ink-2); font-weight: 500; }
.faq-a p + p { margin-top: 12px; }
.faq-a a, .doc a, .made a, .foot-who a { text-underline-offset: 3px; padding-block: 11px; }
.faq-a strong, .doc strong { font-weight: 700; color: var(--ink-1); }
details::details-content { block-size: 0; overflow: clip; transition: block-size var(--t6) var(--ease-out), content-visibility var(--t6) allow-discrete; }
details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { details::details-content, summary .i { transition: none; } }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 720px) { summary { font-size: 16px; line-height: 24px; } }

/* close */
.close-cta h2 { max-width: 20em; }
.close-cta .doors { margin-top: 24px; }
.made { margin-top: 16px; font-weight: 500; color: var(--ink-2); }

/* foot */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; margin-top: var(--sec); padding-block: 32px 40px; border-top: 1px solid var(--hairline-strong); }
.foot-who { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-who p { color: var(--ink-2); font-weight: 500; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; font-weight: 500; color: var(--ink-2); }
.foot nav a { text-decoration: none; padding-block: 10px; }
.foot-note { grid-column: 1 / -1; max-width: 80ch; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 720px) { .foot { grid-template-columns: minmax(0, 1fr); } }

/* legal and help */
.doc { max-width: calc(760px + 2 * var(--inset)); margin-inline: auto; padding-top: 32px; }
.doc h1 { font-size: 56px; line-height: 60px; }
.doc-intro { margin-top: 16px; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.doc-stamp { margin-top: 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.doc > section { margin-top: 48px; }
.doc > section.doc-card { margin-top: 32px; }
.doc h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.018em; margin-bottom: 8px; }
.doc section > p, .doc section li, .doc dd { color: var(--ink-2); font-weight: 500; text-wrap: pretty; }
.doc section > p + p, .doc section > ul + p, .doc section > dl + p { margin-top: 12px; }
.doc section > ul { margin-top: 8px; }
.doc section li { position: relative; padding: 4px 0 4px 20px; }
.doc section li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--forest-ink); }
.doc dl { margin-top: 8px; }
.doc dt { margin-top: 12px; font-weight: 600; }
.doc h3 { margin-top: 24px; font-size: 18px; line-height: 24px; font-weight: 600; }
.doc section > ol { margin-top: 8px; counter-reset: s; }
.doc section > ol > li { counter-increment: s; padding-left: 36px; }
.doc section > ol > li::before { content: counter(s); left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ghost-on-canvas); color: var(--ink-1); display: grid; place-items: center; font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.doc section[id] { scroll-margin-top: 88px; }
.doc .faq-list { margin-top: 8px; }
@media (max-width: 720px) { .doc { padding-top: 16px; } .doc h1 { font-size: 40px; line-height: 44px; } .doc-intro { font-size: 18px; line-height: 28px; } .doc > section { margin-top: 32px; } .doc h2 { font-size: 24px; line-height: 30px; } }

/* 404 */
.nf-wrap { padding-top: 16px; }
.nf { margin-top: 0; padding-block: 80px; min-height: 56vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.nf h1 { margin-top: 12px; }
.nf .doors { margin-top: 32px; }
@media (max-width: 720px) { .nf { padding-block: 48px; } .nf .doors { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .strip .d .b { animation: none; }
  .press { transition: background-color var(--t4) ease; }
}