/* Muuka product page v6 — "the cut phone". Light only. Paper → ink panel → white cards → lime.
   Phones are one CSS component (.phone) sized by --pw; every dimension is in iPhone points (--u).
   Motion: CSS transitions on the END state only, driven by html.armed/.go (hero), .in (entrances),
   data-step + .leaving + .reset (S2), .clear (S7), .snap (reduced-motion change). No keyframes. */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-latin.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; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dm-mono-latin.woff2) format('woff2'); }

:root {
  --paper: #EAE7E2;
  --ink: #18181B;
  --muted: #666666;
  --card: #FFFFFF;
  --divider: #E2DFD9;
  --hair: rgba(24, 24, 27, .10);
  --lime: #D9ED92;
  --on-lime: #18181B;
  --on-ink: #F2F0EB;
  --ease: cubic-bezier(.25, 1, .5, 1);
  --t-hover: 150ms; --t-press: 100ms; --t-dip: 180ms; --t-state: 240ms; --t-fade: 500ms;
  --t-in: 640ms; --t-rise: 900ms; --t-clock: 1100ms;
  --k: 1; /* delay multiplier; 0 when motion is off */
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --margin: 16px;
  --gut: 16px;
  --container: calc(100% - 2 * var(--margin));
  --radius-card: 24px;
}
@media (min-width: 768px) { :root { --margin: 40px; --gut: 20px; } }
@media (min-width: 1024px) { :root { --margin: 64px; --gut: 24px; --container: min(1280px, 100% - 2 * var(--margin)); } }
/* Motion off (reduced motion, no JS, or a mid-session change): every state is instant. Hover and press stay. */
html:not(.armed), html.snap { --t-dip: 0ms; --t-state: 0ms; --t-fade: 0ms; --t-in: 0ms; --t-rise: 0ms; --t-clock: 0ms; --k: 0; }
html.snap * { transition: none !important; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; font-weight: 500;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 1;
  overflow-x: clip;
}
main { display: block; }
img { max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: .04em; line-height: 1.3; font-size: 12px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
section { scroll-margin-top: 80px; }
.routine { scroll-margin-top: 0; }

/* Type scale (37-AD) */
.h1 { font-weight: 800; font-size: clamp(32px, 10.67vw, 40px); line-height: 1; letter-spacing: -.035em; }
.h1__line { white-space: nowrap; }
.h2 { font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -.02em; }
.h2--not { font-size: 28px; line-height: 1.1; }
.h3 { font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.h3--s { font-size: 20px; }
.lead { font-size: 17px; line-height: 1.45; max-width: 520px; }
.body { font-size: 16px; line-height: 1.5; }
.p { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 300px; }
.eyebrow { font-weight: 600; font-size: 13px; line-height: 1.2; }
.trust, .label { font-size: 13px; line-height: 1.4; color: var(--muted); }
.figure { font-size: 14px; }
@media (min-width: 768px) {
  .h1 { font-size: clamp(40px, 5.6vw, 80px); letter-spacing: -.03em; }
  .h2 { font-size: 44px; }
  .h2--not { font-size: 36px; }
  .h3 { font-size: 28px; }
  .h3--s { font-size: 22px; }
  .lead { font-size: 20px; line-height: 1.5; max-width: 620px; }
  .body { font-size: 18px; }
  .p { font-size: 16px; }
  .p--s { font-size: 15px; }
  .eyebrow { font-size: 14px; }
}

/* Links: 1 px underline that grows on hover */
.link { position: relative; font-weight: 600; font-size: 15px; display: inline-block; line-height: 1.4; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform-origin: bottom; }
.not .link { font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .link::after { transition: transform var(--t-hover) var(--ease); }
  .link:hover::after { transform: scaleY(2); }
}

/* Badge: Apple's artwork, untouched */
.badge { display: inline-block; line-height: 0; border-radius: 8px; }
.badge img { display: block; width: auto; height: 48px; }
.badge--l img { height: 56px; }
.badge:focus-visible { outline-offset: 4px; }

/* ---------- The pill ---------- */
.pill {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 20;
  width: fit-content; margin: 0 auto;
  height: 44px; padding: 6px; border-radius: 999px;
  display: flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(24, 24, 27, .12);
  box-shadow: 0 1px 2px rgba(24, 24, 27, .06), 0 10px 24px -12px rgba(24, 24, 27, .30);
  font-weight: 600; font-size: 15px; line-height: 1;
}
.pill__brand, .pill__item { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; color: var(--ink); }
.pill__brand { font-weight: 700; padding-left: 10px; gap: 8px; }
.pill__brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.pill__cta { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; margin-left: 4px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; }
.pill__item--how { display: none; }
@media (min-width: 600px) { .pill__item--how { display: inline-flex; } }
@media (min-width: 768px) {
  .pill { top: 16px; height: 48px; }
  .pill__brand, .pill__item { height: 36px; padding: 0 14px; }
  .pill__cta { height: 36px; padding: 0 16px; }
}
@media (hover: hover) and (pointer: fine) {
  .pill__item, .pill__brand { opacity: .7; transition: opacity var(--t-hover) var(--ease); }
  .pill__brand { opacity: 1; }
  .pill__item:hover { opacity: 1; }
  .pill__cta { transition: transform var(--t-hover) var(--ease); }
  .pill__cta:hover { transform: scale(1.02); }
}
.pill__cta:active { transform: scale(.98); transition-duration: var(--t-press); }

/* ---------- The phone ---------- */
/* iPhone 15 Pro geometry: body 429 × 891 pt, screen 393 × 852 pt, bezel 18 pt,
   outer radius 73 pt, screen radius 55 pt. --u = one point at this size. */
.phone {
  --pw: 300px;
  --u: calc(var(--pw) / 429);
  --band: linear-gradient(225deg, #E4E1DB 0%, #BDBAB4 12%, #8B8882 40%, #605D59 66%, #8E8B85 88%, #B5B2AC 100%);
  --chamfer: rgba(255, 255, 255, .55);
  --glass: #070708;
  --rim: rgba(255, 255, 255, .07);
  --btn: #5C5955;
  --btn-hi: rgba(255, 255, 255, .22);
  --ground: rgba(24, 24, 27, .32);
  --ground2: rgba(24, 24, 27, .10);
  --outer: 0 0 0 0 transparent;
  position: relative;
  width: var(--pw);
  aspect-ratio: 429 / 891;
  flex: 0 0 auto;
  font-size: 0;
  line-height: 0;
}
.phone__body {
  position: absolute; inset: 0;
  border-radius: calc(var(--u) * 73);
  background: var(--band);
  box-shadow:
    inset 0 0 0 max(1px, var(--u)) var(--chamfer),
    var(--outer),
    calc(var(--u) * -6) calc(var(--u) * 28) calc(var(--u) * 56) calc(var(--u) * -14) var(--ground),
    0 calc(var(--u) * 2) calc(var(--u) * 6) var(--ground2);
}
.phone__glass {
  position: absolute; inset: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 70);
  background: var(--glass);
  box-shadow: inset 0 0 0 max(1px, var(--u)) var(--rim);
}
.phone__glass::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(225deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 28%);
}
.phone__screen {
  position: absolute; inset: calc(var(--u) * 15);
  border-radius: calc(var(--u) * 55);
  overflow: hidden;
  background: #EAE7E2;
}
.step .phone__screen, .s7 .phone__screen { transform: translateZ(0); } /* only S2 and S7 clip moving children */
.phone__screen > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.phone__btn {
  position: absolute; width: calc(var(--u) * 3); background: var(--btn);
  box-shadow: inset 0 max(1px, var(--u)) 0 var(--btn-hi);
}
.phone__btn--action, .phone__btn--up, .phone__btn--down { left: calc(var(--u) * -2); border-radius: calc(var(--u) * 1.5) 0 0 calc(var(--u) * 1.5); }
.phone__btn--power { right: calc(var(--u) * -2); border-radius: 0 calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0; }
.phone__btn--action { top: calc(var(--u) * 182); height: calc(var(--u) * 36); }
.phone__btn--up { top: calc(var(--u) * 232); height: calc(var(--u) * 66); }
.phone__btn--down { top: calc(var(--u) * 316); height: calc(var(--u) * 66); }
.phone__btn--power { top: calc(var(--u) * 262); height: calc(var(--u) * 108); }

.phone--dark {
  --band: linear-gradient(225deg, #6A6A6E 0%, #46464A 12%, #2A2A2D 40%, #141416 66%, #26262A 88%, #3C3C40 100%);
  --chamfer: rgba(255, 255, 255, .22);
  --glass: #000;
  --rim: rgba(255, 255, 255, .07);
  --btn: #2C2C30;
  --btn-hi: rgba(255, 255, 255, .35);
  --ground: rgba(0, 0, 0, .6);
  --ground2: rgba(0, 0, 0, .3);
  --outer: 0 0 0 1px rgba(255, 255, 255, .14);
}
.phone--lime { --ground: rgba(24, 24, 27, .28); }

/* ---------- S1 Hero ---------- */
.hero { position: relative; padding-top: 92px; overflow-x: clip; }
.hero__stack { position: relative; z-index: 1; width: var(--container); margin: 0 auto; }
.hero__stack > * + * { margin-top: 16px; }
.hero__stack .eyebrow + .h1 { margin-top: 12px; }
.hero__stack .lead { margin-top: 16px; }
.hero__stack .badge { margin-top: 20px; }
.hero__stack .trust { margin-top: 10px; }
.hero__stage { position: relative; height: 440px; margin-top: 40px; }
.hero__phone { position: relative; width: var(--pw); margin: 0 auto; --pw: 290px; }
.hero__phone .phone { --pw: inherit; position: relative; z-index: 1; }
.glow {
  position: absolute; z-index: 0; left: 100%; top: 0; width: 480px; height: 480px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .6; will-change: opacity;
  background: radial-gradient(closest-side, rgba(217, 237, 146, .35) 0%, rgba(255, 250, 240, .60) 38%, rgba(255, 250, 240, 0) 100%);
}
@media (min-width: 768px) {
  .hero { padding-top: 112px; }
  .hero__stack { max-width: 720px; text-align: center; }
  .hero__stack .lead { margin-left: auto; margin-right: auto; }
  .hero__stack .eyebrow + .h1 { margin-top: 16px; }
  .hero__stack .lead { margin-top: 20px; }
  .hero__stack .badge { margin-top: 24px; }
  .hero__stack .trust { margin-top: 12px; }
  .hero__stage { height: 560px; margin-top: 48px; }
  .hero__phone { --pw: 400px; }
  .glow { width: 640px; height: 640px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .hero__phone { --pw: 360px; } .hero__stage { height: 500px; } }
@media (min-width: 1024px) and (max-height: 899px) { .hero { padding-top: 96px; } .h1 { font-size: 72px; } .hero__stage { margin-top: 32px; } }

/* The one expressive move: the app's row mark, inline, arrow → check */
.mark { position: relative; display: inline-block; width: .8em; height: .8em; margin-right: .12em; border-radius: 50%; background: var(--lime); vertical-align: -.1em; }
.mark svg { position: absolute; inset: 0; margin: auto; width: .5em; height: .5em; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 4.3; stroke-linecap: round; stroke-linejoin: round; }
.mark__arrow { opacity: 0; transform: translateX(9.6px); }
.mark__check { opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center; }

/* Hero intro: start states while armed and not yet .go; transitions on .go (the end state). */
.armed:not(.go) .hero .eyebrow { opacity: 0; transform: translateY(12px); }
.armed:not(.go) .hero .h1 { opacity: 0; transform: translateY(24px); filter: blur(12px); }
.armed:not(.go) .hero .lead { opacity: 0; transform: translateY(16px); }
.armed:not(.go) .hero .badge, .armed:not(.go) .hero .trust { opacity: 0; transform: translateY(12px); }
.armed:not(.go) .hero__phone .phone { opacity: 0; transform: translateY(56px); }
.armed:not(.go) .glow { opacity: 0; }
.armed:not(.go) .pill { opacity: 0; transform: translateY(-8px); }
.armed:not(.go) .mark__arrow { opacity: 1; transform: none; }
.armed:not(.go) .mark__check { opacity: 0; transform: scale(.6); }
@media (min-width: 768px) { .armed:not(.go) .hero__phone .phone { transform: translateY(80px); } }
.go .hero .eyebrow { transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.go .hero .h1 { transition: opacity 900ms var(--ease) 60ms, transform 900ms var(--ease) 60ms, filter 900ms var(--ease) 60ms; filter: none; }
.go .hero .lead { transition: opacity 640ms var(--ease) 180ms, transform 640ms var(--ease) 180ms; }
.go .hero .badge, .go .hero .trust { transition: opacity 560ms var(--ease) 300ms, transform 560ms var(--ease) 300ms; }
.go .hero__phone .phone { transition: opacity 1100ms var(--ease) 120ms, transform 1100ms var(--ease) 120ms; }
.go .glow { transition: opacity 1100ms var(--ease) 200ms; }
.go .pill { transition: opacity 480ms var(--ease) 520ms, transform 480ms var(--ease) 520ms; }
.go .mark__arrow { transition: opacity 180ms var(--ease) 1200ms, transform 180ms var(--ease) 1200ms; }
.go .mark__check { transition: opacity 400ms var(--ease) 1240ms, transform 400ms var(--ease) 1240ms; }

/* ---------- S2 The routine: ink panel, bill cards that turn over to their status ---------- */
.routine { position: relative; z-index: 2; padding: 0 8px; }
.routine__panel { position: relative; border-radius: 28px; background: var(--ink); color: var(--on-ink); overflow: hidden; padding: 64px 0 72px; }
.routine__grid { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; row-gap: 40px; }
.routine .eyebrow { margin: 0 0 12px; color: rgba(242, 240, 235, .6); }
.routine__h2 { color: var(--on-ink); margin: 0; }
.routine__body { margin: 16px 0 0; max-width: 420px; color: rgba(242, 240, 235, .72); }
.legend { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; font-weight: 600; color: rgba(242, 240, 235, .6); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend .fmark { width: 16px; height: 16px; color: rgba(242, 240, 235, .8); }
.flip { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 10px; }
.fcard { position: relative; height: 72px; }
.armed .flip:not(.in) .fcard { opacity: 0; transform: translateY(16px); }
.flip.in .fcard { transition: opacity 600ms var(--ease) calc(var(--i, 0) * var(--k) * 90ms), transform 700ms var(--ease) calc(var(--i, 0) * var(--k) * 90ms); }
.fcard__inner { position: absolute; inset: 0; }
.fface { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.fcard--flip .fface--front { display: none; }
.fmark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted); }
.fface--paid .fmark, .fface--skip .fmark { color: var(--ink); }
.fface--skip .fmark { color: var(--divider); }
.fname { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fname b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.fname small { font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.famt { font-weight: 700; font-size: 15px; }
.fface--paid .fname b, .fface--paid .famt, .fface--skip .fname b, .fface--skip .famt { color: var(--muted); }
@media (min-width: 768px) {
  .routine { padding: 0 24px; }
  .routine__panel { border-radius: 32px; padding: 96px 0; }
  .routine__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: center; }
  .routine__text { grid-column: 1 / 6; }
  .flip { grid-column: 7 / 13; max-width: 480px; justify-self: end; width: 100%; }
}
@media (min-width: 1024px) {
  .routine__panel { padding: 112px 0; }
  .routine__text { grid-column: 2 / 6; }
  .flip { grid-column: 7 / 12; row-gap: 12px; }
  .fcard { height: 76px; }
}
/* Phones cut by a card or the ink panel: a short, centred ground shadow, nothing that runs out of the box. */
.card .phone__body {
  box-shadow:
    inset 0 0 0 max(1px, var(--u)) var(--chamfer),
    var(--outer),
    0 calc(var(--u) * 10) calc(var(--u) * 28) calc(var(--u) * -8) var(--ground),
    0 calc(var(--u) * 2) calc(var(--u) * 6) var(--ground2);
}

/* ---------- Cards ---------- */
.card { position: relative; background: var(--card); border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(24, 24, 27, .04); overflow: hidden; }
.card .phone { position: absolute; }
.card .h3 + .p { margin-top: 8px; }

/* Entrances: phones rise 48 px (32 at 375) into their cards, once; S6 fades up as a block. */
.armed .rise:not(.in) .phone, .armed .rise:not(.in) .pair { transform: translateY(32px); opacity: 0; }
.armed .rise:not(.in) .card--hang .phone, .armed .card--hang.rise:not(.in) .phone { transform: translateY(-32px); }
.rise.in .phone, .rise.in .pair { transition: transform var(--t-rise) var(--ease) calc(var(--i, 0) * var(--k) * 80ms), opacity 600ms var(--ease) calc(var(--i, 0) * var(--k) * 80ms); }
.rise.in .pair .phone { transition: none; }
.armed .rise:not(.in) .pair .phone { transform: none; opacity: 1; }
.armed .soft:not(.in) { opacity: 0; transform: translateY(16px); }
.soft.in { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.rise.snap .phone, .rise.snap .pair, .soft.snap { transition: none; }
@media (min-width: 768px) {
  .armed .rise:not(.in) .phone, .armed .rise:not(.in) .pair { transform: translateY(48px); }
  .armed .card--hang.rise:not(.in) .phone { transform: translateY(-48px); }
}
@media (max-width: 1023px) { .rise.in .phone, .rise.in .pair { transition-delay: 0s; } .year .rise.in .year__front { transition-delay: calc(var(--k) * 120ms); } }

/* ---------- S3 Kept for the year ---------- */
.year { padding: 64px 0 0; }
.card--wide { width: var(--container); margin: 0 auto; padding: 24px; --radius-card: 32px; --vis: 340px; }
.card--wide .card__text .body { margin-top: 16px; max-width: 420px; }
.card--wide .figure { margin-top: 24px; color: var(--muted); }
.card--wide::after { content: ''; display: block; height: calc(var(--vis) + 32px - 24px); } /* room for the cut phones */
.card--wide .phone { --pw: 200px; --ph: calc(var(--pw) * 891 / 429); position: absolute; } /* --ph must live where --pw is defined */
.card--wide .year__back { left: 24px; bottom: calc(var(--vis) - var(--ph)); }
.card--wide .year__front { left: calc(24px + var(--pw) * .5); bottom: calc(var(--vis) - 32px - var(--ph)); }
@media (min-width: 768px) {
  .year { padding-top: 96px; }
  .card--wide { padding: 40px; --vis: 480px; }
  .card--wide::after { height: calc(var(--vis) + 32px - 40px); }
  .card--wide .phone { --pw: 300px; }
  .card--wide .year__back { left: 40px; }
  .card--wide .year__front { left: calc(40px + var(--pw) * .567); bottom: calc(var(--vis) - 48px - var(--ph)); }
}
@media (min-width: 1024px) {
  .year { padding-top: 128px; }
  .card--wide { padding: 64px; height: 600px; }
  .card--wide::after { display: none; }
  .card--wide .card__text { width: 41.667%; }
  .card--wide .phone { --pw: clamp(240px, 20.8vw, 300px); }
  .card--wide .year__back { left: calc(50% + var(--gut) / 2); top: 72px; bottom: auto; }
  .card--wide .year__front { left: calc(50% + var(--gut) / 2 + var(--pw) * .567); top: 120px; bottom: auto; }
}

/* ---------- S4 Every kind of bill ---------- */
.bills { padding: 64px 0 0; }
.bills__grid { width: var(--container); margin: 0 auto; display: grid; gap: 20px; }
.card--bill { height: 480px; padding: 24px; --radius-card: 28px; }
.card--bill .phone { --pw: 220px; left: calc(50% - var(--pw) / 2); top: 200px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .bills { padding-top: 96px; }
  .bills__grid { gap: 24px; }
  .card--bill { height: 400px; padding: 40px; }
  .card--bill .h3, .card--bill .p { width: 45%; }
  .card--bill .phone { --pw: 240px; left: calc(45% + (55% - var(--pw)) / 2); top: 100px; }
  .card--hang .phone { top: auto; bottom: calc(100% - 300px); }
  .card--hang { padding-top: 40px; }
}
@media (min-width: 1024px) {
  .bills { padding-top: 96px; }
  .bills__grid { grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
  .card--bill { height: auto; min-height: 560px; padding: 40px; } /* min-height: a long paragraph grows the row, never gets cut */
  .card--bill .phone { --pw: clamp(200px, 18vw, 250px); top: 260px; }
  .card--hang { padding-top: 350px; }
  .card--hang .phone { top: auto; bottom: calc(100% - 300px); }
}
@media (min-width: 1408px) { /* the container is its full 1280 px from here (cards 411): the phones rise 40 px closer to the text */
  .card--bill { min-height: 520px; }
  .card--bill .phone { top: 220px; }
  .card--hang .phone { top: auto; } /* c keeps hanging 300 px with 50 px to its heading */
}

/* ---------- S5 Made to be yours ---------- */
.yours { padding: 64px 0 0; }
.yours__grid { width: var(--container); margin: 0 auto; display: grid; gap: 20px; }
.card--small { height: 400px; padding: 24px; }
.card--small .phone { --pw: 220px; left: calc(50% - var(--pw) / 2); top: 180px; }
.pair { position: absolute; left: 24px; top: 180px; height: 220px; } /* two phones overlapped as in S3: 24 + 85 + 170 = 279 ≤ 302 */
.card--small .pair .phone { position: absolute; left: 0; top: 0; --pw: 170px; }
.card--small .pair .phone + .phone { left: calc(var(--pw) * .5); top: 32px; }
@media (min-width: 768px) {
  .yours { padding-top: 96px; }
  .yours__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gut); }
  .card--small { height: 440px; padding: 32px; }
  .card--small .phone { top: 220px; }
  .pair { left: 32px; top: 220px; }
}
@media (min-width: 1280px) {
  .yours__grid { grid-template-columns: repeat(4, 1fr); }
  .card--small .phone { --pw: clamp(180px, 15.5vw, 220px); }
}

/* ---------- S6 What Muuka is not ---------- */
.not { padding: 96px 0; }
.not__inner { width: var(--container); margin: 0 auto; }
.nots { margin-top: 32px; max-width: 640px; }
.nots li { position: relative; padding-left: 36px; font-size: 16px; line-height: 1.5; }
.nots li + li { margin-top: 20px; }
.skip { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; color: rgba(24, 24, 27, .45); }
.not .link { margin-top: 40px; }
@media (min-width: 768px) {
  .not { padding: 128px 0; }
  .not__inner { max-width: 560px; }
  .nots li { font-size: 18px; }
  .skip { top: 3px; }
}
@media (min-width: 1024px) {
  .not { padding: 160px 0; }
  .not__inner { max-width: none; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); }
  .not__inner > * { grid-column: 1 / 8; justify-self: start; }
  .not__inner .nots { justify-self: stretch; }
}

/* ---------- S7 The empty page ---------- */
.done { background: var(--lime); color: var(--on-lime); padding: 96px 0 64px; }
.done__inner { position: relative; width: var(--container); margin: 0 auto; display: grid; row-gap: 40px; }
.done__text .label { color: rgba(24, 24, 27, .62); }
.done__text .h2 { margin-top: 12px; }
.done__ask .trust { margin-top: 12px; color: rgba(24, 24, 27, .62); }
.done__phone { display: flex; justify-content: center; }
.done__phone .phone { --pw: 260px; }
.qr { display: none; }
@media (min-width: 768px) {
  .done { padding: 128px 0 96px; }
  .done__inner { grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: center; }
  .done__text { grid-column: 1 / 6; grid-row: 1; align-self: end; }
  .done__ask { grid-column: 1 / 6; grid-row: 2; align-self: start; }
  .done__phone { grid-column: 7 / 13; grid-row: 1 / 3; }
  .done__inner { row-gap: 32px; }
  .done__phone .phone { --pw: 300px; }
}
@media (min-width: 1024px) {
  .done { min-height: 100vh; display: grid; align-items: center; padding: 96px 0; }
  .done__inner { min-height: calc(100vh - 192px); align-content: center; }
  .done__phone { grid-column: 7 / 12; }
  .done__phone .phone { --pw: 340px; }
}
@media (min-width: 1024px) and (hover: hover) {
  .qr { display: flex; align-items: center; gap: 16px; max-width: 280px; margin-top: 40px; padding: 12px; border-radius: 20px; background: var(--card); color: var(--ink); text-align: left; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); transition: transform var(--t-press) var(--ease); }
  .qr img { display: block; width: 88px; height: 88px; }
  .qr:active { transform: scale(.98); }
}
/* The list clears: crops from `home` over `home-empty`, one opacity/transform each, once. */
.phone__screen > .s7__ov { position: absolute; display: none; inset: auto; }
.armed .phone__screen > .s7__ov { display: block; }
.phone__screen > .s7__sub { left: calc(var(--u) * 20); top: calc(var(--u) * 186); width: calc(var(--u) * 320); height: calc(var(--u) * 28); }
.phone__screen > .s7__head { left: 0; top: calc(var(--u) * 230); width: 100%; height: calc(var(--u) * 48); }
.phone__screen > .s7__veil { left: 0; top: calc(var(--u) * 560); width: 100%; height: calc(var(--u) * 206); background: #EAE7E2; }
.phone__screen > .s7__row { left: calc(var(--u) * 20); top: calc(var(--u) * var(--y)); width: calc(var(--u) * 341); height: calc(var(--u) * 69); z-index: calc(10 - var(--i)); }
.phone__screen > .s7__row--last { height: calc(var(--u) * 68); }
.s7.clear .phone__screen > .s7__row { transform: translateX(calc(var(--u) * 24)); opacity: 0; transition: transform 500ms var(--ease) calc(var(--k) * (500ms + var(--i) * 70ms)), opacity 500ms var(--ease) calc(var(--k) * (500ms + var(--i) * 70ms)); }
.s7.clear .s7__sub, .s7.clear .phone__screen > .s7__head { opacity: 0; transition: opacity 300ms var(--ease) calc(var(--k) * 1400ms); }
.s7.clear .phone__screen > .s7__veil { opacity: 0; transition: opacity 600ms var(--ease) calc(var(--k) * 1600ms); }

/* ---------- S8 Footer ---------- */
.foot { width: var(--container); margin: 0 auto; padding: 32px 0 40px; }
.foot__nav { display: flex; flex-direction: column; }
.foot__nav .link { display: flex; align-items: center; height: 44px; align-self: flex-start; }
.foot__nav .link::after { bottom: 8px; }
.foot__meta { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.foot__meta .mono { font-size: 12px; }
@media (min-width: 768px) {
  .foot { padding: 48px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
  .foot__nav { flex-direction: row; gap: 28px; }
  .foot__nav .link { height: auto; }
  .foot__nav .link::after { bottom: -2px; }
  .foot__meta { margin: 0; text-align: right; }
}