/* Izem, izemdesk.com. Two themes as in the app: Graphite (dark) and Paper (light), one warm tone (the logo's dot). */
/* Inter, SIL Open Font License (fonts/OFL.txt), served from here: no request to a third party. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-wght.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-cyrillic-wght.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141414; --bg-rgb: 20, 20, 20;
  --bg-2: #181818;
  --tile: #1c1c1c; --tile-2: #181818;
  --raised: #242424;
  --edge: #2a2a2a;
  --edge-2: #3a3a3a;
  --text: #f3f3f1;
  --soft: #b5b5b1;
  --dim: #8f8f8b;
  --faint: #4c4c4a;
  --warm: #f59a52;
  --warm-bg: #261b13; --warm-edge: #4a3221;
  --btn: #f3f3f1; --btn-text: #141414; --btn-dim: #6a6a6a;
  --card-top: #262626; --card-hi: rgba(255, 255, 255, .09);
  --cap-1: #303030; --cap-2: #202020; --cap-edge: rgba(255, 255, 255, .1); --cap-hi: rgba(255, 255, 255, .12);
  --shadow: rgba(0, 0, 0, .55);
  --logo: #f2ede6;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f2; --bg-rgb: 244, 244, 242;
  --bg-2: #ececea;
  --tile: #ffffff; --tile-2: #fafaf8;
  --raised: #ffffff;
  --edge: #e3e3df;
  --edge-2: #d1d1cc;
  --text: #141414;
  --soft: #454543;
  --dim: #6a6a67;
  --faint: #bdbdb8;
  --warm: #9a470b;
  --warm-bg: #f8ece1; --warm-edge: #ebcfb6;
  --btn: #141414; --btn-text: #ffffff; --btn-dim: #9a9a94;
  --card-top: #ffffff; --card-hi: rgba(255, 255, 255, 1);
  --cap-1: #ffffff; --cap-2: #f2f2ef; --cap-edge: rgba(0, 0, 0, .08); --cap-hi: rgba(255, 255, 255, .9);
  --shadow: rgba(40, 36, 30, .18);
  --logo: #1c1814;
}
:root {
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --wrap: 1240px;
  --gutter: 52px;
  --radius: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg, canvas { display: block; }
::selection { background: rgba(245, 154, 82, .3); }
:focus-visible { outline: 1.5px solid var(--warm); outline-offset: 4px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--btn); color: var(--btn-text); padding: 10px 16px; border-radius: 999px; font-weight: 500; }
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.label { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.label.warm { color: var(--warm); }
h1, h2, h3 { text-wrap: balance; }
.nw { white-space: nowrap; }
h1 em, h2 em { font-style: normal; color: var(--dim); }
.section:not(#pricing) .head h2 em { color: inherit; } /* two tones only in the hero, the price and the end */

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--btn); color: var(--btn-text);
  font-weight: 500; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; transition: box-shadow .35s var(--ease), transform .2s var(--ease); }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover { box-shadow: 0 0 0 5px rgba(245, 123, 46, .14), 0 12px 36px -10px rgba(245, 123, 46, .55); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn .price { font-weight: 400; color: var(--btn-dim); }
.btn.small { height: 40px; padding: 0 18px; font-size: 14px; }
.link { display: inline-flex; align-items: center; gap: 10px; color: var(--soft); font-size: 15px; font-weight: 500; transition: color .25s; }
.link:hover { color: var(--text); }
.link i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge-2); display: grid; place-items: center; font-style: normal; font-size: 13px; transition: border-color .25s; }
.link:hover i { border-color: var(--soft); }

/* ---------- logo ---------- */
.mark { width: 24px; height: 24px; flex: none; color: var(--logo); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 20; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.top.scrolled { background: rgba(var(--bg-rgb), .76); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--edge); }
.top .wrap { height: 72px; display: flex; align-items: center; gap: 36px; }
.top nav { display: flex; gap: 28px; margin-left: auto; }
.top nav a { font-size: 14px; color: var(--soft); transition: color .2s; }
.top nav a:hover { color: var(--text); }
.acts { display: flex; align-items: center; gap: 10px; }
.themes { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--edge-2); background: var(--tile); }
.themes button { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--dim); transition: color .2s, background .2s; }
.themes button:hover { color: var(--text); }
.themes button[aria-pressed="true"] { background: var(--btn); color: var(--btn-text); }
.themes button:focus-visible { outline: 1.5px solid var(--warm); outline-offset: 2px; }
.themes svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* theme switch: a circle grows from the button, as in the app */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 680px; min-height: clamp(680px, 100svh, 940px); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 96px), transparent); mask-image: linear-gradient(#000 calc(100% - 96px), transparent); } /* the glow and the orbits fade out: no hard edge where the hero ends */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--bg-rgb), 1) 0%, rgba(var(--bg-rgb), .9) 30%, rgba(var(--bg-rgb), .2) 52%, transparent 62%); } /* nothing over the sphere: the canvas fades its orbits at the bottom */
.hero > .wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 56px; }
.hero-copy { max-width: 560px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.hero h1 { margin: 0; font-weight: 300; font-size: clamp(52px, 5.8vw, 86px); line-height: 1.02; letter-spacing: -.05em; }
.hero h1 em { display: block; }
.lead { margin: 26px 0 0; max-width: 460px; font-size: 18px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.lead b { font-weight: 500; color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 32px; }
.hero .cta-row .btn { min-width: 188px; padding: 0 34px; justify-content: center; } /* the hero's button: wider, it is the first thing to press */
.meta { margin: 20px 0 0; font-size: 13px; color: var(--dim); }

/* the live conversation (as the app shows it: who, the line, replies or steps).
   Desktop: under the copy. Phone and portrait tablet: written on the sphere that rises from the bottom edge (see "horizon" below). */
.horizon { display: none; position: relative; max-width: 560px; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }


.hero-foot { position: absolute; left: 0; right: 0; bottom: 28px; pointer-events: none; }
.hotkey { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.hotkey kbd { font: 500 11px var(--sans); padding: 3px 7px; border: 1px solid var(--edge-2); border-bottom-width: 2px; border-radius: 6px; color: var(--soft); background: rgba(var(--bg-rgb), .6); }

/* ---------- sections ---------- */
.section { padding: 100px 0; position: relative; } .hero + .section { padding-top: 56px; }
.section.s-tight { padding-top: 40px; } .section.s-mid { padding-top: 40px; } .section.s-flush { padding-top: 0; }
.head { max-width: 760px; margin-bottom: 60px; }
.head.center { margin-inline: auto; text-align: center; }
.head h2 { margin: 0; font-weight: 300; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.045em; }
.head p:not(.label) { margin: 20px 0 0; font-size: 18px; color: var(--soft); max-width: 600px; text-wrap: pretty; }
.head.center p:not(.label) { margin-inline: auto; }


/* ---------- built-in commands: the words left, a table of what you say and what he answers right; "six more" turns the page ---------- */
.cmds { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.cmds .head { margin-bottom: 0; max-width: 480px; }
.tbl { border-radius: var(--radius); border: 1px solid var(--edge); background: linear-gradient(var(--tile), var(--tile-2)); overflow: hidden; box-shadow: 0 40px 100px -40px var(--shadow); }
.tbl-head { display: grid; grid-template-columns: 44% 1fr; gap: 20px; padding: 16px 24px 14px; border-bottom: 1px solid var(--edge); }
.tbl-head span { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.tbl-head .him { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.tbl-head .him b { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.tbl-rows { list-style: none; margin: 0; padding: 0; }
/* every row is two lines tall, whatever it says: the table never changes height */
.tbl-rows li { display: grid; grid-template-columns: 44% 1fr; gap: 20px; align-items: center; height: 68px; padding: 0 24px; }
.tbl-rows li + li { border-top: 1px solid var(--edge); }
.tbl-rows q, .tbl-rows p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; }
.tbl-rows q { font-size: 15px; font-style: italic; color: var(--soft); quotes: "“" "”"; }
:lang(ru) .tbl-rows q { quotes: "«" "»"; }
.tbl-rows p { font-size: 16px; font-weight: 500; color: var(--text); }
.tbl-rows li > * { transition: opacity .25s, transform .35s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.tbl-rows.turning li > * { opacity: 0; transform: translateY(4px); }
.tbl-bar { height: 2px; background: var(--edge); }
.tbl-bar i { display: block; height: 100%; background: var(--soft); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); }
.tbl-more { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 500; color: var(--text); transition: background-color .2s; }
.tbl-more:hover { background: var(--raised); }
.tbl-more:focus-visible { outline: 1.5px solid var(--warm); outline-offset: -3px; }
.tbl-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.tbl-more.spin svg { transform: rotate(180deg); }

.panel { background: linear-gradient(var(--tile), var(--tile-2)); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: 0 40px 100px -40px var(--shadow); }
.builder { margin: 0; padding: 10px; }
.builder-top { display: flex; align-items: center; gap: 12px; padding: 10px 12px 14px; }
.builder-top .dots { display: flex; gap: 6px; } .builder-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--edge-2); }
.builder-top .path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--dim); } .builder-top .path b { font-weight: 500; color: var(--text); }
.builder-top .on { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--soft); }
.toggle { width: 30px; height: 17px; border-radius: 99px; background: var(--warm); position: relative; }
.toggle::after { content: ""; position: absolute; right: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
/* on a wide screen every routine sits in the same grid cell: the panel is as tall as the tallest, its beats stretch to fill it, nothing below moves */
/* ---------- routines: build your own. The words and a list of examples left (yours and the ready-made ones), the editor filling itself in right ---------- */
.yours { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.yours .head { max-width: 480px; margin-bottom: 32px; }
.yours-copy { min-width: 0; }
.ex-list { display: grid; gap: 2px; margin-inline: -12px; }
.ex-list button { all: unset; cursor: pointer; position: relative; overflow: hidden; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 9px 12px; border-radius: 12px; border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.ex-list button:hover { background: var(--raised); }
.ex-list button[aria-selected="true"] { background: var(--raised); border-color: var(--edge); }
.ex-list button:focus-visible { outline: 1.5px solid var(--warm); outline-offset: 2px; }
.ex-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--bg); border: 1px solid var(--edge); display: grid; place-items: center; color: var(--dim); transition: color .2s, background-color .2s, border-color .2s; }
.ex-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ex-list button[aria-selected="true"] .ex-ic { color: var(--text); border-color: var(--edge-2); }
.ex-t { min-width: 0; }
.ex-t b { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--soft); transition: color .2s; }
.ex-t small { display: block; font-size: 13px; line-height: 1.35; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-list button[aria-selected="true"] b, .ex-list button:hover b { color: var(--text); }
.ex-list em { font-style: normal; font-size: 12px; color: var(--dim); white-space: nowrap; } /* "Ready-made": a quiet word, not five outlined badges */
/* while they turn by themselves, a warm line under the one picked runs up to the next turn */
.ex-list button::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--soft); transform: scaleX(0); transform-origin: left; opacity: 0; }
.ex-list button.run::after { opacity: .7; transform: scaleX(1); transition: transform var(--dwell, 7s) linear; }
.ex-note { margin: 20px 0 0; max-width: 440px; font-size: 14px; color: var(--dim); text-wrap: pretty; }
/* the editor: four parts as in the app; the three examples share one grid cell, so it never changes height */
.maker .toggle { transition: background-color .3s; }
.maker .toggle::after { transition: transform .3s var(--ease); }
.maker:not(.saved) .toggle { background: var(--edge-2); } .maker:not(.saved) .toggle::after { transform: translateX(-13px); }
.mk { display: grid; overflow: hidden; transition: height .45s var(--ease); }
.mk-ex { grid-area: 1 / 1; align-self: start; visibility: hidden; display: grid; align-content: start; }
.mk-ex.on { visibility: visible; }
.mk-sec { padding: 12px 6px 14px; border-top: 1px solid var(--edge); }
.mk-sec:first-child { border-top: 0; padding-top: 4px; }
.mk-sec header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mk-sec header b { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mk-sec.says header b { color: var(--warm); }
.mk-sec header i { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--edge-2); display: grid; place-items: center; color: var(--dim); }
.mk-sec header i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mk-rows { display: grid; gap: 6px; }
.mk-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; background: var(--raised); border: 1px solid var(--edge); }
.mk-row .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--bg); border: 1px solid var(--edge); display: grid; place-items: center; }
.mk-row .ic svg { width: 16px; height: 16px; fill: none; stroke: var(--soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mk-row small { display: block; font-size: 12px; line-height: 1.3; color: var(--dim); }
.mk-row span { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-sec.says q { padding: 10px 12px; border-radius: 10px; background: var(--warm-bg); border: 1px solid var(--warm-edge); }
.mk-sec.says q { display: block; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--text); quotes: "“" "”"; }
/* the parts appear one after the other, then it is saved: the switch turns on and Save lights up once */
.mk-ex.on .mk-row, .mk-ex.on .mk-sec.says q { animation: rise .45s var(--ease) both; animation-delay: var(--at, 0s); }
.mk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 6px 4px; border-top: 1px solid var(--edge); }
.mk-reps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mk-reps span { font-size: 13px; font-weight: 500; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--warm-edge); color: var(--soft); }
.mk-reps span.main { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
.mk-ex.on .mk-reps { animation: rise .45s var(--ease) both; animation-delay: var(--at, 0s); }
.mk-note { font-size: 13px; color: var(--dim); min-width: 0; text-wrap: pretty; }
.mk-btns { display: flex; gap: 8px; }
.mk-btns span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.mk-check { border: 1px solid var(--edge-2); color: var(--soft); }
.mk-save { background: var(--edge); color: var(--dim); transition: background-color .3s, color .3s, box-shadow .6s var(--ease); }
.maker.saved .mk-save { background: var(--btn); color: var(--btn-text); box-shadow: 0 0 0 6px rgba(245, 123, 46, 0); animation: saved .9s var(--ease); }
@keyframes saved { from { box-shadow: 0 0 0 0 rgba(245, 123, 46, .45); } }

:lang(ru) .mk-sec.says q { quotes: "«" "»"; }


/* ---------- privacy and safety: the words left, three short points right (the grid of Commands and Routines) ---------- */
.privacy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.privacy .head { margin-bottom: 0; max-width: 480px; }
.trust { border-top: 1px solid var(--edge); }
.trust > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 18px; padding: 24px 0; border-bottom: 1px solid var(--edge); }
.trust .pic { grid-row: span 2; }
/* ---------- after you pay: four steps in a row under the price card, joined by a line through their icons; one under the other on a phone ---------- */
.after-wrap { width: min(860px, 100%); margin: 80px auto 0; }
.after-title { margin: 0 0 32px; text-align: center; font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; letter-spacing: -.035em; }
.after { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.after li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.after li:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 34px); right: calc(-50% + 6px); height: 1px; background: var(--edge-2); } /* from this icon to the next */
.after .pic { margin-bottom: 12px; }
.after b { font-weight: 500; font-size: 18px; letter-spacing: -.01em; color: var(--text); }
.after .pic, .trust .pic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--edge-2); }
.after .pic svg, .trust .pic svg { width: 19px; height: 19px; fill: none; stroke: var(--soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust h3 { margin: 0; align-self: center; font-size: 21px; font-weight: 400; letter-spacing: -.03em; }
.trust p { margin: 0; color: var(--soft); font-size: 15px; text-wrap: pretty; }
.trust-fine { margin: 22px 0 0; font-size: 14px; color: var(--dim); text-wrap: pretty; }

/* ---------- pricing ---------- */
.price-wrap { position: relative; display: grid; place-items: center; }
.price-glow { position: absolute; width: min(720px, 100%); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(244, 123, 46, .18), transparent 70%); }
.card { position: relative; width: min(540px, 100%); padding: 40px 40px 34px; border-radius: 26px; background: linear-gradient(var(--card-top), var(--tile) 34%, var(--tile-2)); border: 1px solid var(--edge-2);
  box-shadow: inset 0 1px 0 var(--card-hi), 0 50px 120px -40px var(--shadow); } /* lit from above, like the app's capsule */
.card-top .label { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--edge-2); letter-spacing: .12em; color: var(--soft); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.amount { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 6px; }
.amount b { font-weight: 300; font-size: 88px; line-height: .9; letter-spacing: -.06em; }
.amount b .cur { font-size: .48em; font-weight: 400; letter-spacing: 0; vertical-align: .9em; margin-right: 2px; } /* a small dollar sign: the number is what you read */
.amount span { font-size: 18px; color: var(--dim); }
.card .sub { color: var(--dim); font-size: 14px; margin: 0 0 26px; }
.card ul { list-style: none; margin: 0 0 30px; padding: 24px 0 0; border-top: 1px solid var(--edge); display: grid; gap: 11px; }
.card li { display: flex; gap: 12px; align-items: baseline; color: var(--soft); font-size: 15px; }
.card li svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translateY(3px); }
.card .btn { width: 100%; justify-content: center; height: 56px; font-size: 16px; }
.card .refund { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--dim); text-align: center; } /* one quiet line: the button stays the only accent */
.card .refund svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card .refund b { font-weight: 500; color: var(--soft); }
.card .refund a, #faq .a a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color .2s; } /* the support address: a link inside the words */
.card .refund a:hover, #faq .a a:hover { color: var(--text); }


/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.faq .head { margin: 0; position: sticky; top: 112px; align-self: start; }
.qa { border-top: 1px solid var(--edge); }
.qa details { border-bottom: 1px solid var(--edge); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 400; letter-spacing: -.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--edge-2); position: relative; transition: transform .35s var(--ease), border-color .2s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.3px; background: var(--soft); transform: translate(-50%, -50%); }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa details[open] summary i { transform: rotate(45deg); border-color: var(--soft); }
.qa .a { padding: 0 60px 24px 0; color: var(--soft); font-size: 16px; }
.qa .a p { margin: 0; }

/* ---------- finale ---------- */
.finale { position: relative; overflow: hidden; padding: 40px 0 130px; text-align: center; isolation: isolate; }
.finale h2 { margin: 0; font-weight: 300; font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.05em; }
.finale p:not(.label) { margin: 22px auto 0; max-width: 520px; color: var(--soft); font-size: 18px; }
.finale .cta-row { justify-content: center; }

footer { border-top: 1px solid var(--edge); background: var(--bg); position: relative; z-index: 1; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; padding: 32px 0; font-size: 14px; color: var(--dim); }
footer nav { display: flex; gap: 24px; margin-left: auto; } footer nav a:hover { color: var(--text); }
footer .brand { color: var(--text); }

/* ---------- reveal ---------- */
/* hidden only when the script runs (html.js): without it the page is simply there */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- menu (below 1100 px the links fold into a button) ---------- */
.menu-btn { all: unset; display: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--edge-2); background: var(--tile); place-items: center; }
.menu-btn i, .menu-btn i::before { content: ""; display: block; width: 16px; height: 1.6px; border-radius: 1px; background: var(--text); transition: transform .3s var(--ease); }
.menu-btn i { position: relative; transform: translateY(-3px); } .menu-btn i::before { position: absolute; top: 6px; }
.menu-btn[aria-expanded="true"] i { transform: rotate(45deg); } .menu-btn[aria-expanded="true"] i::before { top: 0; transform: rotate(90deg); }
.menu-btn:focus-visible { outline: 1.5px solid var(--warm); outline-offset: 2px; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 36px; }
  .top .wrap { gap: 24px; } .top nav { gap: 22px; }
  .faq, .yours, .privacy { grid-template-columns: 1fr; gap: 44px; }
  .faq .head { position: static; }
  .hero::after { background: linear-gradient(90deg, rgba(var(--bg-rgb), 1) 0%, rgba(var(--bg-rgb), .85) 45%, rgba(var(--bg-rgb), .1) 80%); }
  .after { gap: 32px 40px; } .after li:not(:last-child)::after { display: none; }
}
@media (max-width: 899px) {
  .menu-btn { display: grid; }
  .top nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 8px var(--gutter) 18px; flex-direction: column; gap: 0;
    background: rgba(var(--bg-rgb), .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--edge); }
  .top nav.open { display: flex; }
  .top nav a { font-size: 18px; padding: 14px 0; border-top: 1px solid var(--edge); } .top nav a:first-child { border-top: 0; }
  .acts { margin-left: auto; }
}

/* ---------- a phone held upright, or a tablet upright: the sphere rises from the bottom edge ----------
   It is the one who speaks, so the conversation is written on it: its top edge is the horizon, the voice runs along it.
   Keep in step with `horizonMQ` in main.js. */
@media (max-width: 899px) and (orientation: portrait) {
  .hero { min-height: 0; }
  .hero::after { background: linear-gradient(0deg, rgba(var(--bg-rgb), 1) 0%, transparent 6%); }
  .hero canvas { -webkit-mask-image: none; mask-image: none; } /* the sphere is the bottom edge here: nothing to fade */
  .hero > .wrap { justify-content: flex-start; padding: clamp(104px, 15svh, 140px) 0 0; }
  .hero-copy { padding-bottom: 20px; }
  .hero-foot { display: none; }
  .horizon { display: block; margin-top: 60px; max-width: none; height: clamp(120px, 16svh, 160px); }
  .hero + .section { padding-top: 12px; }
}

/* ---------- below 1100 px: one column; the examples are one row of pills that scrolls sideways, above the editor (they never turn by themselves here) ---------- */
@media (max-width: 1100px) {
  .cmds { grid-template-columns: 1fr; gap: 36px; }
  .cmds .head, .yours .head { max-width: 640px; }
  .yours .head { margin-bottom: 26px; }
  .ex-list { display: flex; gap: 7px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter);
    scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none;
    --fl: 0px; --fr: 44px; -webkit-mask: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
  .ex-list.mid { --fl: 44px; } .ex-list.end { --fl: 44px; --fr: 0px; }
  .ex-list::-webkit-scrollbar { display: none; }
  .ex-list button { flex: none; display: flex; gap: 8px; padding: 8px 15px; border-radius: 999px; border-color: var(--edge-2); scroll-snap-align: start; }
  .ex-list button[aria-selected="true"] { background: var(--btn); border-color: var(--btn); }
  .ex-list button[aria-selected="true"] b { color: var(--btn-text); }
  .ex-ic, .ex-t small, .ex-list button::after { display: none; }
  .ex-t b { font-size: 14px; white-space: nowrap; }
  .ex-list button[aria-selected="true"] em { color: var(--btn-text); border-color: color-mix(in srgb, var(--btn-text) 35%, transparent); }
  .yours { gap: 0; }
  .yours-copy { display: contents; }
  .maker { order: 1; margin-top: 24px; max-width: 760px; }
  .ex-note { order: 2; margin-top: 16px; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --gutter: 20px; --radius: 16px; }
  body { font-size: 16px; }
  .top .wrap { height: 62px; }
  /* one theme button: it shows the theme it switches to */
  .themes { padding: 0; gap: 0; border: 0; background: none; }
  .themes button { width: 40px; height: 40px; border: 1px solid var(--edge-2); background: var(--tile); color: var(--text); }
  .themes button[aria-pressed="true"] { display: none; }
  .acts { gap: 8px; }
  .js .acts .btn.small { display: none; } .js .top.past-hero .acts .btn.small { display: inline-flex; animation: rise .3s var(--ease) both; }
  .eyebrow { margin-bottom: 18px; }
  .hero h1 { font-size: clamp(42px, 12vw, 54px); line-height: 1.04; letter-spacing: -.05em; }
  .lead { font-size: 16px; margin-top: 18px; } .more { display: none; }
  .cta-row { margin-top: 20px; gap: 14px 20px; } .cta-row .link { display: none; }
  .meta { font-size: 13px; margin-top: 14px; }
  .section { padding: 72px 0; }
  .head { margin-bottom: 38px; }
  .head h2 { font-size: clamp(32px, 9vw, 40px); line-height: 1.08; }
  .head p:not(.label) { font-size: 16px; }
  .after-wrap { margin-top: 56px; }
  .after-title { text-align: left; margin-bottom: 24px; }
  .after { grid-template-columns: 1fr; gap: 0; }
  .after li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 16px; padding-bottom: 24px; align-items: start; text-align: left; }
  .after li .pic { grid-row: span 2; margin: 0; }
  .after li:not(:last-child)::after { display: block; top: 52px; bottom: 4px; left: 20px; right: auto; width: 1px; height: auto; background: var(--edge-2); }
  .builder { padding: 8px; }
  .trust > div { padding: 20px 0; gap: 4px 16px; }
  .trust h3 { font-size: 18px; }
  .builder-top { padding: 8px 10px 12px; }
  .builder-top .dots { display: none; }
  .mk-row span { font-size: 14px; }
  .mk-check { display: none !important; }
  .tbl-head, .tbl-rows li { padding-inline: 16px; gap: 14px; } .tbl-head span { letter-spacing: .1em; }
  .tbl-rows li { height: 72px; } .tbl-rows q, .tbl-rows p { -webkit-line-clamp: 3; line-height: 1.3; }
  .tbl-rows q { font-size: 14px; } .tbl-rows p { font-size: 14px; }
  .tbl-more { height: 50px; font-size: 14px; }
  .card { padding: 30px 22px 26px; border-radius: 22px; }
  .amount b { font-size: 72px; }
  .qa summary { font-size: 16px; padding: 19px 0; }
  .qa .a { padding-right: 0; font-size: 15px; }
  .finale { padding-top: 40px; padding-bottom: 84px; }
  .finale h2 { font-size: clamp(34px, 10vw, 44px); }
  .finale p:not(.label) { font-size: 16px; }
  footer nav { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* a phone on its side (little height): the two-column hero, whatever the width */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero > .wrap { padding: 84px 0 56px; }
  .hero-foot { display: none; }
}

/* ?all: a still page for screenshots */
.shot *, .shot *::before, .shot *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
@media (min-width: 900px) { .shot .hero { min-height: 680px; } }
.shot.js .rv { opacity: 1; transform: none; }

/* a tablet held upright: the same horizon, a little more air and larger words */
@media (min-width: 761px) and (max-width: 899px) and (orientation: portrait) {
  .horizon { height: clamp(150px, 15svh, 200px); }
}

/* ---------- hero variants for a phone held upright (?hv=b|c|d; a is the default above) ---------- */
.orb-slot, .m-pa { display: none; }
@media (max-width: 899px) and (orientation: portrait) {
  html:is([data-hv="b"], [data-hv="c"], [data-hv="d"]) .hero-copy { display: contents; }
  html:is([data-hv="b"], [data-hv="c"]) .hero > .wrap { padding: 84px 0 22px; text-align: center; }
  html:is([data-hv="b"], [data-hv="c"]) .eyebrow, html:is([data-hv="b"], [data-hv="c"]) .m-win { display: none; }
  html:is([data-hv="b"], [data-hv="c"]) .m-pa { display: inline; }
  html:is([data-hv="b"], [data-hv="c"]) .lead { display: none; }
  html:is([data-hv="b"], [data-hv="c"]) .horizon { height: auto; padding: 0; }
  html:is([data-hv="b"], [data-hv="c"]) .cta-row { justify-content: center; margin-top: 18px; }
  html:is([data-hv="b"], [data-hv="c"]) .pause { top: 0; bottom: auto; left: auto; right: 0; margin: 0; }

  /* b: one big sphere behind the headline, the words under it, the button where the thumb is */
  html[data-hv="b"] .hero h1 { order: 2; font-size: clamp(44px, 12.4vw, 56px); margin: auto 0; }
  html[data-hv="b"] .horizon { order: 5; margin-top: 0; }
  html[data-hv="b"] .cta-row { order: 6; }
  html[data-hv="b"] .meta { order: 7; text-align: center; }

  /* c: headline, a whole orb, the words, the button */
  html[data-hv="c"] .hero h1 { order: 2; font-size: clamp(42px, 11.6vw, 52px); }
  html[data-hv="c"] .orb-slot { display: block; order: 3; flex: 1 1 auto; min-height: 150px; }
  html[data-hv="c"] .horizon { order: 4; margin: 0; }
  html[data-hv="c"] .cta-row { order: 5; }
  html[data-hv="c"] .meta { order: 6; text-align: center; }

  /* d: a dome hangs from the top edge with the words in it; the headline and the button under it */
  html[data-hv="d"] .hero > .wrap { padding: 0 0 22px; }
  html[data-hv="d"] .horizon { order: -1; flex: 1 1 auto; height: auto; min-height: 250px; margin: 0; padding: 64px 0 46px; display: flex; flex-direction: column; justify-content: center; }
  html[data-hv="d"] .eyebrow { margin: 26px 0 14px; }
  html[data-hv="d"] .pause { top: 70px; bottom: auto; left: auto; right: 0; margin: 0; }
  html[data-hv="d"] .hero::after { background: none; }
}

/* ---------- from the side (?hv=e|f|g|h): the sphere comes in past an edge, the text keeps its left-aligned reading line ---------- */
@media (max-width: 899px) and (orientation: portrait) {
  html:is([data-hv="e"], [data-hv="f"], [data-hv="g"], [data-hv="h"]) .hero-copy { display: contents; }
  html:is([data-hv="e"], [data-hv="f"], [data-hv="g"], [data-hv="h"]) .hero::after { background: none; }
  html:is([data-hv="e"], [data-hv="f"], [data-hv="g"], [data-hv="h"]) .hero > .wrap { padding: 84px 0 22px; }
  html:is([data-hv="e"], [data-hv="f"], [data-hv="g"], [data-hv="h"]) .horizon { height: auto; padding: 0; max-width: none; }
  html:is([data-hv="e"], [data-hv="f"], [data-hv="g"], [data-hv="h"]) .talk { text-align: left; }
  html:is([data-hv="e"], [data-hv="f"], [data-hv="g"], [data-hv="h"]) .talk .who, html:is([data-hv="e"], [data-hv="f"], [data-hv="g"], [data-hv="h"]) .chips { justify-content: flex-start; }
  html:is([data-hv="e"], [data-hv="f"], [data-hv="g"], [data-hv="h"]) .pause { top: -4px; bottom: auto; left: auto; right: 0; margin: 0; }

  /* e: a giant sphere, more than half of it past the right edge; the headline and the lead run over it, the button is at the bottom */
  html[data-hv="e"] .hero h1 { font-size: clamp(44px, 12.4vw, 56px); }
  html[data-hv="e"] .horizon { margin-top: auto; }
  html[data-hv="e"] .cta-row { margin-top: 20px; }

  /* f: a sphere in the bottom right corner; what he says is written across it, at the bottom */
  html[data-hv="f"] .horizon { margin-top: auto; padding-top: 24px; }
  html[data-hv="f"] .talk .ln { font-size: 20px; }

  /* g: a sphere half past the left edge, the words he says start where its edge ends */
  html[data-hv="g"] .horizon { margin: 44px 0 0 calc(24vw + 24px); }
  html[data-hv="g"] .talk .ln { font-size: 17px; min-height: 4.35em; max-height: 4.35em; }
  html[data-hv="g"] .chips { flex-wrap: wrap; min-height: 68px; overflow: visible; }
  html[data-hv="g"] .cta-row { margin-top: auto; padding-top: 20px; }
  html[data-hv="g"] .meta { margin-top: 14px; }

  /* h: a tall wall on the right; the text lives in a column to its left, the voice runs down its edge */
  html[data-hv="h"] .hero-copy > *, html[data-hv="h"] .horizon { max-width: calc(72vw - 34px); }
  html[data-hv="h"] .hero h1 { font-size: clamp(34px, 9.8vw, 44px); }
  html[data-hv="h"] .lead { font-size: 16px; }
  html[data-hv="h"] .horizon { margin-top: auto; }
  html[data-hv="h"] .talk .ln { font-size: 17px; min-height: 4.35em; max-height: 4.35em; }
  html[data-hv="h"] .chips { flex-wrap: wrap; min-height: 68px; overflow: visible; }
  html[data-hv="h"] .cta-row { margin-top: 20px; }
}
@media (max-width: 899px) and (orientation: portrait) {
  html:is([data-hv="e"], [data-hv="g"], [data-hv="h"]) .horizon { order: 1; }
  html:is([data-hv="e"], [data-hv="g"], [data-hv="h"]) .cta-row { order: 2; }
  html:is([data-hv="e"], [data-hv="g"], [data-hv="h"]) .meta { order: 3; }
}

/* the narrowest phones (360 px): a little less padding and type, so his longest answers still fit three lines */
@media (max-width: 380px) {
  .card { padding-inline: 18px; } .card li { font-size: 14px; gap: 10px; } .card .refund { font-size: 13px; } /* each point and the refund stay one line */
  .eyebrow { font-size: 10px; letter-spacing: .1em; gap: 10px; }
  .tbl-head, .tbl-rows li { padding-inline: 12px; gap: 10px; grid-template-columns: 42% 1fr; }
  .tbl-rows q { font-size: 13px; } .tbl-rows p { font-size: 13px; }
}

/* 350+ commands: the heading in two lines; the rows appear once, quickly: what you say, then his answer word by word (under a second for all six) */
.cmds .head { max-width: none; }
.cmds h2 { font-size: clamp(36px, 4vw, 56px); } .cmds h2 em { display: block; } :lang(en) .cmds h2 em { white-space: nowrap; }
:lang(ru) .cmds h2 { font-size: clamp(30px, 3.4vw, 48px); } /* "Говорите по-своему." is longer: it keeps to one line too */
.tbl-rows.pre li > * { opacity: 0; }
.tbl-rows.play li q { animation: rise .3s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.tbl-rows.play li p .w { opacity: 0; animation: wordIn .22s ease both; animation-delay: calc(var(--i) * 80ms + 160ms + var(--k) * 22ms); }
@keyframes wordIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- routines: the editor stays beside the list while it scrolls ---------- */
@media (min-width: 1101px) { .maker { position: sticky; top: 104px; } }
/* faq: answers open smoothly where the browser can */
:root { interpolate-size: allow-keywords; }
.qa details::details-content { height: 0; overflow: clip; transition: height .3s var(--ease), content-visibility .3s allow-discrete; }
.qa details[open]::details-content { height: auto; }

/* ---------- checkout (#buy) and the thanks after paying (#paid): the email Lava.top needs and the way to pay, as on sheeivo.com ---------- */
.buy { width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 0; color: var(--text); overflow: auto;
  border: 1px solid var(--edge-2); border-radius: 26px; background: linear-gradient(var(--card-top), var(--tile) 34%, var(--tile-2));
  box-shadow: inset 0 1px 0 var(--card-hi), 0 50px 120px -40px var(--shadow); }
.buy::backdrop { background: rgba(var(--bg-rgb), .72); backdrop-filter: blur(6px); }
.buy[open] { animation: buy-in .32s var(--ease); }
@keyframes buy-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.buy-in { position: relative; display: flex; flex-direction: column; padding: 34px 32px 28px; }
.buy h2 { margin: 0 0 6px; padding-right: 36px; font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.buy-sub { margin: 0 0 22px; color: var(--dim); font-size: 14px; }
.buy-sub a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.buy-sub a:hover { color: var(--text); }
.buy-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--dim); cursor: pointer; transition: color .2s, background .2s; }
.buy-x:hover { color: var(--text); background: var(--raised); }
.buy-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.buy-msg { margin: -6px 0 18px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--edge-2); background: var(--raised); color: var(--text); font-size: 14px; }
.buy-label { display: block; margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 500; color: var(--soft); }
.buy-email { width: 100%; height: 50px; margin: 0 0 20px; padding: 0 16px; border: 1px solid var(--edge-2); border-radius: 14px; background: var(--bg); color: var(--text);
  font: inherit; font-size: 16px; transition: border-color .2s; } /* 16 px: iOS does not zoom into it */
.buy-email::placeholder { color: var(--faint); }
.buy-email:focus { outline: none; border-color: var(--soft); }
.buy-pay { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.buy-ways { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.buy-way { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 12px 6px 10px;
  border: 1px solid var(--edge-2); border-radius: 14px; background: var(--bg); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.buy-way[hidden] { display: none; }
.buy-way input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (hover: hover) { .buy-way:hover { border-color: var(--soft); transform: translateY(-1px); } }
.buy-way:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); }
.buy-way:has(input:focus-visible) { outline: 1.5px solid var(--warm); outline-offset: 2px; }
.buy-dot { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--edge-2);
  background: var(--bg); transition: background .2s, border-color .2s; }
.buy-dot svg { width: 9px; height: 9px; fill: none; stroke: var(--bg); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .2s; }
.buy-way:has(input:checked) .buy-dot { background: var(--text); border-color: var(--text); }
.buy-way:has(input:checked) .buy-dot svg { opacity: 1; transform: none; }
.buy-mark { display: flex; align-items: center; height: 24px; color: var(--text); }
.buy-mark svg { width: 24px; height: 24px; }
.buy-mark .buy-apple { width: 21px; height: 21px; }
:root[data-theme="dark"] .buy-mark [fill="#003087"] { fill: var(--text); } /* PayPal's dark half would vanish on graphite */
.buy-name { font-size: 12px; font-weight: 500; color: var(--dim); white-space: nowrap; }
.buy-way:has(input:checked) .buy-name { color: var(--text); }
.buy .btn { width: 100%; justify-content: center; height: 54px; font-size: 16px; }
.buy-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--dim); }
@media (max-width: 520px) { .buy-in { padding: 30px 20px 22px; } .buy h2 { font-size: 23px; } .buy-way { min-height: 70px; } }
@media (prefers-reduced-motion: reduce) { .buy[open] { animation: none; } .buy-way { transition: none; } }

/* ---------- privacy.html and terms.html: one readable column in the page's own palette ---------- */
.legal-main { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; }
.legal-back { margin-bottom: 56px; color: var(--text); }
.legal h1 { margin: 0 0 8px; font-size: clamp(32px, 6vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.legal-date { margin: 0 0 28px; font-size: 13px; color: var(--dim); }
.legal-lead { margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--soft); }
.legal h2 { margin: 40px 0 12px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.legal-main p, .legal-main li { margin: 0 0 12px; color: var(--soft); }
.legal-main ul { margin: 0 0 12px; padding-left: 20px; }
.legal-main li::marker { color: var(--faint); }
.legal-main strong { font-weight: 500; color: var(--text); }
.legal-main p a, .legal-main li a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.legal-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--edge); font-size: 14px; color: var(--dim); }
.legal-foot a:hover { color: var(--text); }
.buy-note a { color: var(--soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }