/* Diwy Split landing — one stylesheet, no build step beyond html-minifier.
   Display: Space Grotesk; body: IBM Plex Sans; eyebrows: IBM Plex Mono (self-hosted woff2 subsets, with
   metric-close fallbacks). The page works without JavaScript: the FAQ is <details>, the hero
   reveal and the rotating headline line are CSS animations that degrade to a static page. */
/* Self-hosted fonts (OFL), the same subsets Google Fonts serves, so the page makes no third-party
   request and the two first-screen faces are preloaded from index.html. `block` on those two: the
   text waits the few ms for the preloaded file instead of painting in Arial and swapping. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: block; src: url(fonts/space-grotesk-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: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: block; src: url(fonts/plex-sans-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: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url(fonts/plex-sans-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-mono-400-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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plex-mono-500-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; }
:root {
  --paper: #fffcf9; --surface: #fff5f0; --ink: #1d262b; --muted: #5f6b73; --line: #e9e2dc;
  --brand: #f15b41; --brand-deep: #c9432b; --brand-soft: #ffe9e3;
  --action: #087bb5; --action-soft: #e9f4fa;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--action); text-decoration: none; } a:hover { color: #065f8c; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 4.7vw, 70px); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: 48px; line-height: 1.05; }
h3 { font-size: 22px; line-height: 1.25; }
p { margin: 0; }
.shell { width: min(1240px, 100% - 80px); margin: 0 auto; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-deep); }
.lead { font-size: 20px; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: 14px; background: var(--action); color: #fff; font-weight: 600; font-size: 17px; }
.btn:hover { color: #fff; background: #066a9c; }
.btn svg { width: 18px; height: 18px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.section { padding-block: 0 112px; } #how { padding-top: 112px; } .section.last { padding-bottom: 24px; }
.chap b { font-weight: inherit; } .chap b::after { content: " / "; }
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mark { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--display); }
.anna { background: #fce4de; color: #ac533c; } .ben { background: #e3eafc; color: #526fab; } .max { background: #ddefe9; color: #42785e; } .leo { background: #f8edd7; color: #966f2c; } .mia { background: #f0e1f3; color: #925799; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.tilt-l { transform: rotate(-2deg); } .tilt-r { transform: rotate(1.5deg); }

/* rotating context line in the headline (Splitwise-style): pure CSS, 4 words × 2.6 s */
.roll { display: inline-grid; vertical-align: top; color: var(--muted); }
.roll span { grid-area: 1 / 1; opacity: 0; animation: roll 24s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; white-space: nowrap; }
.roll span:first-child { opacity: 1; }
.roll span:nth-child(2) { animation-delay: 6s; } .roll span:nth-child(3) { animation-delay: 12s; } .roll span:nth-child(4) { animation-delay: 18s; }
@keyframes roll { 0% { opacity: 0; transform: translateY(0.35em); } 6% { opacity: 1; transform: none; } 21% { opacity: 1; transform: none; } 27% { opacity: 0; transform: translateY(-0.35em); } 100% { opacity: 0; transform: translateY(-0.35em); } }
@media (prefers-reduced-motion: reduce) { .roll span { animation: none; } }
.dot { display: none; }
.reveal { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal.d2 { animation-delay: 0.12s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 24px; color: var(--ink); white-space: nowrap; }
.logo b { font-weight: 700; } .logo span { font-weight: 500; }
.beta { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--brand-deep); background: var(--brand-soft); padding: 3px 8px; border-radius: 6px; margin-left: 2px; }
.navlinks { display: flex; align-items: center; gap: 28px; font-weight: 500; }
.navlinks a { color: var(--ink); }
.navlinks .cta { color: var(--action); font-weight: 600; white-space: nowrap; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(256px, 1fr) auto; gap: 32px; align-items: start; padding-block: 24px 72px; min-height: min(calc(100svh - 84px), 900px); }
.hero-copy { display: flex; flex-direction: column; gap: 24px; padding-top: clamp(16px, 7vh, 72px); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--action); }
.hero h1 .hi { color: var(--brand); }
.lead-short { display: none; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-note { font-size: 15px; color: var(--muted); }
.stage { position: relative; margin: 0; width: calc(390px + var(--stage-air)); --stage-air: clamp(16px, calc((100vw - 780px) * 0.32), 190px); padding: 28px var(--stage-air) 24px 0; isolation: isolate; }
.stage-bg { position: absolute; inset: 16px -80px 28px 40px; background: var(--brand-soft); border-radius: 36px; z-index: -2; }
.stage-word { position: absolute; right: -60px; top: 90px; z-index: -1; writing-mode: vertical-rl; font-family: var(--display); font-weight: 700; font-size: 104px; line-height: 0.9; letter-spacing: -0.04em; color: #ffd3c7; white-space: pre; user-select: none; }
.stage-note { position: relative; display: flex; align-items: center; justify-content: flex-start; padding-left: 8px; gap: 10px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.friends { display: flex; } .friends .avatar { margin-left: -6px; border: 2px solid #fff; width: 26px; height: 26px; font-size: 11px; }
.tg { position: relative; width: 390px; background: #fff; border-radius: 30px; box-shadow: 0 24px 60px rgba(29,38,43,0.16); transform: rotate(-2deg); overflow: hidden; font-size: 13px; }
.tg-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #eef0f2; }
.tg-head strong { display: block; font-size: 15px; } .tg-head small { color: var(--muted); font-size: 12px; }
.tg-body { background: #eaf1f8; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 6px; line-height: 1.3; }
.tg-date { align-self: center; background: rgba(0,0,0,0.08); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: #4a5560; }
.row { display: flex; gap: 8px; align-items: flex-end; } .row.out { justify-content: flex-end; }
.bubble { background: #fff; border-radius: 16px; padding: 7px 11px; max-width: 84%; position: relative; }
.bubble.out { background: #e3f7cf; }
.bubble .who { display: block; font-weight: 600; font-size: 13px; color: #925799; }
.bubble .time { display: block; text-align: right; font-size: 11px; color: #8a949c; margin-top: 1px; }
.paper { background: #fdfaf0; border-radius: 6px; padding: 9px 12px; font-family: var(--mono); font-size: 11px; line-height: 1.3; color: #333; transform: rotate(-1.2deg); box-shadow: 0 2px 6px rgba(0,0,0,0.08); margin-bottom: 8px; }
.paper strong { display: block; text-align: center; font-size: 12px; letter-spacing: 0.06em; margin-bottom: 3px; }
.paper .l { display: flex; justify-content: space-between; gap: 12px; } .paper .tot { border-top: 1px dashed #999; margin-top: 4px; padding-top: 4px; font-weight: 600; font-size: 12px; }
.mention { color: var(--action); }
.bot { width: 68%; padding: 8px 12px 0; }
.bot .who { color: var(--brand-deep); } .bot .who small { color: var(--muted); font-weight: 400; font-size: 13px; }
.quote { display: flex; flex-direction: column; border-left: 3px solid var(--action); background: #eaf4fb; border-radius: 6px; padding: 3px 8px; margin: 3px 0 6px; font-size: 12.5px; line-height: 1.3; }
.quote b { color: var(--action); font-weight: 600; }
.bot .totals { display: flex; flex-direction: column; gap: 0; margin: 8px 0; font-size: 13px; }
.bot .totals a { color: var(--action); }
.bot .open { display: flex; justify-content: center; align-items: center; gap: 6px; border-top: 1px solid #e3e8ec; margin: 4px -12px 0; padding: 8px; color: var(--action); font-weight: 600; }
.composer { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: #8a949c; }
.composer span { flex: 1; border: 1px solid #e3e8ec; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
/* the stage is ~900px tall at zoom 1; on a laptop it is scaled so the whole first screen — headline, button and the chat — sits above the fold. Plain height steps (each ≈ (height − 124) / 896): WebKit passes @supports for the trig form but evaluates it wrong, so the ratio is stepped in every engine alike. */
@media (min-width: 761px) {
  @media (max-height: 1020px) { .stage { zoom: 0.96; } }
  @media (max-height: 980px) { .stage { zoom: 0.92; } }
  @media (max-height: 940px) { .stage { zoom: 0.88; } }
  @media (max-height: 900px) { .stage { zoom: 0.84; } }
  @media (max-height: 860px) { .stage { zoom: 0.8; } }
  @media (max-height: 820px) { .stage { zoom: 0.75; } }
  @media (max-height: 780px) { .stage { zoom: 0.71; } }
  @media (max-height: 740px) { .stage { zoom: 0.66; } }
  @media (max-height: 700px) { .stage { zoom: 0.62; } }
}

/* strip */
.strip { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 18px; font-size: 15px; font-weight: 500; }
.strip span { display: inline-flex; align-items: center; gap: 10px; } .strip .icon { color: var(--brand); }

/* steps */
.heading { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 14px; }
.step .num { font-family: var(--mono); font-size: 13px; color: var(--brand-deep); }
.step .art { height: 150px; border-radius: 18px; background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 14px; }
.step p { color: var(--muted); font-size: 15px; }
.mini { background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(29,38,43,0.10); padding: 10px 12px; font-size: 12px; width: 100%; max-width: 200px; }
.mini .l { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; }
.mini .l + .l { border-top: 1px solid #f0ece8; }
.mini b { font-weight: 600; } .mini .c { color: var(--action); }

/* walkthrough */
.walk { display: grid; grid-template-columns: 1fr 390px; gap: 96px; align-items: start; }
.walk-copy { position: sticky; top: 96px; padding-top: 40px; }
.walk-phone { margin: 0; display: flex; flex-direction: column; gap: 14px; }
/* the phone is shown mid-scroll: the header is pinned, the list has moved up to the part that matters */
.walk-phone .app-bar { position: relative; z-index: 1; box-shadow: 0 1px 0 #e5e5ea; }
.walk-phone .scrolled { overflow: hidden; }
.walk-phone .scrolled .app-in { transform: translateY(-262px); margin-bottom: -262px; }
.walk-copy { display: flex; flex-direction: column; gap: 24px; }
.callout { display: flex; gap: 14px; padding: 20px 22px; border-radius: 20px; background: var(--brand-soft); transform: rotate(-1deg); }
.callout .avatar { flex: none; width: 36px; height: 36px; }
.callout p { font-size: 13px; color: var(--brand-deep); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.callout strong { display: block; font-family: var(--display); font-size: 20px; margin: 4px 0; }
.callout span { font-size: 15px; color: var(--muted); }
.app { width: 390px; background: #f2f2f7; border-radius: 30px; box-shadow: 0 24px 60px rgba(29,38,43,0.14); overflow: hidden; font-size: 14px; }
.list .it.un { color: #e5352b; } .list .it.un .q { border: 1.5px dashed #e5352b; color: #e5352b; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.app-tools { display: flex; justify-content: space-around; padding: 10px 24px 4px; color: #6f7a82; }
.app-tools .icon { width: 20px; height: 20px; }
.app-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #fff; }
.app-bar span { color: var(--action); } .app-bar strong { text-align: center; font-size: 15px; } .app-bar small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.app-in { padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.app-in h4 { margin: 0; font-family: var(--display); font-size: 24px; } .app-in .meta { font-size: 13px; color: var(--muted); } .app-in .meta b { color: var(--ink); }
.pill { display: flex; justify-content: space-between; background: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 500; }
.pill span { color: var(--brand-deep); }
.list { background: #fff; border-radius: 14px; overflow: hidden; }
.list .hd { display: grid; grid-template-columns: 1fr 44px 76px; padding: 8px 14px; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; }
.list .it { display: grid; grid-template-columns: 1fr 44px 76px; padding: 9px 14px; border-top: 1px solid #f0f0f2; align-items: center; }
.list .it small { display: block; font-size: 12px; color: var(--muted); } .list .it small.mine { color: var(--action); }
.list .it .q { text-align: center; color: var(--muted); } .list .it .p { text-align: right; }
.list .it.done .n { text-decoration: line-through; color: var(--muted); }
.list .sum { display: flex; justify-content: space-between; padding: 9px 14px; border-top: 1px solid #f0f0f2; color: var(--muted); font-size: 13px; }
.list .tot { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px dashed #d8d8dc; font-weight: 600; font-size: 16px; }
.people .it { grid-template-columns: 28px 1fr auto; gap: 10px; }
.people .it.me span { color: var(--action); } .people .p { font-weight: 600; }
.app figcaption { text-align: center; font-size: 14px; color: var(--muted); margin-top: 18px; }

/* cases */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.case { min-width: 0; }
.case { display: flex; flex-direction: column; gap: 18px; padding: 28px 26px 26px; border-radius: 24px; background: var(--surface); }
.case:nth-child(2) { background: var(--action-soft); } .case:nth-child(3) { background: #f3f7f5; }
.case .art { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.case p { color: var(--muted); font-size: 15px; }
.case .fine { font-size: 13px; color: var(--muted); border-top: 1px solid rgba(0,0,0,0.08); padding-top: 12px; }
.order { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 22px rgba(29,38,43,0.10); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; min-width: 110px; }
.order strong { font-family: var(--display); font-size: 20px; }
.neq { font-family: var(--display); font-size: 26px; color: var(--muted); }
.share { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 22px rgba(29,38,43,0.10); width: 100%; max-width: 250px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.share .l { display: flex; align-items: center; gap: 8px; } .share .l b { margin-left: auto; font-weight: 600; }
.share .hd { display: flex; justify-content: space-between; font-weight: 600; border-bottom: 1px solid #f0ece8; padding-bottom: 6px; }
.tr { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 22px rgba(29,38,43,0.10); width: 100%; max-width: 250px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.tr small { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.tr .l { display: flex; justify-content: space-between; } .tr .arrow { text-align: center; color: var(--action); padding: 2px 0; }

/* world */
.world { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.world article { min-width: 0; }
.world article { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 24px; }
.world .langs { background: var(--action-soft); } .world .cur { background: var(--brand-soft); }
.kicker { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 500; }
.cursyms { display: flex; gap: 26px; overflow: hidden; margin-right: -32px; padding-right: 32px; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.cursyms span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); flex: none; }
.cursyms b { font-family: var(--display); font-size: 56px; line-height: 1; color: var(--brand); }
.world p { color: var(--muted); font-size: 15px; }

/* features */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.feat { display: flex; flex-direction: column; gap: 12px; }
.feat .ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-deep); }
.feat:nth-child(even) .ico { background: var(--action-soft); color: var(--action); }
.feat p { color: var(--muted); font-size: 15px; }

/* accuracy */
.accuracy { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; padding: 48px; border-radius: 28px; background: var(--ink); color: #fff; }
.accuracy .eyebrow { color: #ffb2a3; } .accuracy p { color: #c7ced3; }
.receipt-sym { position: relative; width: 170px; height: 190px; margin: 0 auto; background: #fdfaf0; border-radius: 8px; transform: rotate(-6deg); box-shadow: 0 20px 40px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
.receipt-sym .icon { width: 56px; height: 56px; color: #8a8f94; }
.receipt-sym .ok { position: absolute; right: -18px; bottom: -14px; width: 52px; height: 52px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; color: #fff; transform: rotate(6deg); }
.receipt-sym .ok .icon { width: 24px; height: 24px; color: #fff; }

/* about + facts */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.about-copy { display: flex; flex-direction: column; gap: 18px; }
.about-copy p { color: var(--muted); }
.facts { overflow: hidden; }
.facts .r { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); font-size: 15px; }
.facts .r:first-child { border-top: 0; } .facts .r span { color: var(--muted); }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; }
.faq-list { display: flex; flex-direction: column; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 18px; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .plus { font-family: var(--display); font-size: 24px; color: var(--brand); transition: transform 0.2s; }
.faq-list details[open] .plus { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 20px; color: var(--muted); max-width: 60ch; }

/* final */
.final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 96px 40px; border-radius: 32px; background: var(--brand-soft); }
.final h2 { font-size: 72px; } .final h2 span { color: var(--brand); }
.final .friends .avatar { width: 40px; height: 40px; font-size: 15px; margin-left: -10px; }
.final small { color: var(--muted); font-size: 14px; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 32px 48px; font-size: 14px; color: var(--muted); }
.footer .links { display: flex; gap: 22px; } .footer .links a { color: var(--ink); }

/* tablets and narrow windows (761–1100): the hero stacks, four-up grids become two-up, side-by-side pairs stack */
@media (max-width: 1100px) and (min-width: 761px) {
  .steps, .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .walk { grid-template-columns: 1fr 390px; gap: 56px; }
  .about, .faq { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1000px) and (min-width: 761px) { .stage-word { display: none; } }
/* below 1040 the button and «See how it works» would wrap: the copy becomes a two-column grid — the button spans it, the note and the link share the row under it. On tablets the button keeps its own width and the row packs to the left edge; on phones (below) the button fills the column and the link sits at its right edge */
@media (max-width: 1040px) {
  .hero-copy { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; }
  .hero-copy > * { grid-column: 1 / -1; }
  .hero-actions { display: contents; }
  .hero-copy .btn { grid-column: 1 / -1; justify-self: start; }
  .hero-note { grid-column: 1; grid-row: 5; align-self: center; margin-top: -4px; }
  .hero-actions .textlink { grid-column: 2; grid-row: 5; justify-self: start; align-self: center; font-size: 15px; white-space: nowrap; margin-top: -4px; color: var(--muted); font-weight: 500; }
}
/* the walkthrough from 640 to 1000: copy in two columns, then the bill laid out wide — receipt left, payers right */
@media (max-width: 1000px) and (min-width: 640px) {
  .walk { grid-template-columns: 1fr; gap: 32px; }
  .walk-copy { position: static; padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; align-items: start; }
  .walk-copy .eyebrow, .walk-copy h2 { grid-column: 1 / -1; }
  .walk-copy .lead { grid-column: 1; }
  .walk-copy .callout { grid-column: 2; grid-row: 3 / 5; transform: none; }
  .walk-copy .textlink { grid-column: 1; }
  .walk-phone { width: 100%; }
  .walk-phone .app { width: 100%; }
  .walk-phone .app-bar { display: none; }
  .walk-phone .scrolled .app-in { transform: none; margin-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding: 16px; }
  .walk-phone .app-in > div:first-child, .walk-phone .app-in .pill { grid-column: 1 / -1; }
  .walk-phone .app-in .list:not(.people) { grid-column: 1; grid-row: 3 / 6; }
  .walk-phone .app-in > div:nth-child(4) { grid-column: 2; grid-row: 3; }
  .walk-phone .app-in .people { grid-column: 2; grid-row: 4; }
  .walk-phone .app-tools { grid-column: 2; grid-row: 5; align-self: end; }
  .cases { grid-template-columns: 1fr; }
  .case { display: grid; grid-template-columns: 300px 1fr; column-gap: 32px; align-items: center; }
  .case .art { min-height: 0; grid-row: 1 / 4; }
  .accuracy { grid-template-columns: 1fr; padding: 40px 32px; gap: 32px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .world { grid-template-columns: 1fr; }
  h2 { font-size: 40px; }
  .section { padding-bottom: 88px; } #how { padding-top: 88px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .shell { width: min(1240px, 100% - 40px); }
  h1 { font-size: clamp(40px, 6.2vw, 56px); line-height: 1.06; } h2 { font-size: 34px; } .final h2 { font-size: 44px; }
  .lead { font-size: 16px; }
  .section { position: relative; padding-block: 56px; }
  .section::before { content: ""; position: absolute; top: 0; left: -20px; right: -20px; height: 1px; background: var(--line); }
  #how::before { display: none; }
  .heading { margin-bottom: 32px; }
  /* chapter opener: a short rule, the number large, the label, then the h2 */
  .chap { display: block; }
  .chap::before { content: ""; display: block; width: 44px; height: 3px; background: var(--brand); margin-bottom: 16px; }
  .chap b { display: block; font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 0.9; letter-spacing: -0.04em; color: var(--brand); margin-bottom: 8px; } .chap b::after { content: none; }
  .navlinks a:not(.cta) { display: none; }
  /* a calmer first screen: no eyebrow, no Beta tag, the headline in two colours, a one-sentence lead, the scroll link as a caption, the chat without its own caption strip */
  .logo { font-size: 20px; gap: 8px; } .logo .mark { width: 28px; height: 28px; } .logo .beta { display: none; }
  .hero-eyebrow { display: none; } .hero h1 .roll { color: var(--ink); }
  .lead-long { display: none; } .lead-short { display: inline; }
  .stage-note, .stage-word { display: none; }
  .hero { grid-template-columns: 1fr; gap: 24px; padding-block: 16px 56px; min-height: 0; }
  .hero-copy { grid-template-columns: 1fr auto; gap: 18px 16px; padding-top: 0; }
  .hero-copy .btn { justify-self: stretch; justify-content: center; }
  .hero-actions .textlink { justify-self: end; }
  .stage { width: min(100%, 440px); margin-inline: auto; padding: 12px 0 20px; } .stage-bg { inset: 0 -20px 30px 12px; border-radius: 24px; background: #fff4ef; } .tg { width: 100%; transform: rotate(-1deg); }
  .app { width: min(100%, 420px); margin-inline: auto; }
  .bubble { max-width: 88%; } .bot { max-width: 92%; }
  .strip { flex-direction: column; gap: 12px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 26px 0; border-top: 1px solid var(--line); gap: 12px; } .step:first-child { border-top: 0; padding-top: 0; } .step:last-child { padding-bottom: 0; }
  .step .art { height: 136px; }
  .walk-copy { padding-top: 0; }
  .walk { grid-template-columns: 1fr; gap: 28px; } .walk-copy { position: static; }
  .cases, .world, .features { grid-template-columns: 1fr; }
  .case { padding: 24px 22px 22px; gap: 14px; }
  .world article { padding: 24px; } .cursyms { margin-right: -24px; padding-right: 24px; }
  .features { gap: 22px; } .feat { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 4px; } .feat .ico { grid-row: 1 / 3; } .feat h3 { font-size: 19px; }
  .accuracy { grid-template-columns: 1fr; padding: 40px 28px; gap: 40px; }
  .about, .faq { grid-template-columns: 1fr; gap: 28px; }
  .facts .r { grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 18px; }
  .faq-list div { padding: 14px 0; font-size: 17px; }
  .final { padding: 64px 24px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* wide phones and small tablets in portrait (560–760): phone-sized illustrations, but two-up grids and a horizontal strip */
@media (max-width: 760px) and (min-width: 560px) {
  .steps, .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { gap: 28px; } .step { border-top: 0; padding: 0; }
  .strip { flex-direction: row; flex-wrap: wrap; gap: 12px 32px; }
  .case { display: grid; grid-template-columns: 240px 1fr; column-gap: 28px; align-items: center; }
  .case .art { min-height: 0; grid-row: 1 / 4; }
  .facts .r { grid-template-columns: 130px 1fr; gap: 16px; }
}
@media (max-width: 340px) { h1 { font-size: 33px; } }
@media (max-width: 380px) { .navlinks .cta { font-size: 15px; } .case { padding: 24px 18px 22px; } .case .art { gap: 8px; } .order { min-width: 0; padding: 10px 10px; } }