/* TallyMate website. One stylesheet for every page (also restyles /privacy, /terms, /stats and /support).
   System fonts only, no external files. Light by default, dark by system setting or the theme button. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #e2e2e7;
  --card: #f5f5f7;
  --card-2: #ffffff;
  --card-line: rgba(0, 0, 0, 0.06);
  --accent: #047857;
  --accent-2: #0b9a6d;
  --accent-soft: rgba(4, 120, 87, 0.10);
  --accent-text: #ffffff;
  --ink: #1d1d1f;
  --ink-text: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.78);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 48px -18px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.35);
  --glow: none;
  --ok: #15803d;
  --view: #0A84FF;
  --pw: #1d1d1f;
  --req: #e8590c;
  --hid: #d70015;
  --ok-text: #15803d;
  --view-text: #0062cc;
  --req-text: #c2410c;
  --hid-text: #d70015;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --radius: 22px;
  --radius-sm: 14px;
  --gutter: 24px;
  --header-h: 52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #0b0b0d;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --line: #2a2a2e;
  --card: #111113;
  --card-2: #161618;
  --card-line: rgba(255, 255, 255, 0.08);
  --accent: #34d399;
  --accent-2: #6ee7b7;
  --accent-soft: rgba(52, 211, 153, 0.12);
  --accent-text: #00140d;
  --ink: #f5f5f7;
  --ink-text: #000000;
  --header-bg: rgba(10, 10, 12, 0.72);
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 120px -40px rgba(52, 211, 153, 0.25);
  --glow: 0 0 80px -10px rgba(52, 211, 153, 0.25);
  --ok: #30d158;
  --view: #0A84FF;
  --pw: #f5f5f7;
  --req: #ff9f0a;
  --hid: #ff453a;
  --ok-text: #30d158;
  --view-text: #409cff;
  --req-text: #ff9f0a;
  --hid-text: #ff6961;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #0b0b0d;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --line: #2a2a2e;
  --card: #111113;
  --card-2: #161618;
  --card-line: rgba(255, 255, 255, 0.08);
  --accent: #34d399;
  --accent-2: #6ee7b7;
  --accent-soft: rgba(52, 211, 153, 0.12);
  --accent-text: #00140d;
  --ink: #f5f5f7;
  --ink-text: #000000;
  --header-bg: rgba(10, 10, 12, 0.72);
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 120px -40px rgba(52, 211, 153, 0.25);
  --glow: 0 0 80px -10px rgba(52, 211, 153, 0.25);
  --ok: #30d158;
  --view: #0A84FF;
  --pw: #f5f5f7;
  --req: #ff9f0a;
  --hid: #ff453a;
  --ok-text: #30d158;
  --view-text: #409cff;
  --req-text: #ff9f0a;
  --hid-text: #ff6961;
}
/* Parts of the page that are always dark (the home hero), whatever the theme. */
.zone-dark {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #0b0b0d;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --line: #2a2a2e;
  --card: #111113;
  --card-2: #161618;
  --card-line: rgba(255, 255, 255, 0.08);
  --accent: #34d399;
  --accent-2: #6ee7b7;
  --accent-soft: rgba(52, 211, 153, 0.12);
  --accent-text: #00140d;
  --ink: #f5f5f7;
  --ink-text: #000000;
  --header-bg: rgba(10, 10, 12, 0.72);
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 120px -40px rgba(52, 211, 153, 0.25);
  --glow: 0 0 80px -10px rgba(52, 211, 153, 0.25);
  --ok: #30d158;
  --view: #0A84FF;
  --pw: #f5f5f7;
  --req: #ff9f0a;
  --hid: #ff453a;
  --ok-text: #30d158;
  --view-text: #409cff;
  --req-text: #ff9f0a;
  --hid-text: #ff6961;

  background: #030304;
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }
img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
main a:not([class]) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--ink-text); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 10px; }

/* ---------- Layout ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap.wide, .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: 900px; }
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section.tight { padding: clamp(56px, 7vw, 96px) 0; }
.section.alt { background: var(--bg-2); }
.center { text-align: center; }
.measure { max-width: 65ch; }
.center .measure, .center.measure { margin-left: auto; margin-right: auto; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--text); }
.display { font-size: clamp(46px, 8.2vw, 96px); line-height: 1.02; letter-spacing: -0.04em; }
.title { font-size: clamp(36px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -0.035em; }
.title-sm { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.eyebrow { display: inline-block; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--accent); margin: 0 0 14px; }
.lede { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.45; color: var(--muted); margin: 22px 0 0; max-width: 46ch; letter-spacing: -0.01em; }
.center .lede { margin-left: auto; margin-right: auto; }
.lede b, .lede strong { color: var(--text); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.grad { background: linear-gradient(100deg, var(--text) 10%, var(--accent-2) 60%, #60a5fa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { margin: 0 0 14px; }

/* ---------- Buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--ink-text); border: 0; border-radius: 980px; padding: 12px 22px; font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.accent { background: var(--accent); color: var(--accent-text); }
.btn svg { width: 18px; height: 18px; }
.link-more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 18px; }
.link-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-more svg { width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.center .actions { justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 980px; font-size: 14px; font-weight: 600; background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--card-line); white-space: nowrap; }
.pill.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.plat { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 980px; background: var(--accent-soft); color: var(--accent); }
.dark-zone-text { color: #f5f5f7; }

/* ---------- Header ---------- */
header.top { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
header.top a.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; flex: none; }
header.top a.brand img { width: 28px; height: 28px; border-radius: 7px; }
header.top nav { margin-left: auto; display: flex; gap: 22px; font-size: 14px; align-items: center; }
header.top nav a { text-decoration: none; color: var(--muted); transition: color .2s; }
header.top nav a:hover, header.top nav a[aria-current] { color: var(--text); }
.icon-btn { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--text); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--card); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
.menu-btn { display: none; }
.menu-btn .i-close { display: none; }
header.top.open .menu-btn .i-close { display: block; }
header.top.open .menu-btn .i-menu { display: none; }
header.top nav.site-nav + .theme-btn { margin-left: 4px; }
@media (max-width: 820px) {
  header.top nav.site-nav { position: absolute; left: 0; right: 0; top: var(--header-h); margin: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 18px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 30px 40px -30px rgba(0,0,0,.35); display: none; }
  header.top.open nav.site-nav { display: flex; }
  header.top nav.site-nav a { font-size: 22px; font-weight: 600; color: var(--text); padding: 12px 0; border-bottom: 1px solid var(--line); letter-spacing: -0.01em; }
  header.top nav.site-nav a:last-child { border-bottom: 0; }
  header.top nav.site-nav + .theme-btn { margin-left: auto; }
  .menu-btn { display: inline-grid; }
}

/* ---------- Footer ---------- */
footer.bottom { border-top: 1px solid var(--line); padding: 28px 0 44px; font-size: 14px; color: var(--muted); background: var(--bg-2); }
footer.bottom a { color: var(--muted); margin-right: 16px; text-decoration: none; }
footer.bottom a:hover { color: var(--text); text-decoration: underline; }
footer.bottom p { margin: 10px 0 0; }
.foot-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.foot-grid .foot-links { display: flex; flex-wrap: wrap; gap: 8px 0; }
.foot-grid .foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); margin-right: 8px; }
.foot-grid .foot-brand img { width: 22px; height: 22px; border-radius: 6px; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.foot-note { margin-top: 10px; font-size: 13px; max-width: 80ch; }

/* ---------- Plain text pages (privacy, terms, support, stats) ---------- */
main { padding: 48px 0 80px; display: block; }
main.page { padding: 0; }
/* :where() keeps these weak, so page styles (like the stats panels) still win, as with the old stylesheet. */
:where(main > .wrap > h1, main > .wrap > article > h1) { font-size: clamp(36px, 6vw, 56px); line-height: 1.05; margin: 12px 0 10px; letter-spacing: -0.035em; }
:where(main > .wrap) h2 { font-size: 24px; line-height: 1.25; margin: 44px 0 10px; letter-spacing: -0.015em; }
:where(main > .wrap) h3 { font-size: 19px; margin: 28px 0 6px; letter-spacing: -0.01em; }
:where(main > .wrap) :where(p, li) { margin: 0 0 12px; }
:where(main > .wrap) ul { padding-left: 22px; }
ol.clauses { padding-left: 24px; }
ol.clauses li { margin-bottom: 20px; }
ol.clauses li b { display: block; }
.hero-plain { padding: clamp(56px, 8vw, 110px) 0 clamp(36px, 5vw, 64px); }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; } .js .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 104px); }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background:
    radial-gradient(40% 38% at 30% 34%, rgba(47, 91, 216, 0.30), transparent 70%),
    radial-gradient(42% 40% at 70% 40%, rgba(52, 211, 153, 0.22), transparent 70%),
    radial-gradient(60% 30% at 50% 62%, rgba(255, 140, 90, 0.08), transparent 70%); }
.hero > * { position: relative; }
.hero > .container { width: 100%; }
.lede.center { margin-left: auto; margin-right: auto; }
.hero-copy .actions, .cta .actions { justify-content: center; }
.hero-copy { text-align: center; margin-top: clamp(28px, 4vw, 48px); }
.hero-brand { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.01em; color: #f5f5f7; }
.hero-brand img { width: clamp(44px, 5vw, 60px); height: auto; border-radius: 22%; box-shadow: 0 10px 40px -8px rgba(47, 91, 216, 0.7); }
.hero h1 { margin-top: 18px; color: #f5f5f7; }
.hero h1 .grad { background: linear-gradient(95deg, #ffffff 0%, #a7f3d0 45%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { color: #a1a1a6; max-width: 40ch; }
.hero .lede b { color: #f5f5f7; }
.platform-row { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; font-size: 16px; color: #d2d2d7; }
.platform-row .names { font-weight: 600; color: #f5f5f7; letter-spacing: 0.01em; }
.platform-row .sep { color: #6e6e73; }

/* ---------- Big numbers ---------- */
.numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numbers .n { padding: 36px 20px; border-right: 1px solid var(--line); }
.numbers .n:last-child { border-right: 0; }
.numbers .big { font-size: clamp(44px, 5.4vw, 72px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.numbers .big small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 2px; }
.numbers .lab { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.35; }
.numbers .lab b { color: var(--text); font-weight: 600; }
@media (max-width: 980px) { .numbers { grid-template-columns: repeat(2, 1fr); } .numbers .n { border-bottom: 1px solid var(--line); } .numbers .n:nth-child(2n) { border-right: 0; } .numbers .n:last-child { grid-column: 1 / -1; border-bottom: 0; } }

/* ---------- Cards and bento ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 32px; box-shadow: inset 0 0 0 1px var(--card-line); position: relative; overflow: hidden; }
.section.alt .card { background: var(--card-2); box-shadow: var(--shadow); }
.card h3 { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; letter-spacing: -0.025em; }
.card p { color: var(--muted); margin-top: 10px; font-size: 17px; }
.card .eyebrow { font-size: 14px; margin-bottom: 8px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 56px; }
.bento .card { display: flex; flex-direction: column; min-height: 300px; }
.bento .s2 { grid-column: span 2; } .bento .s3 { grid-column: span 3; } .bento .s4 { grid-column: span 4; } .bento .s6 { grid-column: span 6; }
.bento .shot { margin-top: auto; padding-top: 26px; }
.shot-desk { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--card-line), 0 20px 50px -24px rgba(0,0,0,.45); }
.shot-desk img { width: 100%; }
.shot-crop-phone { height: 340px; overflow: hidden; margin: 26px auto -32px; width: min(260px, 80%); }
.shot-crop-phone .mini-phone { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 980px) { .bento .s2, .bento .s3, .bento .s4 { grid-column: span 3; } }
@media (max-width: 680px) { .bento { grid-template-columns: 1fr; } .bento .s2, .bento .s3, .bento .s4, .bento .s6 { grid-column: auto; } .card { padding: 26px 22px; } }

/* Phone frame for screenshots outside the hero */
.mini-phone { background: #0d0d10; border-radius: 38px; padding: 8px; box-shadow: inset 0 0 0 2px #3c3c42, var(--shadow-lg); }
.mini-phone.light { background: #e9e9ee; box-shadow: inset 0 0 0 2px #c9c9cf, var(--shadow-lg); }
.mini-phone .screen { border-radius: 31px; overflow: hidden; aspect-ratio: 600 / 1333; background: #111; }
.mini-phone .screen img { width: 100%; height: 100%; object-fit: cover; }
/* Desktop window frame outside the hero */
.mini-desk { border-radius: 14px; overflow: hidden; background: #0c0c0e; padding: 6px; box-shadow: inset 0 0 0 1px #3a3a40, var(--shadow-lg); }
.mini-desk .screen { border-radius: 9px; overflow: hidden; }
.mini-desk img { width: 100%; }

/* ---------- Day teaser (home) ---------- */
.day-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; counter-reset: step; }
.day-strip li { list-style: none; background: var(--card); border-radius: var(--radius-sm); padding: 20px 18px 22px; box-shadow: inset 0 0 0 1px var(--card-line); }
.day-strip li .t { font-size: 13px; font-weight: 600; color: var(--accent); }
.day-strip li b { display: block; font-size: 19px; margin-top: 6px; letter-spacing: -0.015em; line-height: 1.2; }
.day-strip li span { display: block; color: var(--muted); font-size: 15px; margin-top: 6px; line-height: 1.4; }
.day-strip { padding: 0; }
@media (max-width: 980px) { .day-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .day-strip { grid-template-columns: 1fr; } }

/* ---------- Two-column feature rows ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.rev > :first-child { order: 2; }
@media (max-width: 860px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--muted); font-size: 17px; line-height: 1.45; }
.ticks li b { color: var(--text); font-weight: 600; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); }
.ticks li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 4px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Light & dark showcase ---------- */
.compare-wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 7vw, 110px); align-items: center; margin-top: 56px; }
@media (max-width: 860px) { .compare-wrap { grid-template-columns: 1fr; justify-items: center; } }
.compare { position: relative; width: min(330px, 78vw); --pos: 50%; }
.compare .screen { position: relative; }
.compare .layer { position: absolute; inset: 0; }
.compare .layer img { width: 100%; height: 100%; object-fit: cover; }
.compare .layer.dark { clip-path: inset(0 0 0 var(--pos)); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 20px rgba(52, 211, 153, .8); pointer-events: none; }
.compare .handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 22px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; touch-action: pan-y; }
.compare:focus-within .handle::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.compare-labels { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 14px; padding: 0 6px; }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 980px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.tabs button { font: inherit; font-size: 15px; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 8px 16px; border-radius: 980px; cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--ink-text); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.swatch i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(128,128,128,.4); }

/* ---------- Access chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border-radius: 980px; font-size: 18px; font-weight: 600; background: var(--card-2); box-shadow: inset 0 0 0 1.5px var(--c), 0 10px 30px -18px var(--c); color: var(--text); }
.chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.chip.ok { --c: var(--ok); } .chip.view { --c: var(--view); } .chip.pw { --c: var(--pw); } .chip.req { --c: var(--req); } .chip.hid { --c: var(--hid); }
.chip-desc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 28px; }
.chip-desc div { background: var(--card); border-radius: var(--radius-sm); padding: 18px; box-shadow: inset 0 0 0 1px var(--card-line); border-top: 3px solid var(--c); }
.chip-desc b { display: block; font-size: 17px; }
.chip-desc span { display: block; color: var(--muted); font-size: 15px; margin-top: 4px; line-height: 1.4; }
.chip-desc .ok { --c: var(--ok); } .chip-desc .view { --c: var(--view); } .chip-desc .pw { --c: var(--pw); } .chip-desc .req { --c: var(--req); } .chip-desc .hid { --c: var(--hid); }
@media (max-width: 980px) { .chip-desc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .chip-desc { grid-template-columns: 1fr; } .chip { font-size: 16px; padding: 10px 16px 10px 14px; } }
.access-panel { background: var(--card-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 0; max-width: 520px; width: 100%; }
.section:not(.alt) .access-panel { background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.access-panel .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--line); font-size: 16px; }
.access-panel .row:last-child { border-bottom: 0; }
.access-panel .row .lv { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--c); white-space: nowrap; }
.access-panel .row .lv i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.access-panel .head { padding: 12px 22px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.access-panel .head b { font-size: 18px; }
.access-panel .head span { font-size: 14px; color: var(--muted); }
.lv.ok { --c: var(--ok-text); } .lv.view { --c: var(--view-text); } .lv.pw { --c: var(--text); } .lv.req { --c: var(--req-text); } .lv.hid { --c: var(--hid-text); }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tile { background: var(--card); border-radius: var(--radius); padding: 28px; box-shadow: inset 0 0 0 1px var(--card-line); }
.section.alt .tile { background: var(--card-2); box-shadow: var(--shadow); }
.tile .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 18px; }
.tile .ic svg { width: 24px; height: 24px; }
.tile h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.tile p { color: var(--muted); font-size: 16px; margin: 8px 0 0; }
@media (max-width: 980px) { .tiles, .tiles.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiles, .tiles.four { grid-template-columns: 1fr; } }

/* ---------- Languages ---------- */
.lang-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 44px auto 0; max-width: 980px; }
.lang-cloud span { font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; color: var(--muted); padding: 4px 10px; letter-spacing: -0.01em; }
.lang-cloud span:nth-child(3n+1) { color: var(--text); }
.lang-cloud span:nth-child(5n+2) { color: var(--accent); }

/* ---------- Platforms strip ---------- */
.plat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.plat-card { background: var(--card); border-radius: var(--radius); padding: 28px 24px; box-shadow: inset 0 0 0 1px var(--card-line); display: flex; flex-direction: column; gap: 6px; }
.section.alt .plat-card { background: var(--card-2); box-shadow: var(--shadow); }
.plat-card h3 { font-size: 28px; letter-spacing: -0.03em; }
.plat-card .req { color: var(--muted); font-size: 16px; }
.plat-card .pill { margin-top: auto; align-self: flex-start; white-space: normal; line-height: 1.3; }
.plat-card .glyph { height: 64px; margin-bottom: 14px; color: var(--text); }
.plat-card .glyph svg { height: 64px; width: auto; }
@media (max-width: 980px) { .plat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .plat-grid { grid-template-columns: 1fr; } }

/* ---------- Closing call to action ---------- */
.cta { text-align: center; padding: clamp(96px, 13vw, 180px) 0; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 55% at 50% 100%, rgba(52, 211, 153, 0.22), transparent 70%), radial-gradient(40% 50% at 20% 0%, rgba(47, 91, 216, 0.22), transparent 70%); pointer-events: none; }
.cta > * { position: relative; }
.cta img.app-icon { width: 96px; height: 96px; border-radius: 22%; margin: 0 auto 28px; box-shadow: 0 20px 60px -10px rgba(47, 91, 216, .6); }
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; }

/* ---------- Page heroes (inner pages) ---------- */
.page-hero { padding: clamp(64px, 9vw, 130px) 0 clamp(40px, 6vw, 80px); text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: -40% 0 auto; height: 140%; pointer-events: none; background: radial-gradient(40% 50% at 50% 30%, var(--accent-soft), transparent 70%); }
.page-hero > * { position: relative; }

/* ---------- Features page ---------- */
.feat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; padding-bottom: 20px; }
.toc p { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc ol a { display: block; padding: 6px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: 15px; line-height: 1.3; }
.toc ol a:hover { color: var(--text); background: var(--card); }
.toc ol a[aria-current="true"] { color: var(--text); background: var(--card); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.fsec { padding: 24px 0 72px; scroll-margin-top: calc(var(--header-h) + 70px); }
.fsec + .fsec { border-top: 1px solid var(--line); padding-top: 64px; }
.fsec-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 36px; }
.fsec-head .num { font-size: 14px; font-weight: 600; color: var(--accent); }
.fsec-head h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.035em; line-height: 1.05; margin-top: 6px; }
.fsec-head p { color: var(--muted); font-size: 19px; margin: 14px 0 0; max-width: 52ch; }
.fsec-shots { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 36px; }
.fsec-shots .mini-phone { width: 190px; border-radius: 28px; padding: 6px; }
.fsec-shots .mini-phone .screen { border-radius: 23px; }
.fsec-shots .mini-desk { flex: 1 1 380px; max-width: 640px; }
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fcard { background: var(--card); border-radius: 18px; padding: 24px 24px 22px; box-shadow: inset 0 0 0 1px var(--card-line); display: flex; flex-direction: column; }
.fcard h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.fcard .tag { color: var(--text); opacity: .8; font-size: 16px; margin: 6px 0 0; font-weight: 500; }
.fcard .how { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 12px 0 0; }
.fcard .how b { color: var(--text); font-weight: 600; }
.fcard .plats { margin-top: auto; padding-top: 16px; }
.fcard .pnote { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }
.fcard ul { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.fcard ul li { font-size: 15px; color: var(--muted); }
.fcard ul li b { color: var(--text); }
.fcard.wide { grid-column: 1 / -1; }
.toc-mobile { display: none; }
@media (max-width: 1020px) {
  .feat-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .toc-mobile { display: block; position: sticky; top: var(--header-h); z-index: 40; background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
  .toc-mobile ol { display: flex; gap: 6px; overflow-x: auto; list-style: none; margin: 0; padding: 10px var(--gutter); scrollbar-width: none; }
  .toc-mobile ol::-webkit-scrollbar { display: none; }
  .toc-mobile ol a { display: block; white-space: nowrap; padding: 6px 14px; border-radius: 980px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--muted); background: var(--card); }
  .toc-mobile ol a[aria-current="true"] { background: var(--ink); color: var(--ink-text); }
}
@media (max-width: 720px) { .fgrid { grid-template-columns: 1fr; } .fsec-head { grid-template-columns: 1fr; } .fsec-shots .mini-phone { width: calc(50% - 8px); } }
.report-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; margin: 12px 0 0; padding: 0; list-style: none; }
.report-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--muted); line-height: 1.45; }
.report-list li b { display: block; color: var(--text); font-size: 16.5px; }
@media (max-width: 720px) { .report-list { grid-template-columns: 1fr; } }
.kv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kv span { font-size: 13.5px; padding: 4px 10px; border-radius: 8px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--card-line); color: var(--text); }
.section.alt .kv span, .fcard .kv span { background: var(--bg); }

/* ---------- How it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step:nth-child(even) .step-media { order: -1; }
.step .when { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
.step .when i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 14px; }
.step h2 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -0.035em; line-height: 1.05; }
.step p { color: var(--muted); font-size: 18px; margin-top: 18px; max-width: 54ch; }
.step p b { color: var(--text); font-weight: 600; }
.step-media { display: flex; justify-content: center; align-items: center; gap: 18px; }
.step-media .mini-phone { width: min(280px, 70%); }
.step-media .mini-desk { width: 100%; }
.step-media .duo { display: flex; gap: 16px; align-items: flex-end; width: 100%; justify-content: center; }
.step-media .duo .mini-phone { width: 42%; }
@media (max-width: 860px) { .step { grid-template-columns: 1fr; } .step:nth-child(even) .step-media { order: 0; } }
/* Illustrations made of plain boxes (not screenshots) */
.ill { width: min(440px, 100%); background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: inset 0 0 0 1px var(--card-line), var(--glow); font-size: 16px; }
.section.alt .ill { background: var(--card-2); box-shadow: var(--shadow); }
.ill .ill-title { font-weight: 700; font-size: 18px; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 10px; }
.ill .ill-title span { color: var(--muted); font-weight: 500; font-size: 14px; }
.ill .line { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ill .line:last-child { border-bottom: 0; }
.ill .line span { color: var(--muted); }
.ill .line b { font-variant-numeric: tabular-nums; }
.ill .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ill .btns span { padding: 8px 14px; border-radius: 980px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 600; }
.ill .btns span.on { background: var(--ink); color: var(--ink-text); box-shadow: none; }
.ill .status { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; text-align: center; }
.ill .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.ill .flow span { padding: 6px 11px; border-radius: 980px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ill .flow span.done { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.ill .flow em { font-style: normal; color: var(--muted); }
.ill .note { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.ill .warn { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--req) 14%, transparent); color: var(--req-text); font-weight: 600; font-size: 15px; }

/* ---------- Platforms page ---------- */
.req-table-wrap { overflow-x: auto; margin-top: 40px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
table.req { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 640px; }
table.req th, table.req td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.req thead th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; background: var(--card); }
table.req tbody th { font-size: 19px; letter-spacing: -0.01em; }
table.req tr:last-child td, table.req tr:last-child th { border-bottom: 0; }
table.req td .pill { white-space: normal; }
.sync-diagram { width: 100%; max-width: 760px; margin: 48px auto 0; display: block; }
.sync-diagram .dline { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 7; fill: none; }
.sync-diagram .dbox { fill: var(--card-2); stroke: var(--line); stroke-width: 1.5; }
.sync-diagram .cloud { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.sync-diagram text { fill: var(--text); font-family: var(--font); font-size: 17px; font-weight: 600; }
.sync-diagram text.sub { fill: var(--muted); font-size: 13px; font-weight: 500; }
.sync-diagram .glyph { stroke: var(--text); fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .sync-diagram .dline { animation: dash 2.4s linear infinite; }
  @keyframes dash { to { stroke-dashoffset: -24; } }
}
.sync-diagram.tall { display: none; max-width: 420px; }
@media (max-width: 600px) {
  .sync-diagram.wide { display: none; }
  .sync-diagram.tall { display: block; }
  .req-table-wrap { overflow: visible; box-shadow: none; border-radius: 0; }
  table.req { min-width: 0; }
  table.req thead { display: none; }
  table.req, table.req tbody, table.req tr, table.req th, table.req td { display: block; width: 100%; }
  table.req tr { background: var(--card); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--card-line); padding: 6px 18px 12px; margin-bottom: 12px; }
  table.req tbody th { padding: 12px 0 4px; border: 0; font-size: 22px; }
  table.req td { padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.req tr td:last-child { border-bottom: 0; }
  table.req td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
}
.speed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.speed div { background: var(--card); border-radius: 18px; padding: 22px; box-shadow: inset 0 0 0 1px var(--card-line); }
.speed b { display: block; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.04em; line-height: 1; }
.speed span { display: block; color: var(--muted); font-size: 15px; margin-top: 8px; line-height: 1.4; }
@media (max-width: 860px) { .speed { grid-template-columns: repeat(2, 1fr); } }

/* ---------- FAQ ---------- */
.faq { margin-top: 24px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 4px; font-size: clamp(19px, 2vw, 22px); font-weight: 600; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: 22px; font-weight: 400; color: var(--text); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 4px 26px; color: var(--muted); font-size: 18px; max-width: 65ch; }
.faq .ans b { color: var(--text); }
.faq-group h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 56px 0 0; }

/* ---------- Support page ---------- */
.contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: var(--card); border-radius: var(--radius); padding: 26px 28px; box-shadow: inset 0 0 0 1px var(--card-line); margin: 28px 0 8px; }
.contact-card b { font-size: 20px; display: block; }
.contact-card span { color: var(--muted); font-size: 16px; }

@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .numbers .n { padding: 26px 14px; }
}
@media print {
  header.top, footer.bottom, .toc, .toc-mobile { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =====================================================================  ROUND 2  */
:root { --radius: 28px; --radius-sm: 20px; }

/* ---------- Depth: every card and panel ---------- */
.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .chip-desc > div,
.zt, .cap-card, .numbers-wrap, .req-table-wrap {
  position: relative; isolation: isolate; border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(16,24,40,.05), 0 8px 18px -8px rgba(16,24,40,.10), 0 30px 60px -28px rgba(16,24,40,.28);
}
.section.alt :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .day-card, .zt, .cap-card) { background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,40,.05), 0 10px 22px -10px rgba(16,24,40,.12), 0 34px 70px -30px rgba(16,24,40,.30); }
/* gradient hairline border */
:is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .chip-desc > div, .zt, .cap-card, .numbers-wrap, .req-table-wrap)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.035) 35%, rgba(0,0,0,.02) 65%, rgba(0,0,0,.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* specular sheen: a still diagonal glint, plus a soft light that follows the pointer on desktop */
:is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .zt, .cap-card, .numbers-wrap)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(420px circle at var(--mx, 30%) var(--my, -10%), rgba(255,255,255,var(--sheen, .0)), transparent 45%),
    linear-gradient(118deg, transparent 30%, rgba(255,255,255,.55) 46%, transparent 60%);
  opacity: .55; transition: opacity .4s ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-sheen]:hover { --sheen: .9; }
  [data-sheen]:hover::before { opacity: 1; }
}
:root[data-theme="dark"] :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .chip-desc > div, .zt, .cap-card, .numbers-wrap, .req-table-wrap),
:root[data-theme="dark"] .section.alt :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .day-card, .zt, .cap-card),
.zone-dark :is(.card, .tile, .fcard, .day-card, .cap-card, .numbers-wrap) {
  background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.025) 100%), #0d0d0f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.6), 0 30px 70px -30px rgba(0,0,0,.95), 0 0 80px -30px rgba(52,211,153,.22);
}
:root[data-theme="dark"] :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .chip-desc > div, .zt, .cap-card, .numbers-wrap, .req-table-wrap)::after,
.zone-dark :is(.card, .tile, .fcard, .day-card, .cap-card, .numbers-wrap)::after {
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 30%, rgba(255,255,255,.03) 70%, rgba(52,211,153,.22));
}
:root[data-theme="dark"] :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .zt, .cap-card, .numbers-wrap)::before,
.zone-dark :is(.card, .tile, .fcard, .day-card, .cap-card, .numbers-wrap)::before {
  background:
    radial-gradient(420px circle at var(--mx, 30%) var(--my, -10%), rgba(110,231,183,calc(var(--sheen, 0) * .16)), transparent 45%),
    linear-gradient(118deg, transparent 30%, rgba(255,255,255,.05) 46%, transparent 60%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .chip-desc > div, .zt, .cap-card, .numbers-wrap, .req-table-wrap),
  :root:not([data-theme="light"]) .section.alt :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .day-card, .zt, .cap-card) {
    background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.025) 100%), #0d0d0f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.6), 0 30px 70px -30px rgba(0,0,0,.95), 0 0 80px -30px rgba(52,211,153,.22);
  }
  :root:not([data-theme="light"]) :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .chip-desc > div, .zt, .cap-card, .numbers-wrap, .req-table-wrap)::after {
    background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 30%, rgba(255,255,255,.03) 70%, rgba(52,211,153,.22));
  }
  :root:not([data-theme="light"]) :is(.card, .tile, .fcard, .plat-card, .ill, .access-panel, .contact-card, .day-card, .speed > div, .zt, .cap-card, .numbers-wrap)::before {
    background:
      radial-gradient(420px circle at var(--mx, 30%) var(--my, -10%), rgba(110,231,183,calc(var(--sheen, 0) * .16)), transparent 45%),
      linear-gradient(118deg, transparent 30%, rgba(255,255,255,.05) 46%, transparent 60%);
  }
}
.req-table-wrap { overflow: hidden; }
.chip-desc > div { border-top: 0; }
.chip-desc > div b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 8px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.ill .btns span, .ill .flow span { background: var(--card); }

/* ---------- Devices (sized by --w; every part is a share of it) ---------- */
.dv { position: relative; width: var(--w); flex: none; }
.dv .screen { position: relative; overflow: hidden; background: #0b0b0c; }
.dv .screen picture, .dv .screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* glass: a diagonal reflection across every screen */
.dv .screen::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 22%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 76%, rgba(255,255,255,.03) 88%, rgba(255,255,255,0) 100%); }
/* soft contact shadow on the table */
.dv::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: calc(var(--w) * -0.018); height: calc(var(--w) * 0.05); z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 72%); filter: blur(calc(var(--w) * 0.006)); }

/* Mac desktop: big display on an aluminium stand */
.dv-imac .rim { padding: calc(var(--w) * .0055); border-radius: calc(var(--w) * .024);
  background: linear-gradient(145deg, #eceef1 0%, #a9abb0 30%, #f4f5f7 52%, #9c9ea3 76%, #d8dadd 100%);
  box-shadow: 0 calc(var(--w) * .02) calc(var(--w) * .05) calc(var(--w) * -.02) rgba(0,0,0,.6); }
.dv-imac .bezel { background: #050506; padding: calc(var(--w) * .017); border-radius: calc(var(--w) * .019); box-shadow: inset 0 0 0 calc(var(--w) * .002) #2a2a2e; }
.dv-imac .screen { aspect-ratio: 1000 / 628; border-radius: calc(var(--w) * .004); }
.dv-imac .neck { position: relative; width: 25%; height: calc(var(--w) * .17); margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 9%, rgba(0,0,0,0) 18%, rgba(255,255,255,.07) 55%, rgba(0,0,0,.06) 100%),
    linear-gradient(90deg, #7c7e83 0%, #a9abb0 4%, #c2c4c8 14%, #cfd1d4 50%, #c0c2c6 86%, #a5a7ac 96%, #77797e 100%); }
/* the round cable cut-out at the top of the stand */
.dv-imac .neck::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30%; aspect-ratio: 2 / 1;
  border-radius: 0 0 999px 999px; background: radial-gradient(120% 120% at 50% 0%, #000 55%, #111 70%, #2b2c2f 100%);
  box-shadow: 0 0 0 calc(var(--w) * .0035) #9a9ca1, 0 calc(var(--w) * .002) 0 calc(var(--w) * .0045) #e6e7e9, 0 calc(var(--w) * .006) calc(var(--w) * .01) rgba(0,0,0,.35); }
/* the bent foot: a slightly brighter band with soft rounded ends */
.dv-imac .foot { position: relative; width: 25.6%; height: calc(var(--w) * .016); margin: 0 auto; border-radius: calc(var(--w) * .003) calc(var(--w) * .003) calc(var(--w) * .006) calc(var(--w) * .006);
  background:
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 4%, rgba(0,0,0,0) 96%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, #f3f4f5 0%, #d9dbde 30%, #a6a8ac 70%, #6f7175 100%);
  box-shadow: inset 0 calc(var(--w) * .0012) 0 rgba(255,255,255,.9), 0 calc(var(--w) * .008) calc(var(--w) * .016) rgba(0,0,0,.55); }

/* MacBook: thin black bezel, notch, aluminium base */
.dv-mbp .lid { position: relative; margin: 0 6.5%; padding: calc(var(--w) * .016) calc(var(--w) * .016) calc(var(--w) * .024);
  background: #070708; border-radius: calc(var(--w) * .034) calc(var(--w) * .034) calc(var(--w) * .006) calc(var(--w) * .006);
  box-shadow: inset 0 0 0 calc(var(--w) * .0035) #77787d, inset 0 0 0 calc(var(--w) * .006) #18181b; }
.dv-mbp .lid::before { content: ""; position: absolute; z-index: 7; top: calc(var(--w) * .016); left: 50%; transform: translateX(-50%);
  width: 12%; height: calc(var(--w) * .021); background: #070708; border-radius: 0 0 calc(var(--w) * .008) calc(var(--w) * .008); }
.dv-mbp .screen { aspect-ratio: 1000 / 628; border-radius: calc(var(--w) * .008) calc(var(--w) * .008) 0 0; }
.dv-mbp .base, .dv-win .base { position: relative; height: calc(var(--w) * .03);
  background: linear-gradient(180deg, #f4f4f6 0%, #d3d3d7 28%, #a6a7ac 70%, #6f7075 100%);
  border-radius: calc(var(--w) * .004) calc(var(--w) * .004) calc(var(--w) * .05) calc(var(--w) * .05) / calc(var(--w) * .004) calc(var(--w) * .004) calc(var(--w) * .024) calc(var(--w) * .024);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
.dv-mbp .base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 15%; height: 42%;
  background: linear-gradient(180deg, #9a9ba0, #cfd0d4); border-radius: 0 0 calc(var(--w) * .012) calc(var(--w) * .012); }

/* Windows laptop: platinum rim, black glass, our own taskbar strip */
.dv-win .lid { position: relative; margin: 0 6%; padding: calc(var(--w) * .013);
  background: #060607; border-radius: calc(var(--w) * .022) calc(var(--w) * .022) calc(var(--w) * .006) calc(var(--w) * .006);
  box-shadow: inset 0 0 0 calc(var(--w) * .0045) #c4c7cc, inset 0 0 0 calc(var(--w) * .007) #1a1b1e; }
.dv-win .lid::before { content: ""; position: absolute; z-index: 7; top: calc(var(--w) * .0055); left: 50%; width: calc(var(--w) * .006); height: calc(var(--w) * .006); transform: translateX(-50%); border-radius: 50%; background: #1d2a33; box-shadow: 0 0 0 1px #0d0d0f; }
.dv-win .screen { aspect-ratio: 16 / 9; border-radius: calc(var(--w) * .004); display: flex; flex-direction: column; }
.dv-win .screen picture { flex: 1 1 auto; min-height: 0; }
.dv-win .base { background: linear-gradient(180deg, #eef0f2 0%, #cfd2d6 30%, #9fa3a8 72%, #6c7075 100%); }
.dv-win .base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 22%; height: 30%; background: linear-gradient(180deg, #aeb2b7, #dfe1e4); border-radius: 0 0 calc(var(--w) * .01) calc(var(--w) * .01); }
.taskbar { flex: none; height: 4.6%; display: flex; align-items: center; justify-content: center; position: relative; gap: 1.1%;
  background: rgba(32,33,38,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.taskbar.light { background: rgba(238,240,244,.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.06); }
.taskbar .tb-search { height: 62%; width: 12%; border-radius: 999px; background: rgba(255,255,255,.12); }
.taskbar.light .tb-search { background: rgba(0,0,0,.07); }
.taskbar i { height: 58%; aspect-ratio: 1; border-radius: 22%; display: block; }
.taskbar i.a { background: linear-gradient(135deg, #ffd56b, #f0a92e); }
.taskbar i.b { background: linear-gradient(135deg, #7dd3fc, #2563eb); border-radius: 50%; }
.taskbar i.c { background: linear-gradient(135deg, #a7f3d0, #10b981); }
.taskbar i.d { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
.taskbar img { height: 66%; width: auto; border-radius: 22%; position: relative; }
.taskbar .tb-on { position: relative; height: 100%; display: flex; align-items: center; }
.taskbar .tb-on::after { content: ""; position: absolute; bottom: 8%; left: 30%; right: 30%; height: 7%; border-radius: 9px; background: #60a5fa; }
.taskbar .tb-clock { position: absolute; right: 1.6%; font: 600 calc(var(--w) * .0105)/1.1 var(--font); color: rgba(255,255,255,.85); text-align: right; }
.taskbar.light .tb-clock { color: rgba(0,0,0,.75); }

/* iPhone: titanium band, Dynamic Island, side buttons */
.dv-iph .shell { position: relative; border-radius: calc(var(--w) * .175); padding: calc(var(--w) * .021);
  background: linear-gradient(135deg, #7b7f85 0%, #e6e7e9 20%, #6a6e74 42%, #d6d8db 70%, #74787e 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * .005) rgba(255,255,255,.45), 0 calc(var(--w) * .06) calc(var(--w) * .14) calc(var(--w) * -.06) rgba(0,0,0,.65); }
.dv-iph .shell::before, .dv-iph .shell::after { content: ""; position: absolute; width: calc(var(--w) * .016); border-radius: 2px; background: linear-gradient(90deg, #5d6166, #c9cbce); }
.dv-iph .shell::before { left: calc(var(--w) * -.012); top: 20%; height: 9%; box-shadow: 0 calc(var(--w) * .2) 0 #8c9095, 0 calc(var(--w) * .36) 0 #8c9095; }
.dv-iph .shell::after { right: calc(var(--w) * -.012); top: 27%; height: 14%; }
.dv-iph .bezel { background: #030303; padding: calc(var(--w) * .028); border-radius: calc(var(--w) * .155); }
.dv-iph .screen { aspect-ratio: 1179 / 2556; border-radius: calc(var(--w) * .128); }
.dv-iph .island { position: absolute; z-index: 8; top: calc(var(--w) * .032); left: 50%; transform: translateX(-50%); width: 31%; height: calc(var(--w) * .088); border-radius: 999px; background: #000; }
.dv-iph .island::after { content: ""; position: absolute; right: 14%; top: 50%; width: calc(var(--w) * .03); height: calc(var(--w) * .03); transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #33415a, #0b0d12 70%); }
.dv-iph .sb { position: absolute; z-index: 7; top: calc(var(--w) * .052); left: 0; right: 0; padding: 0 9% 0 12%; display: flex; justify-content: space-between; align-items: center;
  font: 600 calc(var(--w) * .052)/1 var(--font); color: #111; letter-spacing: -.01em; }
.dv-iph .sb.dark { color: #fff; }
.dv-iph .sb svg { height: calc(var(--w) * .042); width: auto; fill: currentColor; }

/* Android: flat graphite edges, even bezel (the punch-hole camera and gesture bar are in the screenshot) */
.dv-and .shell { position: relative; border-radius: calc(var(--w) * .12); padding: calc(var(--w) * .026);
  background: linear-gradient(90deg, #2b2d31 0%, #4a4d53 6%, #1c1d20 12%, #1c1d20 88%, #4a4d53 94%, #2b2d31 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * .006) #5b5f66, 0 calc(var(--w) * .06) calc(var(--w) * .14) calc(var(--w) * -.06) rgba(0,0,0,.65); }
.dv-and .shell::after { content: ""; position: absolute; right: calc(var(--w) * -.012); top: 22%; width: calc(var(--w) * .014); height: 20%; border-radius: 2px; background: linear-gradient(90deg, #3a3d42, #6b6f76); box-shadow: 0 calc(var(--w) * .34) 0 -1px #3a3d42; }
.dv-and .bezel { background: #000; padding: calc(var(--w) * .022); border-radius: calc(var(--w) * .1); }
.dv-and .screen { aspect-ratio: 1080 / 2400; border-radius: calc(var(--w) * .082); }

/* A device inside page content: --w follows the box it sits in */
.devbox { container-type: inline-size; width: 100%; display: flex; justify-content: center; }
.devbox > .dv { --w: 100cqw; }
.devbox.phone > .dv { --w: min(100cqw, 300px); }
.devbox.phone.sm > .dv { --w: min(100cqw, 230px); }
.devbox.duo { gap: 6cqw; align-items: flex-end; }
.devbox.duo > .dv { --w: min(42cqw, 260px); }
.devbox.duo.mixed > .dv-mbp, .devbox.duo.mixed > .dv-win { --w: 72cqw; }
.devbox.duo.mixed > .dv-iph, .devbox.duo.mixed > .dv-and { --w: 20cqw; margin-left: -9cqw; }

/* ---------- Hero lineup: Apple family on one side, Windows + Android on the other ---------- */
.lineup { position: relative; container-type: inline-size; width: min(1400px, 100%); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7cqw; padding-bottom: 1cqw; }
.lineup::before { content: ""; position: absolute; inset: -12% -6% 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(34% 46% at 34% 50%, rgba(47,91,216,.40), transparent 70%), radial-gradient(28% 42% at 76% 54%, rgba(52,211,153,.30), transparent 70%), radial-gradient(40% 20% at 50% 96%, rgba(255,160,110,.10), transparent 70%); filter: blur(10px); }
.fam { --u: 1cqw; display: flex; flex-direction: column; align-items: center; }
.fam-apple { --u: 1.62cqw; }
.fam-win { --u: 1.62cqw; }
.fam-win .fam-label { --u: 1.62cqw; }
.devs { display: flex; align-items: flex-end; position: relative;
  -webkit-box-reflect: below calc(var(--u) * .3) linear-gradient(transparent 70%, rgba(255,255,255,.16)); }
.fam-apple .dv-mbp { --w: calc(var(--u) * 29); z-index: 2; margin-right: calc(var(--u) * -11); }
.fam-apple .dv-imac { --w: calc(var(--u) * 39); z-index: 1; }
.fam-apple .dv-iph { --w: calc(var(--u) * 7.2); z-index: 3; margin-left: calc(var(--u) * -4.2); }
.fam-win .dv-win { --w: calc(var(--u) * 29); z-index: 1; }
.fam-win .dv-and { --w: calc(var(--u) * 7.2); z-index: 2; margin-left: calc(var(--u) * -2.2); }
.fam-label { margin: calc(var(--u) * 5.5) 0 0; font-size: max(13px, calc(var(--u) * 1.15)); font-weight: 600; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.fam-label::before, .fam-label::after { content: ""; width: calc(var(--u) * 3); min-width: 18px; height: 1px; background: currentColor; opacity: .4; }
@media (max-width: 760px) {
  .lineup { gap: 9cqw; }
}

/* ---------- Hero ---------- */
.hero.r2 { padding-top: clamp(48px, 6vw, 80px); }
.hero.r2::before { display: none; }
.hero.r2 .hero-copy { margin-top: clamp(20px, 3vw, 36px); }
.hero .hero-icon { width: clamp(64px, 6vw, 84px); height: auto; border-radius: 23%; margin: 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 50px -10px rgba(47,91,216,.7); }
.hero .app-name { display: block; margin-top: 18px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.015em; color: #f5f5f7; }
.hero h1.mega { margin-top: 10px; font-size: clamp(54px, 10vw, 128px); line-height: .98; letter-spacing: -0.045em; color: #f5f5f7; }
.hero h1.mega .grad { background: linear-gradient(95deg, #ffffff 0%, #d1fae5 35%, #6ee7b7 62%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { max-width: 44ch; font-size: clamp(19px, 2vw, 25px); }

/* ---------- Numbers ---------- */
.numbers-wrap { padding: 8px; }
.numbers-wrap .numbers { border: 0; grid-template-columns: repeat(4, 1fr); }
.numbers-wrap .numbers .n:last-child { border-right: 0; }
.capability { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 48px; align-items: end; padding: 36px 28px 30px; border-top: 1px solid var(--line); }
.capability h3 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.04em; }
.capability h3 span { color: var(--accent); }
.capability ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.capability li { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: baseline; color: var(--muted); font-size: 16px; }
.capability li b { font-size: 24px; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
@media (max-width: 980px) { .numbers-wrap .numbers { grid-template-columns: repeat(2, 1fr); } .numbers-wrap .numbers .n:last-child { grid-column: auto; border-bottom: 1px solid var(--line); } .numbers-wrap .numbers .n:nth-child(n+3) { border-bottom: 0; } .capability { grid-template-columns: 1fr; } }

/* ---------- Highlights carousel ---------- */
.hl { position: relative; margin-top: 48px; }
.hl-track { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))) 40px; scroll-padding-inline: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); list-style: none; margin: 0; }
.hl-track::-webkit-scrollbar { display: none; }
.hl-card { position: relative; flex: 0 0 min(1000px, 84vw); aspect-ratio: 16 / 10; scroll-snap-align: start; border-radius: 32px; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 90% at 20% 0%, #1d2a44 0%, #0b0d12 55%, #050506 100%); color: #f5f5f7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px -34px rgba(0,0,0,.7); }
.hl-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 40%, rgba(255,255,255,.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hl-card.g2 { background: radial-gradient(80% 90% at 80% 0%, #10372c 0%, #071310 55%, #040505 100%); }
.hl-card.g3 { background: radial-gradient(80% 90% at 50% 0%, #3a2216 0%, #120b08 55%, #050404 100%); }
.hl-cap { position: absolute; z-index: 4; left: 0; right: 0; top: 0; padding: clamp(24px, 3.4vw, 44px) clamp(24px, 3.6vw, 48px); max-width: 640px; }
.hl-cap .k { font-size: 14px; font-weight: 600; color: #6ee7b7; letter-spacing: .02em; }
.hl-cap h3 { margin-top: 6px; color: #fff; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.06; letter-spacing: -.03em; }
.hl-cap p { margin: 10px 0 0; color: rgba(245,245,247,.72); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; max-width: 44ch; }
.hl-win { position: absolute; left: 8%; right: 8%; bottom: 0; top: 34%; border-radius: 16px 16px 0 0; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 -10px 60px -10px rgba(110,231,183,.25), 0 40px 80px rgba(0,0,0,.6); }
.hl-win picture, .hl-win img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.hl-win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.05), rgba(255,255,255,0) 35%); pointer-events: none; }
.hl-card.photo picture, .hl-card.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hl-card.photo::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,0) 60%); }
.hl-card .hl-phones { position: absolute; left: 0; right: 0; bottom: -18%; top: 34%; display: flex; justify-content: center; gap: 5%; container-type: inline-size; }
.hl-card .hl-phones .dv { --w: 23cqw; }
.hl-ui { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 6px; }
.hl-dots { display: flex; gap: 2px; align-items: center; padding: 0 10px; height: 44px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.hl-dots button { width: 22px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.hl-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--muted); opacity: .45; transition: width .3s, opacity .3s; }
.hl-dots button[aria-current="true"]::before { width: 22px; opacity: 1; background: var(--text); }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--text); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line), 0 6px 16px -10px rgba(0,0,0,.4); }
.round-btn:hover { background: var(--card-2); }
.round-btn svg { width: 20px; height: 20px; }
.round-btn.prev svg { transform: rotate(180deg); }
.round-btn .i-play { display: none; }
.round-btn[aria-pressed="false"] .i-play { display: block; }
.round-btn[aria-pressed="false"] .i-pause { display: none; }
@media (max-width: 700px) {
  .hl-card { aspect-ratio: auto; height: 470px; flex-basis: 86vw; border-radius: 26px; }
  .hl-win { left: 6%; right: -30%; top: 46%; border-radius: 12px 0 0 0; }
  .hl-card .hl-phones { top: 46%; bottom: -30%; }
  .hl-card .hl-phones .dv { --w: 38cqw; }
  .hl-ui .round-btn.prev, .hl-ui .round-btn.next { display: none; }
}

/* ---------- Full-bleed photo bands ---------- */
.band { position: relative; overflow: hidden; color: #f5f5f7; background: #000; min-height: min(82vh, 820px); display: flex; align-items: flex-end; isolation: isolate; }
.band > picture, .band > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 62%), linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0) 55%); }
.band.dim::before { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.35) 100%); }
.band .container { width: 100%; padding-bottom: clamp(48px, 7vw, 96px); }
.band h2 { color: #fff; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.0; letter-spacing: -.045em; max-width: 14ch; }
.band p { color: rgba(245,245,247,.78); font-size: clamp(18px, 1.8vw, 22px); max-width: 46ch; margin: 18px 0 0; }
.band .eyebrow { color: #6ee7b7; }
@media (max-width: 700px) { .band { min-height: 620px; } .band > picture img { object-position: var(--pos-m, 60% 50%); } }

/* ---------- Sticky scroll section ---------- */
.sticky-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: 24px; }
.s-steps { list-style: none; margin: 0; padding: 0; }
.s-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .28; transition: opacity .5s ease; }
.s-step.active, .no-js .s-step { opacity: 1; }
.s-step .k { font-size: 15px; font-weight: 600; color: var(--accent); }
.s-step h3 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.035em; margin-top: 8px; }
.s-step p { color: var(--muted); font-size: 18px; margin-top: 14px; max-width: 42ch; }
.s-step p b { color: var(--text); font-weight: 600; }
.s-step .s-inline { display: none; }
.s-media { position: sticky; top: calc(var(--header-h) + 12vh); }
.compare .pair { position: absolute; inset: 0; }
.compare .pair[hidden] { display: none; }
.s-media .devbox > .dv { --w: 100cqw; }
.s-stack { position: relative; width: 100%; height: 100%; }
.s-stack picture { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); transform: scale(1.02); }
.s-stack picture.on { opacity: 1; transform: none; }
.s-stack picture:first-child { position: relative; }
@media (prefers-reduced-motion: reduce) { .s-stack picture { transition: none; transform: none; } .s-step { transition: none; } }
@media (max-width: 900px) {
  .sticky-wrap { grid-template-columns: 1fr; }
  .s-media { display: none; }
  .s-step { min-height: 0; opacity: 1; padding: 28px 0 44px; }
  .s-step .s-inline { display: block; margin-top: 26px; }
}

/* ---------- Close-up gallery ---------- */
.zoom-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; margin-top: 56px; }
.zt { overflow: hidden; height: clamp(360px, 40vw, 560px); padding: 0; }
.zt.c5 { grid-column: span 5; } .zt.c7 { grid-column: span 7; } .zt.c4 { grid-column: span 4; } .zt.c8 { grid-column: span 8; }
.zt picture, .zt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, left top); z-index: 0; }
.js .zt img { transform: scale(1.14); transform-origin: var(--origin, 30% 20%); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.js .zt.in img, .js .reveal.in .zt img { transform: scale(1); }
.zt .zcap { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: 18px;
  background: rgba(20,20,22,.62); color: #fff; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.zt .zcap b { display: block; font-size: 17px; letter-spacing: -.01em; }
.zt .zcap span { display: block; font-size: 14px; color: rgba(255,255,255,.75); margin-top: 2px; line-height: 1.4; }
@media (max-width: 860px) { .zoom-grid { grid-template-columns: 1fr; } .zt.c5, .zt.c7, .zt.c4, .zt.c8 { grid-column: auto; } .zt { height: 400px; } }
@media (prefers-reduced-motion: reduce) { .js .zt img { transform: none; transition: none; } }

/* ---------- A day in your business: cards with real pictures ---------- */
.day-cards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.day-card { overflow: hidden; display: flex; flex-direction: column; }
.day-card .pic { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; margin: 8px 8px 0; border-radius: 22px; background: #111; }
.day-card .pic picture, .day-card .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, left top); display: block; }
.day-card .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%); pointer-events: none; }
.day-card .txt { padding: 18px 20px 22px; }
.day-card .t { font-size: 13px; font-weight: 600; color: var(--accent); }
.day-card b { display: block; font-size: 19px; margin-top: 6px; letter-spacing: -.015em; line-height: 1.2; }
.day-card span.s { display: block; color: var(--muted); font-size: 15px; margin-top: 6px; line-height: 1.4; }
@media (max-width: 1100px) { .day-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .day-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 30px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .day-cards::-webkit-scrollbar { display: none; }
  .day-card { flex: 0 0 78vw; scroll-snap-align: start; }
}

/* ---------- Caption cards (feature rows with a device) ---------- */
.cap-card { padding: clamp(24px, 3vw, 40px); overflow: hidden; }

/* ---------- Mac light/dark slider in a MacBook ---------- */
.compare.mac { width: min(880px, 100%); }
.compare.mac .devbox > .dv { --w: 100cqw; }
.compare .screen { position: relative; }
.compare .layer { position: absolute; inset: 0; }
.compare-wrap.r2 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
@media (max-width: 860px) { .compare-wrap.r2 { grid-template-columns: 1fr; } }

/* ---------- Final lineup ---------- */
.final-lineup { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); overflow: hidden; position: relative; }
.final-lineup .lineup { margin-top: 64px; }

/* mobile: tighten long hero */
@media (max-width: 600px) { .hero.r2 { min-height: 0; } }

/* feature-page, platform and misc device boxes */
.fsec-shots { gap: 28px; align-items: flex-end; }
.fsec-shots > .devbox.desk { flex: 1 1 420px; max-width: 640px; }
.fsec-shots > .devbox.phone { flex: 0 0 auto; width: 200px; }
.fsec-shots > .zt.shot-zoom { flex: 0 1 380px; height: 460px; }
.zt.shot-zoom.tall { width: min(440px, 100%); height: 560px; margin: 0; }
.zt.shot-zoom picture, .zt.shot-zoom img { object-position: left top; }
.devbox.phone.xs > .dv { --w: 92px; }
.devbox.small-duo { gap: 18px; justify-content: flex-start; }
.devbox.small-duo > .dv { --w: min(40cqw, 150px); }
.plat-dev { height: 190px; display: flex; align-items: flex-end; justify-content: center; margin: 4px 0 22px; }
.plat-dev .devbox:not(.phone) > .dv { --w: min(100cqw, 250px); }
.step-media .devbox.phone > .dv { --w: min(100cqw, 280px); }
.split .devbox.duo > .dv { --w: min(40cqw, 230px); }
@media (max-width: 720px) {
  .fsec-shots > .devbox.phone { width: calc(50% - 14px); }
  .fsec-shots > .zt.shot-zoom { flex-basis: 100%; height: 420px; }
}

figure.zt { margin: 0; }
.compare-wrap.r2 { align-items: start; }
.capability { align-items: center; }

.compare-wrap.r2 { justify-items: stretch; }
@media (max-width: 640px) {
  .platform-row { flex-direction: column; gap: 4px; }
  .platform-row .sep { display: none; }
  .tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs button { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
}
.zt.wide { grid-column: 1 / -1; height: clamp(260px, 30vw, 420px); }
@media (max-width: 860px) { .zt.wide { height: auto; aspect-ratio: 1120 / 379; } }

@media (max-width: 700px) { .js .day-cards .reveal { opacity: 1; transform: none; } }

/* ---------- Round 3 ---------- */
.hero.r2 > .container { max-width: 1448px; }
.hero.r2 .lineup::before { inset: -10% -4% 4%; }
/* the device reflection on the floor stays, but softer */
.devs { -webkit-box-reflect: below calc(var(--u) * .3) linear-gradient(transparent 74%, rgba(255,255,255,.12)); }

/* one capability statement instead of per-device numbers */
.capability.one { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.capability.one p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--muted); margin: 0; max-width: 40ch; }
.capability.solo { margin-top: 36px; border-top: 0; border-radius: var(--radius); }
@media (max-width: 980px) { .capability.one { grid-template-columns: 1fr; } }

/* device render band (replaces the soft lifestyle photos): big crisp devices under a spotlight */
.stage-band { position: relative; overflow: hidden; color: #f5f5f7; padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 9vw, 120px); isolation: isolate;
  background: radial-gradient(60% 55% at 50% 0%, #1b2233 0%, #07080b 55%, #000 100%); }
.stage-band::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -10%; width: 70%; height: 80%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.13), rgba(255,255,255,0) 70%); filter: blur(20px); }
.stage-band::after { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: 6%; height: 30%;
  background: radial-gradient(50% 50% at 50% 60%, rgba(52,211,153,.18), transparent 70%); filter: blur(30px); }
.stage-copy { text-align: center; max-width: 760px; margin: 0 auto; }
.stage-copy h2 { color: #fff; font-size: clamp(40px, 6.4vw, 84px); line-height: 1; letter-spacing: -.045em; }
.stage-copy p { color: rgba(245,245,247,.72); font-size: clamp(18px, 1.8vw, 22px); margin: 18px auto 0; max-width: 46ch; }
.stage-copy .eyebrow { color: #6ee7b7; }
.stage-devices { position: relative; container-type: inline-size; width: min(1100px, 100%); margin: clamp(48px, 6vw, 80px) auto 0; display: flex; align-items: flex-end; justify-content: center; }
.stage-devices > .dv-mbp { --w: 88cqw; }
.stage-devices > .dv-iph { --w: 17cqw; margin-left: -12cqw; margin-bottom: -1cqw; z-index: 2; }

/* =====================================================================  ROUND 5  */
:root {
  --wm-mac: linear-gradient(90deg, #0b2a57 0%, #1b5fc2 48%, #4cb2f2 100%);
  --wm-ios: linear-gradient(90deg, #4b1a45 0%, #a8307a 50%, #ee67b0 100%);
  --wm-win: linear-gradient(90deg, #8a2a06 0%, #e8541a 50%, #f7a81b 100%);
  --wm-and: linear-gradient(90deg, #0b3f2a 0%, #16935a 50%, #3ddc84 100%);
  --lang-g: linear-gradient(90deg, #0a7cff 0%, #7a5cff 36%, #c548e0 64%, #f2672e 100%);
  --lc0: linear-gradient(90deg, #0a6fe0, #6d5df5); --lc1: linear-gradient(90deg, #7c3aed, #c026d3);
  --lc2: linear-gradient(90deg, #c2307a, #ea6a1f); --lc3: linear-gradient(90deg, #0f8a7e, #2563eb);
  --lc4: linear-gradient(90deg, #15803d, #0891b2); --lc5: linear-gradient(90deg, #d24d0c, #c08405);
  --lc6: linear-gradient(90deg, #4338ca, #0284c7); --lc7: linear-gradient(90deg, #9333ea, #3b82f6);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --wm-mac: linear-gradient(90deg, #3d78dc 0%, #5aa9f5 50%, #a6dcff 100%);
  --wm-ios: linear-gradient(90deg, #b2559d 0%, #e45ca4 50%, #ffa3d0 100%);
  --wm-win: linear-gradient(90deg, #ff6a3d 0%, #ff9a3c 50%, #ffd36b 100%);
  --wm-and: linear-gradient(90deg, #2c9a62 0%, #3ddc84 55%, #a8f5c8 100%);
  --lang-g: linear-gradient(90deg, #3d9bff 0%, #9b86ff 36%, #e07cf0 64%, #ff9056 100%);
  --lc0: linear-gradient(90deg, #4ea2ff, #9a8cff); --lc1: linear-gradient(90deg, #a78bfa, #e879f9);
  --lc2: linear-gradient(90deg, #f472b6, #fb923c); --lc3: linear-gradient(90deg, #2dd4bf, #60a5fa);
  --lc4: linear-gradient(90deg, #4ade80, #22d3ee); --lc5: linear-gradient(90deg, #fb923c, #facc15);
  --lc6: linear-gradient(90deg, #818cf8, #38bdf8); --lc7: linear-gradient(90deg, #c084fc, #60a5fa);
} }
:root[data-theme="dark"], .zone-dark, .stage-band {
  --wm-mac: linear-gradient(90deg, #3d78dc 0%, #5aa9f5 50%, #a6dcff 100%);
  --wm-ios: linear-gradient(90deg, #b2559d 0%, #e45ca4 50%, #ffa3d0 100%);
  --wm-win: linear-gradient(90deg, #ff6a3d 0%, #ff9a3c 50%, #ffd36b 100%);
  --wm-and: linear-gradient(90deg, #2c9a62 0%, #3ddc84 55%, #a8f5c8 100%);
  --lang-g: linear-gradient(90deg, #3d9bff 0%, #9b86ff 36%, #e07cf0 64%, #ff9056 100%);
  --lc0: linear-gradient(90deg, #4ea2ff, #9a8cff); --lc1: linear-gradient(90deg, #a78bfa, #e879f9);
  --lc2: linear-gradient(90deg, #f472b6, #fb923c); --lc3: linear-gradient(90deg, #2dd4bf, #60a5fa);
  --lc4: linear-gradient(90deg, #4ade80, #22d3ee); --lc5: linear-gradient(90deg, #fb923c, #facc15);
  --lc6: linear-gradient(90deg, #818cf8, #38bdf8); --lc7: linear-gradient(90deg, #c084fc, #60a5fa);
}

/* ---------- 1. Platform names in colour ---------- */
.wm { display: inline-block; background-image: var(--wm-mac); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 600; letter-spacing: -.02em; padding: 0 .02em .06em; margin-bottom: -.06em; }
.wm-ios { background-image: var(--wm-ios); } .wm-win { background-image: var(--wm-win); } .wm-and { background-image: var(--wm-and); }
@media (forced-colors: active) { .wm { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; } }
.platform-row .wm-row { display: inline-flex; align-items: baseline; gap: 10px; font-size: 19px; }
.platform-row .wm-row i { font-style: normal; color: #6e6e73; }
.wm-stack { list-style: none; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; display: grid; justify-items: center; gap: clamp(2px, .6vw, 8px); }
.wm-stack .wm { font-size: clamp(46px, 7.4vw, 96px); line-height: 1.04; letter-spacing: -.035em; }
.plat-card h3.wm-h { font-size: 32px; }
.plat-card .plat-for { margin: 0; color: var(--muted); font-size: 15px; }
table.req tbody th .wm { font-size: 21px; }
.fsec-head h2 .wm, .title-sm .wm { letter-spacing: -.03em; }

/* ---------- 2. Sticky sub-bar (dark glass, like Apple's product bars) ---------- */
.subbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--header-h); color: #f5f5f7;
  background: rgba(18, 18, 20, .86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); transform: translateY(-100%); visibility: hidden;
  transition: transform .38s cubic-bezier(.2,.7,.2,1), visibility 0s linear .38s; }
.subbar .wrap { height: 100%; display: flex; align-items: center; gap: 22px; }
.subbar .sb-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.subbar .sb-brand img { width: 24px; height: 24px; border-radius: 6px; }
.subbar .sb-link { font-size: 13px; color: rgba(245,245,247,.8); text-decoration: none; }
.subbar .sb-link:hover { color: #fff; }
.subbar .sb-btn { font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; background: #0071e3; padding: 6px 14px; border-radius: 980px; line-height: 1.2; }
.subbar .sb-btn:hover { background: #0077ed; }
.subbar a:focus-visible { outline: 2px solid #4da3ff; outline-offset: 3px; border-radius: 6px; }
html.sub-on .subbar { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2,.7,.2,1), visibility 0s; }
header.top { transition: transform .38s cubic-bezier(.2,.7,.2,1); }
html.sub-on header.top { transform: translateY(-100%); }
@media (max-width: 640px) { .subbar .sb-link { display: none; } .subbar .sb-brand { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .subbar, html.sub-on .subbar, header.top { transition: none; } }
@media print { .subbar { display: none; } }

/* ---------- 3. Pull-up demo: see site_css6.py (round 6) ---------- */

/* ---------- 4. Phone Dashboard (dark), drawn in HTML at any size ---------- */
.stage-devices > .pd-dev { --w: 17cqw; margin-left: -12cqw; margin-bottom: -1cqw; z-index: 2; }
.pd-dev .screen { background: #000; }
.pd { position: absolute; inset: 0; container-type: inline-size; }
.pd-in { position: absolute; inset: 0; padding: 15.897cqw 4.103cqw 0; color: #f5f5f7; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; line-height: 1.2; 
  background: radial-gradient(120% 50% at 50% 0%, #10141c 0%, #000 60%); }
.pd-title b { display: block; font-size: 8.205cqw; font-weight: 700; letter-spacing: -.02em; margin: 0.513cqw 0 2.564cqw; }
.pd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.308cqw; }
.pt-tile { background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06)); box-shadow: inset 0 0 0 0.205cqw rgba(255,255,255,.12); border-radius: 4.615cqw; padding: 2.564cqw 3.333cqw; }
.pt-tile small { display: block; font-size: 2.949cqw; color: rgba(235,235,245,.6); white-space: nowrap; }
.pt-tile b { display: block; font-size: 5.128cqw; font-weight: 700; letter-spacing: -.01em; margin-top: 0.769cqw; font-variant-numeric: tabular-nums; }
.pd-h { font-size: 4.359cqw; font-weight: 700; margin: 4.103cqw 1.026cqw 2.051cqw; }
.pd-seg { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.769cqw; border-radius: 256.154cqw; background: rgba(118,118,128,.24); }
.pd-seg span { text-align: center; font-size: 3.333cqw; font-weight: 600; padding: 1.538cqw 0; border-radius: 256.154cqw; color: rgba(235,235,245,.75); }
.pd-seg span.on { background: #636366; color: #fff; box-shadow: 0 0.513cqw 1.538cqw rgba(0,0,0,.35); }
.pd-chart { margin-top: 2.564cqw; padding: 3.077cqw 3.077cqw 2.564cqw; border-radius: 5.641cqw; display: grid; grid-template-columns: auto 1fr; column-gap: 1.538cqw;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 0.205cqw rgba(255,255,255,.1); }
.pd-chart .ax { display: flex; flex-direction: column; justify-content: space-between; height: 38.462cqw; font-size: 2.436cqw; color: rgba(235,235,245,.5); text-align: right; margin-top: -1.282cqw; }
.pd-chart .plot { display: grid; grid-template-columns: repeat(7, 1fr); }
.pd-chart .col { display: flex; flex-direction: column; align-items: center; }
.pd-chart .trk { position: relative; width: 5.641cqw; height: 38.462cqw; border-radius: 2.821cqw; background: rgba(255,255,255,.07); }
.pd-chart .pl { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2.821cqw; }
.pd-chart .pl.credit { background: #0f0f11; box-shadow: inset 0 0 0 0.231cqw rgba(255,255,255,.28); }
.pd-chart .pl.cash { background: rgb(26,153,133); } .pd-chart .pl.received { background: rgb(46,74,191); } .pd-chart .pl.paid { background: rgb(181,51,43); }
.pd-chart .pl.back.cash { background: linear-gradient(180deg, rgb(71,173,157), rgb(26,153,133) 60%); box-shadow: 0 0.385cqw 1.795cqw rgba(26,153,133,.8); }
.pd-chart .pl.back.paid { background: linear-gradient(180deg, rgb(196,92,86), rgb(181,51,43) 60%); box-shadow: 0 0.385cqw 1.795cqw rgba(181,51,43,.8); }
.pd-chart .pl.back.received { background: linear-gradient(180deg, rgb(88,110,204), rgb(46,74,191) 60%); box-shadow: 0 0.385cqw 1.795cqw rgba(46,74,191,.8); }
.pd-chart .col > span { margin-top: 1.282cqw; font-size: 2.564cqw; font-weight: 600; text-align: center; line-height: 1.15; }
.pd-chart .col small { display: block; font-size: 2.308cqw; font-weight: 400; color: rgba(235,235,245,.5); }
.pd-chart .lg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.026cqw 2.564cqw; margin-top: 2.564cqw; font-size: 2.692cqw; color: rgba(235,235,245,.72); }
.pd-chart .lg span { display: flex; align-items: center; gap: 1.538cqw; }
.pd-chart .lg i { width: 2.308cqw; height: 2.308cqw; border-radius: 50%; flex: none; }
.pd-chart .lg i.cash { background: rgb(26,153,133); } .pd-chart .lg i.received { background: rgb(46,74,191); } .pd-chart .lg i.paid { background: rgb(181,51,43); }
.pd-chart .lg i.credit { background: #0f0f11; box-shadow: inset 0 0 0 0.256cqw rgba(255,255,255,.5); }
.pt-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.795cqw; padding: 3.077cqw 3.590cqw; border-radius: 4.103cqw;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 0.205cqw rgba(255,255,255,.08); font-size: 3.846cqw; }
.pt-row span { font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-home { position: absolute; bottom: 2.051cqw; left: 50%; width: 34.359cqw; height: 1.282cqw; margin-left: -17.179cqw; border-radius: 0.769cqw; background: #fff; }
@media (max-width: 700px) {
  .stage-devices > .dv-mbp { --w: 84cqw; margin-right: 6cqw; }
  .stage-devices > .pd-dev { --w: 31cqw; margin-left: -24cqw; margin-bottom: -2cqw; }
}

/* ---------- 5. Languages: a scattered, coloured word cloud ---------- */
.lang5 { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
.lang-scatter { position: relative; height: 470px; max-width: 1140px; margin: 0 auto; isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect; }
.lang-scatter::before { content: ""; position: absolute; inset: 10% 6%; z-index: -1; pointer-events: none; filter: blur(30px);
  background: radial-gradient(40% 50% at 30% 55%, rgba(48,177,88,.10), transparent 70%), radial-gradient(40% 50% at 72% 45%, rgba(10,132,255,.10), transparent 70%); }
.lang-scatter .ln { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); white-space: nowrap;
  font-size: var(--s); font-weight: var(--wt); opacity: var(--o); letter-spacing: -.01em; line-height: 1.25; padding: .05em .04em .12em;
  background-image: var(--lc0); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lang-scatter .c1 { background-image: var(--lc1); } .lang-scatter .c2 { background-image: var(--lc2); } .lang-scatter .c3 { background-image: var(--lc3); }
.lang-scatter .c4 { background-image: var(--lc4); } .lang-scatter .c5 { background-image: var(--lc5); } .lang-scatter .c6 { background-image: var(--lc6); } .lang-scatter .c7 { background-image: var(--lc7); }
:root[data-theme="dark"] .lang-scatter .ln { opacity: calc(.38 + var(--o) * .62); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lang-scatter .ln { opacity: calc(.38 + var(--o) * .62); } }
.lang-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: min(720px, 64%); }
.lang-centre .eyebrow { margin-bottom: 8px; }
.grad-title { margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
  background-image: var(--lang-g); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .06em; }
.lang-lede { margin-top: 18px; text-align: center; }
@media (forced-colors: active) { .lang-scatter .ln, .grad-title { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; } }
@media (max-width: 860px) {
  .lang-scatter { height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 14px; -webkit-mask-image: none; mask-image: none; padding: 4px 0; }
  .lang-scatter .ln { position: static; transform: none; font-size: calc(var(--s) * .66); order: 0; }
  .lang-scatter .ln.bot { order: 2; }
  .lang-centre { position: static; transform: none; width: 100%; order: 1; margin: 18px 0 16px; }
  .grad-title { font-size: clamp(22px, 5.6vw, 31px); }
}

/* ---------- 6. Date colours: Blue is the default ---------- */
.swatch.on { color: var(--text); font-weight: 600; }
.swatch.on i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #0A84FF; }
.swatch small { font-size: 12px; font-weight: 600; color: #0A84FF; margin-left: 2px; }

/* =====================================================================  ROUND 6  */
/* ---------- 3. Pull-up demo: cash and credit (like the app: EntriesScreen, LedgerComposer, PartyPage, BottomBar) ---------- */
.bd-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bd-copy .lede { max-width: 40ch; }
.bd-switch { margin-top: 30px; }
.bd-switch button { min-width: 96px; }
.bd-text { margin-top: 26px; min-height: 236px; }
.bd-text h3 { font-size: 24px; letter-spacing: -.02em; margin: 0; }
.bd-text .ticks { margin-top: 14px; }
.bd-try { margin-top: 18px; }
.bd-media { display: flex; justify-content: center; }
.bd-phone { --w: min(340px, 80vw); }
.bd-phone .screen { background: #f2f2f7; touch-action: pan-y; }
.bd-phone .screen::after { display: none; }
.bd-stage { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform-origin: 0 0; transform: scale(var(--k, .75)); overflow: hidden;
  background: #f2f2f7; color: #000; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none; user-select: none; line-height: 1.2; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
.bd-stage svg { display: block; }
.bd-stage .m-credit { display: none; }
.bd-stage[data-mode="credit"] .m-cash { display: none; }
.bd-stage[data-mode="credit"] .m-credit { display: block; }
.bd-sb { position: absolute; z-index: 9; top: 0; left: 0; right: 0; height: 54px; padding: 4px 30px 0 54px; display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em; pointer-events: none; }
.bd-sb svg { height: 13px; width: auto; fill: currentColor; }
.bd-home { position: absolute; z-index: 10; bottom: 8px; left: 50%; width: 134px; margin-left: -67px; height: 5px; border-radius: 3px; background: #000; pointer-events: none; }
/* glass: the app's light glass (white, a hairline, a soft shadow) */
.bd-stage .g-circ, .bd-stage .g-pill, .bd-bar, .bd-search, .bd-sheet .kinds, .bd-sheet .seg, .bd-page .balcard {
  background: rgba(255,255,255,.86); box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.07); }
.bd-stage .g-circ { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #000; }
.bd-stage .g-circ svg { width: 21px; height: 21px; }
.bd-stage .sp { flex: 1; }
.bd-page { position: absolute; inset: 0; background: #f2f2f7; }
.bd-page .topfade { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 122px; pointer-events: none;
  background: linear-gradient(180deg, #f2f2f7 0, #f2f2f7 52px, rgba(242,242,247,.86) 84px, rgba(242,242,247,0) 122px); }
/* Entries */
.bd-page .ehead { position: absolute; z-index: 4; top: 58px; left: 14px; right: 14px; display: flex; align-items: center; gap: 10px; }
.bd-page .g-pill.date { height: 46px; padding: 0 18px; border-radius: 23px; display: flex; align-items: center; font-size: 22px; font-weight: 700; color: #007aff; letter-spacing: -.02em; }
.bd-page .elist { position: absolute; top: 96px; left: 0; right: 0; }
.bd-page .erow { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 10px; }
.bd-page .erow:nth-child(even) { background: rgba(0,0,0,.035); }
.bd-page .erow .amt { flex: none; min-width: 76px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-page .erow .mid { flex: 1; min-width: 0; }
.bd-page .erow .nm { display: flex; align-items: center; gap: 6px; }
.bd-page .erow .nm b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.bd-page .tag { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.bd-page .tag.or { color: #f08c00; background: rgba(255,149,0,.14); } .bd-page .tag.gr { color: #24a148; background: rgba(52,199,89,.14); }
.bd-page .tag.bl { color: #007aff; background: rgba(0,122,255,.12); } .bd-page .tag.gy { color: #6c6c70; background: rgba(120,120,128,.13); }
.bd-page .erow small { display: block; margin-top: 3px; font-size: 11px; color: rgba(60,60,67,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-page .erow .tm { flex: none; font-size: 11px; color: rgba(60,60,67,.36); font-variant-numeric: tabular-nums; }
/* the bar + the round search button (BottomBar: 62 high, 18 above the phone's foot) */
.bd-bar, .bd-search { position: absolute; z-index: 5; bottom: 18px; height: 62px; will-change: transform; transform-origin: 50% 100%; cursor: grab; touch-action: none; }
.bd-bar { left: 14px; right: 84px; border-radius: 31px; display: flex; padding: 4px; background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
.bd-search { right: 14px; width: 62px; border-radius: 50%; display: grid; place-items: center; color: #000; background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
.bd-search svg { width: 24px; height: 24px; }
.bd-bar .tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 27px; color: #000; }
.bd-bar .tab svg { width: 24px; height: 24px; }
.bd-bar .tab b { font-size: 10.5px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }
.bd-bar .tab.on { background: rgba(0,0,0,.08); }
/* a customer's account */
.bd-page .ahead { position: absolute; z-index: 4; top: 58px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; }
.bd-page .ahead > b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.bd-page .balcard { position: absolute; z-index: 4; top: 116px; left: 14px; right: 14px; border-radius: 22px; padding: 13px 16px 9px; background: #fff; }
.bd-page.m-credit .topfade { height: 150px; background: linear-gradient(180deg, #f2f2f7 0, #f2f2f7 128px, rgba(242,242,247,0) 150px); }
.bd-page .balcard .r1 { display: flex; justify-content: space-between; align-items: baseline; }
.bd-page .balcard .r1 b { font-size: 18px; font-weight: 700; }
.bd-page .balcard .r1 .fig { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bd-page .cols { display: grid; grid-template-columns: minmax(0, 1fr) 78px 78px; column-gap: 8px; align-items: start; }
.bd-page .cols .c1, .bd-page .cols .c2 { text-align: right; font-variant-numeric: tabular-nums; }
.bd-page .cols.lab { margin-top: 9px; font-size: 11px; color: rgba(60,60,67,.6); }
.bd-page .ledger { position: absolute; left: 14px; right: 14px; bottom: 102px; }
.bd-page .visit { padding: 8px 16px; border-radius: 14px; }
.bd-page .visit.alt { background: rgba(0,0,0,.045); }
.bd-page .visit small { display: block; font-size: 11px; color: rgba(60,60,67,.42); font-variant-numeric: tabular-nums; }
.bd-page .visit .cols { margin-top: 5px; font-size: 15px; }
.bd-page .visit .w { line-height: 1.3; }
.bd-page .visit .w em { display: block; font-style: normal; font-size: 12px; color: rgba(60,60,67,.6); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bd-page .visit .c1, .bd-page .visit .c2 { font-weight: 600; line-height: 1.3; }
/* the sale window (RisingWindow: 38-point corners, down to the phone's foot) */
.bd-sheet { position: absolute; z-index: 7; left: 0; right: 0; top: 64px; height: 788px; background: #f2f2f7; border-radius: 38px 38px 0 0; overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2); will-change: transform; transform: translateY(0); touch-action: pan-y; }
.bd-sheet .grabzone { touch-action: none; cursor: grab; position: relative; z-index: 2; }
.bd-sheet .grab { position: absolute; left: 50%; top: 31.5px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(60,60,67,.3); }
.bd-sheet .grab.solo { position: static; display: block; margin: 8px auto 0; }
.bd-sheet .shead { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.bd-sheet .shead.acc { gap: 8px; padding-top: 8px; }
.bd-sheet .g-circ { width: 44px; height: 44px; }
.bd-sheet .g-circ svg { width: 19px; height: 19px; }
.bd-sheet .who { position: absolute; left: 0; right: 0; top: 8px; height: 44px; display: grid; place-items: center; padding: 0 112px; font-size: 18px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.bd-sheet .tick-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #0a84ff; color: #fff; display: grid; place-items: center; box-shadow: 0 3px 6px rgba(10,132,255,.35); }
.bd-sheet .tick-btn svg { width: 19px; height: 19px; }
.bd-sheet .kinds { margin: 10px 14px 8px; height: 54px; border-radius: 27px; display: flex; align-items: center; padding: 0 6px; }
.bd-sheet .kinds .k { flex: 1; display: grid; place-items: center; color: #000; }
.bd-sheet .kinds .k svg { width: 24px; height: 24px; }
.bd-sheet .kinds .k.lit svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #000; color: #fff; --disc: #000; }
.bd-sheet .seg { margin: 8px 14px 8px; padding: 5px; border-radius: 25px; display: flex; }
.bd-sheet .seg span { flex: 1; height: 40px; border-radius: 20px; display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.bd-sheet .seg span.on { background: #000; color: #fff; }
.bd-sheet .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 14px 0; }
.bd-sheet .ptile { position: relative; height: 132px; padding: 8px; background: #fff; border-radius: 20px; box-shadow: 0 3px 6px rgba(0,0,0,.07);
  display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.bd-sheet .ptile.on { box-shadow: inset 0 0 0 2px #000, 0 3px 6px rgba(0,0,0,.07); }
.bd-sheet .ptile .top { min-height: 48px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bd-sheet .ptile .top b { font-size: 13px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-sheet .ptile .pr { font-size: 12px; font-weight: 600; color: rgba(60,60,67,.6); font-variant-numeric: tabular-nums; }
.bd-sheet .ptile .pchip { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 9px; background: rgba(0,0,0,.08);
  font-style: normal; font-size: 10px; font-weight: 700; color: #000; }
.bd-sheet .ptile .pchip svg { width: 9px; height: 9px; }
.bd-sheet .ptile .big { flex: 1; display: grid; place-items: center; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bd-sheet .ptile .foot { min-height: 22px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: rgba(60,60,67,.6); font-variant-numeric: tabular-nums; }
.bd-sheet .ptile .foot.on { font-size: 12px; font-weight: 700; color: #000; }
.bd-sheet .sfoot { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 44px; display: flex; align-items: flex-end; gap: 10px; }
.bd-sheet .sale-pill { flex: 1; height: 58px; border-radius: 29px; background: #000; color: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.bd-sheet .sale-pill b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-sheet .sale-pill svg { width: 16px; height: 16px; }
.bd-sheet .g-circ.big { width: 58px; height: 58px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.07); }
.bd-sheet .g-circ.big svg { width: 22px; height: 22px; }
@media (max-width: 860px) {
  .bd-wrap { grid-template-columns: 1fr; gap: 0; }
  .bd-copy { display: contents; }
  .bd-copy > * { order: 0; } .bd-media { order: 1; margin-top: 36px; } .bd-copy > .bd-text, .bd-copy > .bd-try { order: 2; }
  .bd-text { min-height: 0; }
  .bd-phone { --w: min(310px, 78vw); }
}

/* ---------- 5. Languages: words fly out from behind the headline toward you (site.js; still words when motion is reduced) ---------- */
.lang-fly { display: none; }
.lang-scatter.is-fly { height: clamp(560px, 52vw, 720px); max-width: none; margin: 0 calc(50% - 50vw); overflow: hidden; contain: layout paint;
  -webkit-mask-image: none; mask-image: none; }
.lang-scatter.is-fly > .ln { display: none; }
.lang-scatter.is-fly .lang-fly { display: block; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 56% 60% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 56% 60% at 50% 50%, #000 70%, transparent 100%); }
.lang-fly .fw { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: var(--fs, 46px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  padding: .04em .06em .12em; opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%;
  background-image: var(--lc0); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lang-fly .fw.c1 { background-image: var(--lc1); } .lang-fly .fw.c2 { background-image: var(--lc2); } .lang-fly .fw.c3 { background-image: var(--lc3); }
.lang-fly .fw.c4 { background-image: var(--lc4); } .lang-fly .fw.c5 { background-image: var(--lc5); } .lang-fly .fw.c6 { background-image: var(--lc6); } .lang-fly .fw.c7 { background-image: var(--lc7); }
.lang-fly .fw.b2 { filter: blur(3px); } .lang-fly .fw.b1 { filter: blur(1.5px); }
.lang-scatter.is-fly .lang-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 88%); z-index: 2; margin: 0; }
@media (max-width: 860px) {
  .lang-scatter.is-fly { display: block; height: clamp(400px, 108vw, 470px); padding: 0; }
  .lang-scatter.is-fly .lang-fly { -webkit-mask-image: radial-gradient(ellipse 80% 56% at 50% 50%, #000 76%, transparent 100%); mask-image: radial-gradient(ellipse 80% 56% at 50% 50%, #000 76%, transparent 100%); }
  .lang-scatter.is-fly .lang-centre { width: calc(100% - 32px); }
}
@media (forced-colors: active) { .lang-fly .fw { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; } }
.lang5 { padding-top: clamp(4px, 1vw, 16px); }
section[aria-label="TallyMate in numbers"] { padding-bottom: 0; }

/* ---------- Languages: compact field, words over the full height ---------- */
.lang5 { padding-top: clamp(8px, 1.4vw, 24px); padding-bottom: 0; }
/* the numbers card above had 96 px of empty section under it */
.section.tight[aria-label="TallyMate in numbers"] { padding-bottom: clamp(12px, 2vw, 28px); }
.lang-centre .grad-title, .lang-scatter .grad-title { font-size: clamp(36px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -0.035em; }
.lang-scatter.is-fly { height: clamp(430px, 38vw, 560px); }
.lang-scatter.is-fly .lang-fly {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect; }
.lang-scatter.is-fly .lang-centre { width: min(900px, 88%); }
/* the still cloud (reduced motion) gets room for the bigger headline */
.lang-scatter:not(.is-fly) { height: 520px; }
.lang-scatter:not(.is-fly) .lang-centre { width: min(820px, 72%); }
@media (max-width: 860px) {
  .lang-centre .grad-title, .lang-scatter .grad-title { font-size: clamp(36px, 5.6vw, 68px); }
  .lang-scatter.is-fly { height: clamp(440px, 122vw, 520px); }
  .lang-scatter.is-fly .lang-fly {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
  .lang-scatter.is-fly .lang-centre { width: calc(100% - 12px); }
  .lang-scatter:not(.is-fly) { height: auto; }
  .lang-scatter:not(.is-fly) .lang-centre { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; }
}

/* ---------- Hero: Windows desktop monitor (generic: thin black bezel, small chin, silver stand; no logo) ---------- */
.dv-mon .body { position: relative; padding: calc(var(--w) * .009) calc(var(--w) * .009) calc(var(--w) * .022); border-radius: calc(var(--w) * .012);
  background: linear-gradient(180deg, #16171a 0%, #0c0c0e 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * .0016) #3b3d42, inset 0 calc(var(--w) * .0012) 0 calc(var(--w) * .0016) rgba(255,255,255,.08),
    0 calc(var(--w) * .02) calc(var(--w) * .05) calc(var(--w) * -.02) rgba(0,0,0,.6); }
/* the small power light in the chin */
.dv-mon .body::after { content: ""; position: absolute; bottom: calc(var(--w) * .009); right: 4%; width: calc(var(--w) * .004); height: calc(var(--w) * .004);
  border-radius: 50%; background: #e9eef5; opacity: .55; }
.dv-mon .screen { aspect-ratio: 16 / 9; border-radius: calc(var(--w) * .002); display: flex; flex-direction: column; }
.dv-mon .screen picture { flex: 1 1 auto; min-height: 0; }
.dv-mon .taskbar .tb-clock { font-size: calc(var(--w) * .0098); }
.dv-mon .neck { position: relative; width: 9%; height: calc(var(--w) * .15); margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 10%, rgba(0,0,0,0) 22%, rgba(0,0,0,.08) 100%),
    linear-gradient(90deg, #6e7075 0%, #a3a5aa 10%, #cfd1d4 45%, #c4c6ca 62%, #9a9ca1 90%, #6a6c71 100%);
  border-radius: 0 0 calc(var(--w) * .003) calc(var(--w) * .003); }
.dv-mon .foot { position: relative; width: 34%; height: calc(var(--w) * .014); margin: 0 auto;
  border-radius: calc(var(--w) * .01) calc(var(--w) * .01) calc(var(--w) * .005) calc(var(--w) * .005);
  background:
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, #f1f2f4 0%, #d4d6d9 34%, #a3a5a9 74%, #6d6f73 100%);
  box-shadow: inset 0 calc(var(--w) * .0012) 0 rgba(255,255,255,.9), 0 calc(var(--w) * .008) calc(var(--w) * .016) rgba(0,0,0,.55); }
/* the Windows family now matches the Mac one: desktop behind, laptop in front on the left, phone in front on the right */
.fam-win .dv-win { --w: calc(var(--u) * 29); z-index: 2; margin-right: calc(var(--u) * -11); }
.fam-win .dv-mon { --w: calc(var(--u) * 39); z-index: 1; }
.fam-win .dv-and { --w: calc(var(--u) * 7.2); z-index: 3; margin-left: calc(var(--u) * -4.2); }

/* ---------- Languages: the word layer reaches below the field; the next section ("Get the highlights.") sits on top,
   so drifting words slide under its top edge and vanish ---------- */
.lang-scatter.is-fly { --sink: 150px; height: calc(clamp(430px, 38vw, 560px) + var(--sink)); padding-bottom: var(--sink); margin-bottom: calc(-1 * var(--sink)); }
.lang-scatter.is-fly .lang-centre { top: calc(50% - var(--sink) / 2); }
.lang-scatter.is-fly .lang-fly {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 34px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 34px, #000 100%); }
.hl-sec { position: relative; z-index: 3; background: var(--bg); }
/* a short soft edge, so a word dissolves as it slides under instead of being cut by an invisible line */
.hl-sec::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg)); }
@media (max-width: 860px) {
  .lang-scatter.is-fly { --sink: 110px; height: calc(clamp(440px, 122vw, 520px) + var(--sink)); }
  .lang-scatter.is-fly .lang-fly {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 28px, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 28px, #000 100%); }
}

/* ---------- Pull up. Sell.: a thumb on the bar that swipes up (site.js moves it with the window; still when motion is reduced) ---------- */
.bd-touch { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; opacity: 0;
  --hw: 120px; --ty: 0px; --tl: 0px; --r: calc(var(--hw) * .13); }
.bd-touch.fade { transition: opacity .45s ease; }
.bd-touch .bd-hand { position: absolute; width: var(--hw); max-width: none; height: calc(var(--hw) * 170 / 120); left: calc(var(--hw) * -23 / 120); top: calc(var(--hw) * -15 / 120);
  transform: translate3d(0, var(--ty), 0); transform-origin: 19% 9%; overflow: visible;
  filter: drop-shadow(0 calc(var(--hw) * .05) calc(var(--hw) * .09) rgba(0, 0, 0, .22));
  -webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 80%); mask-image: linear-gradient(180deg, #000 46%, transparent 80%); }
.bd-touch .bd-hand { transition: scale .25s ease; }
.bd-touch.press .bd-hand { scale: .965; }
/* the touch: a soft grey spot under the thumb pad, and a faint trail back to where the swipe began */
.bd-touch .bd-dot { position: absolute; left: calc(-1 * var(--r)); top: calc(-1 * var(--r)); width: calc(2 * var(--r)); height: calc(2 * var(--r));
  border-radius: 50%; background: radial-gradient(circle, rgba(60, 60, 67, .26) 0 52%, rgba(60, 60, 67, .12) 53% 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); transform: translate3d(0, var(--ty), 0); }
.bd-touch .bd-trail { position: absolute; left: calc(-1 * var(--r) * .78); width: calc(var(--r) * 1.56); bottom: 0; height: var(--tl);
  border-radius: 999px; background: linear-gradient(0deg, rgba(60, 60, 67, 0), rgba(60, 60, 67, .16)); }
.bd-touch .bd-arrow { display: none; position: absolute; left: calc(var(--r) * -.9); top: calc(var(--r) * -3.4); width: calc(var(--r) * 1.8); height: calc(var(--r) * 1.8);
  color: #fff; background: rgba(28, 28, 30, .78); border-radius: 50%; padding: calc(var(--r) * .32); box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.bd-touch .bd-arrow svg { display: block; width: 100%; height: 100%; max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .bd-touch { opacity: 1; }
  .bd-touch .bd-arrow { display: block; }
  .bd-touch .bd-hand, .bd-touch.fade { transition: none; }
}
@media (forced-colors: active) { .bd-touch { display: none; } }