/* ==========================================================================
   Evaxify — site design system
   One stylesheet for every page (landings in 10 locales + legal/help docs).
   Tokens first, then primitives, then page sections.
   Light and dark are both first-class: every colour is a token, and dark
   redefines the tokens only.
   ========================================================================== */

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* Surfaces run from sunken to raised; sections alternate between them. */
  --bg:          #F4F5F1;
  --bg-raised:   #FFFFFF;
  --bg-sunken:   #EEF1ED;
  --surface:     #FFFFFF;

  /* Ink: one heading tone, one body tone, one quiet tone. */
  --ink:         #13232B;
  --ink-2:       #5F6B70;
  --ink-3:       #7D898D;
  --ink-invert:  #FFFFFF;

  --line:        #DDE3DF;
  --line-strong: #C7D2CD;

  /* Single accent for the whole site: Evaxify mineral blue. */
  --accent:      #356F8A;
  --accent-ink:  #24566E;
  --accent-soft: #DDEBF0;
  --accent-line: #BED5DE;
  --on-accent:   #FFFFFF;

  /* Ink panel: the CTA block and the footer. */
  --panel:       #141B1D;
  --panel-2:     #203135;
  --panel-ink:   #FFFFFF;
  --panel-ink-2: #B4BFBE;
  --panel-line:  rgba(255,255,255,.14);

  /* Shape. Controls 12, chips 10, cards 22, media 30. Nothing else. */
  --r-chip: 10px;
  --r-ctl:  12px;
  --r-card: 22px;
  --r-media:30px;

  /* Shadows are tinted with the ink hue, never pure black. */
  --shadow-sm: 0 1px 2px rgba(16,42,86,.05), 0 4px 14px rgba(16,42,86,.06);
  --shadow-md: 0 2px 6px rgba(16,42,86,.06), 0 14px 34px rgba(16,42,86,.09);
  --shadow-lg: 0 4px 12px rgba(16,42,86,.08), 0 28px 64px rgba(16,42,86,.15);
  /* For objects that should read as physically lifted off the page. */
  --shadow-lift: 0 2px 6px rgba(16,42,86,.06), 0 18px 30px -12px rgba(16,42,86,.24),
                 0 48px 80px -28px rgba(16,42,86,.32);

  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --container: 1160px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(64px, 8vw, 116px);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #141B1D;
    --bg-raised:   #20292C;
    --bg-sunken:   #151F21;
    --surface:     #20292C;

    --ink:         #F4F7F5;
    --ink-2:       #B4BFBE;
    --ink-3:       #9AA7A5;

    --line:        #354246;
    --line-strong: #48575B;

    --accent:      #82B6C9;
    --accent-ink:  #A7CDDA;
    --accent-soft: #243D47;
    --accent-line: #365764;
    /* White on a light-blue fill is only 2.6:1. In dark the primary button
       inverts: light fill, near-black label. */
    --on-accent:   #13232B;

    --panel:       #101719;
    --panel-2:     #203135;
    --panel-line:  rgba(255,255,255,.11);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.34);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.44);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 18px 30px -12px rgba(0,0,0,.6),
                   0 48px 80px -28px rgba(0,0,0,.7);
  }
}

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--on-accent); }

/* A single fixed grain plane. Flat vector surfaces read as sterile at this
   scale; the noise gives the whites something to sit on. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none; opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { body::after { opacity: .05; } }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--accent-ink);
  padding: 12px 18px; border-radius: 0 0 var(--r-ctl) 0; font-weight: 700;
  box-shadow: var(--shadow-md);
}
.skip-link:focus { left: 0; }

/* The icon sprite host — present on every page, never painted. */
.evx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Layout primitives -------------------------------------------- */
.evx-section { padding: var(--section-y) var(--gutter); }
.evx-container { width: min(var(--container), 100%); margin: 0 auto; }

/* Anchor nav targets a section under the sticky header; without this the
   header covers the heading it just jumped to. */
section[id] { scroll-margin-top: 88px; }

/* Sections alternate ground so the page has rhythm without borders. */
.evx-section--raised { background: var(--bg-raised); }
.evx-section--sunken { background: var(--bg-sunken); }

/* ---------- Icons --------------------------------------------------------- */
.ico, .fico > svg, .trust-item > svg {
  width: 1.25em; height: 1.25em; flex: 0 0 auto;
  fill: currentColor;
}

/* ---------- Buttons ------------------------------------------------------- */
.evx-button-primary,
.evx-button-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--r-ctl);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap; cursor: pointer; text-align: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease);
}
.evx-button-primary {
  border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(19,35,43,.12), 0 10px 24px rgba(53,111,138,.22);
}
.evx-button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(19,35,43,.14), 0 16px 34px rgba(53,111,138,.28);
  text-decoration: none;
}
.evx-button-secondary {
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.evx-button-secondary:hover {
  transform: translateY(-2px); border-color: var(--accent-line);
  box-shadow: var(--shadow-md); text-decoration: none;
}
.evx-button-primary:active,
.evx-button-secondary:active { transform: translateY(1px); }

/* ---------- Cards --------------------------------------------------------- */
.evx-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}

/* ---------- Eyebrow ------------------------------------------------------- */
/* Kept for the hero only. Section heads carry their headline alone. */
.evx-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  font-size: .875rem; font-weight: 700; letter-spacing: 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* Solid fallback first: where color-mix()/backdrop-filter is unsupported,
     the nav must still be opaque rather than letting content scroll through
     the logo and links. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease);
}
/* Elevation appears only once the reader has left the hero — it reports
   position, it is not decoration. */
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(13,27,46,.02), 0 8px 24px rgba(13,27,46,.06);
}
.nav-inner {
  width: min(var(--container), 100%); margin: 0 auto; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 10px var(--gutter);
}
.brand {
  display: inline-flex; align-items: center;
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; }
/* Legal pages carry the mark as an inline SVG rather than a file. */
.brand svg { width: 28px; height: 28px; margin-right: 10px; flex: 0 0 auto; }
.brand span { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a.nav-link {
  color: var(--ink-2); font-weight: 600; font-size: .96rem;
  padding: 9px 12px; border-radius: var(--r-chip);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-links a.nav-link:hover { color: var(--ink); background: var(--accent-soft); text-decoration: none; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav .evx-button-primary { padding: 10px 18px; font-size: .95rem; }
.nav-actions .cta-short { display: none; }
@media (max-width: 420px) {
  .nav-actions .cta-full { display: none; }
  .nav-actions .cta-short { display: inline; }
}

/* Language switcher — two-letter code, no flag emoji.
   Regional-indicator flags do not render on Windows at all, so a code is the
   only label that works on every platform we ship to. */
.lang-dropdown { position: relative; margin-left: 6px; }
.lang-current {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-chip);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-size: .875rem; font-weight: 700;
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.lang-current:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.lang-current .caret { width: .7em; height: .7em; fill: currentColor; opacity: .6; }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 186px; padding: 8px;
  display: none; flex-direction: column; gap: 1px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-lg);
}
.lang-menu.is-open { display: flex; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-chip);
  color: var(--ink); font-size: .94rem; font-weight: 600;
}
.lang-menu a:hover { background: var(--accent-soft); text-decoration: none; }
.lang-menu a.active { color: var(--accent-ink); background: var(--accent-soft); }
.lang-menu .cc,
.lang-current .cc {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-3); min-width: 2ch;
}
.lang-menu a.active .cc { color: var(--accent-ink); }
.lang-select-mobile { display: none; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; margin: 0 auto;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(36px, 4.5vw, 68px);
  padding-bottom: clamp(64px, 8vw, 108px);
  background:
    radial-gradient(120% 100% at 84% -10%, var(--accent-soft) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-raised) 100%);
}
/* A wide, very soft brand field behind the composition. Keeps the top of the
   page from reading as a flat white sheet without adding a decorative blob. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -30%; right: -10%; width: 70vw; height: 130%;
  background: radial-gradient(closest-side, rgba(53,111,138,.13), transparent 72%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  align-items: center; gap: clamp(36px, 4vw, 56px);
  position: relative; z-index: 1;
}
.hero-copy { max-width: 620px; }
.hero h1 {
  font-size: clamp(2.3rem, 1.05rem + 3.9vw, 3.4rem);
  line-height: 1.04; letter-spacing: -.04em;
  margin: 22px 0 20px;
  text-wrap: balance;
}
.hero .subhead {
  font-size: clamp(1.06rem, 1rem + .4vw, 1.22rem);
  color: var(--ink-2); max-width: 46ch; text-wrap: pretty;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-microcopy { margin-top: 16px; font-size: .9rem; color: var(--ink-3); }

/* ---- Media -----------------------------------------------------------------
   The artwork runs off the right edge of the viewport and dissolves into the
   page on its left, so the hero reads as one composition instead of two boxes
   parked next to each other. The phone sits in that dissolve, which is what
   gives the block its depth.
   -------------------------------------------------------------------------- */
.hero-media {
  position: relative; isolation: isolate;
  aspect-ratio: 7 / 5;
}
.hero-family-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
  border-radius: var(--r-media);
}
.hero-phone {
  position: absolute; left: -6%; bottom: -8%; z-index: 2;
  width: clamp(148px, 17vw, 214px); padding: 7px;
  border-radius: 34px; background: #0B111A;
  box-shadow: var(--shadow-lift);
  transform: rotate(-6deg); transform-origin: bottom center;
}
.hero-phone img { width: 100%; height: auto; border-radius: 27px; }

@media (min-width: 1041px) {
  /* Bleed the artwork to the right edge of the window. The copy column keeps
     its measure because the overflow is a negative margin, not a wider track. */
  .hero-media {
    margin-right: min(calc((1160px - 100vw) / 2), calc(-1 * var(--gutter)));
    aspect-ratio: 16 / 10;
  }
  .hero-family-art {
    border-radius: 0;
    /* Dissolve the left and top edges so the artwork sits in the page rather
       than on it. Two axes, because a single left fade still leaves a hard
       horizontal line along the top. */
    -webkit-mask-image:
      linear-gradient(100deg, transparent 0%, #000 44%),
      linear-gradient(180deg, transparent 0%, #000 16%, #000 88%, transparent 100%);
            mask-image:
      linear-gradient(100deg, transparent 0%, #000 44%),
      linear-gradient(180deg, transparent 0%, #000 16%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .hero-phone { left: 2%; bottom: -12%; }
}

/* The illustration is painted for a white page. On the dark ground it reads as
   a lit panel, so it gets pulled down to sit with the rest of the surface. */
@media (prefers-color-scheme: dark) {
  .hero-family-art { filter: brightness(.78) contrast(1.04) saturate(.9); }
}

/* Retired in the redesign: overlay labels and animated badges on the artwork. */
.hero-decor, .hero-product-label, .hero-float-badge, .launch-note { display: none; }

/* ---- Product-first hero media --------------------------------------------
   Replaces the illustration composition: one real screenshot, full size, with
   no mask/bleed tricks — the point is that this is legibly the app, not an
   illustration standing in for it. */
.hero-shot-wrap { position: relative; isolation: isolate; display: flex; justify-content: center; }
.hero-shot-frame {
  width: clamp(220px, 27vw, 300px); padding: 8px;
  border-radius: 36px; background: #0B111A;
  box-shadow: var(--shadow-lift);
}
.hero-shot-frame img { width: 100%; height: auto; border-radius: 29px; }
@media (max-width: 640px) {
  .hero-shot-frame { width: 200px; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust {
  padding: 26px var(--gutter);
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-inner {
  width: min(var(--container), 100%); margin: 0 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
  justify-content: space-between; align-items: center;
}
.trust-item {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 4px clamp(12px, 1.6vw, 26px);
  color: var(--ink-2); font-weight: 600; font-size: .93rem;
  white-space: nowrap;
}
/* Hairlines between the claims rather than a run of loose chips. */
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-item > svg { width: 19px; height: 19px; color: var(--accent); opacity: .9; }

@media (max-width: 900px) {
  .trust-inner {
    grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto; justify-content: stretch; gap: 14px 0;
  }
  .trust-item { justify-content: flex-start; padding: 4px 12px; white-space: normal; }
  .trust-item + .trust-item { border-left: 0; }
}
@media (max-width: 520px) {
  .trust-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Section heads — left-aligned by default. Centring every head is what makes
   a page read as templated; only the showcase is centred, because its content
   below it is centred too.
   ========================================================================== */
.section-head { max-width: 46ch; margin: 0 0 clamp(34px, 4.5vw, 54px); }
.section-head h2 {
  font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.45rem);
  letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance;
}
.section-head p { color: var(--ink-2); font-size: 1.08rem; }
.showcase .section-head { max-width: 52ch; margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   Grids
   ========================================================================== */
.grid { display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.feature { padding: 26px; }
.feature .fico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: var(--r-ctl);
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-line);
}
.feature .fico > svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.12rem; margin-bottom: 8px; }
.feature p { color: var(--ink-2); font-size: .98rem; }
.feature h3 a { color: inherit; }

/* ---------- Features bento -----------------------------------------------
   Four cards, six columns, spans 4+2 / 2+4. Exactly four cells, no gaps, and
   the two wide ones carry a real screenshot so the grid is not six text tiles.
   -------------------------------------------------------------------------- */
#features .grid-4 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
#features .grid-4 > .feature:nth-child(1) { grid-column: span 4; }
#features .grid-4 > .feature:nth-child(2) { grid-column: span 2; }
#features .grid-4 > .feature:nth-child(3) { grid-column: span 2; }
#features .grid-4 > .feature:nth-child(4) { grid-column: span 4; }

#features .grid-4 > .feature { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
#features .grid-4 > .feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

#features .feature.has-shot {
  position: relative; overflow: hidden;
  min-height: 292px;
  padding-right: clamp(150px, 15vw, 196px);
  border-color: var(--accent-line);
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(53,111,138,.14) 0%, transparent 58%),
    linear-gradient(158deg, var(--accent-soft) 0%, var(--surface) 66%);
}
/* The two narrow cells sit on the page ground instead of a raised card, so the
   row reads as one composition with two weights rather than four equal tiles. */
#features .grid-4 > .feature:not(.has-shot) {
  background: var(--bg-sunken);
  box-shadow: none;
}
/* The shot is anchored to the card floor and runs off it, so the tile reads as
   a window into the app rather than a picture pasted next to the text. */
.feature-shot {
  position: absolute; right: 30px; bottom: 0;
  display: block; width: clamp(124px, 13vw, 166px); height: 236px;
  overflow: hidden; border-radius: 18px 18px 0 0;
  border: 1px solid var(--line); border-bottom: 0;
  box-shadow: var(--shadow-lift);
}
.feature-shot img { width: 100%; height: auto; border-radius: 0; }

/* ---------- Travel, relocation and plan clarity -------------------------
   This section carries three different decisions, so it uses an editorial
   6/3/3 rhythm instead of another row of equal feature cards. The tier note
   below is deliberately plain: pricing clarity should not look like a
   promotional badge. */
.planning { position: relative; overflow: hidden; }
.planning::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -240px; top: -250px;
  border: 1px solid var(--accent-line); border-radius: 50%; opacity: .5; pointer-events: none;
}
.planning .section-head { max-width: 58ch; }
.planning-grid {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.planning-card {
  grid-column: span 3; min-height: 290px; padding: 28px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.planning-card--lead {
  grid-column: span 6; padding: clamp(30px, 4vw, 48px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(53,111,138,.16), transparent 62%),
    var(--surface);
  border-color: var(--accent-line);
}
.planning-card .fico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 24px; border-radius: var(--r-ctl);
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line);
}
.planning-card .fico svg { width: 22px; height: 22px; }
.planning-card h3 { max-width: 18ch; margin-bottom: 12px; font-size: clamp(1.2rem, 1rem + .45vw, 1.5rem); }
.planning-card p { max-width: 58ch; color: var(--ink-2); font-size: .96rem; }
.planning-card--lead h3 { max-width: 15ch; font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2.2rem); }
.planning-card--lead p { font-size: 1.03rem; }
.tier-note {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: 20px; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--surface);
}
.tier-note > div { padding: 26px 28px; }
.tier-note > div + div { border-left: 1px solid var(--line); background: var(--bg-sunken); }
.tier-note strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 1rem; }
.tier-note p { color: var(--ink-2); font-size: .91rem; }

/* ==========================================================================
   How it works — a numbered rail, not another row of cards.
   ========================================================================== */
.steps { counter-reset: step; gap: 0; }
#how .grid-4.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step {
  position: relative; padding: 30px 26px 30px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
/* Hairline rail connecting the steps, cut short before the next number. */
.step::before {
  content: ""; position: absolute; top: 47px; left: 0; right: 0;
  height: 1px; background: var(--line-strong);
}
.step:last-child::before { display: none; }
.step .step-num {
  counter-increment: step;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 50%;
  background: var(--bg-raised); border: 1px solid var(--accent-line);
  color: var(--accent-ink); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 0 0 6px var(--bg-raised);
}
.step .step-num::before { content: counter(step); }
.step h3 { font-size: 1.08rem; margin-bottom: 7px; }
.step p { color: var(--ink-2); font-size: .97rem; padding-right: 12px; }

/* ==========================================================================
   Product tour. The rail runs off both edges of the window so the row reads as
   a continuing strip rather than a boxed carousel, and the controls sit beside
   the headline instead of under the track with a row of dots.
   ========================================================================== */
.showcase { background: var(--bg-sunken); overflow: hidden; }
.showcase .section-head { max-width: 44ch; margin-left: 0; margin-right: 0; text-align: left; }

.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 26px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 8px 0 8px;
  /* Bleed to both window edges, then pad the ends back to the container. */
  margin-left: min(calc((1160px - 100vw) / 2), calc(-1 * var(--gutter)));
  margin-right: min(calc((1160px - 100vw) / 2), calc(-1 * var(--gutter)));
  padding-left: max(calc((100vw - 1160px) / 2), var(--gutter));
  padding-right: max(calc((100vw - 1160px) / 2), var(--gutter));
  /* Without this the snap "start" ignores the inset and the browser parks the
     first slide flush against the window edge. */
  scroll-padding-left: max(calc((100vw - 1160px) / 2), var(--gutter));
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 auto; width: clamp(216px, 24vw, 306px);
  scroll-snap-align: start;
}
.carousel-slide img {
  width: 100%; height: auto;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  transition: transform .35s var(--ease);
}
.carousel-slide:hover img { transform: translateY(-6px); }
.carousel-slide p {
  margin-top: 20px; font-weight: 600; font-size: .98rem; color: var(--ink);
  max-width: 26ch;
}

.carousel-controls {
  position: absolute; top: calc(-1 * clamp(74px, 8vw, 96px)); right: 0;
  display: flex; align-items: center; gap: 14px;
}
.carousel-counter {
  font-size: .92rem; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.carousel-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), background-color .15s var(--ease),
              transform .15s var(--ease), color .15s var(--ease);
}
.carousel-arrow > svg { width: 18px; height: 18px; fill: currentColor; }
.carousel-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.carousel-arrow:active { transform: translateY(1px); }

@media (max-width: 760px) {
  /* Controls stay put — a scroller with hidden arrows and no page indicator
     gives a mobile reader no signal that more slides exist. */
  .carousel-controls {
    position: static; top: auto; right: auto;
    margin: -8px 0 20px; justify-content: flex-end;
  }
  .carousel-track { scroll-snap-type: x mandatory; }
}

/* ==========================================================================
   Schedule widget — "See the real schedule before you install anything".
   Renders live data from schedule-data.json; layout only lives here.
   ========================================================================== */
.schedule-widget {
  display: block; padding: 0; overflow: hidden;
}
.sched-pickers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border-bottom: 1px solid var(--line);
}
.sched-picker { padding: 22px 26px; }
.sched-picker + .sched-picker { border-left: 1px solid var(--line); }
.sched-picker-label {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .01em;
  color: var(--ink-3); margin-bottom: 12px;
}
/* A row of 18 chips doesn't scan; a select does — same tokens as the
   language-switcher select elsewhere on the site. */
.sched-select {
  width: 100%; padding: 11px 40px 11px 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%235A6B82' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.sched-select:hover { border-color: var(--accent-line); background-color: var(--accent-soft); }
.sched-select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.sched-body {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0;
}
.sched-main { padding: 26px 30px 30px; border-right: 1px solid var(--line); }
.sched-main h3 { font-size: 1.15rem; margin-bottom: 4px; }
.sched-main > p:first-of-type { color: var(--ink-3); font-size: .92rem; margin-bottom: 18px; }
.sched-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sched-table td { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }
.sched-table tr:first-child td { border-top: 0; }
.sched-table td:last-child { text-align: right; color: var(--ink-3); white-space: nowrap; }
.sched-tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; margin-left: 10px;
}
.sched-tag--funded { background: #E4F6EA; color: #1A7A3D; }
.sched-tag--paid { background: #FFF1DC; color: #A65B00; }
.sched-tag--annual { background: var(--accent-soft); color: var(--accent-ink); }
@media (prefers-color-scheme: dark) {
  .sched-tag--funded { background: rgba(45,178,102,.16); color: #6FE0A0; }
  .sched-tag--paid { background: rgba(214,148,50,.16); color: #F0B36B; }
}
.sched-source { margin-top: 18px; font-size: .82rem; color: var(--ink-3); }

.sched-side { padding: 26px 30px 30px; background: var(--bg-sunken); }
.sched-gap-title {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .01em;
  color: var(--accent-ink); margin-bottom: 14px;
}
.sched-gap-item {
  padding: 14px; margin-bottom: 12px; border-radius: var(--r-ctl);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.sched-gap-item strong { display: block; font-size: .94rem; color: var(--ink); margin-bottom: 4px; }
.sched-gap-item p { font-size: .88rem; color: var(--ink-2); }
.sched-keep-note { font-size: .88rem; color: var(--ink-2); margin: 14px 0 16px; }
.sched-nogap { font-size: .92rem; color: var(--ink-2); }
.sched-cta { width: 100%; }

@media (max-width: 760px) {
  .sched-pickers { grid-template-columns: 1fr; }
  .sched-picker + .sched-picker { border-left: 0; border-top: 1px solid var(--line); }
  .sched-body { grid-template-columns: 1fr; }
  .sched-main { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   Who and where
   ========================================================================== */
.split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px;
}
.panel { padding: 32px; }
.panel h3 { font-size: 1.2rem; margin-bottom: 20px; }
.panel .note { margin-top: 20px; color: var(--ink-3); font-size: .9rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: var(--r-chip);
  background: var(--bg-sunken); border: 1px solid var(--line);
  color: var(--ink); font-weight: 600; font-size: .94rem;
}
.chip > svg { width: 18px; height: 18px; color: var(--accent); fill: currentColor; }
/* Two-letter country code instead of a flag emoji. */
.chip .cc {
  font-size: .68rem; font-weight: 800; letter-spacing: .07em;
  color: var(--ink-3); padding: 3px 5px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--line);
}
.chip.soon { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.chip.soon .cc { display: none; }

/* Profiles read as rows, countries as a dense field — two different shapes,
   so the split does not look like the same list twice. */
.split > .panel:first-child .chip-row { flex-direction: column; align-items: stretch; gap: 8px; }
.split > .panel:first-child .chip { justify-content: flex-start; padding: 13px 16px; font-size: 1rem; }

/* ==========================================================================
   Privacy — a divided list, not four more boxes.
   ========================================================================== */
.privacy { background: var(--bg-sunken); }
.privacy .grid-2 { gap: 0; column-gap: 44px; }
.privacy .feature {
  padding: 26px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px;
}
.privacy .feature .fico {
  grid-row: 1 / span 2; margin-bottom: 0;
  background: none; border: 0; color: var(--accent);
  width: 30px; height: 30px; align-self: start; margin-top: 2px;
}
.privacy .feature .fico > svg { width: 26px; height: 26px; }
.privacy .feature h3 { margin-bottom: 6px; }
.disclaimer {
  margin-top: 40px; padding: 20px 24px;
  border-radius: var(--r-ctl);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-3); font-size: .92rem;
}
.disclaimer strong { color: var(--ink); }

/* ==========================================================================
   FAQ. Four short answers do not need a click to reveal, and an accordion of
   them is the most templated block a marketing page can carry. Two columns,
   everything readable at a glance.
   ========================================================================== */
.faq-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
  max-width: none;
}
.faq-entry { padding: 26px 0; border-top: 1px solid var(--line); }
.faq-entry h3 {
  font-size: 1.06rem; margin-bottom: 8px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
}
/* A hairline rule instead of a chevron: it marks the question without pretending
   there is something to open. */
.faq-entry h3::before {
  content: ""; width: 18px; height: 2px; margin-top: .62em; border-radius: 2px;
  background: var(--accent);
}
.faq-entry > p { color: var(--ink-2); font-size: .99rem; padding-left: 30px; max-width: 46ch; }
.faq-more { margin-top: 38px; }

@media (max-width: 820px) {
  .faq-list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Final CTA — one ink panel, copy left, install right.
   ========================================================================== */
.cta-card {
  position: relative;
  padding: clamp(36px, 5vw, 60px);
  border-radius: var(--r-media);
  background:
    radial-gradient(90% 120% at 92% 0%, rgba(53,111,138,.34) 0%, transparent 62%),
    linear-gradient(150deg, var(--panel-2) 0%, var(--panel) 100%);
  color: var(--panel-ink-2);
  box-shadow: var(--shadow-lg);
}
.cta-card h2 {
  color: var(--panel-ink);
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem); margin-bottom: 14px;
  text-wrap: balance;
}
.cta-card > p { font-size: 1.06rem; max-width: 44ch; margin-bottom: 30px; }
.cta-note { margin-top: 14px; font-size: .86rem; color: var(--panel-ink-2); opacity: .8; }

/* The store badges are the install affordance here: they carry the same action
   a button would, and they name the platform while doing it. */
.cta-card .store-badge {
  padding: 13px 22px;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
}
.cta-card .store-badge:first-child {
  background: var(--panel-ink); color: var(--panel); border-color: transparent;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.cta-card .store-badge:first-child:hover {
  background: var(--panel-ink); box-shadow: 0 16px 40px rgba(0,0,0,.38);
}
.cta-card .store-badge:first-child .store-sub { opacity: .62; }

.store-badges { grid-column: 1; margin-top: 22px; }

.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 18px; border-radius: var(--r-ctl);
  background: rgba(255,255,255,.09); border: 1px solid var(--panel-line);
  color: var(--panel-ink); font-weight: 700;
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.store-badge:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); text-decoration: none; }
.store-badge svg { flex-shrink: 0; }
.store-badge .store-sub { display: block; font-size: .7rem; font-weight: 500; opacity: .78; line-height: 1.1; }
.store-badge .store-main { font-size: 1.02rem; line-height: 1.25; }
.soon-chip {
  position: absolute; top: -12px; right: -8px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--panel-ink); color: var(--panel);
  font-size: .66rem; font-weight: 800; letter-spacing: .02em;
}

/* QR is desktop-only: on a phone the button already installs the app. It sits
   outside the text flow so the copy keeps its own rhythm. */
.cta-qr { display: none; }
@media (min-width: 960px) {
  .cta-card { padding-right: clamp(300px, 26vw, 360px); }
  .cta-qr {
    position: absolute; top: 50%; right: clamp(36px, 5vw, 60px);
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 22px; border-radius: var(--r-card);
    background: rgba(255,255,255,.07); border: 1px solid var(--panel-line);
  }
  .cta-qr .qr-svg {
    width: 168px; height: 168px; padding: 10px;
    border-radius: var(--r-ctl); background: #fff;
  }
  /* Capped to the QR code's own width — without this, a caption longer than
     one short line stretches the whole panel wide instead of wrapping. */
  .cta-qr-caption { margin: 0; max-width: 168px; font-size: .9rem; color: var(--panel-ink-2); text-align: center; }
}

/* ==========================================================================
   Language suggestion banner — created in JS on first visit only, styled
   with the page's own tokens so it isn't a hardcoded-light slab dropped onto
   a dark-mode page.
   ========================================================================== */
.lang-suggest {
  position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px;
  margin: 0 auto; z-index: 70;
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  justify-content: center; text-align: center;
  padding: 14px 18px; border-radius: var(--r-card);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-lg);
  font: 15px/1.45 var(--font);
}
.lang-suggest-text { flex: 1 1 220px; min-width: 180px; text-align: left; color: var(--ink-2); }
.lang-suggest-go {
  flex: 0 0 auto; background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 700; padding: 9px 18px;
  border-radius: 999px; white-space: nowrap;
}
.lang-suggest-go:hover { text-decoration: none; filter: brightness(1.05); }
.lang-suggest-no {
  flex: 0 0 auto; background: none; border: 0; color: var(--ink-3); cursor: pointer;
  font: inherit; padding: 9px 6px; white-space: nowrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer {
  background: var(--panel); color: var(--panel-ink-2);
  padding: 56px var(--gutter) 34px;
}
.footer-inner { width: min(var(--container), 100%); margin: 0 auto; }
.footer-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px;
  padding-bottom: 30px;
}
.footer-brand { font-size: 1.25rem; font-weight: 800; color: var(--panel-ink); letter-spacing: -.03em; }
.footer-brand span { color: var(--accent); }
.footer-brand p { margin-top: 8px; font-size: .92rem; font-weight: 400; color: var(--panel-ink-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.footer-links a { color: var(--panel-ink-2); font-weight: 600; font-size: .94rem; }
.footer-links a:hover { color: var(--panel-ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 22px; border-top: 1px solid var(--panel-line);
  font-size: .86rem;
}
.footer-bottom a { color: var(--panel-ink-2); }

/* ==========================================================================
   Motion — entry only, and only for content that benefits from being
   sequenced. Everything collapses under prefers-reduced-motion.
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { max-width: 720px; }
  .hero-media { width: min(660px, 100%); aspect-ratio: 16 / 11; }
  #features .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #features .grid-4 > .feature:nth-child(n) { grid-column: span 2; }
  .planning-card { grid-column: span 6; min-height: 0; }
  .planning-card.planning-card--lead { grid-column: span 12; }
  .cta-card { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  #how .grid-4.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::before { display: none; }
}

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px var(--gutter) 18px;
    background: var(--bg-raised); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a.nav-link { padding: 14px 6px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav-links .lang-dropdown { display: none; }
  .nav-links .lang-select-mobile {
    display: block; order: 2; width: 100%; margin-top: 10px;
    padding: 13px 14px; border-radius: var(--r-ctl);
    border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--ink); font: inherit; font-weight: 700; font-size: .95rem;
  }
}

@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  #features .grid-4 { grid-template-columns: minmax(0, 1fr); }
  #features .grid-4 > .feature:nth-child(n) { grid-column: auto; }
  .planning-grid { grid-template-columns: minmax(0, 1fr); }
  .planning-card, .planning-card--lead { grid-column: auto; padding: 24px; }
  .tier-note { grid-template-columns: minmax(0, 1fr); }
  .tier-note > div + div { border-left: 0; border-top: 1px solid var(--line); }
  #how .grid-4.steps { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 20px 0; }
  .privacy .feature { padding: 22px 0; }
  .hero-cta { display: grid; grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 4 / 3; border-radius: var(--r-card); }
  .hero-phone { left: 14px; bottom: -34px; width: 124px; border-radius: 22px; padding: 5px; }
  .hero-phone img { border-radius: 18px; }
  #features .feature.has-shot { padding-right: 26px; padding-bottom: 200px; min-height: 0; }
  .feature-shot { right: 50%; transform: translateX(50%); width: 150px; height: 188px; }
  .panel { padding: 24px; }
  .cta-card { padding: 30px 24px; }
  .footer-top { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Quiet Guardian landing
   The marketing surface follows the same Mineral Day / Mineral Night system as
   the app. Screenshots stay true to the captured app theme and are framed as
   product objects rather than recoloured to match their surrounding section.
   ========================================================================== */
.landing-home {
  --bg:          #F4F5F1;
  --bg-raised:   #FAFBF8;
  --bg-sunken:   #E8EFEC;
  --surface:     #FFFFFF;
  --ink:         #13232B;
  --ink-2:       #5F6B70;
  --ink-3:       #7D898D;
  --line:        #DDE3DF;
  --line-strong: #C7D2CD;
  --accent:      #356F8A;
  --accent-ink:  #24566E;
  --accent-soft: #DDEBF0;
  --accent-line: #BED5DE;
  --on-accent:   #FFFFFF;
  --panel:       #141B1D;
  --panel-2:     #203135;
  --panel-ink:   #FFFFFF;
  --panel-ink-2: #B4BFBE;
  --panel-line:  rgba(255,255,255,.14);
  --stage-blue:  #E5EEF0;
  --stage-green: #E7EFEC;
  --stage-sand:  #F2EDE4;
  --shadow-sm: 0 1px 2px rgba(25,52,62,.035), 0 8px 24px rgba(25,52,62,.055);
  --shadow-md: 0 4px 12px rgba(25,52,62,.055), 0 24px 50px rgba(25,52,62,.09);
  --shadow-lg: 0 10px 24px rgba(25,52,62,.07), 0 40px 90px rgba(25,52,62,.14);
  --shadow-lift: 0 3px 8px rgba(25,52,62,.07), 0 24px 48px -14px rgba(25,52,62,.2),
                 0 68px 110px -34px rgba(25,52,62,.27);
  color: var(--ink-2);
  background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  .landing-home {
    --bg:          #141B1D;
    --bg-raised:   #182123;
    --bg-sunken:   #151F21;
    --surface:     #20292C;
    --ink:         #F4F7F5;
    --ink-2:       #B4BFBE;
    --ink-3:       #9AA7A5;
    --line:        #354246;
    --line-strong: #48575B;
    --accent:      #82B6C9;
    --accent-ink:  #A7CDDA;
    --accent-soft: #243D47;
    --accent-line: #365764;
    --on-accent:   #13232B;
    --panel:       #0F1618;
    --panel-2:     #203135;
    --panel-ink:   #F4F7F5;
    --panel-ink-2: #B4BFBE;
    --stage-blue:  #1C2C30;
    --stage-green: #1D2A27;
    --stage-sand:  #2A2923;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.26), 0 24px 50px rgba(0,0,0,.25);
    --shadow-lg: 0 10px 24px rgba(0,0,0,.3), 0 40px 90px rgba(0,0,0,.34);
    --shadow-lift: 0 3px 8px rgba(0,0,0,.34), 0 24px 48px -14px rgba(0,0,0,.55),
                   0 68px 110px -34px rgba(0,0,0,.62);
  }
}
.landing-home::after { opacity: .024; }
.landing-home h1,
.landing-home h2,
.landing-home h3 { font-variation-settings: "wght" 760; text-wrap: balance; }
.landing-home p { text-wrap: pretty; }
.landing-home .brand span,
.landing-home .footer-brand span { color: inherit; }
.landing-home .brand { letter-spacing: -.045em; }
.landing-home .brand img { border-radius: 8px; box-shadow: 0 7px 18px rgba(53,111,138,.18); }
.landing-home .nav {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}
/* Hero: more editorial copy, a warmer stage, and one unmistakable product. */
.landing-home .hero {
  padding-top: clamp(54px, 6vw, 92px);
  padding-bottom: clamp(76px, 9vw, 126px);
  background:
    radial-gradient(70% 90% at 78% 18%, rgba(158,215,207,.42), transparent 70%),
    radial-gradient(58% 72% at 96% 82%, rgba(169,195,210,.38), transparent 72%),
    radial-gradient(45% 58% at 52% 100%, rgba(227,213,188,.32), transparent 76%),
    linear-gradient(180deg, #F7F8F5 0%, #F1F3EF 100%);
}
.landing-home .hero::before {
  top: 8%; right: -8%; width: min(52vw, 720px); height: 82%;
  border: 1px solid rgba(53,111,138,.1); border-radius: 52% 48% 46% 54%;
  background: rgba(255,255,255,.26); transform: rotate(-7deg);
}
@media (prefers-color-scheme: dark) {
  .landing-home .hero {
    background:
      radial-gradient(70% 90% at 78% 18%, rgba(61,115,118,.5), transparent 70%),
      radial-gradient(58% 72% at 96% 82%, rgba(49,86,106,.45), transparent 72%),
      radial-gradient(45% 58% at 52% 100%, rgba(102,93,73,.32), transparent 76%),
      linear-gradient(180deg, #141D1F 0%, #11191B 100%);
  }
  .landing-home .hero::before {
    border-color: rgba(167,205,218,.1);
    background: rgba(255,255,255,.025);
  }
}
.landing-home .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: start; gap: clamp(56px, 7vw, 104px); }
.landing-home .hero-copy { max-width: 690px; padding-top: clamp(24px, 3vw, 44px); }
.landing-home .hero h1 {
  max-width: 13.6ch; margin: 26px 0 24px;
  font-size: clamp(3rem, 1.25rem + 4.2vw, 4.05rem);
  line-height: .99; letter-spacing: -.058em;
}
.landing-home .hero .subhead { max-width: 47ch; font-size: clamp(1.08rem, .99rem + .5vw, 1.3rem); line-height: 1.62; }
.landing-home .evx-pill {
  padding: 0 0 0 17px; border: 0; border-radius: 0; background: transparent;
  position: relative; color: var(--accent-ink); font-size: .84rem; letter-spacing: .015em;
}
.landing-home .evx-pill::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft);
}
.landing-home .hero-cta { margin-top: 36px; }
.landing-home .hero-microcopy { margin-top: 18px; }
.landing-home .hero-shot-wrap { min-height: 620px; align-items: center; }
.landing-home .hero-shot-wrap::before {
  content: ""; position: absolute; inset: 8% 1% 2% 2%; z-index: -1;
  border-radius: 48% 52% 44% 56% / 52% 42% 58% 48%;
  background: rgba(255,255,255,.56); border: 1px solid rgba(255,255,255,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
@media (prefers-color-scheme: dark) {
  .landing-home .hero-shot-wrap::before,
  .landing-home:not(.landing-home--ru) .hero-media::before {
    background: rgba(255,255,255,.025);
    border-color: rgba(167,205,218,.1);
  }
}
.landing-home .hero-shot-frame {
  width: clamp(268px, 28vw, 336px); padding: 7px; border-radius: 42px;
  background: #19232C; box-shadow: var(--shadow-lift); transform: rotate(1.5deg);
}
.landing-home .hero-shot-frame img { border-radius: 35px; }
/* Trust is a typographic facts rail, not a row of icon cards. */
.landing-home .trust--landing { padding: 0 var(--gutter); background: var(--bg-raised); }
.landing-home .trust--landing .trust-inner {
  grid-auto-columns: minmax(0, 1fr); width: min(var(--container), 100%);
  padding: 32px 0;
}
.landing-home .trust--landing .trust-item {
  display: grid; justify-content: start; gap: 5px; padding: 4px clamp(18px, 2.5vw, 38px);
  white-space: normal; line-height: 1.35;
}
.landing-home .trust--stats .trust-item { min-height: 58px; align-content: center; }
.landing-home .trust--landing .trust-item:first-child { padding-left: 0; }
.landing-home .trust--landing .trust-item:last-child { padding-right: 0; }
.landing-home .trust--landing .trust-item strong { font-size: 1.28rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.landing-home .trust--landing .trust-item span { font-size: .78rem; color: var(--ink-3); }

/* The country comparison remains fully functional, but the landing only shows
   enough rows to communicate the result until the reader asks for detail. */
.landing-home .schedule-widget { border-radius: 28px; box-shadow: 0 28px 80px rgba(30,58,68,.09); }
.schedule-widget--preview .sched-body { position: relative; transition: max-height .45s var(--ease); }
.schedule-widget--preview:not(.is-expanded) .sched-body { max-height: 510px; overflow: hidden; }
.schedule-widget--preview:not(.is-expanded) .sched-body::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 124px;
  pointer-events: none; background: linear-gradient(180deg, transparent, var(--surface) 88%);
}
.schedule-expand {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 22px; border: 0; border-top: 1px solid var(--line);
  background: var(--surface); color: var(--accent-ink); font: inherit; font-size: .92rem;
  font-weight: 750; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.schedule-expand:hover { background: var(--accent-soft); }
.schedule-expand svg { width: 16px; height: 16px; fill: currentColor; transition: transform .25s var(--ease); }
.schedule-widget--preview.is-expanded .schedule-expand svg { transform: rotate(180deg); }

/* Product story: three large editorial chapters replace the commodity row of
   six equal screenshots. Each visual answers one user problem. */
.story-showcase { overflow: hidden; background: var(--bg-raised); }
.story-head { max-width: 720px; margin-bottom: clamp(56px, 7vw, 90px); }
.section-kicker {
  display: block; margin-bottom: 15px; color: var(--accent-ink); font-size: .76rem;
  font-weight: 800; letter-spacing: .02em;
}
.story-head h2 { max-width: 18ch; font-size: clamp(2.25rem, 1.25rem + 2.5vw, 3.55rem); line-height: 1.04; letter-spacing: -.048em; }
.story-head p { max-width: 56ch; }
.story-tour { display: grid; gap: 1px; border-top: 1px solid var(--line); }
.story-chapter {
  display: grid; grid-template-columns: minmax(300px, .82fr) minmax(520px, 1.18fr);
  align-items: center; gap: clamp(48px, 8vw, 118px); min-height: 700px;
  padding: clamp(72px, 9vw, 126px) 0; border-bottom: 1px solid var(--line);
}
.story-chapter:nth-child(even) { grid-template-columns: minmax(520px, 1.18fr) minmax(300px, .82fr); }
.story-chapter:nth-child(even) .story-copy { order: 2; }
.story-chapter:nth-child(even) .story-visual { order: 1; }
.story-copy { max-width: 470px; }
.story-index { display: block; margin-bottom: 26px; color: var(--accent); font-size: .76rem; font-weight: 800; letter-spacing: .16em; }
.story-copy h3 { font-size: clamp(2rem, 1.3rem + 1.6vw, 3rem); line-height: 1.04; letter-spacing: -.045em; margin-bottom: 24px; }
.story-copy > p { font-size: 1.08rem; line-height: 1.7; }
.story-proof { display: grid; gap: 10px; margin-top: 30px; list-style: none; }
.story-proof li { position: relative; padding-left: 22px; color: var(--ink); font-size: .91rem; font-weight: 650; }
.story-proof li::before { content: ""; position: absolute; left: 0; top: .63em; width: 9px; height: 2px; background: var(--accent); }
.story-visual {
  position: relative; min-height: 570px; display: flex; align-items: center; justify-content: center;
  border-radius: 46px; background: var(--stage-blue); isolation: isolate;
}
.story-visual::before {
  content: ""; position: absolute; inset: 22px; z-index: -1; border: 1px solid rgba(53,111,138,.14);
  border-radius: 36px;
}
.device-shot { display: block; padding: 6px; border-radius: 36px; background: #17222B; box-shadow: var(--shadow-lift); }
.device-shot img { display: block; width: 100%; height: auto; border-radius: 30px; }
.device-shot--main { width: 274px; transform: rotate(-1.5deg); }
.story-orbit { position: absolute; width: 390px; height: 390px; border: 1px dashed rgba(53,111,138,.24); border-radius: 50%; }
.story-visual--pair { background: var(--stage-green); }
.story-visual--pair .device-shot { position: absolute; width: 238px; }
.device-shot--back { left: 16%; transform: rotate(-7deg) translateY(-16px); opacity: .88; }
.device-shot--front { right: 17%; transform: rotate(5deg) translateY(22px); }
.profile-ribbon {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 14px 34px rgba(35,66,56,.13); backdrop-filter: blur(14px);
}
.profile-ribbon span { padding: 6px 11px; border-radius: 999px; background: var(--bg-sunken); color: var(--accent-ink); font-size: .72rem; font-weight: 750; }
.story-visual--history { background: var(--stage-sand); }
.story-visual--history .device-shot { position: absolute; width: 220px; }
.device-shot--history { right: 13%; top: 10%; transform: rotate(5deg); }
.device-shot--scan { right: 39%; bottom: 7%; transform: rotate(-3deg); }
.paper-card {
  position: absolute; left: 8%; top: 18%; width: 235px; min-height: 310px; padding: 28px;
  border-radius: 6px 16px 8px 12px; background: #FFFDF7; color: #715D46;
  box-shadow: 0 24px 54px rgba(91,72,48,.17); transform: rotate(-8deg);
}
.paper-card::after { content: ""; position: absolute; inset: 12px; border: 1px solid #DDCCB4; pointer-events: none; }
.paper-card span { position: relative; z-index: 1; display: block; margin-bottom: 30px; font-family: Georgia, serif; font-size: 1.18rem; }
.paper-card i { position: relative; z-index: 1; display: block; height: 1px; margin: 26px 0; background: #D8C8B2; }
.story-settings-note {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: clamp(46px, 7vw, 86px);
  max-width: 1040px; min-height: 590px; margin: clamp(54px, 7vw, 90px) 0 0 auto; padding: 54px 0 54px 46px;
  border-left: 2px solid var(--accent);
}
.story-settings-note picture {
  display: block; width: 250px; padding: 6px; border-radius: 36px;
  background: #17222B; box-shadow: var(--shadow-lift); transform: rotate(-1deg);
}
.story-settings-note img { display: block; width: 100%; height: auto; border-radius: 30px; }
.story-settings-note span { display: block; margin-bottom: 12px; color: var(--ink-3); font-size: .82rem; font-weight: 750; letter-spacing: .01em; }
.story-settings-note strong {
  display: block; max-width: 20ch; color: var(--ink); font-size: clamp(1.8rem, 1.15rem + 1.35vw, 2.65rem);
  line-height: 1.12; letter-spacing: -.035em; text-wrap: balance;
}

.landing-home .privacy { background: var(--bg-sunken); }
.landing-home .privacy .feature { border-color: rgba(20,32,42,.13); }
.landing-home--ru .privacy-intro {
  max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px);
}
.landing-home--ru .privacy-intro .section-head { max-width: 630px; margin-bottom: 0; }
.landing-home--ru .privacy-intro .section-head h2 {
  max-width: 13ch; font-size: clamp(2.35rem, 1.45rem + 2.6vw, 3.85rem);
  line-height: 1.02; letter-spacing: -.05em;
}
.privacy-network-proof {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
  margin-top: 28px; color: var(--ink-3); font-size: .82rem !important;
}
.privacy-network-proof strong { color: var(--accent-ink); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.privacy-network-proof span { opacity: .45; }
@media (max-width: 1040px) {
  .landing-home .hero-grid { grid-template-columns: 1fr; }
  .landing-home .hero-copy { max-width: 760px; padding-top: 0; }
  .landing-home .hero-shot-wrap { min-height: 560px; }
  .story-chapter,
  .story-chapter:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .story-chapter:nth-child(even) .story-copy,
  .story-chapter:nth-child(even) .story-visual { order: initial; }
  .story-copy { max-width: 620px; }
}

@media (max-width: 760px) {
  .landing-home .trust--landing .trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-home .trust--landing .trust-item { padding: 16px 12px; border-left: 0; border-bottom: 1px solid var(--line); }
  .landing-home .trust--landing .trust-item:first-child { padding-left: 12px; }
  .story-chapter { min-height: 0; }
  .story-visual { min-height: 520px; border-radius: 30px; }
  .story-visual--pair .device-shot { width: 210px; }
  .device-shot--back { left: 8%; }
  .device-shot--front { right: 8%; }
  .story-visual--history .device-shot { width: 190px; }
  .device-shot--history { right: 4%; }
  .device-shot--scan { right: 29%; }
  .paper-card { left: 3%; width: 190px; }
  .story-settings-note {
    grid-template-columns: 190px minmax(0, 1fr); gap: 34px; min-height: 500px;
    padding: 44px 0 44px 28px;
  }
  .story-settings-note picture { width: 190px; border-radius: 30px; }
  .story-settings-note img { border-radius: 24px; }
}

@media (max-width: 520px) {
  .landing-home .hero { padding-top: 42px; }
  .landing-home .hero h1 { max-width: 14ch; font-size: clamp(2.35rem, 10.8vw, 3.1rem); }
  .landing-home .hero-grid { gap: 30px; }
  .landing-home .hero-shot-wrap { min-height: 410px; }
  .landing-home .hero-shot-frame { width: 218px; }
  .landing-home .trust--landing .trust-inner { grid-template-columns: minmax(0, 1fr); }
  .landing-home .trust--landing .trust-item { grid-template-columns: 74px 1fr; align-items: baseline; }
  .schedule-widget--preview:not(.is-expanded) .sched-body { max-height: 560px; }
  .story-head h2 { font-size: 2.45rem; }
  .story-chapter { padding: 72px 0; gap: 42px; }
  .story-copy h3 { font-size: 2.15rem; }
  .story-visual { min-height: 470px; margin: 0 -8px; }
  .device-shot--main { width: 210px; }
  .story-orbit { width: 290px; height: 290px; }
  .story-visual--pair .device-shot { width: 176px; }
  .device-shot--back { left: 4%; }
  .device-shot--front { right: 4%; }
  .profile-ribbon { bottom: 5%; }
  .profile-ribbon span { padding: 5px 8px; }
  .story-visual--history .device-shot { width: 160px; }
  .device-shot--history { top: 8%; }
  .device-shot--scan { right: 25%; bottom: 5%; }
  .paper-card { left: 2%; top: 18%; width: 150px; min-height: 230px; padding: 20px; }
  .paper-card span { font-size: .9rem; }
  .paper-card i { margin: 20px 0; }
  .story-settings-note {
    grid-template-columns: 112px minmax(0, 1fr); gap: 22px; min-height: 340px;
    padding: 34px 0 34px 18px;
  }
  .story-settings-note picture { width: 112px; padding: 4px; border-radius: 23px; }
  .story-settings-note img { border-radius: 19px; }
  .story-settings-note strong { font-size: 1.45rem; }
  .privacy-network-proof { max-width: 290px; }
}

/* Localized landing pages keep their copy but follow the same product-first
   art direction as the Russian reference. */
.landing-home:not(.landing-home--ru) .hero-media {
  min-height: 620px; aspect-ratio: auto; margin-right: 0;
  display: flex; align-items: center; justify-content: center;
}
.landing-home:not(.landing-home--ru) .hero-media::before {
  content: ""; position: absolute; inset: 8% 1% 2% 2%; z-index: -1;
  border-radius: 48% 52% 44% 56% / 52% 42% 58% 48%;
  background: color-mix(in srgb, var(--surface) 56%, transparent); border: 1px solid var(--line);
}
.landing-home:not(.landing-home--ru) .hero-media > picture { display: none; }
.landing-home:not(.landing-home--ru) .hero-media .hero-phone {
  position: relative; left: auto; bottom: auto; width: clamp(268px, 28vw, 336px);
  padding: 7px; border-radius: 42px; transform: rotate(1.5deg);
}
.landing-home:not(.landing-home--ru) .hero-media .hero-phone img { border-radius: 35px; }
.landing-home:not(.landing-home--ru) .trust--landing:not(.trust--stats) .trust-item {
  display: flex; align-items: center; justify-content: flex-start;
}
.landing-home:not(.landing-home--ru) .privacy .section-head {
  max-width: 680px; margin-bottom: clamp(40px, 5vw, 68px);
}
.landing-home:not(.landing-home--ru) .privacy .section-head h2 {
  max-width: 15ch; font-size: clamp(2.35rem, 1.45rem + 2.6vw, 3.85rem);
  line-height: 1.02; letter-spacing: -.05em;
}

/* Release-faithful product tour. Every frame comes from the same V2.2
   simulator build so the marketing site and the product speak one language. */
.localized-showcase { overflow: hidden; background: var(--bg-raised); }
.localized-showcase .section-head {
  max-width: 720px; margin: 0 0 clamp(56px, 7vw, 90px); text-align: left;
}
.localized-showcase .section-head h2 {
  max-width: 18ch; font-size: clamp(2.25rem, 1.25rem + 2.5vw, 3.55rem);
  line-height: 1.04; letter-spacing: -.048em;
}
.localized-showcase .carousel-track {
  display: grid; gap: 1px; overflow: visible; margin: 0; padding: 0;
  border-top: 1px solid var(--line); scroll-snap-type: none;
}
.localized-showcase .carousel-slide {
  position: relative; width: auto; min-height: 640px;
  display: grid; grid-template-columns: minmax(300px,.82fr) minmax(520px,1.18fr);
  align-items: center; gap: clamp(48px,8vw,118px);
  padding: clamp(72px,9vw,118px) 0; border-bottom: 1px solid var(--line);
}
.localized-showcase .carousel-slide:nth-child(even) {
  grid-template-columns: minmax(520px,1.18fr) minmax(300px,.82fr);
}
.localized-showcase .carousel-slide:nth-child(odd) picture { order: 2; }
.localized-showcase .carousel-slide:nth-child(odd) p { order: 1; }
.localized-showcase .carousel-slide picture {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 540px; border-radius: 46px; background: var(--stage-blue);
}
.localized-showcase .carousel-slide:nth-child(2) picture { background: var(--stage-green); }
.localized-showcase .carousel-slide:nth-child(3) picture { background: var(--stage-sand); }
.localized-showcase .carousel-slide:nth-child(4) picture { background: var(--stage-blue); }
.localized-showcase .carousel-slide:nth-child(5) picture { background: var(--stage-sand); }
.localized-showcase .carousel-slide:nth-child(6) picture { background: var(--stage-green); }
.localized-showcase .carousel-slide picture::before {
  content: ""; position: absolute; inset: 22px; border: 1px solid rgba(53,111,138,.14);
  border-radius: 36px;
}
.localized-showcase .carousel-slide img {
  position: relative; z-index: 1; width: 274px; padding: 6px;
  border: 0; border-radius: 36px; background: #17222B;
  box-shadow: var(--shadow-lift); transform: rotate(-1.5deg);
}
.localized-showcase .carousel-slide:nth-child(even) img { transform: rotate(1.5deg); }
.localized-showcase .carousel-slide:hover img { transform: translateY(-4px) rotate(-1.5deg); }
.localized-showcase .carousel-slide:nth-child(even):hover img { transform: translateY(-4px) rotate(1.5deg); }
.localized-showcase .carousel-slide p {
  position: relative; max-width: 15ch; margin: 0; padding-top: 42px;
  color: var(--ink); font-size: clamp(2rem,1.3rem + 1.6vw,3rem);
  font-weight: 780; line-height: 1.08; letter-spacing: -.042em;
}
.localized-showcase .carousel-slide p::before {
  position: absolute; top: 0; left: 0; color: var(--accent);
  font-size: .76rem; font-weight: 800; letter-spacing: .16em;
}
.localized-showcase .carousel-slide:nth-child(1) p::before { content: "01"; }
.localized-showcase .carousel-slide:nth-child(2) p::before { content: "02"; }
.localized-showcase .carousel-slide:nth-child(3) p::before { content: "03"; }
.localized-showcase .carousel-slide:nth-child(4) p::before { content: "04"; }
.localized-showcase .carousel-slide:nth-child(5) p::before { content: "05"; }
.localized-showcase .carousel-slide:nth-child(6) p::before { content: "06"; }
.localized-showcase .carousel-controls { display: none; }

/* The wide feature uses the same current agenda capture as the product tour. */
#features .grid-4 > .feature:nth-child(4) { padding-right: 26px; }

@media (max-width: 1040px) {
  .landing-home:not(.landing-home--ru) .hero-media { min-height: 560px; }
  .localized-showcase .carousel-slide,
  .localized-showcase .carousel-slide:nth-child(even) {
    grid-template-columns: minmax(0,1fr); gap: 54px;
  }
  .localized-showcase .carousel-slide picture,
  .localized-showcase .carousel-slide p { order: initial; }
}

@media (max-width: 520px) {
  .landing-home:not(.landing-home--ru) .hero-media { min-height: 440px; }
  .landing-home:not(.landing-home--ru) .hero-media .hero-phone { width: 218px; }
  .localized-showcase .section-head h2 { font-size: 2.45rem; }
  .localized-showcase .carousel-slide { min-height: 0; padding: 72px 0; gap: 42px; }
  .localized-showcase .carousel-slide picture { min-height: 470px; margin: 0 -8px; }
  .localized-showcase .carousel-slide img { width: 210px; }
  .localized-showcase .carousel-slide p { font-size: 2.15rem; }
}

/* ==========================================================================
   iOS widgets — one quiet product moment between the tour and privacy.
   The screenshot remains real WidgetKit output; the surrounding field echoes
   the app's launch aurora without turning the page into a gradient showcase.
   ========================================================================== */
.widget-story {
  overflow: hidden;
  background: var(--bg);
}
.widget-story-grid {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(500px, 1.22fr);
  align-items: center;
  gap: clamp(54px, 8vw, 118px);
}
.widget-story-copy { max-width: 500px; }
.widget-story-copy h2 {
  max-width: 13ch;
  margin-bottom: 24px;
  font-size: clamp(2.35rem, 1.35rem + 2.5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.052em;
}
.widget-story-copy > p {
  max-width: 44ch;
  font-size: 1.08rem;
  line-height: 1.72;
}
.widget-benefits {
  margin-top: 34px;
  list-style: none;
  border-top: 1px solid var(--line);
}
.widget-benefits li {
  position: relative;
  padding: 15px 0 15px 28px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: .94rem;
  font-weight: 650;
}
.widget-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 10px;
  height: 2px;
  background: var(--accent);
}
.widget-stage {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 48px;
  background:
    radial-gradient(68% 72% at 20% 16%, rgba(158,215,207,.52), transparent 72%),
    radial-gradient(72% 76% at 88% 28%, rgba(169,195,210,.5), transparent 72%),
    radial-gradient(58% 62% at 46% 100%, rgba(227,213,188,.38), transparent 76%),
    var(--stage-blue);
}
.widget-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 48% 52% 44% 56% / 52% 42% 58% 48%;
  animation: widget-aurora 12s ease-in-out infinite alternate;
}
.widget-stage picture {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(76%, 430px);
}
.widget-stage img {
  display: block;
  width: auto;
  max-height: 650px;
  border-radius: 38px;
  box-shadow: var(--shadow-lift);
}
@keyframes widget-aurora {
  from { transform: translate3d(-3%, -2%, 0) rotate(-4deg) scale(.96); }
  to { transform: translate3d(4%, 3%, 0) rotate(5deg) scale(1.06); }
}
@media (prefers-color-scheme: dark) {
  .widget-stage {
    background:
      radial-gradient(68% 72% at 20% 16%, rgba(61,115,118,.52), transparent 72%),
      radial-gradient(72% 76% at 88% 28%, rgba(49,86,106,.5), transparent 72%),
      radial-gradient(58% 62% at 46% 100%, rgba(102,93,73,.35), transparent 76%),
      var(--stage-blue);
  }
}
@media (max-width: 1040px) {
  .widget-story-grid { grid-template-columns: minmax(0, 1fr); }
  .widget-story-copy { max-width: 680px; }
  .widget-stage { min-height: 650px; }
  .widget-stage img { max-height: 590px; }
}
@media (max-width: 520px) {
  .widget-story-copy h2 { font-size: 2.45rem; }
  .widget-stage { min-height: 540px; margin: 0 -8px; border-radius: 30px; }
  .widget-stage picture { width: 82%; }
  .widget-stage img { max-height: 490px; border-radius: 30px; }
}