/* ============================================================
   Everden — landing site
   Design language: "Clinical Warmth" — forest green, warm amber,
   terracotta accents, Public Sans, calm & rounded.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    /* Light by default — keeps native UI (scrollbars, form controls, autofill)
       light even when the OS is in dark mode, unless the user toggles. */
    color-scheme: light;

    --green:            #0F5238;
    --green-600:        #2D6A4F;
    --green-400:        #52B788;
    --mint:             #B1F0CE;
    --amber:            #FFB702;
    --terracotta:       #D97757;

    --bg:               #F7FAFE;
    --bg-low:           #EEF3F9;
    --card:             #FFFFFF;
    --ink:              #181C1F;
    --ink-soft:         #475048;
    --ink-faint:        #8A968D;
    --line:             #E2E8EA;

    --ok:               #2D6A4F;
    --warn:             #FFB702;
    --danger:           #BA1A1A;

    --radius-sm:        12px;
    --radius:           18px;
    --radius-lg:        28px;
    --radius-pill:      999px;

    --shadow-sm:        0 2px 8px rgba(15, 82, 56, .06);
    --shadow:           0 12px 32px rgba(15, 82, 56, .10);
    --shadow-lg:        0 30px 70px rgba(13, 27, 42, .18);

    --container:        960px;
    --font:             'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --grad-hero:        radial-gradient(1200px 600px at 80% -10%, rgba(82,183,136,.30), transparent 60%),
                        radial-gradient(800px 500px at 10% 10%, rgba(177,240,206,.45), transparent 55%);
}

[data-theme="dark"] {
    color-scheme: dark;

    --green:            #52B788;
    --green-600:        #40916C;
    --green-400:        #74C99A;
    --mint:             #95D4B3;
    --amber:            #FFC747;
    --terracotta:       #E89B82;

    --bg:               #0D1B2A;
    --bg-low:           #0A1622;
    --card:             #182334;
    --ink:              #F1F4F8;
    --ink-soft:         #B6C2D2;
    --ink-faint:        #7C8AA0;
    --line:             #28384C;

    --shadow-sm:        0 2px 10px rgba(0, 0, 0, .30);
    --shadow:           0 14px 36px rgba(0, 0, 0, .40);
    --shadow-lg:        0 30px 70px rgba(0, 0, 0, .55);

    --grad-hero:        radial-gradient(1200px 600px at 80% -10%, rgba(82,183,136,.22), transparent 60%),
                        radial-gradient(800px 500px at 10% 10%, rgba(45,106,79,.30), transparent 55%);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

.container { width: min(100% - 5rem, var(--container)); margin-inline: auto; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent);
    padding: .4rem .8rem; border-radius: var(--radius-pill);
}
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 42ch; }
.muted { color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: inherit; font-size: 1rem; font-weight: 700;
    padding: .85rem 1.5rem; border-radius: var(--radius);
    border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-amber { background: var(--amber); color: #3a2e00; }
.btn-block { width: 100%; }
.btn-lg { padding: 1rem 1.8rem; font-size: 1.05rem; }

/* ---------- Navbar ---------- */
.nav {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;
}
.nav.scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
/* Two things go wrong here in every language but English.
   `space-between` only distributes what is left over, so once the three groups
   fill the bar there is nothing left to distribute and the wordmark ends up
   touching the first link — measured at 1px of separation in Azerbaijani and
   0 in French and Portuguese. A `gap` sets a floor that `space-between` cannot
   take away.
   And the bar is inheriting the 960px text measure, which Portuguese overruns
   by 19px on its own. The nav is chrome, not content: it does not have to line
   up with the column below it, and on a wide screen there are hundreds of
   unused pixels either side. Giving it its own, wider measure buys the room
   without shrinking the type until the longest language happens to fit. */
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
    width: min(100% - 3rem, 1120px);
    gap: 1.25rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .logo { width: 30px; height: 30px; color: var(--green); }
/* The gap shrinks with the viewport because translated labels run up to ~50%
   longer than the English ones the nav was originally sized for. */
.nav-links { display: flex; align-items: center; gap: clamp(.6rem, 1vw, 1.25rem); list-style: none; margin: 0; padding: 0; }
/* Never wrap a label onto a second line — a half-height link next to a
   full-height one is what made the bar look broken in az/tr/fr. */
.nav-links a { color: var(--ink-soft); font-weight: 600; font-size: .98rem; white-space: nowrap; }
/* Between the burger and full desktop the nav is tight in every language other
   than English, whose labels are ~30% shorter. Shrink the type rather than
   hiding the links — a tablet has the room, it just needs them smaller. */
@media (min-width: 1010px) and (max-width: 1180px) {
  .nav-links { gap: .7rem; }
  .nav-links a { font-size: .88rem; }
  .nav-actions { gap: .5rem; }
}
.nav-links a:hover { color: var(--green); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: .75rem; }

.theme-toggle, .nav-burger {
    display: inline-grid; place-items: center; width: 42px; height: 42px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); color: var(--ink-soft); cursor: pointer; transition: .2s;
}
.theme-toggle:hover, .nav-burger:hover { color: var(--green); border-color: var(--green); }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }
.nav-burger { display: none; }

/* Below this the desktop links genuinely do not fit in five of the eight
   languages — Portuguese needs 917px of bar and there is not that much room —
   and the only way to force them in is ~12px type, which is worse than a
   burger. Hand over to the menu the links already live in on a phone.
   Deliberately its own breakpoint: the 860px block further down carries a
   dozen unrelated layout rules (hero grid, splits, footer) and moving it drags
   all of them, which has broken this page once already. */
@media (max-width: 1009px) {
    .nav-links { display: none; }
    .nav-burger { display: inline-grid; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); background: var(--grad-hero); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero h1 { margin-top: 1rem; }
.hero .lead { max-width: 46ch; margin-bottom: 1.8rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-note { margin-top: 1rem; font-size: .9rem; color: var(--ink-faint); display: flex; align-items: center; gap: .5rem; }

/* Hero waitlist form — wrapped in a frosted card so it reads as a deliberate
   panel (padding, border, shadow) instead of floating on the gradient. */
.hero-form {
    margin-top: 1.6rem;
    max-width: 540px;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--card) 72%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid color-mix(in srgb, var(--green) 12%, var(--line));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.hero-form .signup-form { margin-top: 0; }
.hero-form .field-row { max-width: none; margin: 0; }
.hero-form .platform-label { margin: 1.1rem 0 .6rem; }
.hero-form .chips { justify-content: flex-start; }
.hero-form .form-msg { margin-bottom: 0; }
.hero-form .form-success { padding-top: .25rem; }

/* floating phone */
.hero-visual { position: relative; display: grid; place-items: center; }
.blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; z-index: 0; }
.blob-amber { width: 220px; height: 220px; background: var(--amber); top: -20px; right: 10%; }
.blob-terra { width: 200px; height: 200px; background: var(--terracotta); bottom: 0; left: 5%; opacity: .35; }

.float-card {
    position: absolute; z-index: 3; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: .7rem .9rem;
    display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 600;
    animation: floaty 5s ease-in-out infinite;
}
.float-card .dot { width: 10px; height: 10px; border-radius: 50%; }
.float-card.tl { top: 6%; left: -6%; animation-delay: .4s; }
.float-card.br { bottom: 10%; right: -8%; animation-delay: 1.2s; }
/* Below desktop the negative offsets push these past the viewport edge, which
   is what put a horizontal scrollbar on the whole page at every tablet size.
   Tucked inside the visual instead of hidden — they carry real product detail. */
@media (max-width: 1180px) {
  .float-card.tl { left: 0; }
  .float-card.br { right: 0; }
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Phone mockup ---------- */
.phone {
    position: relative; z-index: 2; width: 280px;
    background: #0b0b0d; border-radius: 44px; padding: 11px;
    /* Light rim + ring so the black bezel stays a crisp, complete silhouette on
       dark backgrounds (otherwise it blends into the dark sections). */
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.10);
    border: 1.5px solid rgba(255,255,255,.18);
}
/* No fake notch — real device screenshots carry their own status bar / Dynamic Island. */
/* The screen matches the real screenshot aspect (1206×2622) exactly, so the shot
   fills it perfectly — no crop, no letterbox, and no empty gap under a too-tall
   frame. The phone height derives from the screen + bezel. */
.phone .screen { width: 100%; aspect-ratio: 1206 / 2622; border-radius: 34px; overflow: hidden; background: #f4f6f6; }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* iPad frame. Same construction as .phone, different geometry: an iPad has an
   even bezel all round, a gentler corner radius and no notch. */
.tablet {
    position: relative; z-index: 2; width: 340px;
    background: #0b0b0d; border-radius: 26px; padding: 14px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.10);
    border: 1.5px solid rgba(255,255,255,.18);
}
.tablet .screen { width: 100%; aspect-ratio: 1668 / 2420; border-radius: 14px; overflow: hidden; background: #f4f6f6; }
.tablet .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Wide enough that the iPad is visibly the tallest of the three. The phone is
   much narrower, so at equal widths its 1206:2622 ratio made it taller than the
   tablet — a phone towering over an iPad reads as a mistake. */
.shot .tablet { width: 360px; }
/* The phone shrinks with it, scoped to this row so the gallery's phones keep
   their own size. Without this the iPad drops below the phone in height at
   every step under 1280px, since the phone frame is a fixed 230px there. */
.everywhere .shot .phone { width: 230px; }
@media (max-width: 1100px) {
  .shot .tablet, .tablet { width: 320px; }
  .everywhere .shot .phone { width: 200px; }
}
@media (max-width: 860px) {
  .shot .tablet, .tablet { width: 280px; }
  .everywhere .shot .phone { width: 175px; }
}
@media (max-width: 560px) {
  .shot .tablet, .tablet { width: 240px; }
  .everywhere .shot .phone { width: 150px; }
}

/* ---------- Widgets & Apple Watch ---------- */
.everywhere { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 4.5rem); justify-content: center; align-items: flex-end; }
.everywhere .shot { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0; }
.everywhere figcaption { font-weight: 600; color: var(--ink-soft); }
/* Realistic Apple Watch — drawn as SVG (case + Digital Crown + side button +
   sport band) with the real watch capture clipped into the screen. */
.watch-frame { width: 176px; aspect-ratio: 260 / 430; height: auto; display: block; filter: drop-shadow(0 20px 34px rgba(13,27,42,.30)); }

/* ---------- Sections ---------- */
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-head { text-align: center; max-width: 56ch; margin: 0 auto 3rem; }
.section-head .lead { margin-inline: auto; max-width: 52ch; }

/* ---------- Why AI matters (split) ---------- */
.ai-why { background: var(--bg-low); }
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: center; }
/* Mirror the split: copy on the left, phone visual on the right. */
.split.flip { grid-template-columns: 1.15fr .85fr; }
.split-visual { position: relative; display: grid; place-items: center; }
.ai-points { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem 1.8rem; margin-top: 1.8rem; }
.ai-point { display: flex; gap: .9rem; align-items: flex-start; }
.ai-point .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.ai-point .ic svg { width: 22px; height: 22px; }
.ai-point.amber .ic { background: color-mix(in srgb, var(--amber) 22%, transparent); color: #946700; }
.ai-point.danger .ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.ai-point.terra .ic { background: color-mix(in srgb, var(--terracotta) 18%, transparent); color: var(--terracotta); }
.ai-point h3 { margin: .1rem 0 .25rem; font-size: 1.05rem; }
.ai-point p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* ---------- Feature grid ---------- */
.features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.feature {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.feature .ficon {
    width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); margin-bottom: 1rem;
}
.feature .ficon svg { width: 26px; height: 26px; }
.feature.amber .ficon { background: color-mix(in srgb, var(--amber) 20%, transparent); color: #946700; }
.feature.terra .ficon { background: color-mix(in srgb, var(--terracotta) 18%, transparent); color: var(--terracotta); }
.feature h3 { margin-bottom: .35rem; }
.feature p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.more-line { text-align: center; max-width: 56ch; margin: 2rem auto 0; color: var(--ink-soft); font-size: 1rem; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.step { text-align: center; }
.step .num {
    width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: #fff;
    background: linear-gradient(135deg, var(--green), var(--green-400)); box-shadow: var(--shadow-sm);
}
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--ink-soft); font-size: .98rem; }

/* ---------- Showcase ---------- */
.showcase { background: var(--bg-low); }
.gallery { display: flex; gap: 1.5rem; overflow-x: auto; padding: 1rem .5rem 2rem; scroll-snap-type: x mandatory; }
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.shot { flex: 0 0 auto; scroll-snap-align: center; text-align: center; }
.shot .phone { width: 230px; }
.shot figcaption { margin-top: 1rem; font-weight: 700; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Privacy band ---------- */
.band {
    background: linear-gradient(135deg, var(--green), var(--green-600));
    color: #eafff4; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem);
    display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; box-shadow: var(--shadow);
}
.band h2 { color: #fff; }
.band p { color: #d6f5e6; margin: 0; }
.band .band-points { display: grid; gap: .8rem; }
.band .band-points li { list-style: none; display: flex; gap: .6rem; align-items: flex-start; color: #eafff4; }
.band .band-points svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--mint); margin-top: 2px; }
.band ul { padding: 0; margin: 0; }

/* ---------- Pricing ---------- */
.price-toggle { display: inline-flex; align-items: center; gap: .8rem; margin: 0 auto 2.5rem; padding: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.price-toggle button { border: none; background: transparent; font-family: inherit; font-weight: 700; color: var(--ink-soft); padding: .5rem 1.1rem; border-radius: var(--radius-pill); cursor: pointer; transition: .2s; }
.price-toggle button.active { background: var(--green); color: #fff; }
.save-pill { font-size: .72rem; font-weight: 800; background: color-mix(in srgb, var(--amber) 25%, transparent); color: #946700; padding: .15rem .5rem; border-radius: var(--radius-pill); }

.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.plan {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.8rem 1.5rem; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); position: relative;
}
.plan.featured { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-6px); }
.plan .badge-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--amber); color: #3a2e00; font-size: .72rem; font-weight: 800; padding: .25rem .8rem; border-radius: var(--radius-pill); }
.plan h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.plan .ptag { font-size: .85rem; color: var(--ink-faint); margin-bottom: 1rem; min-height: 2.4em; }
.plan .price { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; }
.plan .price small { font-size: .9rem; font-weight: 600; color: var(--ink-faint); }
.plan ul { list-style: none; padding: 0; margin: 1.2rem 0 1.5rem; display: grid; gap: .6rem; }
.plan li { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
.plan li svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--green); margin-top: 3px; }
.plan .btn { margin-top: auto; }
.trial-note { text-align: center; margin-top: 1.5rem; color: var(--ink-soft); }
.trial-note strong { color: var(--green); }

/* ---------- Waitlist / form ---------- */
.waitlist { position: relative; background: var(--grad-hero); }
.waitlist-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.5rem); box-shadow: var(--shadow); max-width: 760px; margin: 0 auto; text-align: center;
}
.signup-form { margin-top: 1.5rem; }
.field-row { display: flex; gap: .6rem; max-width: 480px; margin: 0 auto; }
.field-row + .field-row { margin-top: .6rem; }
.field-row input[type="email"],
.field-row input[type="tel"] {
    flex: 1; width: 100%; font-family: inherit; font-size: 1rem; padding: .9rem 1.1rem;
    border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink);
}
.field-row input[type="email"]:focus,
.field-row input[type="tel"]:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.field-row input[type="tel"]::placeholder { color: var(--ink-soft); }

.platform-label { display: block; margin: 1.4rem 0 .7rem; font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: var(--radius-pill);
    border: 1.5px solid var(--line); font-weight: 600; font-size: .9rem; color: var(--ink-soft); transition: .15s; cursor: pointer;
}
.chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { margin-top: 1rem; font-weight: 600; min-height: 1.2em; }
.form-msg.ok { color: var(--green); }
.form-msg.err { color: var(--danger); }

.count-line { margin-top: 1.2rem; font-size: .9rem; color: var(--ink-faint); }
.count-line strong { color: var(--green); }

.form-success {
    display: none; text-align: center; padding: 1rem 0;
}
.form-success .check {
    width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
    display: grid; place-items: center; background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green);
}
.is-done .signup-form { display: none; }
.is-done .form-success { display: block; }

/* ---------- Store badges ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.hero-cta .store-badges { justify-content: flex-start; }
.store-badge {
    display: inline-flex; align-items: center; gap: .7rem; background: #0b0b0d; color: #fff;
    padding: .7rem 1.2rem; border-radius: 14px; transition: transform .15s ease, box-shadow .2s;
    border: 1px solid rgba(255,255,255,.12);
}
.store-badge:hover { transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow); }
.store-badge svg { width: 26px; height: 26px; flex: 0 0 auto; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-badge .sb-top { font-size: .68rem; opacity: .8; }
.store-badge .sb-main { font-size: 1.05rem; font-weight: 700; }
.store-badge.disabled { opacity: .55; pointer-events: none; }
.store-badge.disabled .sb-top::after { content: " · coming soon"; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0 1.3rem; margin-bottom: .8rem; box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq summary {
    list-style: none; cursor: pointer; padding: 1.2rem 0; font-weight: 700; font-size: 1.05rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: 0 0 auto; width: 24px; height: 24px; position: relative; transition: transform .25s; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: var(--green); border-radius: 2px; }
.faq summary .plus::before { top: 11px; left: 2px; right: 2px; height: 2px; }
.faq summary .plus::after { left: 11px; top: 2px; bottom: 2px; width: 2px; transition: transform .25s; }
.faq details[open] summary .plus::after { transform: scaleY(0); }
.faq details p { padding: 0 0 1.3rem; margin: 0; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.footer { background: var(--card); border-top: 1px solid var(--line); padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
.footer .brand { margin-bottom: 1rem; }
.footer-col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin: 0 0 1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-col a { color: var(--ink-soft); font-weight: 600; }
.footer-col a:hover { color: var(--green); text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--ink-faint); }
.disclaimer { font-size: .82rem; color: var(--ink-faint); max-width: 46ch; }

/* ---------- Legal / content pages ---------- */
.legal-hero { background: var(--grad-hero); padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2.2rem); }
.legal-back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--green); margin-bottom: 1.1rem; }
.legal-back:hover { text-decoration: none; gap: .55rem; }
.legal-hero h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 4vw, 2.8rem); }
.legal-updated { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); padding: .3rem .7rem; border-radius: var(--radius-pill); margin: 0; }
.legal-intro { color: var(--ink-soft); max-width: 62ch; margin: 1rem 0 0; font-size: 1.05rem; }

.legal-body { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }
/* Reading column: left-aligned to the container edge so the title, intro and
   body all share the same left margin (no extra indent on the body). */
.legal-hero .container, .legal-body .container { max-width: 860px; }
.legal { max-width: 860px; }
.legal-hero h1 { max-width: 860px; }
.legal > :first-child { margin-top: 0; }
.legal h2 { font-size: 1.3rem; margin: 2.4rem 0 .7rem; }
.legal h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.legal p { color: var(--ink-soft); margin: 0 0 1rem; }
.legal a { font-weight: 600; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1rem; display: grid; gap: .5rem; }
.legal li { color: var(--ink-soft); }
.legal strong { color: var(--ink); }

.legal table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.5rem; font-size: .94rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.legal th, .legal td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal tr:first-child th { background: color-mix(in srgb, var(--green) 8%, var(--card)); color: var(--ink); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.legal tbody tr:last-child td, .legal tr:last-child td { border-bottom: none; }
.legal tr:hover td { background: color-mix(in srgb, var(--green) 3%, transparent); }

.legal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm); margin: 1.3rem 0; }
.legal-card h3 { margin-top: 0; }
.legal-card.note { background: color-mix(in srgb, var(--amber) 10%, var(--card)); border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.legal-card.alert { background: color-mix(in srgb, var(--terracotta) 9%, var(--card)); border-color: color-mix(in srgb, var(--terracotta) 40%, var(--line)); }
.legal-card .lc-title { display: flex; align-items: center; gap: .5rem; font-weight: 800; margin-bottom: .4rem; }
.legal-card .lc-title svg { width: 20px; height: 20px; flex: 0 0 auto; }
.legal-card p:last-child { margin-bottom: 0; }

.legal-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.3rem 0; }
.legal-tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.legal-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.legal-tile .lt-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); margin-bottom: .8rem; }
.legal-tile .lt-ic svg { width: 22px; height: 22px; }
.legal-tile h3 { margin: 0 0 .25rem; }
.legal-tile p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Mobile menu ---------- */
.mobile-menu { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan.featured { transform: none; }
}
@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-burger { display: inline-grid; }
    .split, .split.flip { grid-template-columns: 1fr; gap: 2.5rem; }
    .split-visual { order: -1; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero .lead { margin-inline: auto; }
    .hero-cta, .hero-note { justify-content: center; }
    .hero-cta .store-badges { justify-content: center; }
    .hero-form { margin-inline: auto; }
    .hero-form .chips { justify-content: center; }
    .hero-visual { margin-top: 2rem; }
    .band { grid-template-columns: 1fr; text-align: center; }
    .band .band-points li { text-align: left; }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    .mobile-menu.open { display: block; position: fixed; inset: 68px 0 0; background: var(--bg); z-index: 99; padding: 1.5rem; }
    .mobile-menu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
    .mobile-menu a { display: block; padding: 1rem; font-weight: 700; font-size: 1.1rem; color: var(--ink); border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
    .features-grid, .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    .ai-points { grid-template-columns: minmax(0, 1fr); }
    .legal-tiles { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .field-row { flex-direction: column; }
    .hero-form { padding: 1.2rem; }
    .float-card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ---- Language switcher ----
   A <details> rather than a JS dropdown: the CSP forbids inline script, and a
   language chooser must work even if JS fails. The items are real links, so
   crawlers follow them to each localized page. */
/* Sits inside .nav-actions next to the theme toggle. It must NOT be a direct
   child of .nav-inner: that container is a 3-way space-between (brand / nav /
   actions) and a fourth child pushes the links into each other. */
.lang-switch { position: relative; }
.lang-switch > summary {
  list-style: none; cursor: pointer; padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid var(--outline, rgba(0,0,0,.12)); font-size: .85rem; white-space: nowrap;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::after { content: " ▾"; opacity: .55; }
.lang-switch[open] > summary { background: var(--surface-low, rgba(0,0,0,.04)); }
.lang-switch ul {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60;
  margin: 0; padding: .35rem; list-style: none; min-width: 11rem;
  background: var(--surface, #fff); border: 1px solid var(--outline, rgba(0,0,0,.12));
  border-radius: .75rem; box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.lang-switch ul a {
  display: block; padding: .45rem .6rem; border-radius: .5rem;
  text-decoration: none; color: inherit; font-size: .9rem;
}
.lang-switch ul a:hover { background: var(--surface-low, rgba(0,0,0,.05)); }
.lang-switch ul a[aria-current="true"] { font-weight: 700; }
/* Narrow screens: the nav links collapse into the burger at 860px, so the
   switcher shrinks rather than disappearing — it is the only way to change
   language without the links. */
@media (max-width: 860px) {
  .lang-switch > summary { padding: .35rem .5rem; font-size: .8rem; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  /* Globe only — the language name does not fit next to the burger. */
  .lang-switch > summary { font-size: 0; padding: .5rem; }
  .lang-switch > summary::before { content: "🌐"; font-size: .95rem; }
  .lang-switch > summary::after { content: ""; }
  /* The nav CTA is dropped on phones: brand + switcher + toggle + button +
     burger never fitted in 390px, in English either — the bar was already
     overflowing before the switcher existed. The hero repeats this call to
     action immediately below, so nothing is lost. */
  .nav-actions .btn { display: none; }
}

/* Shown on legal pages when the visitor is reading the site in another
   language — those pages are deliberately English only. */
.legal-lang-note {
  margin: 0 0 1rem; padding: .6rem .85rem; border-radius: .6rem;
  background: var(--surface-low, rgba(0,0,0,.04)); font-size: .9rem; opacity: .85;
}


/* Translated copy runs up to ~50% longer than the English it was laid out for,
   and German/Russian compounds offer no break point. Allow breaking inside a
   word rather than letting one label widen its whole grid track. */
.plan ul li, .feature-card p, .step p, .ai-point p, .ptag { overflow-wrap: anywhere; }