/* Potside landing: the app's Balanced look (docs/design.md §14) in static HTML and CSS. No scripts, no
   third parties, and nothing inline: the CSP allows this stylesheet only. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/jakarta.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --canvas: #F3F1EB;
  --surface: #FFFFFF;
  --elevated: #EEEFE9;
  --line: #DCE4DD;
  --ink: #172B3A;
  --toned: #34495A;
  --muted: #586B71;
  --hero: #DDEFDB;
  --hero-ink: #163D33;
  --mark: #224C3E;
  --action: #285CDE;
  --action-ink: #FFFFFF;
  --success: #237454;
  --ring: #628B55;
  --ring-rest: #DCE6E6;
  /* How much of a pot's colour fills its tile, as in the app. */
  --pot-fill: 15%;
  --pot-1: #446DA8;
  --pot-2: #C16F3A;
  --pot-3: #1D6A3E;
  --pot-4: #7D3F7A;
  --pot-6: #AD627B;
  --pot-7: #10A1B0;
  --shadow: rgb(23 43 58 / .45);
  --bezel: #0E171C;
  --focus: #285CDE;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #131E24;
    --surface: #203039;
    --elevated: #283B44;
    --line: #394B51;
    --ink: #E7EFF6;
    --toned: #CBD8DF;
    --muted: #B2C3C9;
    --hero: #214939;
    --hero-ink: #DFF3D6;
    --mark: #B1D6A7;
    --action: #9FB9FF;
    --action-ink: #122447;
    --success: #87D2B1;
    --ring: #A3CE91;
    --ring-rest: #3E5963;
    --pot-fill: 24%;
    --pot-1: #5880BE;
    --pot-2: #C9661A;
    --pot-3: #489366;
    --pot-4: #A764B3;
    --pot-6: #CB768B;
    --pot-7: #35A3BB;
    --shadow: rgb(0 0 0 / .7);
    --bezel: #05090B;
    --focus: #9FB9FF;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 1rem/1.6 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: 1rem; top: -4rem; padding: .6rem 1rem; background: var(--surface); border-radius: 10px; z-index: 20; }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2.5rem, 72.5rem); margin-inline: auto; }
.figure { font-variant-numeric: tabular-nums; }
.cents { font-size: .6em; font-weight: 500; letter-spacing: 0; opacity: .75; }

/* Pot colours: an element takes one as --tint, for its fill, dot or icon. */
.tint-1 { --tint: var(--pot-1); }
.tint-2 { --tint: var(--pot-2); }
.tint-3 { --tint: var(--pot-3); }
.tint-4 { --tint: var(--pot-4); }
.tint-6 { --tint: var(--pot-6); }
.tint-7 { --tint: var(--pot-7); }
.dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--tint); }

/* Header: a floating bar, like the app's sidebar. */
.site-header { position: sticky; top: 0; z-index: 10; padding-top: .875rem; }
.site-header-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .5rem .5rem 1rem; border-radius: 18px; background: var(--surface); box-shadow: 0 10px 30px -22px var(--shadow); }
.brand { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.mark { width: 2rem; height: 2rem; fill: var(--mark); }
.site-nav { display: flex; align-items: center; gap: .25rem; }
.nav-link { padding: .625rem .875rem; border-radius: 10px; font-size: .9375rem; font-weight: 600; color: var(--toned); }
.nav-link:hover { background: var(--elevated); color: var(--ink); }

/* Language menu: a disclosure of plain links, so it works without scripts. */
.lang-menu { position: relative; }
.lang-menu > summary { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; cursor: pointer; list-style: none; user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.site-nav .button { white-space: nowrap; }
.lang-menu[open] > summary { background: var(--elevated); color: var(--ink); }
/* It opens below the header bar (the bar's padding, then a gap), apart from it. */
.lang-list { position: absolute; right: 0; top: calc(100% + 1rem); z-index: 20; min-width: 11rem; padding: .375rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px -20px var(--shadow); }
.lang-list a { display: block; padding: .5rem .75rem; border-radius: 10px; font-size: .9375rem; font-weight: 600; color: var(--toned); }
.lang-list a:hover { background: var(--elevated); color: var(--ink); }
.lang-list a[aria-current="page"] { background: var(--hero); color: var(--hero-ink); }

/* Buttons: pills, blue only for the action. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.25rem; padding: 0 1.625rem; border: 1.5px solid transparent; border-radius: 999px; font-size: 1rem; font-weight: 700; line-height: 1.2; transition: filter .15s, border-color .15s, background-color .15s; }
.button-small { min-height: 2.75rem; padding-inline: 1.25rem; font-size: .9375rem; }
.button-primary { background: var(--action); color: var(--action-ink); }
.button-primary:hover { filter: brightness(1.08); }
.button-outline { background: var(--surface); border-color: var(--line); }
.button-outline:hover { border-color: var(--muted); }
.button-ghost { padding-inline: 1rem; }
.button-ghost:hover { background: var(--elevated); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(28.75rem, 100%), 1fr)); gap: 3.5rem 3rem; align-items: center; padding-top: 4.5rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem .375rem .625rem; border-radius: 999px; background: var(--hero); color: var(--hero-ink); font-size: .8125rem; font-weight: 700; line-height: 1.4; }
h1 { margin-top: 1.375rem; font-size: clamp(2.75rem, 5.6vw, 4.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.lead { margin-top: 1.375rem; max-width: 34rem; font-size: 1.1875rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.ticks { display: flex; flex-wrap: wrap; gap: .625rem 1.375rem; margin-top: 1.75rem; font-size: .875rem; font-weight: 600; color: var(--toned); }
.ticks li { display: flex; align-items: center; gap: .5rem; }
.tick { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--hero); color: var(--hero-ink); }
.fine { margin-top: 1.375rem; font-size: .875rem; color: var(--muted); }

/* The app on a phone, with sample figures. Sizes are in px: the phone is a fixed-size picture. */
.showcase { position: relative; display: flex; align-items: center; justify-content: flex-end; width: min(100%, 32.5rem); min-height: 42.5rem; margin-inline: auto; }
.showcase::before { content: ''; position: absolute; inset: 2.75rem 0 2.75rem 14%; border-radius: 32px; background: var(--hero); }
.phone { position: relative; width: 304px; margin-right: 8%; padding: 9px; border-radius: 46px; background: var(--bezel); box-shadow: 0 40px 80px -40px var(--shadow); }
.screen { position: relative; height: 628px; overflow: hidden; border-radius: 37px; background: var(--canvas); color: var(--ink); }
.screen-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 16px 10px; }
.screen-title { font-size: 21px; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.screen-sub { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.screen-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--toned); }
.screen-row { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px 8px; }
.screen-row-title { font-size: 13px; font-weight: 700; }
.more-link { display: flex; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); }

.balance { margin: 0 12px; padding: 16px; border-radius: 20px; background: var(--hero); color: var(--hero-ink); }
.balance-label { font-size: 11.5px; font-weight: 600; }
.balance-figure { margin-top: 6px; font-size: 36px; font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.balance-scope { margin-top: 8px; overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }
.balance-split { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in oklab, currentColor 15%, transparent); }
.split { display: flex; gap: 3px; height: 5px; }
.split span { border-radius: 999px; background: var(--tint); }
.share-rent { flex: 49.8 1 0; }
.share-groceries { flex: 16.5 1 0; }
.share-transport { flex: 7.5 1 0; }
.share-extra { flex: 26.2 1 0; }
.legend { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 8px; font-size: 9px; }
.legend li { display: flex; align-items: center; gap: 4px; }

.pot-tile { display: flex; flex-direction: column; min-width: 0; background: var(--surface); background: color-mix(in oklab, var(--tint) var(--pot-fill), var(--surface)); color: var(--ink); }
.pot-tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
.pot-kind { font-size: 8.5px; font-weight: 500; color: var(--muted); }
.pot-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pot-balance { font-weight: 700; letter-spacing: -.045em; line-height: 1.25; }
.mini-pots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px; }
.mini-pots .pot-tile { padding: 11px; border-radius: 15px; }
.mini-pots .pot-name { margin-top: 10px; font-size: 10.5px; }
.mini-pots .pot-balance { font-size: 19px; }
.pot-foot { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding-top: 6px; border-top: 1px solid color-mix(in oklab, currentColor 15%, transparent); font-size: 8.5px; color: var(--muted); }
.pot-foot .dot { width: 4px; height: 4px; }

.tabbar { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 7px 6px 14px; border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -10px 30px -22px var(--shadow); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 8.5px; font-weight: 600; color: var(--muted); }
.tab-current { font-weight: 700; color: var(--action); }
.tab-add { justify-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--action); color: var(--action-ink); }

.income-card { position: absolute; left: 0; bottom: 92px; width: 236px; padding: 16px 16px 14px; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 60px -30px var(--shadow); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-title { font-size: 13px; font-weight: 700; }
.income-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.income-figure { font-size: 22px; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.income-note { margin-top: 2px; font-size: 10px; color: var(--muted); }

/* The share of a month's pay allocated to savings. */
.ring { position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; background: conic-gradient(var(--ring) 137deg, var(--ring-rest) 0); }
.ring-inner { position: absolute; inset: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--ink); line-height: 1.15; }
.ring-value { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.ring-label { font-size: 7.5px; color: var(--muted); }
.ring-large { width: 78px; height: 78px; }
.ring-large .ring-inner { inset: 8px; }
.ring-large .ring-value { font-size: 17px; }
.ring-large .ring-label { font-size: 8.5px; }

/* Sections */
.section { padding-top: 8rem; scroll-margin-top: 1.5rem; }
.section-head { max-width: 42rem; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
h2 { margin-top: .75rem; font-size: clamp(2rem, 4.2vw, 2.875rem); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.section-intro { margin-top: .875rem; font-size: 1.125rem; color: var(--muted); text-wrap: pretty; }

/* How it works: each step over a piece of the app. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.25rem; margin-top: 2.75rem; }
.step { display: flex; flex-direction: column; padding: 10px; border-radius: 22px; background: var(--surface); }
.step-art { display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 212px; padding: 18px; border-radius: 16px; background: var(--canvas); }
.step-body { padding: 1.25rem .875rem .875rem; }
.step-title { display: flex; align-items: center; gap: .75rem; }
.step-number { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--hero); color: var(--hero-ink); font-size: .875rem; font-weight: 800; }
.step h3 { font-size: 1.1875rem; letter-spacing: -.025em; }
.step-body p { margin-top: .625rem; font-size: .96875rem; color: var(--muted); }

.pay-card { padding: 14px; border-radius: 14px; background: var(--surface); box-shadow: 0 10px 30px -24px var(--shadow); }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pay-who { display: flex; align-items: center; gap: 10px; min-width: 0; line-height: 1.35; }
.icon-tile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--elevated); color: var(--toned); }
.pay-name { font-size: 13px; font-weight: 600; }
.pay-when { font-size: 11px; color: var(--muted); }
.pay-amount { font-size: 14px; font-weight: 700; color: var(--success); }
.pay-again { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; margin-top: 14px; border-radius: 999px; background: var(--action); color: var(--action-ink); font-size: 12.5px; font-weight: 700; }

.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.meter-name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.meter-name .dot { width: 7px; height: 7px; }
.meter-of { color: var(--muted); }
.meter-of b { font-weight: 600; color: var(--ink); }
.meter-track { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--tint) 20%, transparent); }
.meter-fill { height: 100%; border-radius: 999px; background: var(--tint); }
.fill-full { width: 100%; }
.fill-80 { width: 80%; }
.meter-note { margin-top: 3px; font-size: 11px; color: var(--muted); }

.step-art-chart { justify-content: flex-start; gap: 0; }
.chart-title { font-size: 12.5px; font-weight: 700; }
.chart-legend { display: flex; gap: 10px; font-size: 10.5px; color: var(--muted); }
.chart-legend li { display: flex; align-items: center; gap: 4px; }
.chart-legend .dot { width: 7px; height: 7px; }
.chart { flex: 1; min-height: 0; width: 100%; margin-top: 14px; }
.bar-income { fill: var(--pot-1); }
.bar-spending { fill: var(--pot-3); }
.chart-axis { stroke: var(--line); }
.chart-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 6px; font-size: 10px; color: var(--muted); text-align: center; }

/* Privacy: the mint headline panel. */
.private { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26.25rem, 100%), 1fr)); gap: 2.5rem 3.5rem; align-items: center; padding: clamp(1.75rem, 5.4vw, 4rem); border-radius: 28px; background: var(--hero); color: var(--hero-ink); }
.private .eyebrow { color: inherit; opacity: .8; }
.private .section-intro { max-width: 30rem; color: inherit; opacity: .85; }
.cipher { display: flex; flex-direction: column; gap: 8px; margin-top: 2rem; padding: 12px; border-radius: 18px; background: var(--surface); color: var(--ink); }
.cipher-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 12px; background: var(--canvas); }
.cipher-where { flex: none; width: 92px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cipher-what { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.cipher-what .dot { width: 7px; height: 7px; }
.cipher-amount { flex: none; font-size: 14px; font-weight: 700; }
.cipher-text { flex: 1; min-width: 0; overflow: hidden; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.cipher-row > svg { color: var(--muted); }
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14.375rem, 100%), 1fr)); gap: .75rem; }
.promise { padding: 1.25rem; border-radius: 18px; background: var(--surface); background: color-mix(in oklab, var(--surface) 62%, transparent); }
.promise-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--surface); }
.promise h3 { margin-top: .875rem; font-size: 1rem; }
.promise p { margin-top: .375rem; font-size: .90625rem; line-height: 1.55; opacity: .85; }

/* Features: two with a picture, then the rest. */
.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(27.5rem, 100%), 1fr)); gap: .875rem; margin-top: 2.75rem; }
.highlight { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.25rem, 4vw, 1.75rem); border-radius: 22px; background: var(--surface); }
.highlight h3 { font-size: 1.25rem; letter-spacing: -.025em; }
.highlight-text { margin-top: .5rem; max-width: 26rem; font-size: .96875rem; color: var(--muted); }
.highlight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.round-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--elevated); color: var(--toned); }
.plan-pots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.plan-pots .pot-tile { padding: 14px; border-radius: 18px; }
.plan-pots .pot-name { margin-top: 12px; font-size: 12.5px; }
.plan-pots .pot-balance { font-size: 22px; }
.pot-plan { margin-top: 2px; font-size: 11px; color: var(--muted); }
.masked { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 18px 20px; border-radius: 18px; background: var(--hero); color: var(--hero-ink); }
.masked-text { min-width: 0; }
.masked-label { font-size: 12.5px; font-weight: 600; }
.masked-figure { margin-top: 8px; font-size: 28px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.masked .split { width: 200px; max-width: 100%; margin-top: 10px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr)); gap: .875rem; margin-top: .875rem; }
.feature { padding: 1.5rem; border-radius: 18px; background: var(--surface); }
.feature-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in oklab, var(--tint) 14%, transparent); color: var(--tint); }
.feature h3 { margin-top: 1rem; font-size: 1.03125rem; }
.feature p { margin-top: .375rem; font-size: .90625rem; line-height: 1.55; color: var(--muted); }

/* Call to action, also the 404 page. */
.cta { display: flex; flex-direction: column; align-items: center; padding: clamp(2.75rem, 6.5vw, 5rem) 1.5rem; border-radius: 28px; background: var(--surface); text-align: center; }
.cta .mark { width: 3.25rem; height: 3.25rem; }
.cta h1, .cta h2 { margin-top: 1.375rem; }
.cta .section-intro { max-width: 32rem; }
.cta .actions { justify-content: center; }
.not-found { padding-block: 4.5rem; }

.site-footer { padding-block: 4.5rem 2.5rem; }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .875rem; }
.footer-brand .brand { min-height: 0; gap: .5rem; font-size: 1.0625rem; }
.footer-brand .mark { width: 1.5rem; height: 1.5rem; }
.tagline { font-size: .875rem; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .875rem; font-weight: 600; color: var(--toned); }
.footer-nav a { padding-block: .375rem; }
.footer-nav a:hover { color: var(--ink); }
.footer-langs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 1rem; font-size: .8125rem; font-weight: 600; color: var(--toned); }
.footer-langs a { padding-block: .25rem; }
.footer-langs a:hover, .footer-langs a[aria-current="page"] { color: var(--ink); }
.footer-langs a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .fine { margin-top: 1rem; font-size: .8125rem; }

/* The section links need the room of a wide screen in every language; the footer has them too. */
@media (max-width: 72rem) {
  .section-link { display: none; }
}
@media (max-width: 47.5rem) {
  .wide-only, .income-card { display: none; }
  .hero { padding-top: 3rem; }
  .section { padding-top: 4.5rem; }
}
@media (max-width: 30rem) {
  /* Room for the longest sign-in label: the language menu shows only its globe. */
  .lang-menu > summary { padding-inline: .625rem; font-size: 0; gap: 0; }
  .lang-menu > summary svg { width: 18px; height: 18px; }
  .plan-pots { gap: 8px; }
  .plan-pots .pot-tile { padding: 10px; border-radius: 14px; }
  .plan-pots .pot-name { margin-top: 10px; font-size: 11px; }
  .plan-pots .pot-balance { font-size: 17px; }
  .cipher-row { flex-wrap: wrap; row-gap: 2px; }
  .cipher-where { flex-basis: 100%; }
}
@media (max-width: 23.5rem) {
  /* The smallest phones: the mark alone, so the sign-in link fits in every language. */
  .site-header .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }
@media (forced-colors: active) {
  .button-primary, .tab-add, .pay-again { border: 1px solid ButtonText; }
  .site-header-bar, .pot-tile, .balance, .income-card, .step, .private, .promise, .highlight, .feature, .masked, .cta, .lang-list { border: 1px solid CanvasText; }
  .split span, .meter-fill, .dot, .ring { forced-color-adjust: none; }
}