/* moni — the website. Colours come from palette.css (the app's own palette, generated);
   type, shapes, volume and motion follow the app (CLAUDE.md, Design/). */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --shadowScreen: 0 30px 70px rgb(0 0 0 / 0.14);
  --gutter: 24px;
  --max: 1120px;
  --r-card: 24px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadowScreen: 0 30px 70px rgb(0 0 0 / 0.6); color-scheme: dark; }
}
:root[data-theme="dark"] { --shadowScreen: 0 30px 70px rgb(0 0 0 / 0.6); color-scheme: dark; }
@media (min-width: 760px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--screenEnd, var(--surface)); background-image: var(--screen); min-height: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(96px + var(--navDrop, 0px)); }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv01", "case";
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.4s, color 0.4s;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: pretty; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- icons ---------- */
.i { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.i-14 { width: 14px; height: 14px; }
.i-16 { width: 16px; height: 16px; }
.i-18 { width: 18px; height: 18px; }
.i-20 { width: 20px; height: 20px; }
.i-22 { width: 22px; height: 22px; }
.i-28 { width: 28px; height: 28px; }

/* ---------- type: the app's roles, scaled for a page ---------- */
.micro {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; line-height: 14px;
  text-transform: uppercase; color: var(--ink3);
}
.display {
  font-size: clamp(40px, 6.2vw, 76px); line-height: 1; letter-spacing: -0.045em; font-weight: 600;
}
.h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.03em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--ink2); letter-spacing: -0.015em; }
.body { font-size: 15px; line-height: 22px; color: var(--ink2); }
.note { font-size: 13px; line-height: 19px; color: var(--ink3); }
.amount { font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-feature-settings: "case", "tnum"; }
.code { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink3); }
.muted { color: var(--ink3); }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--cardShadow); }
.flat { background: var(--flat); border-radius: var(--r-card); }
.vol { background: var(--vol); box-shadow: var(--volShadow); }
.ink-vol { background: var(--inkVol); box-shadow: var(--inkVolShadow); color: var(--onInk); }
.hero-card { background: var(--hero); box-shadow: var(--heroShadow); color: var(--heroText); }
.disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.disc-36 { width: 36px; height: 36px; }
.disc-40 { width: 40px; height: 40px; }
.disc-48 { width: 48px; height: 48px; }
.disc-56 { width: 56px; height: 56px; }
.divider { height: 1px; background: var(--line); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--ease-bounce), opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .press:active { transform: scale(0.96); opacity: 0.85; transition-duration: 0.1s; }
.btn-ink { background: var(--inkVol); box-shadow: var(--inkVolShadow); color: var(--onInk); }
.btn-vol { background: var(--vol); box-shadow: var(--volShadow); color: var(--ink); }
.btn-quiet { background: none; color: var(--ink); padding: 0 18px; margin-left: -12px; transition: background 0.2s, transform 0.25s var(--ease-bounce), opacity 0.2s; }
.btn-small { height: 40px; padding: 0 18px; font-size: 14px; }
.press { transition: transform 0.25s var(--ease-bounce), opacity 0.2s; -webkit-tap-highlight-color: transparent; cursor: pointer; }

.soon { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.soon small { font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: 0.7; }
/* The App Store logo in the "Coming soon" buttons. */
/* The logo and the App Store mark are drawn inline in the page, not as masks on an svg file: a mask is painted a
   frame after the page, so on every page the two blinked while the text didn't (Maxim, 16 Oct 2026). */
.as-logo { display: block; width: 22px; height: 22px; flex: none; }
.btn-small .as-logo { width: 16px; height: 16px; margin-left: -2px; }
.btn .as-logo + .soon { margin-left: -2px; }
span.btn { cursor: default; }

/* ---------- navigation: a floating glass bar, like the tab bar ---------- */
.nav {
  /* --navDrop (site.js): iOS 26 Safari with the address bar at the top lays the page under its collapsed bar, and
     the bar hid the menu while scrolling (Maxim, 16 Oct 2026) — then the menu stands below it. */
  position: fixed; z-index: 50; top: calc(12px + var(--navDrop, 0px)); left: 50%; transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 1120px; height: 60px; padding: 0 10px 0 22px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; overflow: hidden;
  /* Closing, the bar's own glass comes back only once the full-screen menu has shrunk into it. */
  transition: height 0.5s var(--ease-out), top 0.2s var(--ease-out), background-color 0s 0.45s, box-shadow 0.2s 0.42s;
  border-radius: 30px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: var(--barShadow), 0 0 0 1px var(--barRim);
}
/* The logo outside the app is the word alone: "your moni" lives only inside moni (Maxim, 14 Oct 2026). */
.brand { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--ink); transition: opacity 0.2s; }
.logo { display: block; width: auto; aspect-ratio: 3.016; }
.brand .logo { height: 22px; }
/* The i's dot makes the word look low when it is centred by its box: lifted to sit optically in the middle. */
.nav .brand .logo { transform: translateY(-2px); }
.nav-links { display: none; gap: 4px; }
.nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink2); padding: 8px 12px; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.nav-links a:hover { background: var(--fieldBg); color: var(--ink); }
.nav > .brand, .nav-links, .nav-right { height: 60px; align-items: center; }
.nav > .brand { justify-content: center; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-links a[aria-current] { color: var(--ink); }
.theme-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* ---------- sections ---------- */
section { position: relative; }
.section { padding: clamp(80px, 11vw, 150px) 0 0; }
.section-head { max-width: 720px; display: grid; gap: 18px; }
.section-head.center { margin: 0 auto; text-align: center; justify-items: center; }
/* Centred text balances its lines; left-aligned text only avoids a word alone on the last line. */
.section-head.center > *, .final > * { text-wrap: balance; }
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .split.flip > :first-child { order: 2; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(120px, 15vw, 170px); }
.hero-grid { display: grid; gap: 56px; align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 10px; }
.fact { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); }
.fact .i { color: var(--ink); }
.hero-visual { position: relative; display: grid; place-items: center; padding: 10px 0 30px; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* ---------- iPhone ---------- */
.phone {
  --w: 320px;
  /* A fixed height of its own, not aspect-ratio: Safari on the iPhone sized the screen inside differently from the
     phone around it (Maxim, 16 Oct 2026). */
  position: relative; width: var(--w); height: calc(var(--w) * 2622 / 1206);
  border-radius: calc(var(--w) * 0.165);
  padding: calc(var(--w) * 0.03);
  background: linear-gradient(145deg, #2c2c30, #0c0c0e 45%, #1d1d20);
  box-shadow: var(--shadowScreen), inset 0 0 0 1.5px rgb(255 255 255 / 0.16), 0 0 0 1px rgb(0 0 0 / 0.5);
  flex: none;
}
.phone::after { /* Dynamic Island, where iPhone 17 has it: 125 × 37 pt, 14 pt from the top of a 402 pt screen (the screen
   is 94% of the phone, after its 3% bezel). A hair bigger than the one the simulator sometimes bakes into a
   screenshot, so that one never peeks out and the island keeps one size on every shot (Maxim, 16 Oct 2026). */
  content: ""; position: absolute; top: calc(var(--w) * 0.0617); left: 50%; transform: translateX(-50%);
  width: 29.6%; height: calc(var(--w) * 0.0885); border-radius: 999px; background: #000;
}
.screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--w) * 0.137); overflow: hidden; background: #000;
  /* Safari on the iPhone doesn't clip a picture that has a layer of its own (it fades) by overflow and the rounded
     corners: the shot's square corners lay over the frame. clip-path clips every layer (Maxim, 16 Oct 2026). */
  clip-path: inset(0 round calc(var(--w) * 0.137)); }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: opacity 0.45s var(--ease-soft); }
.screen img.off { opacity: 0; }
.phone.small { --w: 270px; }
.phones { display: flex; justify-content: center; align-items: flex-start; gap: 0; }
.phones .phone + .phone { margin-left: -46px; margin-top: 70px; }
@media (max-width: 560px) {
  .phone { --w: min(300px, 78vw); }
  .phones .phone { --w: min(240px, 56vw); }
  .phones .phone + .phone { margin-left: -60px; margin-top: 56px; }
}

/* floating bits of real moni UI round the hero phone */
.float { position: absolute; z-index: 2; animation: bob 7s ease-in-out infinite; }
.float.b { animation-delay: -3.5s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.banner {
  display: flex; align-items: center; gap: 12px; width: 300px; padding: 14px 16px; border-radius: 22px;
}
.banner .disc { background: var(--heroChip); box-shadow: inset 0 0 0 1px var(--heroChipLine); width: 40px; height: 40px; }
.banner .disc .i { color: var(--heroText); }
.banner .txt b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 19px; }
.banner .txt span { display: block; font-size: 13px; line-height: 18px; color: var(--heroDim); }
.repeat-chip { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 18px; font-size: 13px; color: var(--ink2); white-space: nowrap; }
.repeat-chip b { font-weight: 400; color: var(--ink); }
.repeat-chip .m { margin-left: 8px; font-weight: 600; color: var(--ink); }
.rate-chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: 22px; }
.rate-chip .t { text-align: right; }
.rate-chip .t div:first-child { font-size: 12px; color: var(--ink2); line-height: 16px; }
.rate-chip .t div:last-child { font-size: 15px; line-height: 19px; }
.hero-visual .f1 { top: 61%; left: max(-6%, calc(50% - 330px)); }
.hero-visual .f2 { bottom: auto; top: 13%; right: max(-6%, calc(50% - 330px)); }
@media (max-width: 760px) {
  .hero-visual .f1 { top: 64%; left: 0; transform: scale(0.86); transform-origin: left top; }
  .hero-visual .f2 { top: 9%; right: 0; transform: scale(0.86); transform-origin: right top; }
  .banner { width: 268px; }
  .float { animation: none; }
}

/* ---------- colors: the Color sheet and an emoji icon floating round the phone ---------- */
.tint-visual { position: relative; display: grid; place-items: center; padding: 10px 0 30px; }
.tint-visual .c1 { top: 52%; right: max(-8%, calc(50% - 340px)); }
.tint-visual .c2 { top: 30%; left: max(-8%, calc(50% - 330px)); }
.color-card { width: 236px; padding: 12px 14px 16px; border-radius: 22px; }
.cc-head { text-align: center; margin-bottom: 12px; }
.cc-head b { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.cc-grid { display: grid; grid-template-columns: repeat(5, 30px); justify-content: space-between; row-gap: 10px; }
.cc-dot { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); }
button.cc-dot { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cc-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); opacity: 0; transform: scale(0.85); transition: opacity 0.25s, transform 0.35s var(--ease-bounce); }
.cc-dot[aria-pressed="true"]::after { opacity: 1; transform: none; }
.emoji-card { width: 214px; padding: 14px; border-radius: 22px; display: grid; gap: 12px; }
.ec-top { display: flex; align-items: center; gap: 10px; }
.ec-top b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; line-height: 18px; }
.ec-top span:not(.ec-dial) { display: block; font-size: 11px; line-height: 15px; color: var(--ink3); }
.ec-dial { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: none; }
.ec-chips { display: flex; gap: 6px; padding: 3px; border-radius: 14px; background: var(--fieldBg); font-size: 12px; color: var(--ink2); }
.ec-chips span { flex: 1; display: grid; place-items: center; height: 26px; border-radius: 11px; }
.ec-chips .on { flex: 0 0 40px; font-size: 15px; }
.ec-row { display: flex; justify-content: space-between; font-size: 19px; line-height: 28px; }
.ec-row span { width: 28px; text-align: center; border-radius: 8px; }
.ec-row .on { background: var(--fieldBg); }
@media (max-width: 760px) {
  .tint-visual .c1 { top: 56%; right: 0; transform: scale(0.72); transform-origin: right top; }
  .tint-visual .c2 { top: 40%; left: 0; transform: scale(0.72); transform-origin: left top; }
}

/* The colors phone in 3D: turns its right side to you in the chosen color (Maxim, 16 Oct 2026). One phone, one
   movement: the page crossfades first, the phone in the pose it had, then it turns (site.js, .turned). A phone of
   its own in the crossfade (a view-transition name) Safari drew blown up and jerky, then jumped into 3D. */
.tint-visual .phone-stage { perspective: 1500px; perspective-origin: 50% 40%; }
/* The body's color is a typed property, so it flows from one color to the next with the screen's. */
@property --body { syntax: "<color>"; inherits: true; initial-value: #3a3a3e; }
.phone-3d {
  --body: #3a3a3e; --depth: calc(var(--w) * 0.111); /* iPhone 17: 7.95 mm of 71.5 */
  --rim: calc(var(--w) * 0.005);                  /* the metal frame runs a hair outside the glass */
  transform-style: preserve-3d; transform: rotateY(0deg);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), --body 0.55s ease;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.16), 0 0 0 0.5px rgb(0 0 0 / 0.6); /* its shadow is the back's */
}
.phone-3d .body { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
/* The frame: 20 slabs from just behind the glass to the back, each a hair larger than the glass. In the page
   from the back to the glass, and the screen after them: Safari flattens the phone for the colour crossfade and
   paints it in page order — slabs after the screen covered it with the bare body (Maxim, 16 Oct 2026). */
.phone-3d .slab {
  position: absolute; inset: calc(var(--rim) * -1); border-radius: calc(var(--w) * 0.165 + var(--rim));
  transform: translateZ(calc(-0.6px - (var(--depth) - 0.6px) * (var(--k) - 1) / 19));
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.10), transparent 30%, transparent 70%, rgb(0 0 0 / 0.14)),
    var(--c);
}
.phone-3d .slab:first-of-type { box-shadow: var(--shadowScreen); background: color-mix(in oklab, var(--body), #000 6%); }
/* Buttons: the slabs in the middle of the frame carry a bump each on the right — stacked, they make the side button
   and Camera Control as solid parts of the frame, rounded at their ends, standing 1.3 px out of it. */
.phone-3d .slab { --c: color-mix(in oklab, color-mix(in oklab, var(--body), #fff var(--lt)), #000 var(--dk)); }
.phone-3d .btns::before, .phone-3d .btns::after {
  content: ""; position: absolute; right: -1.3px; width: 6px; border-radius: 3px / 6px;
}
.phone-3d .btns::before { top: 26%; height: 10%; background: linear-gradient(180deg, color-mix(in oklab, var(--c), #fff 10%), var(--c) 40%, color-mix(in oklab, var(--c), #000 12%)); }
.phone-3d .btns::after { top: 56%; height: 6.4%; background: radial-gradient(90% 60% at 50% 40%, #3c3c44, #0e0e11); }
/* The buttons' outer slabs are their edges: a shade darker; Camera Control's ring is the frame's metal. */
.phone-3d .btns.edge::before { background: color-mix(in oklab, var(--c), #000 22%); }
.phone-3d .btns.edge::after { background: color-mix(in oklab, var(--c), #fff 12%); }
:root[data-tint="burgundy"] .phone-3d { --body: #4D1722; }
:root[data-tint="deepblue"] .phone-3d { --body: #2C3E66; }
:root[data-tint="alpinegreen"] .phone-3d { --body: #55704F; }
:root[data-tint="glacier"] .phone-3d { --body: #E8F1FE; }
.phone-3d.turned { transform: rotateX(4deg) rotateY(-32deg); }
@media (prefers-reduced-motion: reduce) { .phone-3d { transition: none; } }

/* ---------- currency ticker ---------- */
.ticker { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-row { display: flex; gap: 10px; width: max-content; animation: ticker 60s linear infinite; padding: 10px 0; }
.ticker-row.rev { animation-direction: reverse; animation-duration: 75s; }
@keyframes ticker { to { transform: translateX(-50%); } }
.tick { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.tick .sym { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; letter-spacing: 0; background: var(--flat); color: var(--ink); }

/* ---------- converter demo (Exchange rates) ---------- */
.conv { width: 100%; max-width: 440px; justify-self: center; display: grid; gap: 12px; }
.conv-main { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 18px 0 14px; border-radius: 24px; background: var(--flat); }
.conv-main input {
  flex: 1; min-width: 0; text-align: right; border: 0; background: none; outline: none; color: var(--ink);
  font: 600 30px/1 "Inter", sans-serif; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-feature-settings: "case", "tnum";
}
.conv-main input::placeholder { color: var(--ink3); }
.conv-main:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cur { display: grid; line-height: 1.2; }
.cur b { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.cur span { font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-rows .row { display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 14px; }
.conv-rows .row + .row { border-top: 1px solid var(--line); }
.conv-rows .val { margin-left: auto; text-align: right; min-width: 0; }
.conv-rows .val .amount { font-size: 18px; display: block; }
.conv-rows .val small { font-size: 11px; color: var(--ink3); white-space: nowrap; }
.sym-disc { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.ink-disc { background: var(--inkVol); box-shadow: var(--inkVolShadow); color: var(--onInk); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; background: var(--fieldBg); color: var(--ink2); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.chip.on { background: var(--vol); box-shadow: var(--volShadow); color: var(--ink); }

/* sweep (the app's shimmer): a number dims, a light band runs over it, it comes back */
.sweep { position: relative; display: inline-block; }
.sweep.run { animation: dim 0.75s ease-in-out; }
.sweep.run::after {
  content: ""; position: absolute; inset: -2px -10px; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 85%, transparent) 50%, transparent 70%);
  background-size: 250% 100%; animation: band 0.75s ease-in-out forwards;
}
@keyframes dim { 0% { opacity: 1; } 25% { opacity: 0.3; } 75% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes band { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* ---------- receipt scan demo: moni's camera in an iPhone (14.1), drawn at 402 pt and scaled ---------- */
/* The phone has a fixed size of its own: sized as a percentage of a block that is sized by the phone, it came
   out as 0 high on the first layout in some browsers, the section collapsed and the next one rode over it. */
.scan-demo { position: relative; width: 100%; display: flex; justify-content: center; }
.scan-phone { width: var(--w); height: calc(var(--w) * 2622 / 1206); }
.cam { background: #000; }
.cam-ui { position: absolute; left: 0; top: 0; width: 402px; height: 904px; transform: scale(var(--k, 0.75)); transform-origin: 0 0; color: #fff; font-size: 15px; letter-spacing: -0.01em; }
.sb { position: absolute; top: 18px; left: 0; right: 0; height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 52px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.sb-icons { width: 66px; height: 12px; fill: currentColor; }
.cam-head { position: absolute; top: 61px; left: 20px; right: 20px; height: 44px; display: flex; align-items: center; justify-content: space-between; }
.gdisc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gdisc.d52 { width: 52px; height: 52px; }
.cam-title { display: flex; align-items: center; gap: 8px; font-size: 17px; letter-spacing: -0.02em; }
.cam-title b { font-weight: 600; }
.viewfinder { position: absolute; top: 117px; left: 0; right: 0; bottom: 172px; overflow: hidden; background: radial-gradient(120% 90% at 50% 45%, #8a8a8e, #4a4a4e 70%, #2c2c2f); }
.paper {
  position: absolute; left: 50%; top: 26px; width: 330px; padding: 30px 26px 34px; transform: translateX(-50%) rotate(-2deg);
  background: linear-gradient(180deg, #f6f6f4, #e9e9e6); color: #161616; border-radius: 3px;
  font: 500 15px/25px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; font-variant-numeric: tabular-nums;
  box-shadow: 0 18px 30px rgb(0 0 0 / 0.35), 0 2px 4px rgb(0 0 0 / 0.25);
}
.paper h4 { margin: 0 0 2px; font-size: 19px; text-align: center; letter-spacing: 0.06em; }
.paper .c { text-align: center; color: #555; margin-bottom: 16px; font-size: 13px; }
.paper .ln { display: flex; justify-content: space-between; }
.paper .dash { border-top: 1.5px dashed #999; margin: 10px 0; }
.paper .tot { font-weight: 700; font-size: 18px; }
/* The scan line: white, with a dark trail behind it, so it shows on white paper too. */
.beam { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #fff; opacity: 0; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 0 16px 3px rgb(255 255 255 / 0.95); }
.beam::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; background: linear-gradient(0deg, rgb(10 10 12 / 0.34), rgb(10 10 12 / 0)); transform-origin: 50% 100%; }
.scan-demo.run .beam { animation: beam 3.2s forwards; }
.scan-demo.run .beam::before { animation: trail 3.2s forwards; }
@keyframes beam {
  0% { top: 0; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  50% { top: calc(100% - 3px); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  97% { top: 0; opacity: 1; } 100% { top: 0; opacity: 0; }
}
@keyframes trail { 0%, 48% { transform: scaleY(1); } 52%, 100% { transform: scaleY(-1); } }
.long-pill { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 16px; border-radius: 22px; white-space: nowrap; font-weight: 600; font-size: 15px; background: rgb(0 0 0 / 0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); transition: opacity 0.3s; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 172px; transition: opacity 0.35s; }
.cb { position: absolute; top: 30px; display: grid; justify-items: center; gap: 8px; }
.cb:nth-child(1) { left: 55px; } .cb:nth-child(3) { right: 55px; }
.cb:nth-child(2) { left: 50%; top: 18px; transform: translateX(-50%); }
.cb small { font-size: 13px; line-height: 16px; color: rgb(235 235 245 / 0.62); white-space: nowrap; }
.shutter { width: 76px; height: 76px; border-radius: 50%; box-shadow: inset 0 0 0 3px #f4f4f6; display: grid; place-items: center; }
.shutter-disc { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #0b0b0c; background: linear-gradient(180deg, #fff, #ededf0 55%, #d4d4d8); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgb(0 0 0 / 0.14); }
.shutter-disc .i { width: 30px; height: 30px; }
.scan-demo.run .cam-bottom, .scan-demo.run .long-pill { opacity: 0.35; }
.flashveil { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.scan-demo.flashing .flashveil { animation: flash 0.32s ease-out; }
@keyframes flash { from { opacity: 0.85; } to { opacity: 0; } }
.cam-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.42); opacity: 0; transition: opacity 0.45s; }
.scan-demo.done .cam-scrim { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px 30px; border-radius: 34px 34px 0 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadowSheet);
  transform: translateY(105%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scan-demo.done .sheet { transform: none; }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; margin: 12px 4px 0; font-size: 16px; }
.sheet-bar > span { color: var(--ink2); }
.sheet-bar > span:last-child { color: var(--ink); font-weight: 600; }
.sheet-bar b { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.tap-edit { display: flex; align-items: center; gap: 10px; margin: 16px 0 18px; }
.tap-edit i { flex: 1; height: 1px; background: var(--line2); }
.tap-edit .micro { font-size: 10px; }
.sheet-btn { margin-top: 16px; height: 52px; border-radius: 26px; display: grid; place-items: center; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; background: var(--inkVol); box-shadow: var(--inkVolShadow); color: var(--onInk); }
.sheet-quiet { margin-top: 6px; height: 44px; display: grid; place-items: center; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--ringTrack); margin: 0 auto 12px; }
.sheet-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.sheet .sub { text-align: center; margin: 16px 0 0; font-size: 14px; color: var(--ink2); }
.day { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.day b { font-size: 13px; font-weight: 600; }
.day .micro { margin-left: 8px; font-size: 10px; }
.tx { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.tx + .tx { border-top: 1px solid var(--line); }
.tx .names { min-width: 0; flex: 1; }
.tx .from { font-size: 12px; line-height: 16px; color: var(--ink3); }
.tx .to { font-size: 15px; line-height: 19px; }
.tx .sum { text-align: right; }
.tx .sum .code { display: block; font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0; }
.tx .sum .amount { font-size: 15px; letter-spacing: -0.03em; }
.dial { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.dial.ring { box-shadow: inset 0 0 0 1px var(--ringTrack); }
.dial.out { background: var(--inkVol); box-shadow: var(--inkVolShadow); color: var(--onInk); }
.dial.in { background: var(--vol); box-shadow: var(--volShadow); }
.dial .i { width: 20px; height: 20px; }
.tx .from .i { width: 12px; height: 12px; vertical-align: -1px; }

/* ---------- budgetometr ---------- */
.meter-card { display: flex; align-items: center; gap: 0; padding: 22px 0; max-width: 460px; width: 100%; justify-self: center; }
.meter-card > div { flex: 1; min-width: 0; }
.meter-left { display: grid; justify-items: center; }
.meter-right { padding: 0 22px 0 0; display: grid; gap: 4px; }
.meter { position: relative; width: 160px; height: 88px; }
.meter svg { width: 160px; height: 80px; overflow: visible; }
.meter .pct { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 40px; line-height: 0.75; }
.meter .pct sup { position: absolute; left: 100%; top: -8px; font-size: 15px; font-weight: 600; margin-left: 2px; letter-spacing: 0; }
.meter-of { margin-top: 8px; font-size: 12px; color: var(--ink2); }
.state { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 22px; min-height: 22px; transition: opacity 0.3s; }
.meter-note { font-size: 13px; line-height: 19px; color: var(--ink); }
.pace-list { display: grid; gap: 0; margin-top: 8px; }
.pace { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; }
.pace + .pace { border-top: 1px solid var(--line); }
.pace .disc { width: 36px; height: 36px; }
.pace b { display: block; font-size: 15px; letter-spacing: -0.02em; font-weight: 600; line-height: 19px; margin-bottom: 3px; }
.pace span { font-size: 14px; line-height: 20px; color: var(--ink2); }

/* ---------- feature tiles (flat: they only tell) ---------- */
.tiles { display: grid; gap: 14px; margin-top: 48px; }
/* Three in a row only where each tile is wide enough for its one-line mock; before that two, the piggy bank
   across both (Maxim, 14 Oct 2026: its line wrapped in the narrow tiles). */
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); } .tiles > :nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1120px) { .tiles { grid-template-columns: repeat(3, 1fr); } .tiles > :nth-child(3) { grid-column: auto; } }
@media (max-width: 370px) { .tile { padding: 12px; } .tile .mock { padding: 8px; } }
.tile { padding: 22px; display: grid; gap: 16px; align-content: start; }
.tile h3 { font-size: 18px; line-height: 22px; letter-spacing: -0.025em; }
.tile p { font-size: 14px; line-height: 21px; color: var(--ink2); margin-top: -8px; }
.mock { background: var(--surface); border-radius: 18px; padding: 14px; box-shadow: 0 0 0 1px var(--line); }
.mock.dark { background: var(--hero); box-shadow: var(--heroShadow); color: var(--heroText); }
.strip { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 16px; background: var(--fieldBg); font-size: 13px; color: var(--ink2); }
.strip b { color: var(--ink); font-weight: 400; }
.strip .m { margin-left: auto; font-weight: 600; color: var(--ink); }
.bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; background: var(--inkVol); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22); width: 0; transition: width 0.85s var(--ease-out) 0.2s; }
.in-view .bar > i { width: var(--to); }
.hero-bar { height: 6px; border-radius: 3px; background: var(--heroChip); overflow: hidden; }
.hero-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--heroText); width: 0; transition: width 0.85s var(--ease-out) 0.2s; }
.in-view .hero-bar > i { width: var(--to); }
.dash-dial { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; }
.dash-dial svg.r { position: absolute; inset: 0; width: 44px; height: 44px; }

/* ---------- privacy ---------- */
.privacy { border-radius: 36px; padding: clamp(32px, 6vw, 72px); overflow: hidden; position: relative; }
.privacy::before { content: ""; position: absolute; width: 700px; height: 700px; right: -260px; top: -320px; background: var(--heroGlow); pointer-events: none; }
.privacy .micro { color: var(--heroDim); }
.privacy .lead { color: var(--heroDim); }
.privacy-grid { display: grid; gap: 1px; margin-top: 44px; border-radius: 24px; overflow: hidden; background: var(--heroChipLine); }
@media (min-width: 760px) { .privacy-grid { grid-template-columns: repeat(3, 1fr); } }
.p-item { padding: 24px; background: color-mix(in srgb, var(--heroSolid) 70%, transparent); display: grid; gap: 10px; align-content: start; }
.p-item .disc { background: var(--heroChip); box-shadow: inset 0 0 0 1px var(--heroChipLine); width: 40px; height: 40px; margin-bottom: 6px; }
.p-item b { font-size: 16px; letter-spacing: -0.02em; font-weight: 600; }
.p-item span { font-size: 14px; line-height: 21px; color: var(--heroDim); }

/* ---------- tint picker ---------- */
.tints { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 6px; max-width: 480px; margin-top: 8px; }
.tint { display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tint .dot { width: 46px; height: 46px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); transition: transform 0.3s var(--ease-bounce); }
.tint .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); opacity: 0; transform: scale(0.85); transition: opacity 0.25s, transform 0.35s var(--ease-bounce); }
.tint[aria-pressed="true"] .dot::after { opacity: 1; transform: none; }
.tint:active .dot { transform: scale(0.92); }
.tint span { font-size: 12px; line-height: 15px; color: var(--ink2); text-align: center; }
.tint[aria-pressed="true"] span { color: var(--ink); font-weight: 600; }
.tint-more { display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; }
.tint-more .dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--flat); color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.tint-more > span:last-child { font-size: 12px; line-height: 15px; color: var(--ink2); }
.mono-dot { background: linear-gradient(135deg, #fff 0 50%, #0f0f10 50% 100%); }
/* The theme and colour crossfade (site.js, recolor). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }

.everywhere { display: grid; gap: 14px; margin-top: 56px; }
@media (min-width: 760px) { .everywhere { grid-template-columns: repeat(3, 1fr); } }
.ev { display: flex; gap: 14px; align-items: flex-start; padding: 20px; }
.ev b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 19px; margin-bottom: 3px; }
.ev span { font-size: 14px; line-height: 20px; color: var(--ink2); }
.ev .disc { width: 40px; height: 40px; }

/* ---------- languages ---------- */
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.lang { height: 42px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 15px; letter-spacing: -0.01em; background: var(--flat); color: var(--ink2); transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-bounce), box-shadow 0.3s; }
.lang.lit { background: var(--inkVol); box-shadow: var(--inkVolShadow); color: var(--onInk); transform: translateY(-3px); }

/* ---------- plans ---------- */
.plans { display: grid; gap: 14px; margin-top: 48px; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { padding: 26px 24px; display: grid; gap: 18px; align-content: start; position: relative; }
.plan.pick { border-radius: var(--r-card); background: var(--inkVol); box-shadow: var(--inkVolShadow), var(--shadowScreen); color: var(--onInk); border: 0; }
.plan-top { display: flex; align-items: center; gap: 14px; }
.plan .disc { width: 44px; height: 44px; }
.plan.pick .disc { background: color-mix(in srgb, var(--onInk) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--onInk) 14%, transparent); }
.plan h3 { font-size: 18px; letter-spacing: -0.025em; line-height: 22px; }
.plan .move { font-size: 13px; color: var(--ink3); }
.plan.pick .kind, .plan.pick .per, .plan.pick li { color: color-mix(in srgb, var(--onInk) 66%, transparent); }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-left: 8px; vertical-align: 2px; background: color-mix(in srgb, var(--onInk) 14%, transparent); }
.price { font-size: 44px; line-height: 1; }
.per { font-size: 14px; color: var(--ink3); margin-top: 8px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--ink2); }
.plan li .i { width: 18px; height: 18px; margin-top: 1px; color: inherit; }
.plan.pick li .i { color: var(--onInk); }
/* moni Free: the 3 months before any plan, a block of its own above the prices. */
.free { margin-top: 48px; border-radius: 36px; padding: clamp(26px, 5vw, 56px); display: grid; gap: 40px; }
@media (min-width: 900px) { .free { grid-template-columns: 1fr 1fr; gap: 64px; } }
.free-main { display: grid; gap: 18px; align-content: start; }
.free-top { display: flex; align-items: center; gap: 12px; font-size: 17px; letter-spacing: -0.02em; }
.free-top .disc { width: 44px; height: 44px; }
.free-big { font-size: clamp(44px, 6vw, 68px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; }
.free-lead { font-size: 17px; line-height: 26px; color: var(--ink2); }
.race { display: grid; gap: 12px; margin-top: 10px; }
.race-row { display: grid; grid-template-columns: 116px 1fr 74px; align-items: center; gap: 12px; font-size: 14px; color: var(--ink2); }
.race-row b { font-weight: 600; color: var(--ink2); text-align: right; white-space: nowrap; }
.race-row.me, .race-row.me b { color: var(--ink); }
.race-bar { height: 8px; border-radius: 4px; background: var(--ringTrack); overflow: hidden; }
.race-bar > i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--ink3); transition: width 1.2s var(--ease-out) 0.3s; }
.race-row.me .race-bar > i { background: var(--inkVol); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22); transition-duration: 1.6s; }
.in-view .race-bar > i { width: var(--to); }
.free-note { font-size: 15px; line-height: 22px; color: var(--ink); font-weight: 500; }
.free-why h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.03em; margin-bottom: 4px; }
.free-why .pace { border-color: var(--line2); }
.then { text-align: center; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.03em; line-height: 1.2; margin-top: clamp(56px, 7vw, 80px); text-wrap: balance; }
.then + .plans { margin-top: 28px; }
.prices { text-align: center; margin-top: 18px; text-wrap: balance; }

/* ---------- FAQ: folding groups, like FoldHeader ---------- */
.faq { max-width: 820px; margin: 44px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; cursor: pointer; font-size: 18px; font-weight: 600; letter-spacing: -0.025em; line-height: 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary { -webkit-tap-highlight-color: transparent; } /* no blue flash on a tap (iPhone) */
.faq summary .i { color: var(--ink3); transition: transform 0.35s var(--ease-bounce); }
.faq details[open]:not(.closing) summary .i { transform: rotate(180deg); }
.faq .ans { padding: 0 4px 24px; font-size: 16px; line-height: 25px; color: var(--ink2); max-width: 700px; }
.faq .ans a { color: var(--ink); }
/* A lesson named in another lesson links to it (Maxim, 16 Oct 2026). */
.lesson-step p a, .lesson .lead a, .lesson .ans a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- final call + footer ---------- */
.final { text-align: center; display: grid; justify-items: center; gap: 22px; }
.final .app-icon { width: 96px; height: 96px; border-radius: 22.4%; box-shadow: var(--shadowScreen); }
footer { padding: 90px 0 40px; }
.foot { position: relative; display: grid; gap: 28px; padding-top: 28px; }
/* The line over the footer is as long as what is under it, not the block with its side margins (Maxim, 14 Oct 2026). */
.foot::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
@media (min-width: 760px) { .foot { grid-template-columns: 1fr auto; align-items: end; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { font-size: 14px; color: var(--ink2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot small { font-size: 12px; line-height: 18px; color: var(--ink3); display: block; }

/* ---------- entrance: the app's "reverse waterfall" ---------- */
.enter { opacity: 0; transform: translateY(18px); transition: opacity 0.42s ease-out, transform 0.6s var(--ease-out); transition-delay: calc(var(--lead, 0ms) + var(--n, 0) * 45ms); }
.in-view .enter, .enter.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .enter { transform: none; transition: opacity 0.3s; }
  .float, .ticker-row { animation: none; }
  html { scroll-behavior: auto; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The hero comes in on its own, without waiting for the script. */
.hero .enter { opacity: 1; transform: none; animation: rise 0.7s var(--ease-out) both; animation-delay: calc(80ms + var(--n, 0) * 45ms); transition: none; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .hero .enter { animation: none; } }

/* Grid and flex children may shrink below their content (long names get their ellipsis instead of widening the page). */
.split > *, .hero-grid > *, .cur, .conv, .conv-main, .scan-demo { min-width: 0; }
.cur { flex: 1; }

/* Phones */
.meter-left { flex: 0 0 52% !important; }
.strip > span:not(.m) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .meter { width: 136px; height: 76px; }
  .meter svg { width: 136px; height: 68px; }
  .meter .pct { font-size: 34px; }
  .meter-right { padding-right: 16px; }
  .state { font-size: 16px; }
  .tile { padding: 16px; }
  .mock { padding: 10px; }
  .tints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 4px; }
  .tint, .tint-more { width: auto; }
  .race-row { grid-template-columns: 112px 1fr 68px; gap: 10px; font-size: 13px; }
  .race-row > span:first-child { white-space: nowrap; }
}

/* ---------- legal and support pages ---------- */
.doc { padding-top: clamp(120px, 14vw, 160px); }
.doc-head { max-width: 760px; display: grid; gap: 16px; margin-bottom: 40px; }
.doc-body { max-width: 760px; }
.doc-body h2 { font-size: 24px; line-height: 30px; letter-spacing: -0.03em; margin: 52px 0 14px; scroll-margin-top: 100px; }
.doc-body h3 { font-size: 17px; line-height: 23px; letter-spacing: -0.02em; margin: 28px 0 8px; }
.doc-body p, .doc-body li { font-size: 16px; line-height: 26px; color: var(--ink2); }
.doc-body p + p { margin-top: 12px; }
.doc-body ul, .doc-body ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.doc-body li::marker { color: var(--ink3); }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--ink); text-underline-offset: 3px; }
.doc-body .caps { color: var(--ink); font-weight: 500; } /* conspicuous, but moni stays lowercase */
.doc-body a.btn { color: var(--onInk); text-decoration: none; }
.toc { padding: 22px 24px; margin-bottom: 8px; }
.toc ol { margin: 10px 0 0; padding-left: 20px; columns: 2 220px; column-gap: 32px; }
.toc li { font-size: 14px; line-height: 22px; margin-bottom: 6px; break-inside: avoid; color: var(--ink2); }
.toc a { text-decoration: none; color: var(--ink2); }
.toc a:hover { color: var(--ink); }
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin: 20px 0 0; }
.callout .disc { width: 36px; height: 36px; }
.callout p { margin: 0 !important; font-size: 15px !important; line-height: 23px !important; }
.mail { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 20px; padding: 22px 24px; }
.mail-text { display: grid; gap: 2px; min-width: 0; }
/* On a phone the button goes under the text, on its left edge — not under the envelope (Maxim, 16 Oct 2026). */
@media (max-width: 600px) {
  .mail { grid-template-columns: auto 1fr; align-items: start; gap: 14px 16px; }
  .mail .btn { grid-column: 2; justify-self: start; }
}
.mail .addr { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); }
.qa { margin-top: 36px; }

/* ---------- hover: with a mouse, everything that can be clicked says so (Maxim, 14 Oct 2026) ---------- */
@media (hover: hover) and (pointer: fine) {
  .brand:hover { opacity: 0.7; }
  a.btn-ink:hover, .btn-ink.press:hover { filter: brightness(1.18); }
  .btn-quiet:hover { background: var(--fieldBg); }
  .vol.press:hover, .theme-btn:hover { filter: brightness(1.04) contrast(1.04); transform: translateY(-1px); }
  .chip:not(.on):hover { background: var(--balFill); color: var(--ink); }
  .tint:hover .dot { transform: scale(1.07); }
  .tint:hover span { color: var(--ink); }
  .tint:hover .dot::after { opacity: 0.35; transform: none; }
  .tint[aria-pressed="true"]:hover .dot::after { opacity: 1; }
  .conv-main:hover:not(:focus-within) { box-shadow: inset 0 0 0 1.5px var(--ringTrack); }
  .faq summary .i { transition: transform 0.35s var(--ease-bounce), color 0.2s; }
  .faq summary:hover .i { color: var(--ink); }
  .faq .ans a:hover, .doc-body a:not(.btn):hover { text-decoration-thickness: 2px; }
  .mail .addr:hover { opacity: 0.7; }
}
/* Short two-line texts of the free block: even lines, no word left alone. */

/* A short text with its icon on the left, the disc as tall as two lines (44 = 2 × 22). */
.iconed { display: flex; gap: 14px; align-items: flex-start; }
.iconed .disc { width: 44px; height: 44px; }
.iconed .body { flex: 1; min-width: 0; }

/* Theme next to the colors: Light | Dark, the choice on a light volume that slides (SegmentedTabs). */
.theme-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 280px; height: 46px; padding: 4px; border-radius: 999px; background: var(--fieldBg); margin-top: 6px; }
.theme-seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--vol); box-shadow: var(--volShadow); transition: transform 0.45s var(--ease-bounce); }
.theme-seg.dark::before { transform: translateX(100%); }
.theme-seg button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink3); transition: color 0.25s; -webkit-tap-highlight-color: transparent; }
.theme-seg button[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .theme-seg button[aria-pressed="false"]:hover { color: var(--ink2); } }
/* The camera phone fades in without moving: sliding it in with its scaled screen inside drew the whole
   phone off its place, over the next section, until the slide ended (Maxim, 14 Oct 2026). */
.scan-demo.enter { transform: none; }
/* Every desktop window (1000 and up) gets the very same page: fixed sizes instead of the ones that grow with
   the window, so the texts fill their lines the same way everywhere (Maxim, 14 Oct 2026). */
@media (min-width: 1000px) {
  .display { font-size: 68px; }
  .h2 { font-size: 52px; }
  .lead { font-size: 20px; }
  .privacy { padding: 72px; }
  .free { padding: 56px; }
}
/* The camera screen is scaled with zoom, not transform: under a scale transform, the shutter flash (an
   animated layer) drew the whole phone off its place for the flash's 0.35 s — the jump in Maxim's video. */
@supports (zoom: 1) {
  .cam-ui { transform: none; zoom: var(--k, 0.75); }
}
/* Phones: the content narrows with the side margins, nothing pushes the page wider than the screen. */
.tiles > *, .everywhere > *, .privacy-grid > *, .plans > *, .free > *, .tile .mock, .tile .mock > * { min-width: 0; }
.piggy-row { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 380px) {
  .nav { padding-left: 18px; }
  .nav .btn-small { padding: 0 14px; font-size: 13px; gap: 8px; }
}
/* Safety net: the page never pans sideways on a phone (iOS ignores overflow-x: hidden on body for panning). */
html, body { overflow-x: clip; }
/* Two phones side by side fill exactly the content width (the margin line), never past it: their size comes
   from the block they stand in, overlap included (Maxim, 14 Oct 2026: on phones they reached the screen edge). */
.phones { container-type: inline-size; width: 100%; }
.phones .phone { --w: min(320px, calc((100cqw + 46px) / 2)); }
.phones .phone.small { --w: min(270px, calc((100cqw + 46px) / 2)); }
@media (max-width: 560px) {
  .phones .phone, .phones .phone.small { --w: min(240px, calc((100cqw + 60px) / 2)); }
}
/* The quiet link's text starts on the margin line when it wraps under the button. */
.btn-quiet { margin-left: -18px; }
/* The big App Store buttons: the logo a little further from the text, the button as wide as before. */
.btn:not(.btn-small) .as-logo { margin-left: -6px; }
.btn:not(.btn-small) .as-logo + .soon { margin-left: 4px; }
/* Terms and Privacy have no contents list: the first heading starts the text. */
.doc-body > h2:first-child { margin-top: 0; }

/* ---------- adding by hand (Maxim, 14 Oct 2026): From, To, the amount, Add — then the categories' icons ---------- */
.moves { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
/* The head is as wide as the three moves in a row; its text keeps the centred heads' 720 (Maxim, 14 Oct 2026: wider
   children pushed the whole head off centre). */
#features .section-head { max-width: 900px; }
#features .section-head .lead { max-width: 720px; }
.move { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--flat); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.move .arr { color: var(--ink3); margin: 0 2px; }
.move small { margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.how { display: grid; gap: 48px; align-items: center; margin-top: 64px; }
@media (min-width: 1000px) { .how { grid-template-columns: 1.15fr 0.85fr; gap: 72px; } }
.how > * { min-width: 0; }
.how .phone { position: relative; }
/* The steps on the front phone: a ring round each part of the form and its number, one after another. */
.rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rings i {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 13.6% / 14%; /* the tiles' 24 pt corners */
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px color-mix(in srgb, var(--ink) 12%, transparent);
  opacity: 0; transform: scale(1.04); transition: opacity 0.3s var(--ease-soft), transform 0.45s var(--ease-bounce);
}
.rings i[data-step="3"] { border-radius: 6.6% / 16%; }
.rings i.pill { border-radius: 999px; }
.rings i b {
  position: absolute; top: -12px; left: -12px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 600; font-style: normal;
  background: var(--inkVol); box-shadow: var(--inkVolShadow); color: var(--onInk);
  transform: scale(0.6); transition: transform 0.45s var(--ease-bounce);
}
.rings i.pill b { top: 50%; left: -13px; margin-top: -13px; }
.rings i.on { opacity: 1; transform: none; }
.rings i.on b { transform: none; }
.how-text { display: grid; gap: 28px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; margin: 0 -14px; border-radius: 20px; cursor: pointer; transition: background 0.3s var(--ease-soft); }
.steps .n {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 14px; font-weight: 600; background: var(--flat); color: var(--ink3);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.45s var(--ease-bounce);
}
.steps b { display: block; font-size: 17px; line-height: 22px; letter-spacing: -0.02em; font-weight: 600; color: var(--ink3); transition: color 0.3s; }
.steps li span:not(.n) { display: block; font-size: 15px; line-height: 22px; color: var(--ink3); transition: color 0.3s; }
.steps li.on { background: var(--flat); }
.steps li.on .n { background: var(--inkVol); box-shadow: var(--inkVolShadow); color: var(--onInk); transform: scale(1.06); }
.steps li.on b { color: var(--ink); }
.steps li.on span:not(.n) { color: var(--ink2); }
/* The categories: the app's icon grid (six across, flat; the picked one turns into ink volume), live. */
.cats-block { display: grid; gap: 40px; align-items: center; margin-top: clamp(80px, 9vw, 120px); }
@media (min-width: 1000px) { .cats-block { grid-template-columns: 0.85fr 1.15fr; gap: 72px; } }
.cats-block > * { min-width: 0; }
.h2.small { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; }
.cats { padding: 22px; display: grid; gap: 22px; max-width: 520px; width: 100%; justify-self: center; }
.cat-pick { display: flex; align-items: center; gap: 14px; }
.cat-pick b { display: block; font-size: 20px; line-height: 24px; letter-spacing: -0.03em; font-weight: 600; margin-top: 4px; }
.cat-pick .g { display: grid; place-items: center; font-size: 28px; line-height: 1; }
.cat-pick .g.pop { animation: pop 0.45s var(--ease-bounce); }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 0; justify-items: center; }
/* A fourth row going softly into nothing: there are many more icons than these (Maxim, 14 Oct 2026). */
.icon-grid { -webkit-mask: linear-gradient(#000 calc(100% - 64px), transparent); mask: linear-gradient(#000 calc(100% - 64px), transparent); }
/* The mask cuts at its box: room round the grid for the picked icon's shadow (Maxim, 14 Oct 2026: it was cut off on top). */
.icon-grid { padding: 16px 16px 6px; margin: -16px -16px 0; }
.ic.more { pointer-events: none; }
.ic {
  position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  background: var(--flat); color: var(--ink); isolation: isolate;
}
.ic::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; background: var(--inkVol); box-shadow: var(--inkVolShadow); opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.42s var(--ease-bounce); }
.ic svg { transition: color 0.2s; }
.ic.on::before { opacity: 1; transform: none; }
.ic.on { color: var(--onInk); }
/* Coming in: from the corner, one diagonal after another. */
.cats.enter .ic { opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.45s var(--ease-bounce); transition-delay: calc(200ms + var(--d) * 45ms); }
.cats.in-view .ic { opacity: 1; transform: none; }
.cats.in-view .ic:active { transform: scale(0.92); transition-delay: 0s; }
.emoji-row { display: flex; align-items: center; gap: 12px; }
.emoji-row .chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 10px; }
.emoji-row .emo { font-size: 18px; line-height: 1; }
@media (max-width: 400px) { .cats { padding: 18px 14px; } .ic { width: 44px; height: 44px; } }
@media (hover: hover) and (pointer: fine) {
  .ic:not(.on):hover { background: var(--balFill); }
  .steps li:not(.on):hover b, .steps li:not(.on):hover .n { color: var(--ink); }
}
/* The steps' lines as long on a Mac as on an iPhone: one wording fills them on both. */
@media (min-width: 1000px) { .steps li > div { max-width: 300px; } .two-cur { max-width: 352px; } }
/* Two currencies: its own card under the steps, not a fifth step — the pair of amounts as in the form. */
.how-text { gap: 36px; }
.two-cur { padding: 20px; display: grid; gap: 16px; }
/* The two amounts as in the form: the typed one over the one moni works out, the exchange mark between them. */
.two-cur .pair { position: relative; display: grid; gap: 8px; }
.two-cur .pair .disc { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.two-cur .amt { display: flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--cardShadow), inset 0 0 0 1px var(--line); }
.two-cur .amt b { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.two-cur .amt.auto { background: color-mix(in srgb, var(--surface) 50%, transparent); box-shadow: none; }
.two-cur .amt.auto b { color: var(--ink3); }
.two-cur .micro { display: block; margin-bottom: 6px; }

/* ---------- the first screen as moni's balance card (Maxim, 15 Oct 2026) ----------
   The whole hero inside one big block in the hero colours, like the card at the top of moni's Home: the 155°
   gradient, the light rim on top, a soft glow in the corner; inverted in the dark theme, tinted with the colour. */
.hero { padding-top: 96px; }
.hero-stage { position: relative; border-radius: 44px; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px); color: var(--heroText); }
.hero-light { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.hero-light::before { content: ""; position: absolute; width: 900px; height: 900px; right: -320px; top: -420px; background: var(--heroGlow); }
.hero-light::after { content: ""; position: absolute; width: 700px; height: 700px; left: -300px; bottom: -420px; background: var(--heroGlow); opacity: 0.45; }
.hero-stage .hero-grid { position: relative; }
.hero-stage .micro { color: var(--heroDim); }
.hero-stage .lead { color: var(--heroDim); }
.hero-stage .fact { color: var(--heroDim); }
.hero-stage .fact .i { color: var(--heroText); }
/* Buttons on the block, as on the card: the main one in the card's text colour, the quiet one light. */
.hero-stage .btn-ink { background: var(--heroText); color: var(--heroSolid); box-shadow: 0 10px 24px rgb(0 0 0 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.5); }
.hero-stage .btn-quiet { color: var(--heroText); }
/* What floats round the phone: off the block's colour, so it doesn't sink into it. */
.hero-stage .banner { background: var(--surface); color: var(--ink); box-shadow: var(--floatShadow, 0 18px 40px rgb(0 0 0 / 0.28)); }
.hero-stage .banner .disc { background: var(--inkVol); box-shadow: var(--inkVolShadow); }
.hero-stage .banner .disc .i { color: var(--onInk); }
.hero-stage .banner .txt span { color: var(--ink3); }
.hero-stage .hero-visual { padding: 0; }
@media (hover: hover) and (pointer: fine) {
  .hero-stage .btn-quiet:hover { background: var(--heroChip); }
}
@media (max-width: 760px) {
  .hero { padding-top: 88px; }
  .hero-stage { border-radius: 36px; padding: 32px 18px 36px; }
  /* One measure on every iPhone (375–440): the lead breaks the same way on all of them, so one wording fills its lines. */
  .hero-stage .lead { max-width: 291px; }
  /* The phone never wider than the block's content (screen − margins 24 − block's 18 each side). */
  .hero-stage .phone { --w: min(300px, 78vw, calc(100vw - 84px)); }
}

/* ---------- the phone menu (Maxim, 15 Oct 2026): the bar grows down into the full menu ----------
   A round button after "Coming soon": three lines that turn into a cross. The bar's height runs to the menu's
   (set by site.js), the links come in from the top one after another — the app's reverse waterfall — and fold
   away faster than they came. From 900 px the links stand in the bar and the button is gone. */
.menu-btn {
  position: relative; width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; flex: none; cursor: pointer;
  background: var(--vol); box-shadow: var(--volShadow); -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s var(--ease-bounce);
}
.menu-btn:active { transform: scale(0.92); }
.menu-btn span {
  position: absolute; left: 12px; width: 16px; height: 1.6px; border-radius: 1px; background: var(--ink);
  transition: transform 0.45s var(--ease-out), opacity 0.25s;
}
.menu-btn span:nth-child(1) { top: 14.2px; }
.menu-btn span:nth-child(2) { top: 19.2px; }
.menu-btn span:nth-child(3) { top: 24.2px; }
.nav.open .menu-btn span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.open .menu-btn span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.nav.open .menu-btn span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.nav-menu {
  position: absolute; left: 0; right: 0; top: 72px; padding: 0 22px 18px;
  display: grid; visibility: hidden;
}
.nav-menu a {
  display: flex; align-items: center; justify-content: space-between; height: 52px; text-decoration: none;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
  border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.18s, transform 0.25s var(--ease-soft);
}
.nav-menu a::after {
  content: ""; width: 16px; height: 16px; background: var(--ink3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 7L15 12L10 17' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 7L15 12L10 17' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; /* inside the css: nothing to fetch */
}
/* Where you are: the tab bar's dot in place of the chevron, the name in ink. */
.nav-menu a[aria-current]::after { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ink); -webkit-mask: none; mask: none; }
.nav.open {
  background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: height 0.5s var(--ease-out), top 0.2s var(--ease-out), background-color 0s, box-shadow 0s;
}
.nav.open .nav-menu { visibility: visible; }
.nav.open .nav-menu a {
  opacity: 1; transform: none;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(0.06s + var(--i) * 0.035s);
}
/* The open menu fills the whole screen (Maxim, 15 Oct 2026, instead of a rounded block over a dimmed page):
   a layer grows out of the bar's own shape to the screen's edges; everything in the bar stays where it was. */
.nav-sheet {
  position: fixed; inset: 0; z-index: 49; background: var(--screen);
  clip-path: inset(calc(12px + var(--navDrop, 0px)) 12px calc(100% - 72px - var(--navDrop, 0px)) 12px round 30px);
  visibility: hidden; transition: clip-path 0.5s var(--ease-out), visibility 0s 0.5s;
}
.menu-open .nav-sheet {
  clip-path: inset(0 0 0 0 round 0); visibility: visible;
  transition: clip-path 0.5s var(--ease-out), visibility 0s;
}
/* The page under the full-screen menu stays put. */
.menu-open, .menu-open body { overflow: hidden; }
@media (min-width: 900px) { .menu-btn, .nav-menu { display: none; } }
@media (min-width: 900px) { .nav-sheet { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-menu a, .menu-btn span, .nav-sheet, .gm-fold { transition: none !important; }
}
@media (hover: hover) and (pointer: fine) { .nav-menu a:hover { color: var(--ink2); } }

/* ---------- Guide (decision 39, lessons) ---------- */
.guide-head { max-width: 760px; display: grid; gap: 16px; margin-bottom: 48px; }
/* The whole guide on one page: seven topics, every lesson in order. */
/* Columns that pack the cards (seven topics of different lengths, no gaps): three on a MacBook (Maxim, 15 Oct 2026). */
.topics { columns: 1; column-gap: 16px; }
@media (min-width: 760px) { .topics { columns: 2; } }
@media (min-width: 1100px) { .topics { columns: 3; } }
.topics > * { break-inside: avoid; margin-bottom: 16px; }
.topic-card { padding: 22px 22px 14px; display: grid; align-content: start; gap: 14px; }
.topic-card h2 { display: flex; align-items: center; gap: 12px; font-size: 19px; line-height: 24px; letter-spacing: -0.025em; }
/* The numbers stand right under the topic's icon, centred on it; the titles start where the topic's name does. */
.topic-card .gm-item .num { width: 40px; text-align: center; }
/* A lesson in a list: its number, its title; one not written yet is muted, with "Soon". */
.gm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.gm-list li { border-top: 1px solid var(--line); }
.gm-list li:first-child { border-top: 0; }
.gm-item { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; font-size: 15px; line-height: 21px; text-decoration: none; color: var(--ink); }
.gm-item .num { flex: none; width: 20px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink3); }
.gm-item .t { position: relative; flex: 1; min-width: 0; text-wrap: balance; } /* a title on two lines: two even lines, no word left alone */
/* A small dot halfway between the number and the title (Maxim, 15 Oct 2026). */
.gm-item .t::before { content: "·"; position: absolute; top: 0; left: -8.4px; transform: translateX(-50%); color: var(--ink3); font-weight: 400; }
/* Measured: halfway between the digits' end and the title's first letter (the guide page's number column is wider). */
.topic-card .gm-item .t::before { left: -12.2px; }
span.gm-item { color: var(--ink3); cursor: default; }
.soon-tag { flex: none; align-self: center; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); background: var(--fieldBg); border-radius: 999px; padding: 3px 8px; }
a.gm-item .t { font-weight: 500; }
a.gm-item[aria-current] { color: var(--ink); }
a.gm-item[aria-current] .num { color: var(--ink); }
/* The lesson you're on is underlined too: a glance finds it in its topic (Maxim, 16 Oct 2026). */
a.gm-item[aria-current] .t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { a.gm-item:hover .t { text-decoration: underline; text-underline-offset: 3px; } }

/* A lesson: the guide's menu at the side (a sheet to open on a phone), the lesson beside it. */
.lesson-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .lesson-grid { grid-template-columns: 292px minmax(0, 1fr); gap: 64px; align-items: start; } }
.lesson-grid > * { min-width: 0; }
.guide-side { display: grid; gap: 10px; }
@media (min-width: 1000px) {
  /* The grey under the lesson's topic starts on the page's line, under the bar's left edge (Maxim, 15 Oct 2026);
     the text sits 16 inside it. */
  .guide-side { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; padding: 0 12px; scrollbar-width: thin; }
}
.gm-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 52px; padding: 0 18px;
  border: 0; border-radius: 26px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left;
  -webkit-tap-highlight-color: transparent; transition: transform 0.25s var(--ease-bounce);
}
.gm-toggle:active { transform: scale(0.98); }
.gm-toggle small { font-weight: 500; color: var(--ink3); }
.gm-toggle .i { color: var(--ink3); transition: transform 0.45s var(--ease-out); }
.guide-side.open .gm-toggle .i { transform: rotate(180deg); }
.gm-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.gm-panel > div { overflow: hidden; min-height: 0; }
.guide-side.open .gm-panel { grid-template-rows: 1fr; }
.gm-topic { padding: 4px; }
.gm-topic + .gm-topic { border-top: 1px solid var(--line); }
/* The topic of the lesson on the page lies on our flat grey, the lines around it hidden under it (Maxim, 15 Oct
   2026); the grey reaches 12 past the text on both sides, so the text stays on the line of the other topics. */
.gm-topic.here { margin: 0 -12px; padding: 4px 16px 6px; border-radius: 20px; background: var(--flat); }
.gm-topic.here, .gm-topic.here + .gm-topic { border-top-color: transparent; }
/* A topic folds under its title; the chevron turns, the lessons slide open and shut. */
.gm-topic .gm-title {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 0; border: 0; background: none;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s;
}
.gm-topic .gm-title span { flex: 1; }
.gm-topic .gm-title .i:last-child { transition: transform 0.45s var(--ease-out), color 0.2s; }
.gm-topic.open .gm-title .i:last-child { transform: rotate(180deg); }
.gm-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); }
.gm-fold > div { overflow: hidden; min-height: 0; }
.gm-topic.open .gm-fold { grid-template-rows: 1fr; }
.gm-topic .gm-list { padding: 2px 0 6px; } /* more air under the title than between the lessons */
.gm-topic .gm-item { font-size: 14px; line-height: 20px; padding: 7px 0; }
@media (hover: hover) and (pointer: fine) { .gm-topic .gm-title:hover, .gm-topic .gm-title:hover .i { color: var(--ink); } }
.gm-topic .gm-list li { border-top: 0; }
@media (min-width: 1000px) {
  .gm-toggle { display: none; }
  .gm-panel { grid-template-rows: 1fr; transition: none; }
  .gm-panel > div { overflow: visible; } /* folding is the phone's: here it would clip the grey under the lesson's topic */
}
@media (max-width: 999px) { .gm-panel > div > .gm-inner { padding: 8px 12px 4px; } }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink3); margin-bottom: 14px; }
.crumbs a { color: var(--ink2); text-decoration: none; }
.crumbs .i { color: var(--ink3); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); } }
.lesson h1 { font-size: clamp(34px, 4.6vw, 48px); line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }
.lesson .lead { margin-top: 16px; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.lesson-meta span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink2); background: var(--fieldBg); }
/* Steps: the number, what to do, and the screen it happens on. */
.lesson-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 56px; }
.lesson-step { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .lesson-step { grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; } }
.lesson-step > * { min-width: 0; }
.lesson-step h2 { display: flex; align-items: baseline; gap: 12px; font-size: 24px; line-height: 30px; letter-spacing: -0.03em; }
.step-n { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 600; color: var(--onInk); background: var(--inkVol); box-shadow: var(--inkVolShadow); transform: translateY(-3px); }
.lesson-step p { margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--ink2); }
.lesson-step p strong { color: var(--ink); font-weight: 600; }
.lesson-step .phone { --w: 240px; margin: 0 auto; }
/* On a phone the screenshot fills the page between its margins (24 each side, centered; Maxim, 16 Oct 2026):
   moni packs a lot into a screen, smaller it can't be read. */
@media (max-width: 759px) { .lesson-step .phone { --w: min(400px, calc(100vw - 48px)); margin: 0 auto; } }
.lesson-tip { display: flex; gap: 12px; margin-top: 18px; padding: 14px 16px; font-size: 14px; line-height: 21px; color: var(--ink2); }
.lesson-tip .i { flex: none; color: var(--ink3); margin-top: 1px; }
.lesson h2.trouble { font-size: 28px; line-height: 34px; letter-spacing: -0.035em; margin: 72px 0 6px; }
.lesson .faq { margin: 18px 0 0; max-width: none; }
.lesson .faq summary { font-size: 17px; padding: 18px 4px; }
/* An answer on a computer is exactly two iPhone lines wide (2 × 319 + its padding): words that end a line well on
   the phone end one well here too. */
@media (min-width: 760px) { .lesson .faq .ans { max-width: 646px; } }
.pager { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 64px; }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager > * { min-width: 0; padding: 18px 20px; display: grid; gap: 4px; text-decoration: none; }
.pager .micro { display: flex; align-items: center; gap: 6px; }
.pager b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pager .next { text-align: right; }
/* On a phone the way on comes first: Next above Previous (Maxim, 15 Oct 2026). */
@media (max-width: 639px) { .pager .next { order: -1; } }
.pager .next .micro { justify-content: flex-end; }
.pager span.next b, .pager span.next .micro { color: var(--ink3); }
/* On every iPhone the lesson's text runs 327 wide, so its lines break the same on all of them and the words are
   written to fill them (no hanging lines, Maxim's rule); on a MacBook the column has one width anyway. */
@media (max-width: 759px) {
  .lesson .lead, .lesson-step > div:first-child, .lesson .faq, .guide-head .lead, .topics + .note { max-width: 327px; }
}