/* mona's public site: warm paper, pine and terracotta around the owner's illustration (hero.webp). */
/* Fraunces © The Fraunces Project Authors, SIL Open Font License 1.1 — /site/fonts/OFL-Fraunces.txt */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/site/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/site/fonts/fraunces-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  --bg: #fdfcf7; /* the illustration's own paper, so the hero has no seam */
  --surface: #ffffff;
  --soft: #f3efe5;
  --ink: #173a2c;
  --muted: #56625a;
  --line: #dfd7c6;
  --pine: #1c4b37;
  --pine-ink: #1c4b37;
  --on-pine: #ffffff;
  --sage: #86b67e;
  --accent: #d9764f;
  --accent-ink: #a34c27;
  --notice: #f1eee2;
  --notice-ink: #464a2c;
  --danger: #a23b36;
  --positive: #1f6b3f;
  --art-filter: none;
  --art-mask: none;
  --shadow: 0 22px 54px rgb(35 52 40 / 13%), 0 4px 14px rgb(35 52 40 / 6%);
  --radius: 16px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171f1b;
  --surface: #222e27;
  --soft: #2a382e;
  --ink: #eff5ed;
  --muted: #b5c6b7;
  --line: #455d49;
  --pine: #b5d4ac;
  --pine-ink: #b5d4ac;
  --on-pine: #173c2c;
  --sage: #a4c595;
  --accent: #e9956f;
  --accent-ink: #f0a987;
  --notice: #2b3627;
  --notice-ink: #d1debd;
  --danger: #ffb3a9;
  --positive: #9fd3a8;
  --art-filter: brightness(.64) saturate(.85);
  --art-mask: linear-gradient(90deg, transparent 36%, #000 52%);
  --shadow: 0 30px 70px rgb(0 0 0 / 34%);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #171f1b; --surface: #222e27; --soft: #2a382e;
    --ink: #eff5ed; --muted: #b5c6b7; --line: #455d49;
    --pine: #b5d4ac; --pine-ink: #b5d4ac; --on-pine: #173c2c;
    --sage: #a4c595; --accent: #e9956f; --accent-ink: #f0a987;
    --notice: #2b3627; --notice-ink: #d1debd; --danger: #ffb3a9;
    --positive: #9fd3a8; --art-filter: brightness(.64) saturate(.85);
    --art-mask: linear-gradient(90deg, transparent 36%, #000 52%);
    --shadow: 0 30px 70px rgb(0 0 0 / 34%);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--bg); scrollbar-color: var(--sage) var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--pine); color: var(--on-pine); }
a { color: inherit; text-underline-offset: .23em; }
button, input, textarea, select { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button:disabled { cursor: default; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--pine-ink); outline-offset: 5px; }
button, a { transition: background-color 160ms ease, color 160ms ease; }
img, svg { max-width: 100%; }
img { display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 660; overflow-wrap: anywhere; hyphens: auto; }
h1, h2 { font-family: var(--serif); font-weight: 600; }
h1 { font-size: clamp(2.7rem, 5.2vw, 5rem); line-height: 1.07; letter-spacing: -.025em; }
h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.16; letter-spacing: -.02em; }
h3 { font-size: 1.2rem; line-height: 1.4; letter-spacing: -.018em; }
p { max-width: 70ch; }
p + p { margin-top: 1em; }
.wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 20; padding: 12px 20px; background: var(--surface); color: var(--ink); }
.skip-link:focus { top: 12px; }
.site-header { position: relative; z-index: 2; min-height: 114px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px; }
/* Header items stay legible where the art runs behind the header (wide screens). */
.over-art :is(.main-nav, .header-tools) { border-radius: 999px; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.over-art .main-nav { padding-inline: 18px; }
.over-art .header-tools { padding: 4px 4px 4px 16px; }
.over-art .header-app { border-radius: 999px; min-height: 42px; } /* concentric with the pill, even inset on every side */
.wordmark { position: relative; display: inline-flex; align-items: baseline; width: fit-content; text-decoration: none; font-size: 42px; line-height: 1.2; font-weight: 800; letter-spacing: -.04em; color: var(--pine-ink); }
.wordmark-icon { position: relative; top: calc(.475em - .5ex); width: .95em; height: .95em; flex: none; margin-right: .24em; } /* baseline item -> shift so its centre sits on the middle of the lowercase letters */
.wordmark.small { font-size: 24px; }
.main-nav { display: flex; gap: 32px; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .9rem; font-weight: 560; }
.main-nav a:hover, .main-nav a[aria-current] { text-decoration: underline; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 15px; }
.languages { display: flex; align-items: center; gap: 2px; }
.languages a { padding: 12px 6px; text-decoration: none; color: var(--muted); font-size: .72rem; line-height: 20px; }
.languages a[aria-current] { color: var(--ink); font-weight: 800; text-decoration: underline; }
.appearance { position: relative; }
.appearance > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.appearance > summary::-webkit-details-marker { display: none; }
.appearance > summary:hover { background: var(--soft); }
.theme-options { position: absolute; z-index: 5; top: 50px; right: 0; min-width: 150px; display: grid; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.theme-options a { display: block; padding: 8px 14px; border-radius: 6px; text-decoration: none; }
.theme-options a:hover, .theme-options a[aria-current] { background: var(--soft); }
/* Language twins (render.js fit()): the other language's label shares the grid cell invisibly. */
.fit { display: inline-grid; justify-items: center; }
.fit > span { grid-area: 1 / 1; }
.fit-block > .fit { display: grid; justify-items: start; }
.fit-twin { visibility: hidden; user-select: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 52px; padding: 13px 22px; border: 1px solid transparent; border-radius: 12px; color: var(--on-pine); background: var(--pine); font-size: .94rem; font-weight: 650; line-height: 1.45; text-decoration: none; text-align: center; }
.button:hover:not(:disabled) { background: color-mix(in srgb, var(--pine) 87%, var(--ink)); }
.button-secondary { color: var(--ink); background: transparent; border-color: var(--line); }
.button-secondary:hover:not(:disabled) { background: var(--soft); }
.header-app { min-height: 44px; padding: 10px 15px; white-space: nowrap; font-size: .78rem; }
.header-app .icon { width: 17px; height: 17px; }
.lead { color: var(--muted); font-size: 1.15rem; line-height: 1.75; }
.fine { font-size: .8rem; line-height: 1.65; color: var(--muted); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Hero: the illustration fills the first viewport behind the header. Copy sits on
   its empty paper, the preview card over the plants, the person stays visible.
   56.28vw is the art's own aspect (941/1672), so wide screens never crop it. */
.hero { position: relative; isolation: isolate; overflow-x: clip; display: flex; align-items: center; min-height: clamp(600px, calc(56.28vw - 114px), 860px); padding-block: 0 64px; }
.hero::before { content: ""; position: absolute; z-index: -1; top: -114px; right: 0; bottom: 0; left: 0; background: url("/site/hero.webp") right bottom / cover no-repeat; filter: var(--art-filter); -webkit-mask-image: var(--art-mask); mask-image: var(--art-mask); }
/* Top-aligned so the copy always ends above the art's dark wave at the bottom left. */
/* The card aligns with the header's "App öffnen" button (last track 4px = the pill's inset) unless
   that would cover the woman's face. Her hair starts at 83.75% of the drawn art: wide screens draw
   it viewport-wide, so 50% - 33.75vw - 60px lets the card overlap at most 60px of hair. Below
   ~1375px the ~660px hero (card + padding) draws it 1375px wide instead: 50% - 50vw + 164px.
   Both keep the card right of the book stack (it ends at 57.54%) from ~1366px up. No column gap;
   .hero-copy's max-width keeps the copy clear. Recheck if the card's height changes. */
/* The header's right edge meets the preview card's right edge: same width as .hero-inner's third
   column, with 100% = the body width both .wrap widths derive from. Only while the three-column hero applies. */
@media (min-width: 1280px) {
  .site-header.over-art { padding-right: max(4px, calc(min(620px, 50% - 48px) - 33.75vw - 60px), calc(min(620px, 50% - 48px) - 50vw + 164px)); }
}
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px) max(4px, calc(50% - 33.75vw - 60px), calc(50% - 50vw + 164px)); align-items: start; }
.hero-copy { position: relative; z-index: 1; max-width: 534px; }
.eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); }
.hero h1 { font-size: clamp(2.6rem, 4.3vw, 4.1rem); line-height: 1.04; margin-top: 14px; hyphens: manual; }
.swash { position: relative; display: inline-block; color: var(--pine-ink); white-space: nowrap; }
.swash-line { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.swash-line path { vector-effect: non-scaling-stroke; }
.hero .lead { max-width: 27em; margin-top: 22px; font-size: 1.08rem; line-height: 1.62; }
.hero .actions { margin-top: 26px; }
.hero .button { padding-inline: 17px; gap: 10px; }
.hero .button-secondary { background: var(--surface); }
.hero-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 30em; margin: 26px 0 0; padding: 0; list-style: none; font-size: .8rem; line-height: 1.4; font-weight: 600; }
.hero-benefits li { display: grid; justify-items: start; gap: 8px; }
.hero-benefits .icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--soft); color: var(--pine-ink); }
.hero .fine { margin-top: 16px; }
.hero .hero-offer { margin-top: 14px; color: var(--ink); font-weight: 600; }
.legal-updated { margin-top: 18px; }
/* minmax(0, 1fr): the card's intrinsic width must never widen the column (320px phones). */
.hero-stage { grid-column: 2; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
/* Preview card: the app's monthly overview with honest sample data. */
.demo-shell { width: 100%; max-width: 420px; padding: 18px 18px 12px; background: var(--surface); border-radius: 28px; box-shadow: var(--shadow); color: var(--ink); scroll-margin-top: 24px; }
.demo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.demo-greeting { font-size: .72rem; color: var(--muted); }
.demo-title { margin-top: 2px; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.demo-top-actions { display: flex; gap: 8px; }
.demo-round, .demo-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.demo-round { background: var(--soft); }
.demo-round .icon { width: 17px; height: 17px; }
.demo-avatar { background: var(--pine); color: var(--on-pine); font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.demo-switch { display: flex; gap: 3px; margin-top: 12px; padding: 4px; background: var(--soft); border-radius: 12px; }
.demo-switch button { background: transparent; color: var(--muted); border: 0; padding: 10px; min-height: 44px; border-radius: 9px; font-size: .74rem; font-weight: 600; flex: 1; }
.demo-switch button[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgb(35 52 40 / 12%); }
/* All three demo panels share one grid cell, so the card is always as tall as the tallest panel
   and switching tabs never resizes it (or moves the hero copy). Hidden panels keep their space
   but are invisible, unfocusable and out of the accessibility tree. */
.demo-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.demo-panel { grid-row: 3; grid-column: 1; min-height: 372px; margin-top: 12px; }
.demo-panel[hidden] { display: block !important; visibility: hidden; }
.balance { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 15px 17px; color: #fff; background: linear-gradient(135deg, #245b44, #15392b); border-radius: 20px; } /* = app .hero-surplus */
.balance-copy > span, .balance-copy > small { display: block; color: #cfe2cc; font-size: .7rem; }
.balance-copy > strong { display: block; margin-block: 2px 1px; font-size: 1.85rem; font-weight: 650; line-height: 1.25; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; flex: none; }
.balance-bars i { width: 7px; border-radius: 4px; background: rgb(255 255 255 / 28%); }
.balance-bars .b1 { height: 46%; } .balance-bars .b2 { height: 62%; } .balance-bars .b3 { height: 38%; } .balance-bars .b4 { height: 74%; } .balance-bars .b5 { height: 58%; }
.balance-bars .b6 { height: 100%; background: #86b67e; }
.demo-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.demo-tile { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 16px; }
.tile-copy { min-width: 0; line-height: 1.3; }
.demo-tile small { display: block; color: var(--muted); font-size: .64rem; }
.demo-tile b { display: block; font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spark { width: 40px; height: 18px; margin-left: auto; flex: none; fill: none; stroke: var(--tone-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.tile-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tone-bg); color: var(--tone-ink); }
.tile-icon .icon { width: 15px; height: 15px; }
.demo-tile.rise { --tone-bg: #e3f3e8; --tone-ink: #1f6b3f; }
.demo-tile.fall { --tone-bg: #fbe9df; --tone-ink: #9a3f1c; }
.entry-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 2px; }
.entry-heading .demo-heading { font-size: .8rem; font-weight: 650; letter-spacing: 0; color: inherit; }
.entry-heading span { color: var(--pine-ink); font-size: .7rem; font-weight: 650; }
.entries { margin: 0; padding: 0; list-style: none; }
.entries li { display: flex; align-items: center; gap: 12px; padding-block: 5px; font-size: .76rem; }
.entries li + li { border-top: 1px solid var(--line); }
.entry-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--tone-bg, var(--soft)); color: var(--tone-ink, var(--muted)); }
.entry-icon .icon { width: 18px; height: 18px; }
.entry-copy { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
.entry-copy small { display: block; color: var(--muted); font-size: .66rem; font-weight: 400; }
.entries strong { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.positive { color: var(--positive); }
/* Category tones copied from the app (mona-app/public/styles.css). */
[data-tone="green"] { --tone-bg: #e3f3e8; --tone-ink: #1f6b3f; }
[data-tone="blue"] { --tone-bg: #e3edfa; --tone-ink: #1f4f8c; }
[data-tone="brown"] { --tone-bg: #f3ebe0; --tone-ink: #6b4a1f; }
:root[data-theme="dark"] :is(.entry-icon, .tile-icon) { background: color-mix(in srgb, var(--tone-ink, var(--muted)) 26%, var(--surface)); color: color-mix(in srgb, var(--tone-ink, var(--muted)) 42%, #fff); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] :is(.entry-icon, .tile-icon) { background: color-mix(in srgb, var(--tone-ink, var(--muted)) 26%, var(--surface)); color: color-mix(in srgb, var(--tone-ink, var(--muted)) 42%, #fff); }
}
.demo-caption { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: .66rem; line-height: 1.4; }
.demo-caption > span { flex: 1; }
.demo-caption .icon { width: 15px; height: 15px; }
.demo-caption a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--pine-ink); font-weight: 650; text-decoration: none; text-align: right; }
.demo-caption a:hover { text-decoration: underline; }
.demo-detail { padding: 18px 8px 8px; }
.demo-detail > .entry-icon { width: 46px; height: 46px; margin-bottom: 14px; }
.demo-detail > .entry-icon .icon { width: 22px; height: 22px; }
.demo-detail .demo-heading { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: inherit; margin: 0; }
.demo-detail p { font-size: .82rem; color: var(--muted); margin-top: 12px; }
.demo-detail strong { font-size: .87rem; display: block; margin-top: 16px; }
progress { display: block; appearance: none; width: 100%; height: 9px; margin-top: 24px; border: 0; border-radius: 10px; overflow: hidden; background: var(--soft); accent-color: var(--pine); }
progress::-webkit-progress-bar { background: var(--soft); border-radius: 10px; }
progress::-webkit-progress-value { background: var(--pine); border-radius: 10px; }
progress::-moz-progress-bar { background: var(--pine); border-radius: 10px; }
.section { padding-block: 80px 96px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }
.section-heading > p { max-width: 33em; color: var(--muted); padding-bottom: 6px; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; margin-top: 52px; }
.feature-list article { padding-block: 25px 30px; border-top: 1px solid var(--line); }
/* Feature tiles look the same whether they are h2 (features page, under the h1) or h3 (home, under an h2). */
.feature-list article h2 { font-family: inherit; font-size: 1.2rem; line-height: 1.4; letter-spacing: -.018em; font-weight: 660; }
.feature-list p { color: var(--muted); margin-top: 12px; font-size: .95rem; max-width: 47ch; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 24px; font-size: .9rem; font-weight: 650; }
.together { background: #1d4936; color: #f2f7ed; overflow: hidden; }
.together-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: 48px; min-height: 560px; }
.together-grid > div:first-child { padding-block: 80px; }
.together h2 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); line-height: 1.12; }
.together .swash { color: inherit; }
.together .swash-line { stroke: #d99a78; }
.together p { color: #d1e1cb; margin-top: 30px; max-width: 30em; font-size: 1.08rem; line-height: 1.65; }
.together .button { margin-top: 28px; }
.button-pale { background: #dceacb; color: #20452e; }
.button-pale:hover:not(:disabled) { background: #c5dbae; }
.together .fine { font-size: .75rem; margin-top: 19px; }
.together :focus-visible { outline-color: #dceacb; }
/* The shared-book scene scales as one piece: every size is in container units of .shared-art. */
.shared-art { position: relative; container-type: inline-size; width: 100%; max-width: 660px; justify-self: end; aspect-ratio: 660 / 540; }
.shared-art > img { position: absolute; top: -14%; right: 15%; width: 78%; height: 128%; max-width: none; object-fit: contain; opacity: .78; }
.shared-book { position: absolute; left: 36%; top: 17%; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 4cqw; width: 29cqw; height: 40cqw; background: #e9eddc; color: #1d4936; border-radius: 3cqw; transform: rotate(-8deg); box-shadow: 0 3cqw 6cqw rgb(4 29 17 / 30%); }
.shared-book > .icon { width: 10cqw; height: 10cqw; stroke-width: 1.5; }
.shared-book > span { font-size: 5.2cqw; font-weight: 780; letter-spacing: -.04em; }
.shared-person { position: absolute; z-index: 3; display: grid; place-items: center; width: 10.5cqw; height: 10.5cqw; border: 1cqw solid #1d4936; border-radius: 50%; font-size: 3.6cqw; font-weight: 700; color: #1d4936; }
.person-a { background: #a9c69a; top: 12%; left: 31%; }
.person-b { background: #eef1e0; top: 71%; left: 66%; }
.shared-card { position: absolute; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2.4cqw 2cqw; width: 30cqw; padding: 3.4cqw; border: 1px solid rgb(255 255 255 / 16%); border-radius: 3cqw; background: rgb(255 255 255 / 8%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #eef4e8; font-size: clamp(.7rem, 2.5cqw, .95rem); font-weight: 560; line-height: 1.35; text-decoration: none; box-shadow: 0 2cqw 5cqw rgb(4 29 17 / 18%); }
.shared-card .fit { justify-items: start; }
.shared-card:hover { background: rgb(255 255 255 / 13%); }
.shared-card-icon { grid-column: 1 / -1; width: 9cqw; height: 7.5cqw; }
.shared-card .icon { width: 3.6cqw; height: 3.6cqw; min-width: 16px; min-height: 16px; }
.shared-card-spend { left: 2%; top: 41%; transform: rotate(-6deg); }
.shared-card-spend .shared-card-icon { fill: #a9c69a; }
.shared-card-goals { right: 0; top: 34%; z-index: 3; }
.shared-card-goals .shared-card-icon { width: 7.5cqw; fill: none; stroke-width: 6; }
.ring-track { stroke: rgb(169 198 154 / 35%); }
.ring-value { stroke: #a9c69a; stroke-linecap: round; }
/* Handwritten-style notes: the site's serif, slanted, in pale sage. Decorative only. */
.shared-note { position: absolute; z-index: 1; margin: 0 !important; color: #a9c1a3 !important; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(.8rem, 2.9cqw, 1.1rem) !important; line-height: 1.25 !important; max-width: 24cqw !important; }
.shared-note svg { position: absolute; fill: none; stroke: #a9c1a3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.note-together { left: 1%; bottom: 3%; transform: rotate(-7deg); }
.note-together svg { left: calc(100% + 1cqw); bottom: 1cqw; width: 17cqw; height: 8cqw; }
.note-more { right: 0; top: 7%; max-width: 17cqw !important; transform: rotate(-8deg); }
.note-more svg { left: -9cqw; top: 9cqw; width: 8cqw; height: 8cqw; transform: rotate(180deg); }
.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 22px; font-size: .98rem; font-weight: 600; list-style: none; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { width: 18px; height: 18px; }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details p { padding: 0 32px 25px 0; color: var(--muted); font-size: .94rem; }
.page-heading { padding-block: 64px 48px; }
.page-heading h1 { font-size: clamp(2.6rem, 4.5vw, 4.4rem); max-width: 15em; }
.page-heading .lead { margin-top: 26px; max-width: 42em; }
.centered { text-align: center; }
.centered h1, .centered p { margin-inline: auto; }
.feature-page { padding-bottom: 110px; }
.feature-page .feature-list { margin-top: 10px; }
.feature-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 100px; align-items: center; padding-top: 72px; }
.feature-preview > div:first-child p { margin-top: 24px; color: var(--muted); }
.feature-preview .button { margin-top: 30px; }
.feature-preview .demo-shell { justify-self: center; }
.draft-note, .review-note { background: var(--notice); color: var(--notice-ink); border-radius: 12px; padding: 20px 24px; font-size: .9rem; }
.draft-note p, .review-note p { margin-top: 8px; max-width: 85ch; }
.support-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 90px; align-items: start; padding-block: 15px 70px; }
.support-layout h2 { font-size: 1.65rem; margin-bottom: 30px; }
.account-help { background: var(--soft); padding: 30px; border-radius: var(--radius); }
.account-help h2 { margin-bottom: 16px; }
.account-help p { font-size: .92rem; color: var(--muted); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }
.contact-actions .text-link { margin-top: 0; }
.contact-address { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; }
.copy-address { min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer; }
.account-help .draft-note { margin-top: 25px; font-size: .83rem; background: var(--bg); color: var(--ink); }
.contact-address { overflow-wrap: anywhere; font-size: .8rem !important; }
/* DSA notice section: same two-column rhythm as the request form below it. */
.support-report { display: grid; grid-template-columns: 1fr 1.3fr; column-gap: 100px; align-items: start; padding-block: 60px; border-top: 1px solid var(--line); }
.support-report > h2 { grid-row: 1 / span 4; font-size: 2rem; }
.support-report > :not(h2) { grid-column: 2; }
.support-report .legal-body { color: var(--muted); }
.support-report .draft-note { margin-top: 24px; }
.support-form-section { display: grid; grid-template-columns: 1fr 1.3fr; gap: 100px; padding-block: 60px 100px; border-top: 1px solid var(--line); }
.contact-section { display: grid; grid-template-columns: 1fr 1.3fr; gap: 100px; padding-block: 60px 80px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.contact-section h2 { font-size: 2rem; }
.contact-section > div:first-child > p { margin-top: 16px; color: var(--muted); }
.contact-form label:first-of-type { margin-top: 0; }
.contact-form .button { margin-top: 22px; }
.contact-form .fine a { color: inherit; }
/* Honeypot for bots: off-screen, not display:none, so naive form fillers still see it. */
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-status, .contact-fallback { margin-top: 20px !important; padding: 14px 16px; border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--ink) !important; }
.contact-status-ok { background: var(--soft); border-left: 4px solid var(--pine); }
.contact-status-error, .contact-fallback { background: var(--soft); border-left: 4px solid var(--accent); }
.support-form-section h2 { font-size: 2rem; }
.support-form-section p { margin-top: 22px; color: var(--muted); }
.support-form-section .fine { margin-top: 14px; }
.form-result:empty { display: none; }
.form-result.is-error { color: var(--danger); }
fieldset { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
label { display: block; font-size: .9rem; font-weight: 600; margin-top: 20px; margin-bottom: 8px; }
input, textarea, select { width: 100%; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-height: 48px; padding: 11px 13px; caret-color: var(--pine-ink); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
fieldset[disabled] { opacity: .65; }
fieldset .button { margin-top: 22px; }
.legal-page { max-width: 870px; padding-bottom: 100px; }
.legal-page section { margin-top: 48px; }
.legal-page section h2 { font-size: 1.45rem; margin-bottom: 20px; }
.legal-page section p { color: var(--muted); }
.legal-body { white-space: pre-line; overflow-wrap: anywhere; }
.facts { margin: 0; font-size: .92rem; }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; padding-block: 14px; border-bottom: 1px solid var(--line); }
dt { font-weight: 600; }
dd { margin: 0; overflow-wrap: anywhere; }
.missing { color: var(--muted); font-style: italic; }
.status-page { max-width: 880px; padding-bottom: 100px; }
.status-heading { display: flex; align-items: center; gap: 15px; padding-block: 14px 25px; }
.status-heading h2 { font-size: 1.4rem; }
.status-heading > .icon { width: 32px; height: 32px; }
.status-list { margin: 0; }
.status-list > div { display: flex; gap: 25px; justify-content: space-between; padding-block: 22px; border-top: 1px solid var(--line); }
.status-list dd { text-align: right; max-width: 55%; color: var(--muted); }
.status-page > p { margin-top: 26px; color: var(--muted); font-size: .88rem; }
.configuration-details { margin-top: 28px; padding: 20px 24px; background: var(--soft); border-radius: 12px; font-size: .9rem; }
.configuration-details summary { min-height: 28px; font-weight: 600; }
.configuration-details ul { padding-left: 22px; color: var(--muted); }
.configuration-details li { padding-block: 5px; }
.site-footer { background: var(--soft); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 70px; padding-block: 62px; }
.site-footer p { color: var(--muted); font-size: .87rem; margin-top: 10px; }
.site-footer .footer-line { color: var(--ink); font-size: 1rem; margin-top: 20px; }
.site-footer h2 { font-size: .9rem; letter-spacing: 0; margin-bottom: 14px; }
.site-footer nav a { display: block; width: fit-content; min-height: 40px; padding-block: 8px; color: var(--muted); text-decoration: none; font-size: .85rem; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .hero-stage .demo-shell { animation: settle 750ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes settle { from { transform: translateY(14px) rotate(1deg); } to { transform: translateY(0) rotate(0); } }
}
@media (max-width: 1120px) {
  .wrap { width: calc(100% - 64px); }
  .site-header { gap: 20px; }
  .main-nav { gap: 20px; }
  .header-tools { gap: 8px; }
  .feature-preview, .support-form-section, .contact-section { gap: 60px; }
  .support-report { column-gap: 60px; }
  .support-layout { gap: 45px; }
}
@media (max-width: 1279px) {
  .hero { display: block; min-height: 0; padding-block: 34px 72px; }
  .hero::before { content: none; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: none; text-align: center; }
  .hero h1 { max-width: 11em; margin-inline: auto; font-size: clamp(2.5rem, 6.4vw, 4.2rem); }
  .over-art :is(.main-nav, .header-tools) { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero .eyebrow, .hero .lead, .hero .fine { margin-inline: auto; }
  .hero .actions { justify-content: center; }
  .hero-benefits { margin-inline: auto; }
  .hero-benefits li { justify-items: center; text-align: center; }
  .hero-stage { --strip: clamp(250px, 44vw, 420px); grid-column: 1; position: relative; z-index: 0; margin-top: 44px; padding-top: var(--strip); }
  .hero-stage::before { content: ""; position: absolute; z-index: -1; top: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); height: calc(var(--strip) + 110px); background: url("/site/hero.webp") right bottom / cover no-repeat; filter: var(--art-filter); }
}
@media (max-width: 820px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { grid-template-columns: 1fr auto; min-height: 130px; gap: 0 16px; padding-block: 16px 8px; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 38px; }
  .wordmark { font-size: 36px; }
  .section { padding-block: 60px; }
  .section-heading { grid-template-columns: 1fr; gap: 25px; }
  .feature-list { column-gap: 40px; margin-top: 34px; }
  .together-grid { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .faq-section { grid-template-columns: 1fr; gap: 28px; }
  .page-heading { padding-block: 42px 36px; }
  .page-heading h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
  .page-heading .lead { font-size: 1.05rem; }
  .feature-preview { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; }
  .feature-preview > div:first-child { max-width: 38em; }
  .support-layout { grid-template-columns: 1fr; }
  .account-help { padding: 26px; }
  .support-form-section, .contact-section { grid-template-columns: 1fr; gap: 30px; padding-block: 45px 70px; }
  .support-report { grid-template-columns: minmax(0, 1fr); padding-block: 45px; }
  .support-report > h2 { grid-row: auto; margin-bottom: 20px; }
  .support-report > :not(h2) { grid-column: 1; }
  .footer-grid { gap: 34px; grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (max-width: 540px) {
  .wrap { width: calc(100% - 36px); }
        .site-header { min-height: 124px; }
  .header-tools { gap: 2px; }
  .header-app { font-size: .7rem; padding-inline: 10px; }
  .header-app .icon { display: none; }
  .languages a { font-size: .65rem; padding-inline: 5px; }
  .appearance > summary { width: 38px; }
  .main-nav { gap: 34px; }
  .main-nav a { font-size: .82rem; }
  .wordmark { font-size: 32px; }
  .hero { padding-top: 26px; }
  .hero h1 { font-size: clamp(2.2rem, 10.4vw, 3.2rem); margin-top: 14px; }
  .eyebrow { font-size: .68rem; letter-spacing: .16em; }
  .hero .lead { font-size: 1rem; line-height: 1.65; margin-top: 20px; }
  .hero .actions { gap: 10px; margin-top: 24px; }
  .hero .button { padding: 13px 16px; font-size: .84rem; gap: 8px; min-height: 48px; }
  .hero .button .icon { width: 17px; height: 17px; }
  .hero-benefits { gap: 10px; margin-top: 24px; font-size: .74rem; }
  .spark { display: none; }
  .hero .fine { font-size: .74rem; }
  .hero-stage { margin-top: 34px; }
  .demo-shell { padding: 16px; border-radius: 24px; }
  .demo-switch button { padding: 8px 5px; font-size: .7rem; }
  .balance { padding: 15px; }
  .balance-copy > strong { font-size: 1.6rem; }
  .demo-tile { padding: 9px; }
  .demo-caption { font-size: .62rem; }
  .feature-list { grid-template-columns: 1fr; }
  .feature-list article { padding-block: 25px; }
  .feature-list p { max-width: 100%; }
  .together-grid { grid-template-columns: 1fr; gap: 0; }
  .together-grid > div:first-child { padding-block: 50px 10px; }
  .shared-art { justify-self: center; margin-bottom: 40px; }
  .faq-list summary { font-size: .92rem; }
  .page-heading { padding-top: 32px; }
  .page-heading h1 { font-size: 2.6rem; }
  .draft-note, .review-note { padding: 18px; font-size: .84rem; }
  .facts > div { grid-template-columns: 1fr; gap: 6px; }
  .status-list > div { flex-direction: column; gap: 7px; padding-block: 18px; }
  .status-list dd { text-align: left; max-width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding-block: 44px; gap: 35px; }
  .footer-grid > div { grid-column: 1 / -1; }
  .site-footer nav a { min-height: 44px; }
}
@media (max-width: 360px) {
  /* icon + "mona" must share the first header row with the app button at 320px */
  .site-header .wordmark { font-size: 28px; }
  /* ...and the header tools must end at the page margin: tighter language/design/button padding */
  .header-tools { gap: 0; }
  .languages a { padding-inline: 3px; }
  .appearance > summary { width: 34px; }
  .header-app { padding-inline: 8px; }
  /* "Monatsübersicht" cannot wrap; keep the preview header inside 284px */
  .demo-title { font-size: 1.15rem; }
  .demo-round { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}