/* ============================================================
   Baby PRO — site.css (shared design system, production)
   Dark-only · mobile-first · gradient accent on actions only
   Font: Inter Variable (self-hosted) · type per apple.com

   Structure:
     1. Font + tokens
     2. Base (reset, html/body, focus, layout)
     3. Typography (scale, emphasis, eyebrow)
     4. Actions (btn, glink, icon-btn, badge-store)
     5. Surfaces (veil frost bar, device)
     6. Chrome (nav, mobile menu, footer)
     7. Sections (hero, section-head, gallery, bento, plans, faq, outro)
     8. Content layer (inner pages: prose, cards, calc, tables, lists)
     9. Motion (reveal)

   Page-specific bits stay in each page: bento grid maps, anchors.
   ============================================================ */

/* ---------- 1. font + tokens ---------- */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --night:   #0D0D12;
  --night-2: #15151D;
  --card:    #1A1A24;
  --ivory:   #F0F0F5;
  --mist:    #8E8E9A;
  --faint:   #5A5A66;
  --line:    rgba(255,255,255,0.08);
  --rose:    #E8618C;
  --grad:    linear-gradient(135deg, #E8618C 0%, #B065D4 100%);
  /* distance from viewport edge to the .wrap content edge */
  --edge:    max(22px, calc((100vw - 1120px) / 2));
  font-family: InterVariable, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ---------- 2. base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* scroll-padding-top: the nav is sticky at top:0, so it OVERLAPS whatever an
   #anchor scrolls to — and wins the hit test, leaving the target unclickable.
   It lives on the scroll container, not on the targets, so it reaches every
   anchor whatever its tag (div#get-the-app included, not just the sections). */
html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--night); overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--night);
  color: var(--ivory);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  font-feature-settings: "case" 0, "dlig", "frac" 0, "dnom" 0, "numr" 0, "subs" 0, "sups" 0, "tnum" 0, "zero" 0, "ss01" 0, "ss02" 0, "ss03", "ss04" 0, "ss05" 0, "ss06" 0, "ss07" 0, "ss08" 0, "cv01", "cv02", "cv03", "cv04", "cv05" 0, "cv06", "cv07" 0, "cv08" 0, "cv09", "cv10", "cv11" 0, "cv12", "cv13", "cpsp" 0, "c2sc" 0, "salt" 0, "aalt" 0, "calt", "ccmp", "locl", "kern";
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(1120px, 100% - 44px); margin-inline: auto; }
/* narrow column for reading pages (legal, guides, tools) */
.container { width: min(820px, 100% - 44px); margin-inline: auto; }

/* ---------- 3. typography ---------- */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.07;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 4.6vw + 1.6rem, 5rem); }
h2 { font-size: clamp(2rem, 3vw + 1.1rem, 3.25rem); }

/* emphasis system: strong = ivory, rest of display line = mist */
.dim { color: var(--mist); }
.dim strong { color: var(--ivory); font-weight: 700; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: 16px;
}

/* ---------- 4. actions (the gradient is reserved for these) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 999px;
  padding: 14px 26px;
  min-height: 48px;
  transition: transform 0.15s ease, filter 0.15s ease;
  cursor: pointer;
  border: 0;
  /* bare .btn defaults to the filled look */
  background-image: var(--grad);
  color: #fff;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost {
  color: var(--ivory);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--night-2), var(--night-2)) padding-box,
    var(--grad) border-box;
}
.btn-ghost:hover { filter: brightness(1.15); transform: none; }

/* gradient text — for standalone text links (actions) */
.glink {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.glink:hover { filter: brightness(1.15); }

/* round icon buttons — one look everywhere: menu, close, play/pause, arrows */
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--card);
  color: var(--ivory);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.2s ease;
}
.icon-btn:hover { filter: brightness(1.3); }
.icon-btn:disabled { opacity: 0.35; cursor: default; filter: none; }

/* official store badges — black artwork on white, per store guidelines. The white
   fill, the 8px corner and the outline all live IN the SVG now, so this adds no
   background and does not clip: clipping at a radius of our own choosing would
   shave the artwork's own outline at the corners. The radius is kept (matched to
   the art) only so the focus ring follows the badge's real shape. */
.badge-store {
  display: inline-flex;
  border-radius: 8px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.badge-store:hover { transform: translateY(-1px); filter: brightness(0.96); }
.badge-store img { height: 52px; width: auto; }
.store-badges { display: flex; gap: 14px; flex-wrap: wrap; }
/* platform-aware badges: <html data-platform> is stamped flash-free by the
   inline head script (WebChrome::PLATFORM_STAMP). On mobile show only the
   matching store; desktop/unknown (no attribute) and no-JS keep both. */
:root[data-platform="ios"] .badge-store[data-store="play"],
:root[data-platform="android"] .badge-store[data-store="appstore"] { display: none; }

/* ---------- 5. surfaces ---------- */
/* frost caption bar — floats just above the bottom edge of the artwork beneath;
   parent needs position:relative + container-type:inline-size (for cqw radius) */
.veil {
  position: absolute;
  inset: auto 0 0 0;
  margin: 6px;
  padding: 20px;
  background: rgba(13,13,18,0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-bottom-left-radius: 12cqw;
  border-bottom-right-radius: 12cqw;
}

/* a full framed screenshot with an optional .veil caption on top */
.device {
  position: relative;
  width: 100%;
  container-type: inline-size;
}
.device img { width: 100%; }
.device .veil p { color: var(--ivory); font-size: 0.88rem; }

/* ---------- 6. chrome ---------- */
/* full-bleed regardless of the parent column (works inside .container too) */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(13,13,18,0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ivory);
  letter-spacing: -0.01em;
}
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand span span { color: var(--mist); font-weight: 600; }
/* mobile: icon only — the name returns on desktop */
.brand > span { display: none; }
.nav-links { display: none; }
/* mobile: CTA pushed right, menu button last (rightmost) */
.nav .btn { padding: 8px 18px; min-height: 36px; font-size: 0.9rem; margin-left: auto; }
@media (min-width: 900px) {
  .brand > span { display: inline; }
  .menu-btn { display: none; }
  .nav .btn { margin-left: 0; }
  .nav-links {
    display: flex;
    gap: 24px;
    margin-left: auto;
    margin-right: 12px;
    font-size: 0.88rem;
  }
  .nav-links a { color: var(--mist); font-weight: 500; }
  .nav-links a:hover { color: var(--ivory); }
}

/* full-screen menu (mobile) */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(13,13,18,0.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  /* 12px top = same as .nav-in padding, so the X sits exactly where the menu button was */
  padding: 12px 22px calc(40px + env(safe-area-inset-bottom));
}
.menu-overlay[hidden] { display: none; }
.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.menu-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10vh;
}
.menu-links a {
  color: var(--ivory);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.menu-links a:active { color: var(--mist); }

footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 36px 0 calc(48px + env(safe-area-inset-bottom));
  font-size: 0.86rem;
  color: var(--faint);
}
.foot-in {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--mist); }
.foot-links a:hover { color: var(--ivory); }
@media (min-width: 720px) {
  .foot-in { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* language switcher: a footer trigger + a full-screen modal (same overlay
   family as the mobile menu), wired by site.js. Links are real <a> to the
   current page in each locale; the active one is marked. */
.foot-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--mist);
  cursor: pointer;
}
.foot-lang:hover { color: var(--ivory); }
.foot-lang svg { opacity: 0.85; }
.lang-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(13,13,18,0.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  padding: 12px 22px calc(40px + env(safe-area-inset-bottom));
}
.lang-overlay[hidden] { display: none; }
.lang-title { font-size: 1.05rem; font-weight: 700; color: var(--ivory); }
.lang-list {
  display: flex;
  flex-direction: column;
  margin-top: 6vh;
  overflow-y: auto;
  max-width: 560px;
  width: 100%;
  align-self: center;
}
.lang-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--mist);
  font-size: 1.25rem;
  font-weight: 600;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}
.lang-list a:hover { color: var(--ivory); }
.lang-list a[aria-current="page"] { color: var(--ivory); }
.lang-list a[aria-current="page"] .lang-check { color: var(--rose); }
.lang-check { flex: none; }

/* ---------- 7. sections ---------- */
/* shared section heading: eyebrow + h2 (+ .sub); center with --center */
.section-head { margin-bottom: 44px; }
.section-head h2 { max-width: 24ch; }
.section-head .sub { color: var(--mist); margin-top: 16px; max-width: 50ch; font-size: 1.05rem; }
.section-head--center { text-align: center; }
.section-head--center h2, .section-head--center .sub { margin-inline: auto; }

/* hero: copy left, optional 9:16 media right (stacked on mobile) */
/* overflow-x: the video glow (.hero-video-wrap::before) is an abs-positioned box
   bleeding past the viewport — unclipped it creates horizontal scrollable overflow,
   pannable on mobile browsers that don't honor the root's overflow-x clip. */
.hero { padding: 56px 0 96px; overflow-x: hidden; overflow-x: clip; }
.hero-in { display: flex; flex-direction: column; gap: 56px; }
.hero-copy { max-width: 56ch; }
.hero-copy h1 { max-width: 14ch; }
.hero .sub {
  color: var(--mist);
  max-width: 44ch;
  margin-top: 24px;
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  line-height: 1.5;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}
.cta-fine {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--faint);
}
.cta-fine a { color: var(--mist); border-bottom: 1px solid var(--line); }
.cta-fine a:hover { color: var(--ivory); }

.hero-video-wrap { position: relative; width: min(340px, 88vw); margin-inline: auto; }
.hero-video-wrap::before {
  content: "";
  position: absolute;
  inset: -14% -30%;
  background: radial-gradient(ellipse 52% 44% at 50% 48%,
              rgba(176,101,212,0.30), rgba(232,97,140,0.10) 55%, transparent 75%);
  filter: blur(6px);
  animation: breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.hero-video {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: #101018;
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Poza de consultant (/r/{slug}): 4:5, nu 9:16 ca filmul — un portret tăiat la
   raportul filmului fie taie umerii, fie lasă fața minusculă. object-position
   ține fața în treimea superioară, unde cade natural într-un portret. */
.hero-portrait { aspect-ratio: 4 / 5; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrap::before { animation: none; }
}
.video-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
}
@media (min-width: 900px) {
  .hero { padding: 88px 0 120px; }
  .hero-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; }
  .hero-video-wrap { flex: none; width: 350px; margin-inline: 0; }
}

/* reading-page hero: compact, full-width headline (guides, legal, tools) */
.hero--page { padding: 48px 0 16px; }
.hero--page h1 { max-width: none; font-size: clamp(2rem, 3vw + 1.1rem, 3.25rem); margin-bottom: 14px; }
.hero--page .intro { color: var(--mist); font-size: 1.05rem; max-width: 60ch; }

/* horizontal card gallery (apple-style), full-bleed but wrap-aligned.
   markup: .gallery-shell > .gallery > .gcard*, then .gallery-ctl > .arrow[data-dir] */
.features { padding: 96px 0 88px; }
.gallery {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 4px var(--edge) 8px;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gcard {
  flex: none;
  width: min(76vw, 300px);
  scroll-snap-align: start;
}
/* the card is the bare screenshot: no chrome, edge-to-edge, hairline base */
.gcard .media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.gcard .media img { width: 100%; }
/* screenshots carry their key info up top; fade the bottom into the page */
.gcard .media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--night) 12%, transparent);
  pointer-events: none;
}
.gcard .txt { margin-top: 18px; font-size: 1rem; color: var(--mist); line-height: 1.5; padding-right: 8px; }
.gcard .txt strong { color: var(--ivory); font-weight: 600; }
.gallery-ctl {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 900px) {
  .gcard { width: 300px; }
  .gallery { gap: 36px; }
}

/* bento grid — base only; each page defines its own columns + grid-areas map */
.bento-sec { padding: 96px 0 0; }
.bento {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.cell {
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 150px;
}
.cell h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.cell p { font-size: 0.88rem; color: var(--mist); line-height: 1.5; }
.bento-num {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(3.4rem, 8vw, 5rem);
  line-height: 1;
  margin-bottom: 6px;
}
/* screenshot cell: the .device is the card (no chrome), vertically centered */
.cell-img {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  justify-content: center;
}
@media (min-width: 900px) {
  .cell { min-height: 190px; }
  .cell-img { min-height: 0; }
}

/* faq accordion (native details/summary) */
.faq { padding: 110px 0 20px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item, .faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary, .faq details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ivory);
}
.faq-item summary::-webkit-details-marker, .faq details summary::-webkit-details-marker { display: none; }
.faq-item summary::after, .faq details summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  margin-right: 6px;
  border-right: 1.5px solid var(--mist);
  border-bottom: 1.5px solid var(--mist);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after, .faq details[open] summary::after { transform: rotate(225deg); }
.faq-item p, .faq details p {
  color: var(--mist);
  font-size: 0.95rem;
  padding: 0 34px 22px 0;
  max-width: 70ch;
}

/* closing cta */
.outro { padding: 130px 0 120px; text-align: center; }
.outro h2 { margin-inline: auto; max-width: 16ch; font-size: clamp(2.25rem, 3.6vw + 1.2rem, 4rem); }
.outro .sub { color: var(--mist); margin: 18px auto 0; max-width: 40ch; font-size: 1.05rem; }
.outro .cta-row { justify-content: center; }

/* ---------- 8. content layer (inner pages) ---------- */
.container section { padding: 36px 0; }
.container section h2 { font-size: 1.5rem; margin-bottom: 18px; }
.container h3 { font-size: 1.1rem; }
.intro { color: var(--mist); font-size: 1.05rem; max-width: 60ch; }

/* card — successor of the old .glass (flat, no blur) */
.glass {
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
}

/* wake-windows calculator */
.calc { margin: 28px 0; }
.calc-fields { display: flex; gap: 16px; flex-wrap: wrap; }
.field { flex: 1 1 180px; }
.field label { display: block; font-size: 0.86rem; color: var(--mist); margin-bottom: 7px; }
.field-input { display: flex; align-items: baseline; gap: 8px; }
.field input {
  width: 100%; font-size: 1.4rem; font-weight: 600; color: var(--ivory);
  font-family: inherit;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; -webkit-appearance: none; appearance: none;
}
.field input:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.field .unit { color: var(--mist); font-size: 0.9rem; white-space: nowrap; }

.result { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 0; }
.result-row .k { color: var(--mist); font-size: 0.92rem; }
.result-row .v { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; text-align: right; }
.result-note { color: var(--mist); font-size: 0.92rem; margin: 12px 0 0; }
.result-oor { color: var(--rose); font-size: 0.95rem; margin: 0; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 28px 0; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.stat .k { color: var(--mist); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat .v { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }

/* theme/step cards (guides, referral) */
.themes { padding: 36px 0; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.theme h3 { margin-bottom: 8px; font-size: 1.05rem; }
.theme p { color: var(--mist); font-size: 0.94rem; }

/* Learn hub cards (US-459) — the whole card is ONE <a>, so the tap target is the
   full 260px surface instead of a link-in-a-link. Grid (.theme-grid) and surface
   (.glass) are reused as-is; this only adds the link behaviour + the CTA row.
   Deliberately no column-count/masonry: it would flow the months down columns and
   break DOM order == reading order. */
.lcard { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.lcard h3 { font-size: 1.05rem; }
.lcard p { color: var(--mist); font-size: 0.94rem; margin: 0; }
/* margin-top:auto pins the CTA to the bottom, so it lines up across a row of
   cards whose titles/bodies wrap to different heights. */
.lcard-cta { margin-top: auto; padding-top: 6px; color: var(--rose); font-weight: 600; font-size: 0.9rem; }
.lcard:hover { background: var(--card); }
/* The global a:focus-visible ring is rounded to 6px; match the card's own 20px so
   the ring hugs the corners instead of cutting across them. */
.lcard:focus-visible { border-radius: 20px; }

/* prev/next pager */
.pager { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 28px 0; }
.pager-link {
  flex: 1 1 220px; padding: 14px 18px; border-radius: 14px;
  background: var(--night-2); border: 1px solid var(--line);
  color: var(--ivory); font-weight: 600; font-size: 0.92rem;
}
.pager-link[rel="next"] { text-align: right; }
.pager-link:hover { background: var(--card); }

/* soft, non-alarmist note */
.disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--night-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; margin: 24px 0; color: var(--mist); font-size: 0.9rem;
}
.disclaimer .ico { font-size: 1.1rem; line-height: 1.3; }

/* tables (wake windows, comparisons) */
/* wide tables (compare) scroll inside their own wrapper — auto layout lets a
   table outgrow width:100% to min-content, which would otherwise widen the page. */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--mist); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
tbody td:first-child { font-weight: 600; }
tbody tr:hover { background: rgba(255,255,255,0.03); }
td.naps, th.naps { text-align: right; }

.cmp th.us, .cmp td.us { color: var(--ivory); }
.cmp td.us { font-weight: 600; }
.cmp th.us {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cmp .dim { color: var(--mist); font-weight: 600; }
.source-link { color: var(--mist); font-size: 0.78rem; }
.source-link:hover { color: var(--ivory); }
.asof { color: var(--mist); font-size: 0.86rem; margin-bottom: 18px; }

/* check/star lists */
.bullets { list-style: none; }
.bullets li { padding: 8px 0 8px 28px; position: relative; color: var(--mist); font-size: 0.96rem; }
.bullets li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
}
.bullets li::after {
  content: "";
  position: absolute; left: 4.5px; top: 15.5px;
  width: 7px; height: 4px;
  border-left: 1.5px solid var(--ivory);
  border-bottom: 1.5px solid var(--ivory);
  transform: rotate(-45deg);
}
.bullets.neutral li::after { display: none; }
.bullets.neutral li::before {
  background: var(--night-2);
}

.honesty { color: var(--mist); font-size: 0.98rem; max-width: 62ch; }
.trademark { color: var(--faint); font-size: 0.78rem; margin-bottom: 18px; max-width: 70ch; }

/* centered closing cta on inner pages */
.cta { text-align: center; }
.cta h2 { margin-bottom: 8px; }
.cta p { color: var(--mist); max-width: 52ch; margin: 0 auto 22px; }
.cta .store-badges { justify-content: center; }

/* legal prose */
.prose h2 { font-size: 1.3rem; margin: 32px 0 12px; }
.prose h3 { font-size: 1.05rem; margin: 24px 0 10px; }
.prose p, .prose li { color: var(--mist); font-size: 0.98rem; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose a { color: var(--ivory); border-bottom: 1px solid var(--line); }
.prose a:hover { border-bottom-color: var(--ivory); }

/* ---------- 9. motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 10. language-suggestion banner (US-447) ---------- */
/* Discreet, dismissible bar pinned to the bottom. JS-injected only when the
   visitor's language differs from the page and a path-prefixed alternate exists;
   never covers content permanently (dismiss persists in localStorage). */
.lang-suggest {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(140%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100vw - 24px));
  padding: 12px 12px 12px 18px;
  border-radius: 16px;
  background: rgba(21, 21, 29, 0.86);
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.lang-suggest.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.lang-suggest-text { color: var(--ivory); font-size: 0.92rem; line-height: 1.35; }
.lang-suggest-open {
  flex: none;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lang-suggest-open:hover { filter: brightness(1.06); }
.lang-suggest-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mist);
  cursor: pointer;
}
.lang-suggest-close:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.06); }
.lang-suggest :focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (max-width: 420px) {
  .lang-suggest { left: 12px; right: 12px; transform: translateY(140%); max-width: none; }
  .lang-suggest.in { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lang-suggest { transition: none; transform: translateX(-50%); }
  .lang-suggest.in { transform: translateX(-50%); }
  @media (max-width: 420px) {
    .lang-suggest, .lang-suggest.in { transform: none; }
  }
}

/* ---------- 11. offer campaign — QR modals (US-475) ---------- */
/* CSS-only modal: the store badge is <a href="#qr-ios">, the overlay shows on
   :target, and both the backdrop and the "×" are href="#". The offer page ships
   no application JS by design (US-473), so there is nothing to initialise and
   nothing that can fail to load; the back button doubles as "close". Prefixed
   offer-qr- so the next campaign page reuses the block as-is.
   The markup is emitted OUTSIDE the hero on purpose — position:fixed is broken
   by any ancestor with transform/filter/contain, and the hero animates .reveal. */
.offer-qr-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  /* auto scroll + `margin:auto` on the card = centered when it fits, scrollable
     (never clipped at the top) on a short viewport or at large zoom. */
  overflow-y: auto;
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0px));
}
.offer-qr-modal:target { display: flex; }
.offer-qr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 18, 0.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.offer-qr-card {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 380px;
  padding: 24px;
  border-radius: 20px;
  background: var(--night-2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.offer-qr-card h2 { font-size: 1.15rem; margin: 0 0 18px; padding: 0 30px; }
.offer-qr-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--mist);
  font-size: 1.5rem;
  line-height: 1;
}
.offer-qr-close:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.06); }
/* The artwork is black-on-white with its quiet zone baked in; the white plate and
   its padding keep that quiet zone white on this dark page, so a phone camera
   still locks onto the code. */
.offer-qr-img {
  width: fit-content;
  margin: 0 auto 18px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
}
.offer-qr-img img { display: block; width: 100%; height: auto; max-width: 280px; }
.offer-qr-step { color: var(--mist); font-size: 0.94rem; margin: 0 0 8px; }
.offer-qr-code { color: var(--ivory); font-size: 0.94rem; margin: 14px 0 0; }