/* Public home (src/web/home.js). Graphite UI: colour comes only from the real bot results it shows. */
/* ---------- Fonts (SIL OFL, self-hosted because the CSP allows only same-origin fonts) ---------- */
@font-face { font-family: Onest; src: url(fonts/onest-cyrillic.woff2?v=37268be) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; src: url(fonts/onest-latin.woff2?v=37268be) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Unbounded; src: url(fonts/unbounded-cyrillic.woff2?v=37268be) format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Unbounded; src: url(fonts/unbounded-latin.woff2?v=37268be) format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Metric-matched fallbacks: until the web fonts arrive, Arial (Roboto on Android) is scaled to their widths and
   heights, so the swap does not reflow the first screen. Values measured in Chromium against Unbounded 600 and
   Onest 400 on the page's own headings and lead (canvas measureText, fontBoundingBox). */
@font-face { font-family: "Unbounded fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600;
  size-adjust: 128.97%; ascent-override: 77.54%; descent-override: 19.38%; line-gap-override: 0%; }
@font-face { font-family: "Onest fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 103.8%; ascent-override: 93.45%; descent-override: 29.87%; line-gap-override: 0%; }

/* The English desktop headline is close to a line-break boundary: match its last line separately. */
@font-face { font-family: "Unbounded fallback en"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600;
  size-adjust: 127%; ascent-override: 78.74%; descent-override: 19.685%; line-gap-override: 0%; }

@property --split { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #1c1c1e;
  --bg-deep: #161618;
  --panel: #232326;
  --panel-2: #2b2b2f;
  --panel-3: #35353a;
  --line: #313136;
  --line-2: #414147;
  --text: #ededf0;
  --text-2: #b6b6bd;
  --muted: #8e8e96;
  --primary: #f1f1f3;
  --primary-hover: #ffffff;
  --primary-ink: #161618;
  /* Telegram dark theme, desaturated: incoming and outgoing bubbles, inline buttons. */
  --tg-in: #2a2a2e;
  --tg-out: #2e3742;
  --tg-button: rgb(255 255 255 / .07);
  --ok: #5ac48f;
  --danger: #f27a6f;
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-pop: 0 28px 70px -24px rgb(0 0 0 / .7), 0 2px 10px rgb(0 0 0 / .35);
  --font-text: Onest, "Onest fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Unbounded, "Unbounded fallback", Onest, "Onest fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: 16px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin-top: 0; overflow-wrap: break-word; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; }
h3, h4 { font-weight: 650; line-height: 1.3; }
small { font-size: 13px; }
strong, b { font-weight: 650; }
code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
::selection { background: rgb(255 255 255 / .22); }
:focus-visible { outline: 3px solid rgb(241 241 243 / .9); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ui-icon { width: 20px; height: 20px; flex: none; }

/* ---------- Buttons and brand ---------- */
.button {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.button:hover { background: var(--primary-hover); }
.button:active { transform: translateY(1px); }
.button.secondary { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.button.secondary:hover { background: var(--panel-3); }
.home-cta { min-height: 52px; padding: 0 24px; font-size: 16px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.brand-name small { margin-left: 3px; color: var(--muted); font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: 0; }

/* ---------- Page frame ---------- */
.public-page { overflow-x: clip; }
/* The public header (.public-header, navigation, burger) lives in site-header.css, shared with the blog. */
.public-main, .public-footer-inner { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.home-section { padding: 64px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.home-section:focus { outline: none; }
.home-heading { max-width: 680px; margin-bottom: 32px; }
.home-heading h2, .home-final h2 { margin-bottom: 12px; font-size: clamp(26px, 6vw, 42px); line-height: 1.1; }
.home-heading p { margin: 0; color: var(--text-2); font-size: 17px; }

/* ---------- Hero ---------- */
.home-hero { display: grid; gap: 40px; padding: 32px 0 64px; }
.home-hero-copy { min-width: 0; }
.home-hero h1 { margin-bottom: 20px; font-size: clamp(34px, 7.4vw, 60px); line-height: 1.05; letter-spacing: -0.045em; text-wrap: balance; }
.home-lead { max-width: 36em; margin-bottom: 28px; color: var(--text-2); font-size: clamp(17px, 2.1vw, 19px); }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero-actions .button { flex: 1 1 auto; min-height: 52px; padding: 0 22px; font-size: 16px; }

/* A Telegram chat with a real request and the bot's real answer. */
.tg-chat { width: min(420px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid var(--line-2); border-radius: 26px; background: #18181b; box-shadow: var(--shadow-pop); }
.tg-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.tg-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--panel-3); font-family: var(--font-display); font-size: 12px; font-weight: 600; }
.tg-head strong { display: block; font-size: 15px; line-height: 1.25; }
.tg-head small { color: var(--muted); }
.tg-body { display: grid; gap: 6px; padding: 14px 12px; }
.tg-msg { max-width: 86%; margin: 0; font-size: 14.5px; line-height: 1.45; }
.tg-out { justify-self: end; padding: 8px 12px; border-radius: 16px 16px 6px 16px; background: var(--tg-out); }
.tg-out-photo { width: 150px; padding: 3px; }
.tg-out-photo img { width: 100%; height: auto; border-radius: 13px 13px 4px 13px; }
.tg-in { justify-self: start; border-radius: 16px 16px 16px 6px; background: var(--tg-in); }
.tg-in-photo { width: min(340px, 100%); overflow: hidden; }
.tg-in-photo img { width: 100%; height: auto; }
.tg-caption { margin: 0; padding: 8px 12px 10px; font-weight: 600; }
.tg-keyboard { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: min(340px, 100%); }
.tg-keyboard span { min-height: 38px; display: grid; place-items: center; padding: 4px 6px; border-radius: 10px; background: var(--tg-button); color: var(--text-2); font-size: 13px; font-weight: 550; line-height: 1.25; text-align: center; }
.tg-chat figcaption { padding: 10px 16px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* ---------- Three actions: one photo through all of them ---------- */
.home-chain { display: grid; gap: 56px; margin: 0; padding: 0; list-style: none; }
.home-step { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 560px; }
.home-step + .home-step::before { content: ""; position: absolute; top: -44px; left: 20px; width: 1px; height: 32px; background: var(--line-2); }
.home-step > p { margin: 0; color: var(--text-2); }
.home-step > .home-meta { color: var(--muted); font-size: 14px; }
.tg-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--tg-button); font-size: 16px; }
.home-frame { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.home-frame img, .home-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-video { background: transparent; }
.tg-request { align-self: flex-end; max-width: 92%; margin: 0; padding: 9px 13px; border-radius: 16px 16px 6px 16px; background: var(--tg-out); font-size: 14.5px; line-height: 1.45; }
.tg-request small { display: block; margin-top: 4px; color: var(--text-2); font-size: 12px; }

.compare { position: absolute; inset: 0; overflow: hidden; user-select: none; touch-action: pan-y; }
.compare img { pointer-events: none; }
.compare .compare-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.compare-handle { position: absolute; inset: 0; transform: translateX(calc(var(--split) - 50%)); pointer-events: none; }
.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 0 18px rgb(0 0 0 / .45); }
.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' fill='none' stroke='%23161618' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 1L1 5l4 4M13 1l4 4-4 4'/%3E%3C/svg%3E") center / 18px 10px no-repeat;
  box-shadow: 0 6px 18px rgb(0 0 0 / .4);
  transform: translate(-50%, -50%);
}
.compare-label { position: absolute; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgb(10 10 12 / .6); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.compare-label.before { left: 10px; }
.compare-label.after { right: 10px; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare:has(.compare-range:focus-visible) { outline: 3px solid rgb(241 241 243 / .9); outline-offset: -3px; }
.compare-range::-webkit-slider-thumb { width: 44px; height: 600px; -webkit-appearance: none; appearance: none; cursor: ew-resize; }
.compare-range::-moz-range-thumb { width: 44px; height: 600px; border: 0; cursor: ew-resize; }
/* The one motion of the page: the first slider sweeps once when it comes into view (web/home.js). */
.compare.is-intro { animation: compare-intro 1.6s var(--ease) .2s backwards; }
@keyframes compare-intro { from { --split: 92%; } to { --split: 50%; } }

.home-charges { display: grid; gap: 14px; margin-top: 56px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel); }
.home-charges h3 { margin: 0; font-size: 19px; }
.home-charges ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-charges li { position: relative; padding-left: 18px; color: var(--text-2); }
.home-charges li::before { content: ""; position: absolute; top: .62em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }

/* ---------- Launch steps ---------- */
.home-steps { display: grid; gap: 32px; margin: 0 0 36px; padding: 0; list-style: none; }
.home-steps li { min-width: 0; }
.home-step-number { display: block; margin-bottom: 14px; color: var(--muted); font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.home-steps h3 { margin-bottom: 6px; font-size: 18px; }
.home-steps p { margin: 0; color: var(--text-2); }
.home-steps .home-token { margin-top: 10px; color: var(--muted); font-size: 14px; }
.home-token code { display: inline-block; padding: 2px 8px; border-radius: 8px; background: var(--panel-2); color: var(--text); }

/* ---------- A website for the bot: the points and a phone with the graphite site theme ---------- */
.home-site-grid { display: grid; gap: 28px; }
.home-site-grid .home-heading { margin-bottom: 0; }
.home-site-foot { display: grid; gap: 18px; justify-items: start; }
.home-site-foot .home-site-note { margin: 0; }
.home-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* The site theme's own tokens (web/sites/lumo.css), so the phone looks like a real bot website, not like this page. */
.web-phone {
  --web-bg: #0d0d0f;
  --web-surface: #151518;
  --web-surface-2: #1c1c20;
  --web-line: #2a2a30;
  --web-line-strong: #3b3b43;
  --web-text: #f4f4f6;
  --web-muted: #a3a3ad;
  --web-faint: #9696a2;
  justify-self: center;
  width: min(320px, 100%);
  padding: 10px 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 34px;
  background: var(--web-bg);
  box-shadow: var(--shadow-pop);
  color: var(--web-text);
  font-size: 13px;
  line-height: 1.35;
}
.web-phone p { margin: 0; }
.web-bar { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; margin-bottom: 12px; padding: 0 12px; border-radius: 999px; background: var(--web-surface-2); color: var(--web-muted); font-size: 12px; }
.web-bar .ui-icon { width: 12px; height: 12px; }
.web-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-screen { display: grid; gap: 12px; padding: 0 6px; }
.web-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgb(255 255 255 / .06); font-size: 14px; }
.web-head strong { font-weight: 750; letter-spacing: -0.01em; }
.web-mark { width: 26px; height: 26px; display: grid; place-items: center; flex: none; border-radius: 8px; background: #fff; color: var(--web-bg); font-size: 13px; font-weight: 800; }
.web-menu { width: 16px; height: 11px; margin-left: auto; border-top: 1.5px solid var(--web-muted); border-bottom: 1.5px solid var(--web-muted); background: linear-gradient(var(--web-muted), var(--web-muted)) center / 100% 1.5px no-repeat; }
.web-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--web-line); border-radius: 999px; background: rgb(255 255 255 / .03); color: var(--web-muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.web-badge::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ok); }
.web-title { font-size: 21px; font-weight: 750; line-height: 1.12; letter-spacing: -0.025em; }
/* The free preview: a blurred portrait drawn with gradients — cap, face, neck and hoodie against an evening window. */
.web-photo { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border: 1px solid var(--web-line); border-radius: 16px; background: #141416; }
.web-photo::before {
  content: "";
  position: absolute;
  inset: -16px;
  background:
    radial-gradient(ellipse 13% 9% at 50% 26%, #222125 0 94%, transparent 100%),
    radial-gradient(ellipse 10.5% 15.5% at 49.5% 39%, #aea79f 0 40%, #8a847d 90%, transparent 100%),
    radial-gradient(ellipse 4% 9% at 50% 56%, #6f6a65 0 90%, transparent 100%),
    radial-gradient(ellipse 40% 29% at 50% 101%, #45444a 0 55%, #333237 92%, transparent 100%),
    radial-gradient(circle at 16% 28%, rgb(255 238 220 / .16), transparent 7%),
    radial-gradient(circle at 24% 66%, rgb(255 255 255 / .08), transparent 6%),
    radial-gradient(circle at 83% 50%, rgb(220 230 255 / .12), transparent 7%),
    radial-gradient(60% 80% at 84% 12%, rgb(255 255 255 / .14), transparent 70%),
    linear-gradient(165deg, #303036, #18181b 70%);
  filter: blur(4px);
}
.web-photo span { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: rgb(0 0 0 / .7); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* One row of effects that fades out at the edge, as a catalog that goes on. */
.web-chips { display: flex; gap: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.web-chips span { display: inline-flex; flex: none; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid var(--web-line-strong); border-radius: 11px; background: var(--web-surface); font-size: 12px; font-weight: 650; white-space: nowrap; }
.web-chips .is-on { border-color: #fff; background: #fff; color: var(--web-bg); }
.web-button { display: grid; place-items: center; min-height: 44px; border-radius: 13px; background: #fff; color: var(--web-bg); font-size: 14px; font-weight: 750; }
.web-pay { color: var(--web-faint); font-size: 11.5px; text-align: center; }

/* ---------- Income ---------- */
.home-income-grid { display: grid; gap: 28px; }
.home-rates { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.home-rates li { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.home-rates strong { font-family: var(--font-display); font-size: clamp(40px, 9vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.home-rates li:first-child strong { font-size: clamp(64px, 16vw, 112px); }
.home-rates span { color: var(--text-2); }
.home-tables { display: grid; gap: 32px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel); }
.home-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.home-table caption { padding-bottom: 8px; font-size: 18px; font-weight: 650; text-align: left; }
.home-table th, .home-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.home-table th:last-child, .home-table td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.home-table thead th { padding-top: 4px; color: var(--muted); font-size: 13px; font-weight: 500; }
.home-table tbody th { color: var(--text); }
.home-table td { color: var(--text-2); }
.home-table tfoot th, .home-table tfoot td { border-bottom: 0; color: var(--text); font-weight: 650; }
.home-honest { max-width: 62ch; margin: 24px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- Permanent link and the dashboard ---------- */
.home-keep-grid { display: grid; gap: 28px; }
.home-keep-grid .home-heading { margin-bottom: 0; }
.home-diagram { display: grid; gap: 10px; margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel); }
.home-diagram p { display: flex; align-items: center; gap: 10px; margin: 0; }
.home-diagram-link { padding: 14px 16px; border-radius: 14px; background: var(--primary); color: var(--primary-ink); font-weight: 650; }
.home-diagram-bot { position: relative; margin-left: 28px !important; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-md); }
.home-diagram-bot::before { content: ""; position: absolute; top: -11px; left: -17px; width: 16px; height: calc(50% + 11px); border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); border-bottom-left-radius: 8px; }
.home-diagram-bot.is-off { color: var(--muted); }
.home-diagram-bot.is-off .ui-icon { color: var(--danger); }
.home-diagram-bot.is-on .ui-icon { color: var(--ok); }
.home-subtitle { margin: 52px 0 6px; font-size: 19px; }
/* The dashboard list and the website points share one look. */
.home-features, .home-site-points { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.home-features li, .home-site-points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; column-gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.home-features li > :not(.home-feature-icon), .home-site-points li > :not(.home-feature-icon) { grid-column: 2; }
.home-feature-icon { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--panel-2); color: var(--text); }
.home-features h4, .home-site-points h3 { margin: 10px 0 4px; font-size: 17px; }
.home-features p, .home-site-points p { margin: 0; color: var(--text-2); }

/* ---------- Payments ---------- */
.home-pay .home-heading { margin-bottom: 20px; }
.home-pay-flow { display: grid; gap: 20px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel); }
.home-pay-flow > p { margin: 0; font-size: 18px; font-weight: 550; text-wrap: balance; }
.home-pay-groups { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0; padding: 0; list-style: none; }
.home-pay-groups li { flex: 1 1 220px; min-width: 0; }
.home-pay-groups strong { display: inline-block; margin-bottom: 6px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 550; }
.home-pay-groups span { display: block; color: var(--text-2); font-size: 14px; overflow-wrap: anywhere; }
.home-payouts { min-width: 0; }
.home-payouts .home-table { table-layout: fixed; font-size: 14px; }
.home-payouts .home-table th, .home-payouts .home-table td { white-space: normal; overflow-wrap: anywhere; }
.home-payouts .home-table th:first-child { width: 30%; }
.home-payouts .home-table th:nth-child(2) { width: 20%; }
.home-payouts .home-table th:nth-child(3) { width: 25%; }

/* ---------- Questions ---------- */
.home-faq-list { max-width: 820px; border-top: 1px solid var(--line); }
.home-faq-list details { border-bottom: 1px solid var(--line); }
.home-faq-list summary { position: relative; min-height: 56px; display: flex; align-items: center; padding: 14px 44px 14px 0; font-size: 17px; font-weight: 600; line-height: 1.35; list-style: none; cursor: pointer; }
.home-faq-list summary::-webkit-details-marker { display: none; }
.home-faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23b6b6bd' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M8 2v12M2 8h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .2s var(--ease);
}
.home-faq-list details[open] summary::after { transform: rotate(45deg); }
.home-faq-list summary:hover { color: var(--primary-hover); }
.home-faq-list details p { max-width: 68ch; margin: 0 0 20px; color: var(--text-2); }

/* ---------- Final call and footer ---------- */
.home-final { margin: 8px 0 64px; padding: 44px 22px; border: 1px solid var(--line-2); border-radius: 28px; background: var(--panel); text-align: center; }
.home-final h2 { max-width: 18ch; margin-inline: auto; }
.home-final p { max-width: 34em; margin: 0 auto 24px; color: var(--text-2); font-size: 17px; text-wrap: balance; }

.public-footer { border-top: 1px solid var(--line); background: var(--bg-deep); }
.public-footer-inner { display: grid; gap: 14px; padding-top: 30px; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.public-footer p { margin: 0; color: var(--muted); }
.public-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.public-footer nav a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; color: var(--text-2); }
.public-footer-inner > a { display: inline-flex; align-items: center; min-height: 44px; }
.public-footer nav a:hover { color: var(--text); }
.public-footer small { color: var(--muted); }

/* ---------- Wider screens ---------- */
@media (min-width: 620px) {
  :root { --gutter: 28px; }
  .home-hero-actions .button { flex: 0 0 auto; }
  .home-charges ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .home-features, .home-site-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .home-final { padding: 64px 32px; }
  .public-footer-inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 28px; }
  .public-footer small { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .home-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .home-step { max-width: none; }
  /* Between the frames: a connector at the height of the action buttons. */
  .home-step + .home-step::before { top: 20px; left: -28px; width: 24px; height: 1px; }
  .home-step + .home-step::after { content: ""; position: absolute; top: 16px; left: -9px; width: 8px; height: 8px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); transform: rotate(45deg); }
}
@media (min-width: 900px) {
  /* Stable controls while the text font swaps. Values also fit the signed-in labels. */
  .public-header .language-switch { width: 76px; }
  .public-header .public-navigation > a:nth-child(1) { width: 140px; }
  .public-header .public-navigation > a:nth-child(2) { width: 166px; }
  .public-header .public-navigation > a:nth-child(3) { width: 72px; }
  .public-header .public-navigation > a.public-nav-login { width: 96px; }
  :lang(en) .public-header .public-navigation > a:nth-child(1) { width: 98px; }
  :lang(en) .public-header .public-navigation > a:nth-child(2) { width: 132px; }
}
@media (min-width: 960px) {
  .home-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 56px; padding: 72px 0 96px; }
  .home-section { padding: 96px 0; }
  .home-hero-actions .button { flex: 0 0 230px; }
  .home-hero-actions .button.secondary { flex-basis: 195px; }
  :lang(en) .home-hero h1 { font-family: Unbounded, "Unbounded fallback en", sans-serif; }
  :lang(en) .tg-body > .tg-out:not(.tg-out-photo) { min-height: calc(3 * 1.45em + 16px); }
  .home-heading { margin-bottom: 44px; }
  .home-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-income-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
  .home-keep-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
  /* Text on the left, the phone on the right — as the hero and the permanent link. */
  .home-site-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "heading phone" "points phone" "note phone"; column-gap: 56px; row-gap: 28px; align-items: start; }
  .home-site-grid > .home-heading { grid-area: heading; }
  .home-site-grid > .web-phone { grid-area: phone; align-self: center; width: 344px; }
  .home-site-grid > .home-site-points { grid-area: points; grid-template-columns: minmax(0, 1fr); }
  .home-site-grid > .home-site-foot { grid-area: note; }
  .home-tables { padding: 28px; }
}
@media (min-width: 380px) {
  .home-table td { white-space: nowrap; }
}
@media (max-width: 619px) {
  /* Keep every payout term readable on phones: the method name spans the row, then three labelled values. */
  .home-payouts .home-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .home-payouts .home-table tbody { display: block; }
  .home-payouts .home-table tr { display: grid; grid-template-columns: .8fr 1.1fr 1fr; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .home-payouts .home-table tbody th:first-child { grid-column: 1 / -1; width: auto; padding: 0; border: 0; font-weight: 550; }
  .home-payouts .home-table td { min-width: 0; padding: 0; border: 0; }
  .home-payouts .home-table td::before { content: attr(data-label); display: block; margin: 2px 0 4px; color: var(--muted); font-size: 12px; }
}
@media (max-width: 379px) {
  .home-tables { padding: 16px 12px; }
}
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .brand-name small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}