/* Wohnmates marketing site.
   Sections: 1 tokens · 2 fonts · 3 base · 4 primitives · 5 nav · 6 hero · 7 wall
             8 week · 9 screens (app UI mocks) · 10 spec · 11 move-in · 12 footer · 13 motion */

/* 1. Tokens: palette mirrors apps/web/src/index.css */
:root {
  --ink: oklch(0.24 0.04 290);
  --ink-2: oklch(0.33 0.035 290);
  --muted: oklch(0.5 0.03 290);
  --muted-tint: oklch(0.46 0.03 290);   /* muted, AA on mint/warm/blush/lavender */
  --body: oklch(0.38 0.03 290);
  --line: oklch(0.91 0.012 75);
  --line-strong: oklch(0.86 0.012 75);
  --paper: oklch(0.975 0.008 80);
  --paper-2: oklch(0.955 0.01 78);
  --track: oklch(0.945 0.01 78);
  --page: oklch(0.93 0.02 290);
  --mint: oklch(0.9 0.075 160);
  --warm: oklch(0.92 0.1 80);
  --blush: oklch(0.89 0.065 20);
  --lavender: oklch(0.87 0.075 290);
  --green: oklch(0.5 0.12 160);
  --green-ink: oklch(0.45 0.11 160);    /* green text, AA on every surface */
  --live: oklch(0.55 0.14 160);
  --owed: oklch(0.78 0.12 160);
  --owe: oklch(0.52 0.15 20);
  --on-ink: var(--paper);
  --on-ink-muted: oklch(0.8 0.025 290);
  /* AI box, as in apps/web (OnboardingPage, MoneyPage): violet, all text AA */
  --ai: oklch(0.5 0.13 290);            /* "Parse with AI" button */
  --ai-ink: oklch(0.45 0.12 290);       /* AI chip text */
  --ai-chip: oklch(0.9 0.06 290);
  --ai-tint: oklch(0.95 0.03 290);
  --ai-line: oklch(0.88 0.05 290);
  --ai-text: oklch(0.35 0.06 290);
  --ai-msg: oklch(0.4 0.08 290);

  --sans: "Plus Jakarta Sans", "Jakarta fallback", ui-sans-serif, sans-serif;
  --mono: "JetBrains Mono", "Mono fallback", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.3, 1.35, .5, 1);

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --section: clamp(88px, 10vw, 148px);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .12 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* 2. Metric-matched local fallbacks, so the swap to the web fonts barely moves text */
@font-face { font-family: "Jakarta fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 104%; ascent-override: 99.8%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta fallback"; font-weight: 600 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 101.5%; ascent-override: 102.3%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Mono fallback"; src: local("Menlo"), local("Consolas"), local("Courier New"); ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--warm); color: var(--ink); }
.wall ::selection, .foot ::selection { background: var(--mint); }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
svg { display: block; }
b, strong { font-weight: 700; }
em { font-style: normal; }
small { font-size: inherit; }
code { font: 500 .92em var(--mono); }
input, label { font: inherit; }
h1, h2, h3 { font-weight: 800; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
p { text-wrap: pretty; }
table { border-collapse: collapse; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wall :focus-visible, .foot :focus-visible { outline-color: var(--on-ink); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 20; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--on-ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 16px; }

/* 4. Primitives */
/* Roof mark: rotated square showing two borders, over a base bar (same geometry as the app logo) */
.mark { --t: .12em; position: relative; display: inline-block; flex: none; width: 1em; height: 1em; font-style: normal; color: inherit; }
.mark b { position: absolute; left: .22em; top: .3em; width: .56em; height: .56em; border-top: var(--t) solid currentColor; border-left: var(--t) solid currentColor; border-radius: .1em 0 0 0; transform: rotate(45deg); }
.mark u { position: absolute; left: .1em; bottom: .1em; width: .8em; height: var(--t); border-radius: var(--t); background: currentColor; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 56px; padding: 0 1.55em; border-radius: 18px; font: 700 1rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s; }
.btn-ink { background: var(--ink); color: var(--on-ink); box-shadow: inset 0 -3px 0 oklch(0 0 0 / .4), 0 12px 24px -14px oklch(0.24 0.06 290 / .8); }
.btn-ink:hover { transform: translateY(-2px); box-shadow: inset 0 -3px 0 oklch(0 0 0 / .4), 0 18px 30px -14px oklch(0.24 0.06 290 / .8); }
.btn-ink:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 oklch(0 0 0 / .4), 0 6px 12px -8px oklch(0.24 0.06 290 / .8); }
.btn-line { border: 1.5px solid oklch(0.24 0.04 290 / .28); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); background: oklch(1 0 0 / .45); }
.btn-line:active { transform: translateY(1px); }
.btn-sm { min-height: 42px; padding: 0 1.1em; border-radius: 999px; font-size: .92rem; }
.arr { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 700; font-size: .95rem; letter-spacing: -.005em; color: var(--green-ink); }
.kicker::before { content: ""; width: .5em; height: .5em; margin-top: .3em; border-top: 2.5px solid currentColor; border-left: 2.5px solid currentColor; border-radius: 2px 0 0 0; transform: rotate(45deg); }
.sec-head { max-width: 44rem; }
.sec-head h2, .wall h2, .move h2 { font-size: clamp(2.3rem, 1.25rem + 4.3vw, 4.6rem); }
.sec-head > p:last-child { margin-top: 20px; font-size: 1.15rem; color: var(--body); max-width: 38rem; }

/* Avatars: oklch(0.6 0.14 H), hues as in the app */
.av { --h: 290; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: oklch(0.6 0.14 var(--h)); color: #fff; font: 700 12px/1 var(--sans); font-style: normal; }
.p-max { --h: 290; } .p-anna { --h: 45; } .p-tom { --h: 165; } .p-lisa { --h: 350; }
.avs { display: flex; flex: none; }
.avs .av { box-shadow: 0 0 0 2.5px #fff; }
.avs .av + .av { margin-left: -8px; }
.live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.tick { display: inline-block; width: .38em; height: .7em; margin: 0 .42em .12em .1em; border: solid currentColor; border-width: 0 .14em .14em 0; transform: rotate(45deg); }
/* The app's "AI" chip: marks every feature that uses AI, nothing else */
.ai { display: inline-block; flex: none; padding: .3em .55em .25em; border-radius: 6px; background: var(--ai-chip); color: var(--ai-ink); font: 700 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; vertical-align: .2em; }

/* 5. Nav */
.nav { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; }
.nav-home { display: grid; place-items: center; width: 48px; height: 48px; margin-left: -6px; border-radius: 14px; color: var(--ink); }
.nav-home .mark { font-size: 2.15rem; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-signin { padding: 11px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: background-color .15s; }
.nav-signin:hover { background: oklch(0.24 0.04 290 / .07); }

/* 6. Hero: copy + house; on wide screens the wordmark stands on the next section */
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--page); container-type: inline-size; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .24; pointer-events: none; }
/* Wordmark spans the content box: "Wohnmates" is 5.36em wide at this tracking */
.hero-in { --brand: calc(min(100vw - 2 * var(--gutter) - 20px, var(--max)) / 5.4); display: grid; justify-items: start; gap: 48px; padding-block: 92px 0; }
@supports (width: 1cqi) { .hero-in { --brand: calc(min(100cqi - 2 * var(--gutter), var(--max)) / 5.4); } }
.hero h1 { display: grid; }
.brand { font-size: var(--brand); line-height: .84; letter-spacing: -.06em; margin-left: -.016em; white-space: nowrap; } /* offsets the W's side bearing */
.promise { margin-top: 26px; font-size: clamp(2rem, 1.1rem + 3.3vw, 3.5rem); line-height: 1.02; letter-spacing: -.045em; }
.promise mark { color: inherit; background: linear-gradient(transparent 56%, var(--warm) 56% 92%, transparent 92%); padding-inline: .04em; margin-inline: -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-lede { max-width: 27ch; margin-top: 18px; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.5; color: var(--body); }
.hero .ctas { margin-top: 30px; }

/* The house: logo geometry built from app cards. Sized in px, scaled with zoom. */
.house { --z: .76; zoom: var(--z); position: relative; display: flex; flex-direction: column; align-items: center; width: 460px; justify-self: center; font-size: 14px; line-height: 1.35; }
.house-roof { position: relative; width: 460px; height: 240px; margin-bottom: -10px; }
.house-roof > i { position: absolute; left: 67px; top: 67px; width: 326px; height: 326px; border-top: 40px solid var(--ink); border-left: 40px solid var(--ink); border-radius: 46px 0 0 0; transform: rotate(45deg); }
.house-gable { position: absolute; inset: 120px 0 auto; display: grid; justify-items: center; gap: 12px; }
.house-gable .av { width: 36px; height: 36px; font-size: 14px; }
.house-gable .avs .av { box-shadow: 0 0 0 3px var(--page); }
.house-sign { padding: 6px 12px; border-radius: 8px; background: var(--paper); font: 600 12.5px/1 var(--mono); letter-spacing: .02em; box-shadow: 0 1px 0 oklch(0 0 0 / .06); }
.floors { display: grid; gap: 10px; width: 384px; }
.floor { display: grid; gap: 6px; padding: 14px 16px; border-radius: 24px; box-shadow: 0 18px 30px -24px oklch(0.24 0.06 290 / .6); }
.floor > small { font-size: 12px; }
.f-money { gap: 2px; padding: 16px 20px; background: var(--ink); color: var(--on-ink); }
.f-money small { color: oklch(0.975 0.008 80 / .75); font-size: 13px; }
.f-money strong { font-size: 38px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--owed); }
.f-shop { background: var(--mint); --muted: var(--muted-tint); }
.f-shop .live { color: var(--muted); }
.f-chores { background: var(--warm); --muted: var(--muted-tint); }
.f-house { background: #fff; border: 1px solid var(--line); }
.f-house b { font-size: 16px; }
.f-house .m-ack { margin: 2px 0 0; padding: 0; border: 0; }
.house-base { width: 460px; height: 40px; margin-top: 14px; border-radius: 20px; background: var(--ink); }

/* 7. Wall: the WG before Wohnmates */
.wall { position: relative; isolation: isolate; padding-block: var(--section); background: var(--ink); color: var(--on-ink); }
.wall::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-light); opacity: .06; pointer-events: none; }
.wall-in { display: grid; gap: 56px; }
.wall-copy h2 { max-width: 15ch; }
.wall-copy p { max-width: 32rem; margin-top: 24px; font-size: 1.15rem; color: var(--on-ink-muted); }
.wall-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; align-items: start; }
.pin { display: grid; gap: 14px; min-width: 0; }
.pin-plan { grid-column: 1 / -1; }
.pin-iou { grid-column: 1 / -1; order: 1; }
.pin-iou .note { min-height: 0; max-width: 20rem; }
.paper { position: relative; color: var(--ink); box-shadow: 0 22px 32px -20px oklch(0 0 0 / .7); }
.note { min-height: 140px; padding: 28px 16px 18px; border-radius: 5px; font-weight: 700; font-size: clamp(1rem, .9rem + .5vw, 1.2rem); line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.note::before { content: ""; position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, oklch(1 0 0 / .6), transparent 45%), var(--magnet); box-shadow: 0 3px 5px oklch(0 0 0 / .4); }
.note em { text-decoration: underline 3px oklch(0.6 0.14 20); text-underline-offset: 3px; }
.n-warm { --magnet: oklch(0.6 0.14 20); background: var(--warm); rotate: -2deg; }
.n-mint { --magnet: oklch(0.6 0.14 290); background: var(--mint); rotate: 1.5deg; }
.n-blush { --magnet: oklch(0.6 0.14 165); background: var(--blush); rotate: -1deg; }
.ious { font: 500 clamp(.82rem, .78rem + .3vw, .98rem)/1.7 var(--mono); letter-spacing: 0; white-space: pre-wrap; }
.sig { white-space: nowrap; }
.plan { padding: 26px 18px 16px; border-radius: 3px; background: var(--paper) var(--grain); rotate: -.8deg; }
.plan::before, .plan::after { content: ""; position: absolute; top: -12px; width: 86px; height: 26px; background: oklch(0.95 0.03 85 / .7); box-shadow: 0 1px 2px oklch(0 0 0 / .15); }
.plan::before { left: 18px; rotate: -4deg; }
.plan::after { right: 22px; rotate: 3deg; }
.plan table { width: 100%; font: 500 clamp(.78rem, .7rem + .4vw, .95rem)/1.2 var(--mono); }
.plan caption { padding-bottom: 14px; font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem)/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; text-align: left; }
.plan caption span { margin-left: 10px; font: 500 .8rem var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); vertical-align: middle; }
.plan th, .plan td { padding: 9px 6px; border: 1.5px solid oklch(0.24 0.04 290 / .75); text-align: left; white-space: nowrap; }
.plan th[scope="row"] { width: 22%; }
.plan thead td { border-top-color: transparent; border-left-color: transparent; }
.plan th { font-weight: 600; }
.plan .ok::after { content: ""; display: inline-block; width: .35em; height: .75em; margin-left: .45em; border: solid var(--green); border-width: 0 .17em .17em 0; rotate: 40deg; translate: 0 -.12em; }
.plan s { text-decoration: line-through 2.5px var(--owe); color: var(--muted); }
.plan em { color: var(--muted); }
.q { position: relative; }
.q::before { content: ""; position: absolute; inset: -6px -9px; border: 2px solid var(--owe); border-radius: 50%; rotate: -5deg; }
.plan-note { margin-top: 12px; font: 500 .85rem var(--mono); color: oklch(0.45 0.13 20); text-align: right; rotate: -1.5deg; }
.fix { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 500 .74rem/1.3 var(--mono); letter-spacing: .02em; color: var(--owed); }
.fix::before { content: ""; width: 14px; height: 9px; flex: none; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; border-radius: 0 0 0 4px; translate: 0 -3px; }
.wall-turn { display: flex; gap: .45em; max-width: 21ch; font-size: clamp(1.65rem, 1rem + 2.6vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.wall-turn .mark { margin-top: .04em; color: var(--owed); }

/* 8. Week: one flat, Monday to Sunday */
.week { padding-block: var(--section); }
.week-grid { display: grid; gap: 72px; margin-top: clamp(56px, 7vw, 96px); }
.day { display: grid; gap: 28px; justify-items: start; }
.day-when { display: flex; align-items: center; gap: 10px; font: 500 .9rem/1 var(--mono); color: var(--muted); }
.dow { display: inline-grid; place-items: center; min-width: 46px; height: 32px; padding: 0 10px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font: 800 .95rem/1 var(--sans); letter-spacing: 0; }
.day h3 { max-width: 15ch; margin-top: 18px; font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.75rem); letter-spacing: -.04em; transition: color .35s; }
.day-text > p:not([class]) { max-width: 34ch; margin-top: 14px; font-size: 1.12rem; color: var(--body); transition: color .35s; }
.day-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.day-tags li { padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: .8rem; font-weight: 600; line-height: 1; }
.day-tags .tag-ai { display: inline-flex; align-items: center; gap: 2px; padding-left: 5px; border-color: var(--ai-line); background: var(--ai-tint); color: var(--ai-text); }
.day-tags .tag-ai .ai { padding-block: 3px 2px; border-radius: 999px; vertical-align: 0; }
.day-try { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: .95rem; font-weight: 600; line-height: 1.45; color: var(--green-ink); }
.day-try::before { content: ""; width: 9px; height: 9px; margin-top: .45em; flex: none; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px oklch(0.55 0.14 160 / .18); }
.week-device { display: none; }
.week-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(64px, 8vw, 112px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--page); }
.week-end p { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.week-end strong { font-weight: 800; }

/* 9. Screens: mirrors of real app pages, at real phone scale */
.screen { position: relative; width: 360px; max-width: 100%; justify-self: center; overflow: hidden; isolation: isolate; border-radius: 36px; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.35; box-shadow: 0 0 0 8px var(--ink), 0 40px 60px -40px oklch(0.24 0.06 290 / .55); }
:where(.screen, .house) small { font-size: 12px; color: var(--muted); } /* zero specificity: any class rule wins */
.sc-status { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 4px 24px 0; font: 600 13px/1 var(--sans); }
.sc-status i { position: relative; width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; }
.sc-status i::after { content: ""; position: absolute; inset: 1.5px 6px 1.5px 1.5px; border-radius: 1.5px; background: currentColor; }
.sc-body { display: flex; flex-direction: column; gap: 12px; padding: 6px 14px 90px; }
.sc-nav { position: absolute; left: 10px; right: 10px; bottom: 12px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: 54px; padding: 0 5px; border-radius: 27px; background: var(--ink); box-shadow: 0 14px 30px -12px oklch(0.24 0.06 290 / .45); }
.sc-nav span { padding: 12px 0; border-radius: 999px; color: var(--on-ink); font: 700 11px/1 var(--sans); text-align: center; }
.sc-nav .on { background: var(--on-ink); color: var(--ink); }

.m-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.when-on { display: none; }
.m-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 2px; }
.m-head small { display: block; white-space: nowrap; }
.m-title { display: block; font-size: 27px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.m-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 9px 13px; border-radius: 11px; background: var(--ink); color: #fff; font: 600 12px/1 var(--sans); white-space: nowrap; user-select: none; }
label.m-btn { cursor: pointer; transition: background-color .15s, color .15s; }
.m-btn-line { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.m-stack { display: flex; flex-direction: column; gap: 8px; }
.m-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.m-txt { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.m-txt b { font-size: 14.5px; font-weight: 600; }
.m-txt small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-cb { position: relative; display: grid; place-items: center; flex: none; width: 23px; height: 23px; border: 2px solid var(--ink); border-radius: 8px; transition: background-color .15s; }
.m-cb::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2.2px 2.2px 0; rotate: 45deg; scale: 0; transition: scale .2s var(--ease-back); }
.m-cb.on, .is-done .m-cb { background: var(--ink); }
.m-cb.on::after, .is-done .m-cb::after { scale: 1; }
.is-done { border-color: transparent; background: var(--paper-2); }
.is-done b { position: relative; color: var(--muted); text-decoration: line-through; }
.m-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.t-lav, .t-warm, .t-blush { --muted: var(--muted-tint); border-color: transparent; }
.t-lav { background: var(--lavender); } .t-warm { background: var(--warm); } .t-blush { background: var(--blush); }
.m-sub { font-size: 17px; font-weight: 700; }
.m-kick { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.m-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.c-quiet { color: oklch(0.45 0.12 290); }
.c-kitchen { color: oklch(0.45 0.11 160); }
.c-guests { color: oklch(0.48 0.12 45); }
.m-ack { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid oklch(0.94 0.01 75); }
.m-ack .av { width: 22px; height: 22px; font-size: 9px; }
.m-ack .avs .av + .av { margin-left: -6px; }
.m-ack > small { flex: 1; }
.m-ack > .m-you { flex: none; color: var(--green-ink); font-weight: 600; }

/* Chores (Mon) */
.m-chore b { transition: color .2s; }
#k-done:checked + .m-chore b { color: var(--muted); text-decoration: line-through; }
#k-done:checked + .m-chore label { border-color: transparent; background: none; color: var(--green-ink); font-weight: 700; }
#k-done:checked + .m-chore .when-on { display: inline-block; }
#k-done:checked ~ .m-board .when-off { display: none; }
#k-done:checked ~ .m-board .when-on { display: inline; }
#k-done:checked ~ .m-board .w-max { --w: 89.7%; }
#k-done:focus-visible + .m-chore label { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.m-board { margin-top: 4px; }
.m-board ol { display: grid; gap: 9px; counter-reset: rank; }
.m-board li { display: grid; grid-template-columns: 14px 46px 1fr 28px; align-items: center; gap: 10px; counter-increment: rank; font-size: 13.5px; }
.m-board li::before { content: counter(rank); font-weight: 700; color: var(--muted); }
.m-board span { font-weight: 600; }
.m-board i { position: relative; height: 10px; overflow: hidden; border-radius: 5px; background: var(--track); }
.m-board i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: oklch(0.55 0.12 290); transition: width .45s var(--ease); }
.w-58 { --w: 100%; } .w-max { --w: 72.4%; } .w-35 { --w: 60.3%; } .w-20 { --w: 34.5%; }
.m-board li > b { text-align: right; }

/* Shop (Wed): ticked items move to Bought, the button counts them */
.m-add { display: grid; gap: 10px; padding: 12px; border-radius: 26px; background: var(--mint); }
.m-input { display: flex; gap: 8px; }
.m-input span { flex: 1; padding: 11px 13px; border-radius: 12px; background: var(--paper-2); color: var(--muted); }
.m-input b { display: grid; place-items: center; padding: 0 15px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; }
.m-cats { display: flex; gap: 4px; }
.m-cats span { padding: 6px 10px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 500; }
.m-cats .on { border-color: var(--ink); background: #fff; }
.m-list { display: flex; flex-direction: column; gap: 8px; counter-reset: bought; }
.m-item { order: 1; padding-block: 10px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s, border-color .15s; }
.m-item:hover { border-color: oklch(0.24 0.04 290 / .3); }
.m-in:checked { counter-increment: bought; }
.m-in:checked + .m-item { order: 3; padding-block: 8px; border-color: transparent; background: var(--paper-2); }
.m-in:checked + .m-item .m-cb { background: var(--ink); }
.m-in:checked + .m-item .m-cb::after { scale: 1; }
.m-in:checked + .m-item b { color: var(--muted); text-decoration: line-through; }
.m-in:checked + .m-item .when-off { display: none; }
.m-in:checked + .m-item .when-on { display: inline; }
.m-in:focus-visible + .m-item { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.m-bought { order: 2; padding: 4px 2px 0; }
.m-cta { order: 4; margin-top: 2px; padding: 14px; border-radius: 20px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; text-align: center; }
.m-count::before { content: counter(bought); }
.m-list:not(:has(.m-in:checked)) :is(.m-bought, .m-cta) { display: none; }
.m-list:has(.m-in:checked):not(:has(.m-in:checked ~ .m-in:checked)) .m-pl { display: none; }

/* Expense sheet (Wed): five split modes */
.sc-sheet { display: flex; flex-direction: column; background: oklch(0.66 0.02 290); }
.sc-sheet .sc-body { flex: 1; padding: 8px 0 0; }
.sc-sheet .m-sheet { flex: 1; }
.m-sheet { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 20px; border-radius: 28px 28px 0 0; background: var(--paper); box-shadow: 0 -8px 40px -12px oklch(0.24 0.06 290 / .35); }
.m-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: oklch(0.85 0.012 75); }
.m-head-sheet { align-items: center; }
.m-head-sheet .m-title { font-size: 22px; }
.m-head-sheet small { font-size: 14px; font-weight: 500; }
.m-field { padding: 10px 13px; border: 1px solid oklch(0.9 0.012 75); border-radius: 14px; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-amount { display: flex; gap: 6px; padding-block: 4px; font-size: 26px; font-weight: 700; }
.m-amount span { color: var(--muted); }
.m-group { display: grid; gap: 6px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-chips span { padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; }
.m-chips .on { border-color: var(--ink); background: var(--ink); color: #fff; }
.m-split legend { margin-bottom: 6px; color: var(--muted); }
.m-seg { display: grid; grid-template-columns: repeat(5, 1fr); padding: 3px; border-radius: 12px; background: var(--track); }
.m-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.m-seg label, .m-seg > span { padding: 8px 0; border-radius: 9px; font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.m-seg label:hover { background: oklch(1 0 0 / .55); }
.m-seg input:checked + label, .m-seg .on { background: var(--paper); box-shadow: 0 1px 3px oklch(0.24 0.04 290 / .16); }
.m-seg input:focus-visible + label { outline: 2.5px solid var(--ink); outline-offset: 1px; }
.m-lines { display: grid; gap: 2px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.m-lines > span { display: flex; justify-content: space-between; padding: 3px 0; border-top: 1px solid oklch(0.94 0.01 75); font-size: 13px; }
.m-lines > small { padding-bottom: 4px; }
.m-lines b { font-weight: 500; }
.m-people { padding: 0 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.m-people li { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid oklch(0.94 0.01 75); }
.m-people li:last-child { border: 0; }
.m-people .m-cb { width: 19px; height: 19px; border-radius: 6px; }
.m-people .m-cb::after { width: 5px; height: 9px; border-width: 0 2px 2px 0; }
.m-people .av { width: 26px; height: 26px; font-size: 11px; }
.m-people b { flex: 1; font-weight: 600; }
.m-people i { display: none; font-style: normal; }
.m-val { display: none; min-width: 50px; padding: 5px 8px; border: 1px solid oklch(0.9 0.012 75); border-radius: 9px; background: var(--paper); font-size: 12.5px; text-align: right; }
.m-amt { width: 58px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.m-amt .x-eq { display: inline; }
.m-sheet:has(#sp-ex:checked, #sp-pc:checked, #sp-sh:checked) .m-amt .x-eq { display: none; }
.m-sheet:has(#sp-ex:checked, #sp-pc:checked, #sp-sh:checked) .m-val { display: block; }
.m-sheet:has(#sp-ex:checked) .x-ex, .m-sheet:has(#sp-pc:checked) .x-pc, .m-sheet:has(#sp-sh:checked) .x-sh { display: inline; }
.m-sheet:has(#sp-pc:checked) .m-val .x-pc::after { content: "%"; }
.m-sheet:has(#sp-it:not(:checked)) .m-lines { display: none; }
.m-sheet .m-cta { margin-top: 2px; }

/* AI expense draft (Fri): "Parse with AI" fills title and amount; saving stays manual */
.m-ai { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--ai-line); border-radius: 20px; background: var(--ai-tint); }
.m-ai-head { display: flex; align-items: center; gap: 8px; color: var(--ai-text); font-size: 13px; }
.m-ai-head b { font-weight: 600; }
.m-ai-head .ai { vertical-align: 0; }
.m-ai-note { min-height: 56px; padding: 10px 12px; border: 1px solid var(--ai-line); border-radius: 11px; background: #fff; font-size: 14px; line-height: 1.4; }
.m-ai-btn { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 11px; background: var(--ai); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s; }
.m-ai-btn:hover { background: oklch(0.45 0.13 290); }
.m-ai-msg span { display: none; color: var(--ai-msg); font-size: 13px; font-weight: 500; line-height: 1.35; }
.m-ph { color: var(--muted); }
.sc-ai .sc-status { flex: none; }
.sc-ai .m-amount .when-on { color: var(--ink); }
.sc-ai .m-people li { min-height: 37px; }
.sc-ai .m-amt i { display: none; }
.sc-ai .m-amt .when-off { display: inline; color: var(--muted); }
#ai-go:checked ~ * .when-off, #ai-go:checked ~ .m-people .m-amt .when-off { display: none; }
#ai-go:checked ~ * .when-on, #ai-go:checked ~ .m-people .m-amt .when-on { display: inline; }
#ai-go:checked ~ .m-ai .m-ai-btn { background: #fff; color: var(--ai-ink); box-shadow: inset 0 0 0 1px var(--ai-line); }
#ai-go:checked ~ .m-ai .m-ai-msg span { display: block; }
#ai-go:focus-visible ~ .m-ai .m-ai-btn { outline: 2.5px solid var(--ink); outline-offset: 2px; }

/* House rules (Thu) */
.m-rule { gap: 6px; padding: 15px; }
.m-rule > b { font-size: 16.5px; line-height: 1.3; }
.m-rule p { font-size: 13px; line-height: 1.4; color: oklch(0.42 0.02 60); }
.m-ack .when-on { display: none; }
#ack:checked + .m-ack .when-off { display: none; }
#ack:checked + .m-ack .when-on { display: inline-grid; }
#ack:checked + .m-ack label { background: none; padding-inline: 4px; color: var(--green-ink); }
#ack:focus-visible + .m-ack label { outline: 2.5px solid var(--ink); outline-offset: 2px; }

/* Holiday mode (Sat) */
.m-rot { gap: 6px; }
.r-row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 4px; min-height: 32px; }
.r-row > span { display: flex; justify-content: center; }
.r-row > span:first-child { justify-content: flex-start; overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.r-head { min-height: 18px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.r-row .av { width: 27px; height: 27px; font-size: 11px; }
.r-row .k-home { display: none; }
#away:not(:checked) ~ .m-rot .k-home { display: inline-grid; }
#away:not(:checked) ~ .m-rot .k-away { display: none; }
.m-hol { gap: 4px; }
.m-hol > small { margin-bottom: 4px; }
.m-person { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.m-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: oklch(0.82 0.02 75); transition: background-color .2s; }
.m-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px oklch(0 0 0 / .2); transition: translate .2s var(--ease); }
label.m-person { margin: 0 -8px; padding: 6px 8px; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
label.m-person:hover { background: oklch(1 0 0 / .35); }
#away:checked ~ .m-hol .m-lisa .m-sw { background: var(--ink); }
#away:checked ~ .m-hol .m-lisa .m-sw::after { translate: 18px 0; }
#away:checked ~ .m-hol .m-lisa .when-on { display: inline; }
#away:checked ~ .m-hol .m-lisa .when-off { display: none; }
#away:focus-visible ~ .m-hol .m-lisa { outline: 2.5px solid var(--ink); outline-offset: 0; }

/* Money (Sun): balances follow the "Mark paid" toggles */
.m-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-tile { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.m-tile > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.m-tile small { font-size: 11.5px; }
.m-tile b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--owe); transition: color .2s; }
.m-tile .pos { color: var(--green-ink); }
.m-tile i { display: none; font-style: normal; }
.m-tile .v0, .m-tile .a0, .m-tile .l0 { display: inline; }
#pay-l:checked ~ .m-bal :is(.v0, .l0), #pay-a:checked ~ .m-bal :is(.v0, .a0) { display: none; }
#pay-l:checked ~ .m-bal .l1, #pay-a:checked ~ .m-bal .a1 { display: inline; }
#pay-l:checked ~ .m-bal .neg-l, #pay-a:checked ~ .m-bal .neg-a { color: var(--green-ink); }
#pay-l:checked ~ #pay-a:not(:checked) ~ .m-bal .v-l { display: inline; }
#pay-l:not(:checked) ~ #pay-a:checked ~ .m-bal .v-a { display: inline; }
#pay-l:checked ~ #pay-a:checked ~ .m-bal .v-la { display: inline; }
.m-settle-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-seg-sm { grid-template-columns: auto auto; border-radius: 10px; }
.m-seg-sm > span { padding: 6px 10px; border-radius: 8px; font-size: 11.5px; cursor: default; }
.m-seg-sm .on { background: #fff; }
.m-debt { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 18px; background: oklch(1 0 0 / .7); }
.m-debt .av { width: 28px; height: 28px; font-size: 11px; }
.m-debt .avs .av + .av { margin-left: -9px; }
.m-who { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.m-who em { color: var(--muted); font-weight: 500; }
.m-debt > b { font-weight: 800; font-variant-numeric: tabular-nums; }
.m-pill { padding: 8px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; box-shadow: 0 4px 10px -4px oklch(0.24 0.06 290 / .5); }
#pay-l:checked ~ .m-settle .d-l, #pay-a:checked ~ .m-settle .d-a { background: oklch(1 0 0 / .35); }
#pay-l:checked ~ .m-settle .d-l :is(.m-who, b), #pay-a:checked ~ .m-settle .d-a :is(.m-who, b) { color: var(--muted); text-decoration: line-through; }
#pay-l:checked ~ .m-settle .d-l label, #pay-a:checked ~ .m-settle .d-a label { background: none; box-shadow: none; color: var(--green-ink); }
#pay-l:checked ~ .m-settle .d-l .when-off, #pay-a:checked ~ .m-settle .d-a .when-off { display: none; }
#pay-l:checked ~ .m-settle .d-l .when-on, #pay-a:checked ~ .m-settle .d-a .when-on { display: inline; }
#pay-l:focus-visible ~ .m-settle .d-l label, #pay-a:focus-visible ~ .m-settle .d-a label { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.m-even span { display: none; padding: 2px 4px; font-size: 14px; font-weight: 600; color: var(--green-ink); }
#pay-l:checked ~ #pay-a:checked ~ .m-settle .m-even span { display: block; }
.m-bills { gap: 4px; }
.m-bills > small { margin-bottom: 4px; }
.m-bill { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid oklch(0.94 0.01 75); }
.m-bill .av { width: 28px; height: 28px; font-size: 11px; }
.m-r { display: grid; text-align: right; line-height: 1.3; }
.m-r b { font-size: 14px; }

/* 10. Spec: "Ausstattung" */
.spec { padding-block: var(--section); border-top: 1px solid var(--line); background: var(--paper-2); }
.spec-grid { columns: 4 250px; column-gap: 40px; margin-top: clamp(48px, 6vw, 80px); }
.spec-group { break-inside: avoid; padding-bottom: 44px; }
.spec-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 1.2rem; letter-spacing: -.02em; }
.spec-group li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-strong); font-size: 1rem; line-height: 1.4; color: var(--body); }
.spec-group li::before { content: ""; flex: none; width: .4em; height: .75em; margin: .2em .2em 0 .25em; border: solid var(--green); border-width: 0 .15em .15em 0; rotate: 40deg; }
.is-ai h3 > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.is-ai h3 .ai { font-size: 11px; vertical-align: 0; }
.is-ai h3 > span + span, .is-soon h3 span { font: 500 .74rem var(--mono); letter-spacing: 0; color: var(--muted); }
.spec-fine { margin-top: 14px; font-size: .88rem; line-height: 1.5; color: var(--body); }
.is-soon h3 { border-bottom-style: dashed; }
.is-soon li { border-bottom-style: dashed; }
.is-soon li::before { width: .8em; height: .8em; margin: .25em 0 0; border: 1.5px dashed var(--muted); border-radius: 50%; rotate: none; }

/* 11. Move in */
.move { position: relative; isolation: isolate; padding-block: var(--section); background: var(--warm); --muted: var(--muted-tint); }
.move::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .16; pointer-events: none; }
.move .kicker { color: oklch(0.42 0.1 160); }
.move-in { display: grid; gap: 64px; align-items: center; }
.move-steps { display: grid; gap: 22px; max-width: 34rem; margin-top: 36px; counter-reset: step; }
.move-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; counter-increment: step; }
.move-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--ink); color: var(--warm); font: 600 1rem/1 var(--mono); }
.move-steps h3 { padding-top: 2px; font-size: 1.3rem; letter-spacing: -.025em; }
.move-steps p { color: var(--body); }
.move-steps h3 .ai { margin-left: .2em; vertical-align: .3em; }
.move-steps code { padding: 1px 6px; border-radius: 6px; background: oklch(1 0 0 / .6); overflow-wrap: anywhere; }
.move .ctas { margin-top: 36px; }
.move .btn-line { border-color: oklch(0.24 0.04 290 / .35); }

.bell { position: relative; display: grid; justify-items: center; padding-bottom: 92px; }
.bell-plate { display: grid; gap: 12px; width: 288px; padding: 22px 22px 18px; border-radius: 24px; background: linear-gradient(165deg, oklch(0.36 0.035 290), var(--ink) 70%); box-shadow: inset 0 1px 0 oklch(1 0 0 / .16), 0 40px 60px -34px oklch(0.24 0.06 290 / .8); rotate: -2deg; }
.bell-grille { height: 50px; margin-bottom: 6px; border-radius: 12px; background: radial-gradient(circle, oklch(0.17 0.03 290) 2.3px, transparent 2.8px) 2px 1px / 12px 12px, oklch(0.3 0.03 290); box-shadow: inset 0 2px 4px oklch(0 0 0 / .4); }
.bell-row { display: flex; align-items: center; gap: 14px; }
.bell-name { display: flex; flex: 1; align-items: center; height: 40px; padding: 0 12px; border-radius: 6px; background: var(--paper); color: var(--ink); font: 600 .88rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .1), inset 0 -2px 0 oklch(0 0 0 / .06); }
.bell-name.tape { background: oklch(0.96 0.04 85); rotate: -1.5deg; }
.bell-row > i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, oklch(0.86 0.02 80), oklch(0.55 0.02 80) 70%); box-shadow: 0 0 0 4px oklch(0.29 0.03 290), 0 0 0 5.5px oklch(0.44 0.03 290); }
.is-free .bell-name { border: 1.5px dashed oklch(0.75 0.03 290); background: none; box-shadow: none; color: var(--on-ink-muted); text-transform: none; letter-spacing: 0; }
.bell-addr { margin-top: 4px; font: 500 .7rem/1 var(--mono); letter-spacing: .14em; text-align: center; text-transform: uppercase; color: var(--on-ink-muted); }
.bell-code { position: absolute; right: max(0px, calc(50% - 290px)); bottom: 0; display: grid; gap: 6px; width: 250px; padding: 16px 18px; border-radius: 24px; background: var(--paper); box-shadow: 0 30px 50px -30px oklch(0.24 0.06 290 / .7), 0 0 0 1px oklch(0.24 0.04 290 / .06); rotate: 3deg; }
.bell-code small { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bell-code code { font-size: 1.75rem; letter-spacing: .08em; line-height: 1.1; }
.bell-code span { overflow: hidden; font: 500 .7rem var(--mono); text-overflow: ellipsis; white-space: nowrap; color: var(--body); }

/* 12. Footer */
.foot { background: var(--ink); color: var(--on-ink-muted); font-size: .95rem; }
.foot-in { display: grid; gap: 28px; padding-block: 48px; }
.foot-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--on-ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.foot-logo .mark { font-size: 1.9rem; }
.foot-brand p { margin-top: 8px; max-width: 32rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-links a { color: var(--on-ink); font-weight: 600; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-copy { font-size: .85rem; }

/* 404 */
.lost { display: grid; min-height: 100svh; background: var(--page); }
.lost-in { display: grid; align-content: center; justify-items: start; gap: 18px; padding-block: 48px; }
.lost h1 { max-width: 12ch; font-size: clamp(2.4rem, 1.2rem + 5vw, 5rem); }
.lost-in > p:not(.kicker) { max-width: 30rem; font-size: 1.15rem; color: var(--body); }
.lost .nav-home { margin-bottom: 24px; }
.lost .kicker { margin-bottom: 0; }

/* Below-the-fold sections skip rendering work until near the viewport */
.spec, .move { content-visibility: auto; contain-intrinsic-size: auto 1100px; }

/* Layout: larger screens */
@media (min-width: 600px) {
  .house { --z: 1; }
  .wall-board { gap: 34px 22px; }
  .note { padding: 30px 20px 20px; }
}
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; min-height: max(640px, 100svh); padding-block: 76px calc(var(--brand) * .78 + 20px); }
  .hero-copy { padding-bottom: 4vh; }
  .brand { position: absolute; left: var(--gutter); bottom: -.015em; line-height: .78; }
  .hero-in { position: relative; }
  .house { --z: 1; justify-self: end; margin-right: 1vw; }
  .promise { margin-top: 0; font-size: clamp(2.6rem, 1rem + 3.3vw, 4.1rem); }
  .wall-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pin-iou { grid-column: auto; order: 0; }
  .pin-iou .note { min-height: 140px; max-width: none; }
  .move-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .foot-in { grid-template-columns: 1.5fr 1fr auto; align-items: end; }
}
@media (min-width: 740px) {
  .day { grid-template-columns: minmax(0, 34rem) 360px; justify-content: space-between; align-items: center; column-gap: clamp(32px, 6vw, 96px); }
}
@media (min-width: 1200px) {
  .wall-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy board" "turn board"; column-gap: clamp(48px, 6vw, 96px); row-gap: 48px; }
  .wall-copy { grid-area: copy; }
  .wall-board { grid-area: board; }
  .wall-turn { grid-area: turn; align-self: end; font-size: clamp(1.7rem, .8rem + 1.6vw, 2.5rem); }
}
/* House scale by viewport height, so house + wordmark fit one screen (house is ~705px tall at zoom 1) */
@media (min-width: 900px) and (max-height: 1019px) { .house { --z: .85; } }
@media (min-width: 900px) and (max-height: 899px) { .house { --z: .77; } }
@media (min-width: 900px) and (max-height: 839px) { .house { --z: .68; } }
@media (min-width: 900px) and (max-height: 779px) { .house { --z: .6; } }
@media (min-width: 900px) and (max-height: 719px) { .house { --z: .51; } }

/* Week, scroll-linked (JS on, wide screens): one sticky phone, the copy scrolls past it */
@media (min-width: 960px) {
  .js .week-grid { --stick: max(20px, calc(50svh - 395px)); grid-template-columns: minmax(0, 1fr) 380px; column-gap: clamp(48px, 7vw, 128px); row-gap: 0; }
  .js .day { display: contents; }
  .js .day-text { grid-column: 1; display: flex; flex-direction: column; justify-content: center; min-height: 86svh; padding-block: 40px; }
  .js .day:nth-of-type(1) .day-text { grid-row: 1; }
  .js .day:nth-of-type(2) .day-text { grid-row: 2; }
  .js .day:nth-of-type(3) .day-text { grid-row: 3; }
  .js .day:nth-of-type(4) .day-text { grid-row: 4; }
  .js .day:nth-of-type(5) .day-text { grid-row: 5; }
  .js .day:nth-of-type(6) .day-text { grid-row: 6; }
  .js .day:nth-of-type(7) .day-text { grid-row: 7; }
  .js .day h3 { max-width: 13ch; font-size: clamp(2.5rem, 1rem + 2.7vw, 3.75rem); }
  .js .day-text > p:not([class]) { max-width: 31ch; font-size: 1.22rem; }
  .js .day:not([data-current]) :is(h3, .day-text > p:not([class])) { color: var(--muted); }
  .js .week-device { display: block; grid-column: 2; grid-row: 1 / span 7; align-self: start; position: sticky; top: var(--stick); height: 790px; }
  .js .screen { grid-column: 2; grid-row: 1 / span 7; align-self: start; justify-self: start; position: sticky; top: calc(var(--stick) + 60px); height: 720px; margin: 60px 0 0 10px; box-shadow: none; opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .35s var(--ease), translate .5s var(--ease); }
  .js .day[data-current] .screen, .js .screen:focus-within { z-index: 1; opacity: 1; translate: none; pointer-events: auto; }
  .rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 40px; margin-bottom: 10px; padding: 4px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); }
  .rail li { display: grid; place-items: center; border-radius: 10px; font: 700 .82rem/1 var(--sans); color: var(--muted); transition: background-color .3s, color .3s; }
  .week[data-dow="mo"] [data-d="mo"], .week[data-dow="mi"] [data-d="mi"], .week[data-dow="do"] [data-d="do"], .week[data-dow="fr"] [data-d="fr"], .week[data-dow="sa"] [data-d="sa"], .week[data-dow="so"] [data-d="so"] { background: var(--ink); color: var(--on-ink); }
  .bezel { width: 380px; height: 740px; border: 10px solid var(--ink); border-radius: 46px; background: var(--paper); box-shadow: 0 50px 80px -50px oklch(0.24 0.06 290 / .6), 0 0 0 1px oklch(0.36 0.04 290); }
}
/* Short viewports: shrink the phone; zoom also scales `top`, hence the division */
@media (min-width: 960px) and (max-height: 840px) {
  .js .week-grid { --stick: max(14px, calc((50svh - 332px) / .84)); }
  .js .week-device, .js .screen { zoom: .84; }
}
@media (min-width: 960px) and (max-height: 720px) {
  .js .week-grid { --stick: max(10px, calc((50svh - 284px) / .72)); }
  .js .week-device, .js .screen { zoom: .72; }
}

/* Phones: tighter screens, wordmark always on top */
@media (max-width: 599px) {
  .hero-in { gap: 40px; padding-top: 84px; }
  .hero .ctas .btn { flex: 1 1 auto; }
  .screen { zoom: .94; }
  .plan th, .plan td { padding: 8px 4px; }
  .bell { padding-bottom: 104px; }
  .bell-code { right: 0; }
  .spec-group li { padding-block: 10px; }
}
@media (max-width: 380px) {
  .nav-signin { padding-inline: 10px; }
  .m-head small { font-size: 11px; }
}

/* 13. Motion: few, intentional, and the static state is always the final state */
@media (prefers-reduced-motion: no-preference) {
  /* Not on .hero-copy itself: a transform there would become the wordmark's containing block */
  .promise, .hero-lede, .hero .ctas { animation: rise .8s var(--ease) both; }
  .hero-lede { animation-delay: .08s; }
  .hero .ctas { animation-delay: .16s; }
  .brand { animation: rise .8s var(--ease) both; }
  @media (min-width: 900px) { .brand { animation: ground 1.1s .1s var(--ease) both; } }
  .house-base { animation: grow .6s var(--ease) both; }
  .floor { animation: drop .6s var(--ease) both; }
  .f-house { animation-delay: .1s; }
  .f-chores { animation-delay: .2s; }
  .f-shop { animation-delay: .3s; }
  .f-money { animation-delay: .4s; }
  .house-roof { animation: roof .75s .5s var(--ease-back) both; }
  .f-shop .m-cb { animation: fill .2s 1.45s both; }
  .f-shop .m-cb::after { animation: pop .3s 1.5s var(--ease-back) both; }
  .f-shop .m-row { animation: done .3s 1.45s both; }
  .f-shop b { animation: fade .3s 1.5s both; }

  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes ground { from { translate: 0 .5em; } }
@keyframes drop { from { opacity: 0; translate: 0 -28px; } }
@keyframes grow { from { scale: .5 1; opacity: 0; } }
@keyframes roof { from { opacity: 0; translate: 0 -44px; } }
@keyframes fill { from { background: transparent; } }
@keyframes pop { from { scale: 0; } }
@keyframes done { from { border-color: var(--line); background: #fff; } }
@keyframes fade { from { color: var(--ink); text-decoration-color: transparent; } }
@keyframes reveal { from { opacity: 0; translate: 0 32px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}