/* ══════════════════════════════════════════════════════════
   Hono Subtitles — promotional site
   Light by default, dark when the system is (added 2026-10-10,
   owner's call — the share page opens inside the app, and a white
   page in a dark-mode app reads as a website). The dark palette
   and every hard-coded light surface it has to undo are at the
   end of this file.
   ══════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;

  --bg:        #F7F9FC;
  --tint:      #EDF2F9;
  --surface:   #FFFFFF;
  --dark:      #0B0D12;
  --dark-2:    #14181F;

  --ink:       #0C0E13;
  --ink-2:     #4E5866;
  --ink-3:     #8B95A4;
  --ink-inv:   #F2F5FA;

  --line:      #E2E9F3;
  --line-2:    #D3DDEC;

  --brand:     #E1741F;
  --brand-lt:  #FFC65A;
  --brand-dk:  #AC491B;
  --blue:      #2E7BF6;
  --violet:    #7A5AF8;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --shadow-sm: 0 1px 2px rgba(12,14,19,.05), 0 4px 12px -4px rgba(12,14,19,.07);
  --shadow-md: 0 1px 3px rgba(12,14,19,.06), 0 14px 34px -14px rgba(12,14,19,.16);
  --shadow-lg: 0 2px 6px rgba(12,14,19,.06), 0 34px 70px -28px rgba(12,14,19,.26);

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.62 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
       "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* height:auto is load-bearing — the width/height attributes on every <img> act as
   presentational hints, so without it a max-width-constrained image keeps its
   intrinsic height and stretches. */
img,video,svg{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

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

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:0 0 10px 10px;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap--narrow{ max-width:820px; }

.section{ padding:clamp(64px,9vw,116px) 0; position:relative; }
.section--tint{ background:var(--tint); }
.section--dark{ background:var(--dark); color:var(--ink-inv); }

/* ── Type ───────────────────────────────────────────────── */
.h2{
  font-size:clamp(1.95rem,4.1vw,3.05rem);
  line-height:1.1;
  letter-spacing:-.028em;
  font-weight:700;
  color:var(--ink);
}
.h2--light{ color:var(--ink-inv); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
  margin-bottom:16px;
}
.eyebrow--dark{ color:var(--brand-lt); }
.eyebrow--live{ color:var(--brand-dk); }

.pulse{
  width:8px; height:8px; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 0 rgba(225,116,31,.55);
  animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(225,116,31,.5); }
  70%{ box-shadow:0 0 0 10px rgba(225,116,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(225,116,31,0); }
}

.lead{
  font-size:clamp(1.03rem,1.5vw,1.19rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:64ch;
  margin-top:20px;
}
.lead--light{ color:#A9B4C4; }

.footnote{
  margin-top:28px; font-size:.94rem; color:var(--ink-3);
  border-left:2px solid var(--line-2); padding-left:16px; max-width:62ch;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  border:0; cursor:pointer; white-space:nowrap;
  font-weight:600; letter-spacing:-.01em;
  border-radius:999px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }

.btn--dark{
  background:var(--ink); color:#fff;
  box-shadow:0 1px 2px rgba(12,14,19,.3), 0 10px 26px -10px rgba(12,14,19,.55);
}
.btn--dark:hover{ background:#1B1F27; box-shadow:0 2px 4px rgba(12,14,19,.3), 0 16px 34px -12px rgba(12,14,19,.6); }

.btn--ghost{
  background:transparent; color:var(--ink);
  border:1.5px solid var(--line-2);
}
.btn--ghost:hover{ border-color:var(--ink-3); background:rgba(255,255,255,.7); }

.btn--lg{ padding:13px 26px; font-size:1rem; min-height:54px; }
.btn--sm{ padding:9px 17px; font-size:.9rem; }

.btn__apple{ width:24px; height:24px; flex:none; margin-top:-2px; }
.btn--sm .btn__apple{ width:18px; height:18px; }

.btn__stack{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; }
.btn__tiny{ font-size:.66rem; font-weight:500; letter-spacing:.02em; opacity:.78; }
.btn__big{ font-size:1.06rem; font-weight:600; letter-spacing:-.015em; }

/* ── Nav ────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(247,249,252,0);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             backdrop-filter .3s var(--ease);
}
.nav.is-stuck{
  background:rgba(247,249,252,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:12px 24px;
  display:flex; align-items:center; gap:24px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; flex:none; }
.nav__icon{ border-radius:9px; box-shadow:var(--shadow-sm); }
.nav__name{ font-weight:700; letter-spacing:-.02em; font-size:1.02rem; }
.nav__links{
  display:flex; gap:4px; margin-left:auto;
  font-size:.93rem; font-weight:500; color:var(--ink-2);
}
.nav__links a{
  padding:8px 13px; border-radius:999px;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.nav__links a:hover{ background:rgba(12,14,19,.055); color:var(--ink); }
.nav__cta{ margin-left:8px; }

/* 1240, not 1000: with Guides added the longest locale (vi) needs ~1190px on one
   line plus a scrollbar, and es/pt/fr/ja/it/th already wrapped between 1000 and
   1100 before it. */
@media (max-width:1240px){ .nav__links{ display:none; } .nav__cta{ margin-left:auto; } }

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,7vw,88px) 0 clamp(56px,7vw,92px);
  background:linear-gradient(178deg,#FFFFFF 0%,#F2F6FC 46%,#EDF2F9 100%);
}
.hero__glow{ position:absolute; pointer-events:none; border-radius:50%; filter:blur(72px); }
.hero__glow--amber{
  width:640px; height:640px; top:-240px; right:-140px;
  background:radial-gradient(circle, rgba(255,198,90,.5), rgba(255,198,90,0) 68%);
}
.hero__glow--blue{
  width:720px; height:720px; bottom:-320px; left:-220px;
  background:radial-gradient(circle, rgba(46,123,246,.2), rgba(46,123,246,0) 68%);
}

.hero__grid{
  position:relative;
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.hero__title{
  font-size:clamp(2.5rem,5.9vw,4.35rem);
  line-height:1.02; letter-spacing:-.038em; font-weight:800;
  margin:0 0 24px;
}
.hero__lead{
  font-size:clamp(1.06rem,1.55vw,1.24rem);
  line-height:1.58; color:var(--ink-2); max-width:34em;
}
.hero__lead em{ font-style:normal; font-weight:650; color:var(--ink); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px;
  font-size:.9rem; font-weight:500; color:var(--ink-3);
}
.hero__meta li{ display:flex; align-items:center; gap:8px; }
.hero__meta li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--brand); flex:none;
}

/* Hero device */
.hero__visual{ position:relative; display:flex; justify-content:center; }

.phone{
  --pw:300px;
  position:relative;
  width:var(--pw);
  aspect-ratio:1179 / 2556;
  border-radius:calc(var(--pw) * .158);
  padding:calc(var(--pw) * .026);
  background:linear-gradient(152deg,#454C5C 0%,#12161E 26%,#080A0E 64%,#2B3240 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 1px 3px rgba(10,13,20,.45),
    0 20px 38px -16px rgba(10,13,20,.5),
    0 52px 90px -34px rgba(10,13,20,.5);
}
.phone__screen{
  position:relative; width:100%; height:100%;
  border-radius:calc(var(--pw) * .132);
  overflow:hidden; background:#000;
}
.phone__screen > img,
.phone__video{ width:100%; height:100%; object-fit:cover; }

/* Capped by viewport height as well as width: on a short laptop screen the phone
   would otherwise push its own pause control below the fold. */
.phone--hero{ --pw:clamp(206px,min(58vw,36vh),316px); }
.phone--hero .phone__video{ background:#0B0D12; }

.phone__ctrl{
  position:absolute; right:calc(var(--pw) * .06); bottom:calc(var(--pw) * .075);
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(16,19,26,.62);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:background-color .18s var(--ease), transform .18s var(--ease);
}
.phone__ctrl:hover{ background:rgba(16,19,26,.85); transform:scale(1.06); }
.phone__ctrl svg{ width:20px; height:20px; }
.phone__ctrl .icon-play{ display:none; }
.phone__ctrl.is-paused .icon-pause{ display:none; }
.phone__ctrl.is-paused .icon-play{ display:block; }

/* Floating annotation cards */
.float-card{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:16px;
  padding:11px 15px;
  font-size:.86rem; font-weight:600;
  box-shadow:var(--shadow-md);
}
.float-card--lang{ top:-2%; left:-15%; }
.float-card--safe{
  bottom:11%; right:-8%;
  font-weight:500; color:var(--ink-2); line-height:1.32;
  gap:11px; align-items:flex-start;
}
.float-card--safe svg{ width:20px; height:20px; color:var(--brand); flex:none; margin-top:2px; }
.float-card__dot{
  width:8px; height:8px; border-radius:50%; background:#2FBF71; flex:none;
  box-shadow:0 0 0 3px rgba(47,191,113,.18);
}
.float-card__pair{ display:flex; align-items:center; gap:8px; letter-spacing:-.01em; }
.float-card__pair svg{ width:15px; height:15px; color:var(--ink-3); }

@media (max-width:860px){
  .float-card--lang{ left:-2%; top:4%; }
  .float-card--safe{ right:-2%; }
}

/* App strip */
.strip__label{
  margin-top:clamp(48px,6vw,76px);
  font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); text-align:center;
}
.strip{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:9px; margin-top:20px;
}
.strip li{
  padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  font-size:.88rem; font-weight:550; color:var(--ink-2);
  box-shadow:0 1px 2px rgba(12,14,19,.03);
}

/* ── Gap section ────────────────────────────────────────── */
.gap__intro{
  display:grid; grid-template-columns:minmax(0,52ch) auto;
  justify-content:center;
  gap:clamp(32px,6vw,80px); align-items:center;
}
.gap__device{ position:relative; flex:none; }
.phone--quiet{ --pw:clamp(178px,17vw,214px); }
.gap__device figcaption{
  margin-top:18px; text-align:center;
  font-size:.88rem; color:var(--ink-3); max-width:24ch; margin-inline:auto;
}
.gap__device::after{
  content:""; position:absolute; inset:auto -30px -24px -30px; height:70%;
  background:radial-gradient(60% 70% at 50% 60%, rgba(12,14,19,.14), transparent 72%);
  filter:blur(26px); z-index:-1;
}
@media (max-width:820px){ .gap__intro{ grid-template-columns:1fr; } .gap__device{ justify-self:center; } }

/* ── Cards ──────────────────────────────────────────────── */
.cards{ display:grid; gap:20px; margin-top:clamp(36px,5vw,56px); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .cards--3,.cards--2{ grid-template-columns:1fr; } }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 28px 32px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.card__icon{
  width:52px; height:52px; border-radius:15px;
  display:grid; place-items:center; margin-bottom:20px;
}
.card__icon svg{ width:26px; height:26px; }
.card__icon--amber{ background:linear-gradient(150deg,#FFF0D6,#FFDFAE); color:#B85C12; }
.card__icon--blue{ background:linear-gradient(150deg,#E3EEFF,#CFE0FB); color:#1D63D2; }
.card__icon--violet{ background:linear-gradient(150deg,#EDE8FF,#DCD4FD); color:#5B3FE0; }

.card__title{ font-size:1.16rem; font-weight:700; letter-spacing:-.02em; margin-bottom:10px; }
.card__body{ font-size:.98rem; line-height:1.6; color:var(--ink-2); }

/* ── Steps ──────────────────────────────────────────────── */
.steps{ display:flex; flex-direction:column; gap:clamp(40px,5.5vw,72px); margin-top:clamp(40px,5vw,60px); }

.step{
  display:grid; grid-template-columns:minmax(0,44ch) auto;
  justify-content:center;
  gap:clamp(32px,5vw,76px); align-items:center;
}
.step--flip{ grid-template-columns:auto minmax(0,44ch); }
.step--flip .step__text{ order:2; }
.step--flip .step__media{ order:1; }

.step__num{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--ink); color:#fff;
  font-size:1rem; font-weight:700;
  margin-bottom:20px;
}
.step__title{ font-size:clamp(1.35rem,2.3vw,1.75rem); font-weight:700; letter-spacing:-.025em; margin-bottom:12px; }
.step__text p{ font-size:1.03rem; line-height:1.62; color:var(--ink-2); max-width:46ch; }
.step__text strong{ color:var(--ink); font-weight:650; }

.phone--step{ --pw:clamp(186px,19vw,246px); }

@media (max-width:780px){
  .step, .step--flip{ grid-template-columns:1fr; }
  .step--flip .step__text{ order:1; }
  .step--flip .step__media{ order:2; }
  .step__media{ justify-self:center; }
}

/* ── Note / aside ───────────────────────────────────────── */
.note{
  margin-top:clamp(48px,6vw,80px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,40px);
  display:grid; grid-template-columns:minmax(0,56ch) auto;
  justify-content:center;
  gap:clamp(28px,4vw,64px); align-items:center;
  box-shadow:var(--shadow-sm);
}
.note__title{
  font-size:1.08rem; font-weight:700; letter-spacing:-.02em;
  margin-bottom:12px; color:var(--ink);
}
.note p{ font-size:.98rem; line-height:1.62; color:var(--ink-2); max-width:56ch; }
.note p + p{ margin-top:12px; }
.note strong{ color:var(--ink); font-weight:650; }
.note__media{ flex:none; }
.phone--note{ --pw:clamp(148px,15vw,178px); }
@media (max-width:780px){
  .note{ grid-template-columns:1fr; }
  .note__media{ justify-self:center; order:-1; }
}

/* ── Modes ──────────────────────────────────────────────── */
.modes{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,34px);
  margin-top:clamp(40px,5vw,60px);
}
.mode{ display:flex; flex-direction:column; gap:24px; }
.mode__media{
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(168deg,#F0F5FB 0%,#DCE7F4 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}
.mode__media img{ width:100%; }

/* Slim is a landscape device, so it gets a wide row of its own rather than
   being squeezed into a portrait column next to the other two. */
.mode--wide{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1.42fr 1fr;
  align-items:center; gap:clamp(24px,4vw,56px);
}
.mode--wide .mode__text{ padding-right:clamp(0px,2vw,24px); }

.mode__text .tag{
  display:inline-block; margin-bottom:10px;
  padding:4px 11px; border-radius:999px;
  background:var(--tint); color:var(--ink-2);
  font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.mode__text .tag--accent{ background:linear-gradient(135deg,#FFE7C2,#FFD79A); color:#9C4A0C; }
.mode__text h3{ font-size:1.14rem; font-weight:700; letter-spacing:-.02em; line-height:1.32; margin-bottom:9px; }
.mode__text p{ font-size:.95rem; line-height:1.6; color:var(--ink-2); }

.modes + .footnote{ margin-top:36px; }

@media (max-width:860px){
  .modes{ grid-template-columns:1fr; }
  .mode{ max-width:440px; margin-inline:auto; width:100%; }
  .mode--wide{ grid-template-columns:1fr; max-width:none; }
  .mode--wide .mode__text{ max-width:440px; margin-inline:auto; }
}

/* ── Any app ────────────────────────────────────────────── */
.anyapp{
  display:grid; grid-template-columns:1fr .82fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.anyapp__media{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(168deg,#F0F5FB 0%,#DCE7F4 100%);
  box-shadow:var(--shadow-lg);
}
/* Stacked, the picture used to go above the eyebrow and read as the tail of the
   section before. Unwrapping the text lets the heading and lead sit above it and
   the tags and guide link below, so the picture is held inside its own section. */
@media (max-width:900px){
  .anyapp{ grid-template-columns:1fr; gap:0; }
  .anyapp__text{ display:contents; }
  .anyapp__media{ order:1; margin-top:30px; width:100%; max-width:460px; justify-self:center; }
  .anyapp__text .apptags{ order:2; }
  .anyapp__text .sect__cta{ order:3; }
}

.checklist{ margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.checklist li{
  position:relative; padding-left:32px;
  font-size:.99rem; line-height:1.55; color:var(--ink-2);
}
.checklist li::before{
  content:""; position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(145deg,#FFE2B4,#FFCE85);
  box-shadow:inset 0 0 0 1px rgba(172,73,27,.14);
}
.checklist li::after{
  content:""; position:absolute; left:6.4px; top:6px;
  width:7px; height:4px;
  border-left:2px solid #A0470F; border-bottom:2px solid #A0470F;
  transform:rotate(-45deg);
}
.checklist--sm li{ font-size:.94rem; }

/* ── Privacy ────────────────────────────────────────────── */
.section--dark .h2{ color:var(--ink-inv); }

.cards--dark{ margin-top:clamp(36px,5vw,52px); }
.priv{
  display:flex; gap:18px; align-items:flex-start;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg);
  padding:26px 26px 28px;
}
.priv svg{ width:26px; height:26px; flex:none; color:var(--brand-lt); margin-top:2px; }
.priv h3{ font-size:1.03rem; font-weight:700; letter-spacing:-.015em; margin-bottom:7px; color:#fff; }
.priv p{ font-size:.94rem; line-height:1.58; color:#98A4B6; }

.dark-note{
  margin-top:clamp(32px,4vw,44px);
  padding:24px 28px;
  border-left:2px solid var(--brand);
  background:rgba(255,198,90,.055);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:.98rem; line-height:1.65; color:#A9B4C4;
  max-width:80ch;
}

/* ── Look / App Store band ──────────────────────────────── */
.look{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,34px);
  margin-top:clamp(36px,5vw,56px);
}
.look figure{ display:flex; flex-direction:column; gap:20px; }
.look__media{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(168deg,#F0F5FB 0%,#DCE7F4 100%);
  box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.look figure:hover .look__media{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.look figcaption{ font-size:.96rem; line-height:1.6; color:var(--ink-2); max-width:42ch; }
.look figcaption strong{ display:block; color:var(--ink); font-weight:700; letter-spacing:-.015em; margin-bottom:4px; }
@media (max-width:820px){ .look{ grid-template-columns:1fr; } }

/* ── Pricing ────────────────────────────────────────────── */
.plans{
  display:grid; grid-template-columns:1fr 1fr;
  gap:20px; margin-top:clamp(36px,5vw,52px);
  align-items:start;
}
@media (max-width:820px){ .plans{ grid-template-columns:1fr; } }

.plan{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(28px,3.4vw,40px);
  box-shadow:var(--shadow-sm);
}
.plan--featured{
  position:relative;
  border-color:transparent;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,#FFC65A,#E1741F 52%,#AC491B) border-box;
  border:1.5px solid transparent;
  box-shadow:var(--shadow-md);
}
.plan__badge{
  position:absolute; top:-13px; left:clamp(28px,3.4vw,40px);
  padding:5px 13px; border-radius:999px;
  background:linear-gradient(135deg,#FFC65A,#E1741F);
  color:#4A2005; font-size:.72rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 4px 12px -4px rgba(172,73,27,.5);
}
.plan__name{ font-size:1.05rem; font-weight:700; letter-spacing:-.02em; margin-bottom:14px; }
.plan__price{
  font-size:clamp(2rem,3.6vw,2.6rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.1; margin-bottom:14px;
}
.plan__price span{ font-size:.9rem; font-weight:500; color:var(--ink-3); margin-left:9px; letter-spacing:0; }
.plan__price--stack{ font-size:1.05rem; font-weight:500; letter-spacing:-.01em; line-height:1.55; }
.plan__price--stack > span{ display:block; }
.plan__price--stack strong{ font-weight:700; }
.plan__or{ color:var(--ink-3); font-size:.85rem; font-weight:500; padding-block:4px; }
.plan__sub{ font-size:.97rem; line-height:1.58; color:var(--ink-2); }

/* ── FAQ ────────────────────────────────────────────────── */
.faq{ margin-top:clamp(32px,4vw,48px); border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:22px 44px 22px 0;
  position:relative;
  font-size:1.05rem; font-weight:650; letter-spacing:-.015em;
  transition:color .16s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand); }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:11px; height:11px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq details[open] summary{ color:var(--brand); }
.faq p{
  padding:0 44px 24px 0;
  font-size:.99rem; line-height:1.68; color:var(--ink-2);
  max-width:74ch;
}
.faq strong{ color:var(--ink); font-weight:650; }

/* ── Final CTA ──────────────────────────────────────────── */
.final{
  position:relative; overflow:hidden;
  background:var(--dark); color:var(--ink-inv);
  padding:clamp(72px,10vw,132px) 0;
  text-align:center;
}
.final__glow{
  position:absolute; left:50%; top:-120px; transform:translateX(-50%);
  width:900px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(225,116,31,.36), rgba(225,116,31,0) 66%);
  filter:blur(60px); pointer-events:none;
}
.final__inner{ position:relative; display:flex; flex-direction:column; align-items:center; }
.final__icon{
  width:88px; height:88px; border-radius:22px;
  box-shadow:0 12px 34px -10px rgba(225,116,31,.6), inset 0 0 0 1px rgba(255,255,255,.14);
  margin-bottom:30px;
}
.final__title{ margin-bottom:0; }
.final__lead{ text-align:center; margin-top:20px; }
.final .btn{ margin-top:34px; }
.final__meta{ margin-top:20px; font-size:.88rem; color:#7C8798; }

/* ── Footer ─────────────────────────────────────────────── */
.footer{ background:var(--dark-2); color:#8E99AA; padding:clamp(48px,6vw,72px) 0 44px; }
.footer__inner{ display:flex; flex-direction:column; gap:30px; }
/* Brand block removed — centre what is left rather than leaving it ranged left. */
.footer__inner{ align-items:center; text-align:center; gap:22px; }
.footer__nav{ justify-content:center; }
.footer__legal{ max-width:60ch; margin-inline:auto; }
.footer__brand{ display:flex; align-items:center; gap:13px; }
.footer__brand img{ border-radius:9px; }
.footer__name{ font-weight:700; color:#fff; letter-spacing:-.02em; font-size:1rem; }
.footer__tag{ font-size:.88rem; margin-top:2px; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:10px 26px; font-size:.93rem; }
.footer__nav a{ transition:color .16s var(--ease); }
.footer__nav a:hover{ color:#fff; }
.footer__legal{
  font-size:.82rem; line-height:1.6; color:#68738A;
  border-top:1px solid rgba(255,255,255,.07); padding-top:26px; max-width:76ch;
}

/* ── Scroll reveal ──────────────────────────────────────── */
.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal="zoom"]{ transform:translateY(18px) scale(.965); }
.js [data-reveal="left"]{ transform:translateX(-18px); }
.js [data-reveal="right"]{ transform:translateX(18px); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
  .pulse{ animation:none; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:48px; }
  .hero__visual{ order:-1; }
  .hero__lead{ max-width:none; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding-inline:18px; }
  .nav__inner{ padding:10px 18px; gap:12px; }
  .nav__name{ font-size:.95rem; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hero__meta{ gap:8px 16px; font-size:.85rem; }
  .strip li{ font-size:.82rem; padding:6px 12px; }
  .card{ padding:24px 22px 26px; }
  .float-card{ font-size:.79rem; padding:9px 12px; border-radius:13px; }
  .float-card--lang{ left:0; }
  .float-card--safe{ right:0; }
  .plan__price--stack{ line-height:1.7; }
}


/* ══════════════════════════════════════════════════════════
   Additions — 2026-09-12
   ══════════════════════════════════════════════════════════ */

/* Hero headline accent. Two words carry it; the rest stays ink. */
.hero__title .hot{
  background:linear-gradient(135deg, var(--brand-lt) 0%, var(--brand) 55%, var(--brand-dk) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Hero device: a thin light frame rather than a heavy bezel, so the video reads
   as the subject instead of the phone. */
.phone--hero{
  padding:6px;
  background:#FFFFFF;
  border-radius:42px;
  box-shadow:0 2px 5px rgba(12,14,19,.10), 0 34px 68px -26px rgba(12,14,19,.34);
}
.phone--hero .phone__screen{ border-radius:36px; }

/* The category strip is its own band now — sitting inside the hero, it read as
   part of the hero's gradient instead of as a separate statement. */
/* The strip used to live inside the hero, so the hero still reserved room for it. */
.hero{ padding-bottom:clamp(40px,4.4vw,58px); }
.works{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(38px,4.4vw,56px) 0;
}
/* The label carries the page's eyebrow styling, but centred and with its own
   bottom gap — the shared .eyebrow margin is tuned for left-aligned headings. */
.works .strip__label{
  display:block; text-align:center;
  margin:0 0 clamp(16px,1.8vw,22px);
  color:var(--ink-3);
}
.strip{ justify-content:center; gap:16px clamp(26px,3.8vw,52px); margin-top:0; }
.strip li{
  padding:0; border:0; background:none; box-shadow:none; border-radius:0;
  font-size:clamp(1.3rem,1.9vw,1.62rem); font-weight:800; letter-spacing:-.02em;
  color:#6F7887;
}

/* ── Nav: links centred, language picker beside the CTA ───── */
.nav__links{ margin:0 auto; }
.nav__right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav__cta{ margin-left:0; }

.langsel{ position:relative; }
.langsel summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.6);
  font-size:.86rem; font-weight:600; color:var(--ink-2);
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.langsel summary::-webkit-details-marker{ display:none; }
.langsel summary:hover{ background:#fff; color:var(--ink); }
.langsel summary svg{ width:16px; height:16px; opacity:.75; }
.langsel__menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:20;
  min-width:11rem; padding:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--shadow-md);
}
.langsel__menu a{
  display:block; padding:8px 12px; border-radius:9px;
  font-size:.92rem; color:var(--ink-2);
}
.langsel__menu a:hover{ background:var(--tint); color:var(--ink); }
.langsel__menu a[aria-current="page"]{ color:var(--ink); font-weight:650; }

@media (max-width:1000px){
  .langsel summary span{ display:none; }
  .langsel summary{ padding:7px 9px; }
}

/* The headline's break is forced after "for". For that to be the FIRST break the
   column has to hold "Real-time translation for" on one line, so the copy column
   gets a little more of the grid and the type comes down a step. */
/* Scoped above the 960px collapse: an unscoped rule here sits after that media
   query and would re-apply two columns on a phone. */
@media (min-width:961px){
  .hero__grid{ grid-template-columns:1.34fr .66fr; }
}
.hero__title{ font-size:clamp(1.95rem,3.78vw,2.9rem); }

/* 大标题里有两个强制换行，每种语言只启用其中一个：
   西语葡语最长，断在 "translation for" 之后；其余语言断在第一个名词之后，
   也就是句子本来的停顿处。目标是所有语言都正好两行。 */
.hero__title .br-a{ display:none; }
html:lang(es) .hero__title .br-a,
html:lang(pt) .hero__title .br-a,
html:lang(it) .hero__title .br-a{ display:inline; }
html:lang(es) .hero__title .br-b,
html:lang(pt) .hero__title .br-b,
html:lang(it) .hero__title .br-b{ display:none; }
.phone--hero{ max-width:300px; margin-inline:auto; }

/* "Three things worth knowing" list inside the how-it-works note */
.note__list{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.note__list li{
  position:relative; padding-left:18px;
  font-size:.96rem; line-height:1.62; color:var(--ink-2);
}
.note__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}
.note__list strong{ color:var(--ink); font-weight:650; }

/* ── Display modes carousel ───────────────────────────────
   Ported from the earlier draft: absolutely-stacked slides that cross-fade,
   dots, and a progress bar that doubles as the auto-advance timer. Restyled
   into this page's dark surface and amber accent. */
.carousel{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0B0D12 0%,#151A23 45%,#0F131A 100%);
  padding:clamp(72px,8vw,104px) 0 clamp(56px,6vw,76px);
}
.carousel::before{
  content:''; position:absolute; top:-220px; left:50%; transform:translateX(-50%);
  width:940px; height:940px; border-radius:50%;
  background:radial-gradient(circle, rgba(225,116,31,.16) 0%, transparent 62%);
  pointer-events:none;
}
.carousel .wrap{ position:relative; z-index:1; }
.carousel__head{ max-width:46rem; margin-bottom:clamp(18px,2vw,26px); }
/* The forced break after "styles." needs the second line to fit; the page-wide
   h2 size overflows this column and orphans the last word. */
.carousel__head .h2{ font-size:clamp(1.75rem,3.4vw,2.7rem); }

/* All three slides share one grid cell, so the stage is exactly as tall as the
   tallest of them. An absolutely-positioned stack needs a magic min-height and
   silently overlaps whatever follows when a slide outgrows it. */
.carousel__stage{ display:grid; align-items:center; }
.slide{
  grid-area:1 / 1;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
  align-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
/* Staggered entrance, ported from the earlier draft — the label leads, the
   device follows, the copy lands last. */
.slide.is-active .slide__label  { animation:slideUp .6s var(--ease) .10s both; }
.slide.is-active .slide__text h3{ animation:slideUp .6s var(--ease) .20s both; }
.slide.is-active .slide__text > p{ animation:slideUp .6s var(--ease) .30s both; }
.slide.is-active .slide__points { animation:slideUp .6s var(--ease) .40s both; }
.slide.is-active .slide__media  { animation:slideUp .7s var(--ease) .15s both; }
@keyframes slideUp{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:translateY(0); }
}
.slide__text{ color:var(--ink-inv); }
.slide__label{
  display:inline-block; margin-bottom:14px;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.78);
  font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.slide__label--accent{
  background:linear-gradient(135deg,var(--brand-lt),var(--brand));
  color:#3A1B06;
}
.slide__text h3{
  font-size:clamp(1.5rem,2.9vw,2.1rem); font-weight:750;
  letter-spacing:-.022em; line-height:1.14; margin-bottom:14px;
}
.slide__text > p{
  font-size:1.03rem; line-height:1.62; color:rgba(242,245,250,.62); margin-bottom:20px;
  max-width:34em;
}
.slide__points{ display:flex; flex-direction:column; gap:9px; }
.slide__points li{
  position:relative; padding-left:20px;
  font-size:.95rem; color:rgba(242,245,250,.88);
}
.slide__points li::before{
  content:''; position:absolute; left:0; top:.56em;
  width:7px; height:7px; border-radius:2px; background:var(--brand);
}
.slide__media{ display:flex; justify-content:center; }
.slide__media img{
  width:100%; max-width:318px;
  border-radius:var(--r-lg);
  box-shadow:0 30px 66px -24px rgba(0,0,0,.75);
}
/* Slim is a landscape frame again after the re-crop, so it gets its own width —
   still shorter than the portrait ones, so it never drives the stage height. */
.slide__media--wide img{ max-width:470px; }

.carousel__controls{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-top:clamp(30px,4vw,44px);
}
.carousel__dots{ display:flex; gap:11px; }
.cdot{
  width:10px; height:10px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.24); cursor:pointer;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.cdot:hover{ background:rgba(255,255,255,.5); }
.cdot.is-active{ background:var(--brand-lt); width:30px; border-radius:5px; }
.carousel__progress{
  width:190px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.14); overflow:hidden;
}
.carousel__bar{
  display:block; height:100%; width:0;
  background:var(--brand); border-radius:2px;
}
.footnote--light{
  border-left:0; padding-left:0; margin:30px auto 0; max-width:52ch;
  color:rgba(242,245,250,.5); text-align:center;
}
.lead--light{ color:rgba(242,245,250,.66); }

@media (max-width:860px){
  .slide{ grid-template-columns:1fr; gap:28px; }
  .slide__media{ order:-1; }
  .slide__media img{ max-width:250px; }
  .slide__media--wide img{ max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .slide{ transition:none; }
  .slide.is-active *{ animation:none !important; }
  .carousel__bar{ display:none; }
}

/* ── Any-app tags ─────────────────────────────────────────── */
.apptags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.apptags li{
  padding:8px 16px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-size:.92rem; font-weight:600; color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}

/* ── Tested apps (2026-10-18) ─────────────────────────────
   One card per app checked on a real iPhone: the name (linked to its
   guide where there is one) and a line on what to know. */
.applist{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px; margin-top:clamp(28px,4vw,40px);
}
.applist li{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:18px 20px 20px;
  box-shadow:var(--shadow-sm);
}
.applist__name{ font-weight:700; color:var(--ink); font-size:1.02rem; }
a.applist__name{ color:var(--brand-dk); }
a.applist__name:hover{ text-decoration:underline; text-underline-offset:4px; }
.applist li p{ margin-top:6px; color:var(--ink-2); font-size:.93rem; line-height:1.55; }
.applist__note{ margin-top:18px; color:var(--ink-3); font-size:.88rem; }

/* ── FAQ, flattened ───────────────────────────────────────
   Centred column, hairline rules, a + that turns into a ×. */
.faq-wrap{ text-align:center; }
.faq-wrap .eyebrow, .faq-wrap .h2{ text-align:center; }
.faq--flat{ max-width:44rem; margin:clamp(34px,4vw,52px) auto 0; text-align:left; }
.faq--flat details{
  border:0; border-bottom:1px solid var(--line);
  border-radius:0; background:none; padding:0;
}
.faq--flat summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 0;
  font-size:1.03rem; font-weight:650; color:var(--ink);
  transition:color .2s var(--ease);
}
.faq--flat summary::-webkit-details-marker{ display:none; }
.faq--flat summary:hover{ color:var(--brand-dk); }
/* The base .faq rule draws an absolutely-positioned chevron out of two borders;
   reset all of it, or the chevron and this plus sign overlap into an ✕. */
.faq--flat summary::after{
  content:''; position:static; flex:none;
  width:20px; height:20px; top:auto; right:auto;
  border:0;
  background:
    linear-gradient(var(--ink-3),var(--ink-3)) center/100% 2px no-repeat,
    linear-gradient(var(--ink-3),var(--ink-3)) center/2px 100% no-repeat;
  transform:none;
  transition:transform .3s var(--ease);
}
.faq--flat details[open] summary{ color:var(--brand-dk); }
.faq--flat details[open] summary::after{ transform:rotate(45deg); }
.faq--flat details > p{
  padding:0 0 24px; margin:0; max-width:none;
  font-size:.98rem; line-height:1.7; color:var(--ink-2);
}


/* CJK headlines set much wider per glyph than Latin, so the hero title needs its
   own step down or the forced break lands mid-sentence. */
html:lang(zh-Hans) .hero__title,
html:lang(zh-Hant) .hero__title,
html:lang(ja) .hero__title,
html:lang(ko) .hero__title{ font-size:clamp(1.9rem,3.7vw,3rem); letter-spacing:-.01em; }
html:lang(zh-Hans) .h2, html:lang(zh-Hant) .h2,
html:lang(ja) .h2, html:lang(ko) .h2{ letter-spacing:-.005em; }
html:lang(zh-Hans) .strip li, html:lang(zh-Hant) .strip li,
html:lang(ja) .strip li, html:lang(ko) .strip li{ font-size:clamp(1.15rem,1.6vw,1.4rem); }

/* Spanish and Portuguese run about a fifth longer than the English, which pushes
   the forced break onto a third line. */
/* French runs as long as Spanish, but breaks where English does ("…de toute vidéo /
   ou tout live…"), so it takes the smaller size and keeps the default .br-b. */
html:lang(es) .hero__title,
html:lang(pt) .hero__title,
html:lang(fr) .hero__title,
html:lang(de) .hero__title,
html:lang(it) .hero__title{ font-size:clamp(1.9rem,3.75vw,2.85rem); }

/* ══════════════════════════════════════════════════════════
   Guides — /subtitles/guides/<slug>/
   ══════════════════════════════════════════════════════════ */

/* A guide is read top to bottom, so it drops the home page's section rhythm for
   a single measured column. The one exception is the answer block: it is the
   paragraph a search result or an assistant quotes, so it is set apart. */
.guide{ padding:clamp(40px,6vw,76px) 0 clamp(56px,8vw,104px); }
/* The home page's 820px column is sized for short marketing lines. At an article's
   body size it ran to 106 characters a line — the eye loses the start of the next
   one somewhere past 75. Narrower column, larger type: ~72. */
.guide .wrap--narrow{ max-width:700px; }
.guide__title{
  font-size:clamp(1.9rem,3.5vw,2.75rem);
  line-height:1.12; letter-spacing:-.03em; font-weight:800;
  margin:0 0 28px; max-width:19em;
}
.guide__answer{
  font-size:clamp(1.12rem,1.5vw,1.25rem); line-height:1.6;
  color:var(--ink-2); margin:0 0 8px;
  padding:22px 26px; border-radius:16px;
  background:var(--tint); border:1px solid var(--line);
}
.guide__answer strong{ color:var(--ink); font-weight:650; }
.guide__h2{
  font-size:clamp(1.45rem,2.2vw,1.9rem);
  margin:clamp(44px,5vw,68px) 0 18px; text-align:left;
}
/* Sub-heading inside a guide section. It has to read as clearly subordinate to
   the h2 above it — same weight would turn one section into several. Smaller than
   the h2, larger than body copy, and a much tighter top margin so the h3 belongs
   to the paragraph under it rather than floating between the two. */
.guide__h3{
  font-size:1.22rem; font-weight:700; letter-spacing:-.02em; line-height:1.3;
  color:var(--ink); margin:30px 0 8px;
}
/* Body copy in a guide. Two things about this selector, both learned the hard way:

   The exclusion list is what keeps the rule off the paragraphs that are
   deliberately not body copy — without it, `.guide p` beats their own single-class
   rules on specificity and flattens the type hierarchy into one size.

   It is wrapped in :where() so the exclusions cost nothing: a chain of bare :not()
   pushed this to (0,3,1), high enough to stomp margins and colours set elsewhere,
   which it did twice before anyone noticed. :where() holds it at (0,1,1), so a
   `.guide p.something` exception at (0,2,1) reliably wins. Add new exceptions to
   the list rather than escalating the rule that lost. */
.guide p:not(:where(.guide__answer, .eyebrow, .guide__back)){
  font-size:1.125rem; line-height:1.7; color:var(--ink-2); margin:0 0 18px;
}
.guide strong{ color:var(--ink); font-weight:650; }
.guide a:not(.btn){ color:var(--brand-dk); text-underline-offset:3px; }

.guide__list, .guide__steps{ margin:0 0 18px; padding:0; }
.guide__list{ list-style:none; }
.guide__list li{
  position:relative; padding-left:22px; margin-bottom:14px;
  font-size:1.125rem; line-height:1.68; color:var(--ink-2);
}
.guide__list li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}
.guide__steps{ counter-reset:step; list-style:none; }
.guide__steps li{
  position:relative; padding-left:42px; margin-bottom:18px;
  font-size:1.125rem; line-height:1.68; color:var(--ink-2);
}
.guide__steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff;
  font-size:.82rem; font-weight:700; line-height:26px; text-align:center;
}

.guide__faq{ margin-top:20px; }
/* The shared FAQ sets its questions at 16.5px, which is fine next to the home
   page's copy but reads as smaller than the body text here. Guide scope only. */
.guide__faq summary{ font-size:1.08rem; }
.guide__cta{
  margin-top:clamp(48px,6vw,72px); padding-top:clamp(32px,4vw,44px);
  border-top:1px solid var(--line);
}
.guide__cta .btn{ margin-top:6px; }
.guide__back{ margin-top:26px; font-size:.95rem; }

/* Way out of the how-it-works note into the guide that expands on it. Set apart
   on its own line under the three items, and in link blue rather than the brand
   orange: orange is already doing decorative work in this card (the bullets), so
   an orange link here reads as emphasis rather than as something to click. */
.note__cta, .sect__cta{
  display:block; margin-top:22px; padding-top:18px;
  border-top:1px solid var(--line);
  color:#1A5FD0; font-weight:650; font-size:1.02rem; line-height:1.5;
  /* Blue plus the arrow is signal enough at this size; the underline only added
     noise. It comes back on hover, where it is feedback rather than decoration. */
  text-decoration:none;
}
.note__cta:hover, .sect__cta:hover{ text-decoration:underline; text-underline-offset:4px; }
/* A leading space inside content: collapses; the chevron needs a real gap. */
.note__cta::after, .sect__cta::after{ content:">"; margin-left:.4em; text-decoration:none; display:inline-block; }
.note__cta:hover, .sect__cta:hover{ color:#123F95; }


/* Comparison table inside a guide. The wrapper scrolls rather than the page: at
   700px the three columns fit on a laptop and not on a phone, and a page that
   scrolls sideways is worse than a table that does. */
.guide__table{ overflow-x:auto; margin:0 0 20px; -webkit-overflow-scrolling:touch; }
.guide__table table{
  width:100%; min-width:440px; border-collapse:collapse;
  font-size:1rem; line-height:1.5;
}
.guide__table th, .guide__table td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.guide__table thead th{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border-bottom-color:var(--ink-3);
}
.guide__table tbody td:first-child{ color:var(--ink); font-weight:650; white-space:nowrap; }
.guide__table tbody td{ color:var(--ink-2); }
.guide__table tbody tr:last-child td{ border-bottom:0; }
/* The row that is us — the point of the table is that it is the only full line. */
.guide__table tbody tr:last-child td:first-child{ color:var(--brand-dk); }
/* Share page: the last row is the invite reward, not a top tier, so no highlight. */
.guide__table--plain tbody tr:last-child td:first-child{ color:var(--ink); }
/* Two columns of prose rather than three of two-word answers: at 440 it still
   overflowed a phone and hid the column carrying the answer. This one has room to
   wrap instead, so let it. */
.guide__table--fit table{ min-width:0; }
/* The label column stays on one line wherever it fits; only once the table is
   genuinely narrow is wrapping it better than clipping the column beside it. */
@media (max-width:560px){
  .guide__table--fit tbody td:first-child{ white-space:normal; }
}

/* Guides hub at /subtitles/guides/. An index, not an article: the heading is a
   label rather than a headline, so the entry titles are the largest thing on the
   page and the list reads as a list. */
.ghub-page{ padding-top:clamp(36px,5vw,60px); }
.ghub__h1{
  font-size:clamp(1.5rem,2.4vw,2rem); font-weight:800; letter-spacing:-.02em;
  margin:0 0 10px; color:var(--ink);
}
.ghub__lead{
  font-size:1.02rem; line-height:1.65; color:var(--ink-2);
  margin:0 0 clamp(28px,3.5vw,40px); max-width:36em;
}
.ghub{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ghub li{ border-bottom:1px solid var(--line); }
.ghub__item{ display:block; padding:26px 0; text-decoration:none; color:inherit; }
.ghub__title{
  font-size:clamp(1.22rem,1.9vw,1.45rem); font-weight:700; line-height:1.34;
  letter-spacing:-.015em; color:var(--ink); margin:0 0 8px; text-align:left;
}
.ghub__desc{ font-size:1rem; line-height:1.62; color:var(--ink-2); margin:0 0 10px; }
.ghub__more{ font-size:.95rem; font-weight:650; color:#1A5FD0; }
.ghub__more::after{ content:">"; margin-left:.4em; display:inline-block; }
.ghub__item:hover .ghub__title{ color:var(--brand-dk); }
.ghub__item:hover .ghub__more{ text-decoration:underline; text-underline-offset:4px; }

/* Guide articles end pointing at the list, not the home page. Matched as
   `.guide a.guide__more` (0,2,1) because the link-colour rule `.guide a:not(.btn)`
   is also (0,2,1) and would otherwise make this brand orange instead of link blue. */
.guide__back{ margin-top:34px; }
.guide a.guide__more{ font-weight:650; color:#1A5FD0; text-decoration:none; }
.guide a.guide__more::after{ content:">"; margin-left:.4em; display:inline-block; }
.guide a.guide__more:hover{ text-decoration:underline; text-underline-offset:4px; }

/* Guides beside the language picker, only where the section links are hidden. */
.nav__guides{ display:none; }
.nav__links a{ white-space:nowrap; }
@media (max-width:1240px){
  .nav__guides{
    display:inline-flex; padding:7px 4px;
    font-size:.88rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
  }
  .nav__guides:hover{ color:var(--ink); }
}
/* On a phone the bar cannot hold name + Guides + picker + CTA (fr/es overflowed
   even before Guides). The icon stays, carries the aria-label, and the name is
   the first thing in the hero right below. */
@media (max-width:480px){ .nav__name{ display:none; } }

/* "Updated <date>" under a guide's title. Quiet on purpose: it is there so the
   reader (and the Article graph's dateModified) can see how fresh the page is,
   not to compete with the answer box below it. */
.guide p.guide__date{ font-size:.9rem; color:var(--ink-3); margin:-16px 0 22px; }

/* ── Right-to-left (Arabic). The page mirrors; phone mockups and screenshots stay as
   they are (their UI is English), so they are pinned back to left-to-right. ── */
[dir="rtl"] .phone, [dir="rtl"] .slide__media, [dir="rtl"] .float-card,
[dir="rtl"] .gap__device, [dir="rtl"] .anyapp__media, [dir="rtl"] .note__media{ direction:ltr; }
[dir="rtl"] .nav__links{ margin-left:0; margin-right:auto; }
[dir="rtl"] .nav__right{ margin-left:0; margin-right:auto; }
[dir="rtl"] .nav__cta{ margin-left:0; }
[dir="rtl"] .langsel__menu{ right:auto; left:0; }
[dir="rtl"] .checklist li, [dir="rtl"] .note__list li, [dir="rtl"] .slide__points li,
[dir="rtl"] .guide__list li{ padding-left:0; padding-right:22px; }
[dir="rtl"] .checklist li{ padding-right:32px; }
[dir="rtl"] .note__list li{ padding-right:18px; }
[dir="rtl"] .slide__points li{ padding-right:20px; }
[dir="rtl"] .guide__steps li{ padding-left:0; padding-right:42px; }
[dir="rtl"] .checklist li::before, [dir="rtl"] .note__list li::before, [dir="rtl"] .slide__points li::before,
[dir="rtl"] .guide__steps li::before{ left:auto; right:0; }
[dir="rtl"] .checklist li::after{ left:auto; right:6.4px; }
[dir="rtl"] .guide__list li::before{ left:auto; right:2px; }
[dir="rtl"] .faq summary::after{ right:auto; left:8px; }
[dir="rtl"] .faq--flat, [dir="rtl"] .guide__table th, [dir="rtl"] .guide__table td,
[dir="rtl"] .guide__h2, [dir="rtl"] .ghub__title{ text-align:right; }
[dir="rtl"] .plan__price span{ margin-left:0; margin-right:9px; }
[dir="rtl"] .mode--wide .mode__text{ padding-right:0; padding-left:clamp(0px,2vw,24px); }
[dir="rtl"] .note__cta::after, [dir="rtl"] .sect__cta::after, [dir="rtl"] .ghub__more::after,
[dir="rtl"] .guide a.guide__more::after{ margin-left:0; margin-right:.4em; } /* ">" mirrors by itself in RTL text */
[dir="rtl"] .eyebrow, [dir="rtl"] .hero__title, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3{ letter-spacing:0; }
[dir="rtl"] .footnote{ border-left:0; padding-left:0; border-right:2px solid var(--line-2); padding-right:16px; }
[dir="rtl"] .footnote--light{ border-right:0; padding-right:0; }
[dir="rtl"] .dark-note{ border-left:0; border-right:2px solid var(--brand); }

/* Campaign page (/share/): the hashtag list and the address to write to are the
   two things people copy, so they get set apart from the running text. */
.guide__tags{
  font-size:1.05rem; line-height:1.9; color:var(--ink);
  background:var(--tint); border-radius:12px; padding:12px 16px;
}
.guide__tags span{ display:inline-block; white-space:nowrap; margin-right:.6em; }
.guide__shot{ display:block; width:100%; max-width:380px; height:auto; margin-top:10px; border-radius:14px; }
/* Lead-in under the intro: the one line that says what to do and what you get. */
.guide p.guide__lede{ color:var(--ink); font-weight:600; }
/* "Where to send it": a full-width button that opens the mail app with the
   subject and a fill-in template (site.js builds the mailto), the address as
   text with a copy button beside it, and a hint that appears if no mail app
   took the tap. */
.guide__mailcta{ margin:14px 0 12px; }
.guide__mailbtn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:56px; padding:14px 20px; border-radius:16px;
  background:var(--brand); color:#fff; font-size:1.08rem; font-weight:650;
  box-shadow:0 10px 24px -12px rgba(225,116,31,.7);
  transition:transform .18s var(--ease), background-color .18s var(--ease);
}
.guide a.guide__mailbtn{ color:#fff; text-decoration:none; }
.guide__mailbtn:hover{ background:var(--brand-dk); }
.guide__mailbtn:active{ transform:translateY(1px); }
.guide__mailbtn svg{ width:20px; height:20px; flex:none; }
.guide p.guide__mailalt{ font-size:.95rem; color:var(--ink-3); margin:0 0 8px; }
.guide__mailaddr{ color:var(--ink); font-weight:600; white-space:nowrap; }
.guide__copy{
  margin-inline-start:6px; padding:3px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font-size:.82rem; font-weight:600; vertical-align:1px;
}
.guide p.guide__mailhint{
  font-size:.95rem; color:var(--ink); margin:0 0 18px;
  background:var(--tint); border-radius:12px; padding:10px 14px;
}
/* Header illustration under the title, set as a card the way Grow's reward page
   does. Its art is drawn on cream, so it stays a light card in dark mode too. */
.guide__hero{ display:block; width:100%; height:auto; margin:0 0 28px; border-radius:16px;
  border:1px solid var(--line); }

/* ══════════════════════════════════════════════════════════
   In-app page — 2026-10-10
   The share page opens in the app's Safari view, so it has no site top bar
   (build-site.py strips it) and a quiet footer instead of the dark band.
   ══════════════════════════════════════════════════════════ */
.app-page .guide{ padding-top:max(28px, env(safe-area-inset-top)); }
.app-page .footer{
  background:transparent; color:var(--ink-3);
  border-top:1px solid var(--line);
  padding:28px 0 max(36px, env(safe-area-inset-bottom));
}
.app-page .footer__nav{ font-size:.86rem; gap:8px 18px; }
.app-page .footer__nav a:hover{ color:var(--ink); }
.app-page .footer__legal{ border-top:0; padding-top:0; color:var(--ink-3); font-size:.78rem; }

/* ══════════════════════════════════════════════════════════
   Dark mode — 2026-10-10
   The tokens carry most of it. The rest undoes surfaces that were written as
   literal light colours. Sections that are dark by design (privacy, carousel,
   final CTA, footer) keep their look and only get a hairline so they still read
   as bands against a page that is now dark too.
   ══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:        #0E1116;
    --tint:      #171B22;
    --surface:   #161A21;
    --dark:      #08090C;
    --dark-2:    #08090C;

    --ink:       #EEF2F7;
    --ink-2:     #A7B1BF;
    --ink-3:     #768192;

    --line:      #242A35;
    --line-2:    #323A48;

    --brand-dk:  #F49A4A;   /* used as text (links, hovers): lifted to stay readable */
    --blue:      #5B9BFF;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.4);
    --shadow-md: 0 1px 3px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 34px 70px -28px rgba(0,0,0,.7);
  }

  /* Ink-filled controls flip to light ink on dark, the way iOS does it. */
  .btn--dark, .step__num, .skip-link{ background:#F2F5FA; color:#0C0E13; }
  .btn--dark{ box-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -10px rgba(0,0,0,.7); }
  .btn--dark:hover{ background:#FFFFFF; box-shadow:0 2px 4px rgba(0,0,0,.4), 0 16px 34px -12px rgba(0,0,0,.75); }
  .btn--ghost:hover{ background:rgba(255,255,255,.06); }

  .nav.is-stuck{ background:rgba(14,17,22,.8); }
  .nav__links a:hover{ background:rgba(255,255,255,.07); }
  .langsel summary{ background:rgba(255,255,255,.04); }
  .langsel summary:hover{ background:rgba(255,255,255,.09); }

  .hero{ background:linear-gradient(178deg,#141820 0%,#10141A 46%,#0E1116 100%); }
  .hero__glow--amber{ opacity:.45; }
  .hero__glow--blue{ opacity:.6; }
  .phone--hero{ background:#262B34; box-shadow:0 2px 5px rgba(0,0,0,.4), 0 34px 68px -26px rgba(0,0,0,.8); }
  .float-card{ background:rgba(30,35,44,.94); border-color:rgba(255,255,255,.08); }

  .strip li{ color:var(--ink-3); }
  .card__icon--amber{ background:rgba(255,198,90,.14); color:#FFC65A; }
  .card__icon--blue{ background:rgba(91,155,255,.16); color:#8DB8FF; }
  .card__icon--violet{ background:rgba(122,90,248,.2); color:#B7A6FF; }

  .mode__media, .anyapp__media, .look__media{ background:linear-gradient(168deg,#1A1F27 0%,#12161C 100%); }
  .mode__text .tag--accent{ background:rgba(255,198,90,.16); color:#FFC65A; }
  .checklist li::before{ background:rgba(255,198,90,.2); box-shadow:none; }
  .checklist li::after{ border-color:#FFC65A; }

  .section--dark, .carousel, .final{ border-block:1px solid var(--line); }
  .footer:not(.app-page .footer){ border-top:1px solid var(--line); }

  .note__cta, .sect__cta, .ghub__more, .guide a.guide__more{ color:#7DB0FF; }
  .note__cta:hover, .sect__cta:hover{ color:#A9CBFF; }

  /* Screenshots and illustrations are drawn on white; a touch less glare. */
  .guide__shot, .mode__media img, .anyapp__media img, .look__media img{ filter:brightness(.92); }
}

/* Share page: real posts shown as examples (zh only for now), as link cards —
   title and author on top, the platform and the link underneath. */
.guide__examples{ display:grid; gap:12px; margin:0 0 24px; }
.guide__example{ display:block; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--tint); overflow:hidden; text-decoration:none; color:var(--ink); }
.guide__example-main{ display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface); border-bottom:1px solid var(--line); }
.guide__example-main svg{ flex:none; width:22px; height:22px; color:var(--ink-3); }
.guide__example-main > span{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.guide__example-main strong{ font-weight:600; line-height:1.4; }
.guide__example-main strong + span{ color:var(--ink-3); font-size:.9em; }
.guide__example-url{ display:flex; align-items:center; gap:10px; padding:10px 18px; min-width:0; }
.guide__example-url b{ flex:none; font-size:11px; font-weight:700; color:#fff; background:#FF2442;
  border-radius:6px; padding:3px 6px; line-height:1.2; }
.guide__example-url span{ color:var(--ink-2); font-size:.85em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0; }
.guide__example:hover .guide__example-main strong{ text-decoration:underline; }

/* 2026-10-30: E editorial redesign, shared by every home locale and guide. */
@media (prefers-color-scheme: light){
  :root{--bg:#f7f9fb;--tint:#eef2f6;--surface:#fff;--ink:#101d34;--ink-2:#506076;--ink-3:#78879a;--line:#dbe3eb;--line-2:#cbd7e3;--brand:#278e92;--brand-lt:#8bc4d3;--brand-dk:#1767b5;--blue:#355fce;--violet:#6783b2;--dark:#131f35;--dark-2:#e9edf3}
}
@media (prefers-color-scheme: dark){
  :root{--brand:#6ebdc4;--brand-lt:#a5d6e1;--brand-dk:#8ab9f0;--blue:#84a5f0;--violet:#a3b2dc;--dark:#0b1423;--dark-2:#0e1827}
}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans","Segoe UI",sans-serif}
.h2{font-weight:720;letter-spacing:-.035em}
.eyebrow{color:#64768c;letter-spacing:.09em;font-size:.75rem}
.nav{background:rgba(248,250,252,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav.is-stuck{background:rgba(248,250,252,.94)}
.nav__name{color:var(--ink)}
.nav__links a{border-radius:8px}
.nav__cta.btn--dark{background:#101d34;color:#fff;box-shadow:none}
.nav__cta.btn--dark:hover{background:#273a57;color:#fff}

/* The approved C photo sits in a fixed editorial frame; move its crop just
   enough to keep the subject clear of the frosted information band. */
.hero{padding:66px 0 74px;background:linear-gradient(132deg,#f8f9fb 18%,#edf1f6 100%)}
.hero__glow{display:none}
@media(min-width:961px){.hero__grid{grid-template-columns:1fr 1.04fr}}
.hero__grid{gap:clamp(30px,5.3vw,68px)}
.hero__title{font-size:clamp(2.45rem,4.3vw,3.85rem);line-height:1.13;letter-spacing:-.04em;color:var(--ink);font-weight:760;margin-bottom:24px}
.hero__title .hot{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.hero__lead{font-size:clamp(.99rem,1.3vw,1.1rem);line-height:1.82;max-width:33em}
.hero__actions{margin-top:26px;gap:10px}
.hero__actions .btn--dark{background:linear-gradient(105deg,#279d78,#315ad6);color:#fff;border:0;box-shadow:0 9px 20px #23449b1b}
.hero__actions .btn--dark:hover{filter:brightness(1.07);background:linear-gradient(105deg,#279d78,#315ad6);color:#fff}
.hero__actions .btn--ghost{border:1px solid var(--line-2);background:#ffffff91;color:var(--ink)}
.hero__meta{margin-top:22px;font-size:.76rem;gap:8px 17px}
.hero__meta li::before{background:#43a39c}
.hero__visual--editorial{height:474px;display:block;overflow:hidden;border-radius:27px;box-shadow:0 24px 55px #1c33452c;background:#23364b}
.hero__photo{width:100%;height:100%;max-width:none;object-fit:cover;object-position:77% center}
.hero__glass,.hero__caption{position:absolute;z-index:1;left:20px;border-radius:14px}
.hero__glass{top:20px;width:min(67%,370px);display:grid;gap:2px;padding:12px 15px;background:#eef3f9bd;color:#101d34;backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}
.hero__glass span{font-size:11px;color:#596980}
.hero__glass strong{font-size:15px;line-height:1.35}
.hero__caption{bottom:25px;width:min(68%,365px);display:grid;gap:2px;padding:15px 18px;background:#030811f2;border:1px solid #fff2;box-shadow:0 14px 22px #0005;color:#edf5ff}
.hero__caption i{width:40px;height:3px;border-radius:5px;background:linear-gradient(90deg,#4af1a1,#487afd);margin-bottom:5px}
.hero__caption strong{font-size:14px;line-height:1.4;color:#c2dbff}
.hero__caption small{font-size:11px;color:#98a5ba}

/* Quiet bands, thin editorial rules, and compact cards carry the visual rhythm. */
.works{padding:39px 0 42px;background:var(--surface)}
.works .strip__label{text-align:left;color:#64768c}
.works .strip{justify-content:space-between;gap:8px 20px}
.works .strip li{font-size:clamp(.96rem,1.4vw,1.25rem);font-weight:680;color:var(--ink)}
.section{padding:clamp(64px,7vw,92px) 0}
.section--gap{background:#e9edf3}
.gap__intro{grid-template-columns:minmax(0,1fr) 250px;justify-content:space-between;gap:48px}
.gap__intro .lead{max-width:48ch}
.gap__device .phone{--pw:190px}
.cards--3{gap:0;border-top:1px solid var(--line-2);margin-top:46px}
#why .card,#try .card{border:0;border-right:1px solid var(--line-2);box-shadow:none;border-radius:0;padding:26px 23px;background:transparent}
#why .card:last-child,#try .card:last-child{border-right:0}
#why .card__icon,#try .card__icon{width:34px;height:34px;margin-bottom:12px;border-radius:10px}
#why .card__icon svg,#try .card__icon svg{width:18px;height:18px}
#why .card__body,#try .card__body{font-size:.91rem}
#how{background:#f8fafc}
#how .steps{gap:0;margin-top:46px;border-top:1px solid var(--line-2)}
#how .step,#how .step--flip{grid-template-columns:minmax(0,1fr) 170px;justify-content:space-between;gap:28px;border-bottom:1px solid var(--line);padding:24px 0;min-height:210px}
#how .step--flip .step__text{order:0}
#how .step--flip .step__media{order:0}
#how .step__num{background:none;color:#456077;font-size:1.5rem;width:auto;height:auto;display:block;margin-bottom:8px;font-weight:400}
#how .step__title{font-size:1.16rem}
#how .step__text p{font-size:.94rem;max-width:62ch}
#how .phone--step{--pw:105px}
#how .step__media{justify-self:center}
#how .note{background:#e9eff5;box-shadow:none;max-width:980px;margin-inline:auto}
#how .phone--note{--pw:140px}
#how .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
#how .step,#how .step--flip{display:block;border-bottom:0;min-height:0;padding:24px 0}
#how .step__media,#how .note__media{display:none}
#how .note{display:block;max-width:none}
.carousel{background:#f8fafc;padding:75px 0}
.carousel::before{display:none}
.carousel__head .h2,.carousel .h2--light{color:var(--ink)}
.slide__text{color:var(--ink)}
.slide__label--accent{background:#e2eef0;color:#33677b}
.slide__text > p{color:var(--ink-2)}
.slide__points li{color:var(--ink-2);padding-block:8px;border-top:1px solid var(--line);font-size:.91rem}
.slide__points li::before{background:#3e68d3;border-radius:50%}
.slide__media img{max-width:280px;box-shadow:0 20px 42px #1f385b27}
.slide__media--wide img{max-width:470px}
.cdot{background:#b8c8d9}.cdot.is-active{background:#335bd0}.carousel__progress{background:#dbe3eb}.carousel__bar{background:#335bd0}
#anyapp{background:#e9edf3}
.anyapp__media{max-height:410px;display:grid;place-items:center;box-shadow:none;background:#dde6ef}
.anyapp__media img{height:410px;width:auto;object-fit:contain}
.apptags li{box-shadow:none;font-size:.82rem}
#apps{background:#f8fafc}
.applist{gap:0 23px}
.applist li{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;padding:16px 2px 18px}
.applist__name{font-size:1rem}
#privacy{background:#e9edf3;color:var(--ink)}
#privacy .h2{color:var(--ink)}
#privacy .lead--light{color:var(--ink-2)}
#privacy .priv{background:transparent;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:20px 0}
#privacy .priv h3{color:var(--ink)}
#privacy .priv p{color:var(--ink-2)}
#privacy .priv svg{color:#278e92}
#privacy .dark-note{color:var(--ink-2);background:transparent;border-color:#44859b}
#try{background:#f8fafc}
#faq{background:#e9edf3}
.faq-wrap{text-align:left;max-width:var(--wrap)}
.faq-wrap .eyebrow,.faq-wrap .h2{text-align:left}
.faq--flat{max-width:none;margin:32px 0 0}
.faq--flat summary{padding:16px 0;font-size:.96rem}
.faq--flat details > p{font-size:.94rem;padding-bottom:19px}
.final{background:#e9edf3;color:var(--ink);text-align:left;padding:56px 0}
.final__glow{display:none}
.final__inner{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:22px}
.final__icon{width:64px;height:64px;border-radius:16px}
.final .h2--light{color:var(--ink)}
.final .lead--light{color:var(--ink-2)}
.final .btn--dark{background:linear-gradient(105deg,#279d78,#315ad6);color:#fff}
.footer:not(.app-page .footer){background:#e9edf3;color:#718094;border-top:1px solid var(--line);padding:30px 0}
.footer__inner{gap:16px}
.footer__nav{font-size:.83rem}
.footer__legal{font-size:.75rem}

/* Illustrated guide header: the original portrait stays uncropped. */
.guide--illustrated{padding-top:0}
.guide--illustrated .guide__page{max-width:var(--wrap);padding-top:0}
.guide__intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:70px;align-items:center;margin:0 -24px 72px;padding:55px 24px;background:#e9edf3}
.guide__intro-copy{min-width:0}
.guide--illustrated .guide__title{max-width:17em;margin:12px 0 18px;font-size:clamp(2.1rem,3.5vw,3.05rem)}
.guide--illustrated .guide__answer{border:0;border-top:2px solid #4d94a1;border-radius:0;background:transparent;padding:18px 0 0;font-size:1.02rem;line-height:1.82;max-width:660px}
.guide__visual{height:400px;border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fbecd9;box-shadow:0 18px 38px #705c4b1e}
.guide__visual img{width:auto;height:100%;max-width:100%;object-fit:contain}
.guide--illustrated .guide__page > :not(.guide__intro-grid){max-width:690px}
.guide a:not(.btn){color:#1767b5;text-decoration:none}
.guide a:not(.btn):hover,.guide a:not(.btn):focus-visible{text-decoration:underline;text-underline-offset:3px}
.guide__list--destinations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-width:690px}
.guide__list--destinations li{padding:0;margin:0}
.guide__list--destinations li::before{display:none}
.guide__list--destinations a{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 16px;color:var(--ink)!important;font-size:.85rem;line-height:1.5}
.guide__list--destinations a::after{content:'›';font-size:1.5rem;color:#1767b5;line-height:1}
.guide__list--destinations a:hover{border-color:#a9bed4;text-decoration:none!important}
.guide__steps li::before{background:#278e92}
.guide__list li::before{background:#3b69d5}

@media(max-width:960px){
  .hero__visual{order:0}
  .hero__grid{gap:28px}
  .hero__visual--editorial{height:420px}
  .guide__intro-grid{grid-template-columns:minmax(0,1fr) 270px;gap:30px}
}
@media(max-width:740px){
  .hero{padding:37px 0 50px}
  .hero__title{font-size:clamp(2.15rem,8.7vw,3rem)}
  .hero__lead{font-size:.9rem;line-height:1.75}
  .hero__actions{flex-direction:row}
  .hero__actions .btn{width:auto}
  .hero__visual--editorial{height:350px;border-radius:22px}
  .hero__glass{top:13px;left:13px;right:auto;width:min(60%,210px);padding:10px 12px}
  .hero__glass strong{font-size:13px}
  .hero__caption{bottom:14px;left:14px;width:min(76%,310px);padding:12px 14px}
  .works .strip{justify-content:flex-start;gap:8px 18px}
  .works .strip li{font-size:.9rem}
  .gap__intro{grid-template-columns:1fr;gap:25px}
  .gap__device{justify-self:center}
  .cards--3{grid-template-columns:1fr}
  #why .card,#try .card{border-right:0;border-bottom:1px solid var(--line);padding:18px 0}
  #how .step,#how .step--flip{grid-template-columns:minmax(0,1fr) 102px;gap:15px}
  #how .steps{grid-template-columns:1fr;gap:0}
  #how .step,#how .step--flip{border-bottom:1px solid var(--line);padding:18px 0}
  #how .phone--step{--pw:88px}
  #how .step__text p{font-size:.81rem}
  #how .step__title{font-size:1rem}
  #how .note{grid-template-columns:1fr}
  .slide__media img{max-width:220px}
  .applist{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .applist li p{font-size:.78rem}
  .anyapp__media img{height:330px}
  .final__inner{grid-template-columns:55px 1fr}
  .final__icon{width:52px;height:52px}
  .final .btn{grid-column:1/-1;justify-self:start}
  .guide__intro-grid{grid-template-columns:1fr;gap:24px;margin:0 -18px 48px;padding:38px 18px 44px}
  .guide__visual{width:min(100%,340px);height:400px;justify-self:center}
  .guide--illustrated .guide__title{font-size:clamp(1.9rem,8vw,2.4rem)}
  .guide--illustrated .guide__answer{font-size:.9rem}
  .guide__list--destinations{grid-template-columns:1fr}
}
@media(max-width:390px){
  .hero__visual--editorial{height:315px}
  .applist{grid-template-columns:1fr}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
}
@media(prefers-color-scheme:dark){
  .nav,.nav.is-stuck{background:#101824e8}
  .hero{background:linear-gradient(132deg,#141c2a,#0f1725)}
  .section--gap,#anyapp,#privacy,#faq,.final,.footer:not(.app-page .footer){background:#182233}
  #how,.carousel,#apps,#try{background:#101824}
  .guide__intro-grid{background:#182233}
  .hero__actions .btn--ghost{background:#202b39;color:#eaf1f8}
  .hero__glass{background:#e7eff6c7}
}

/* Final App Store artwork, one localized set per language. */
.mode-gallery{padding:72px 0 82px;background:#f8fafc}
.mode-gallery .h2{max-width:720px;margin-bottom:28px}
.mode-gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:960px;margin-inline:auto}
.mode-gallery__card{min-width:0}
.mode-gallery__art{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#e8edf3;box-shadow:0 10px 28px #23365212}
.mode-gallery__art img{width:100%;height:auto;display:block}
.mode-gallery__card figcaption{display:flex;align-items:center;gap:14px;padding:13px 2px 0;color:var(--ink)}
.mode-gallery__card figcaption span{font-size:1.35rem;font-weight:350;color:#476277}
.mode-gallery__card figcaption strong{font-size:.92rem;font-weight:680}
@media(max-width:740px){
  .mode-gallery{padding:56px 0}
  .mode-gallery__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(245px,76%);gap:14px;max-width:none;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:0 0 13px}
  .mode-gallery__card{display:block;scroll-snap-align:start}
  .mode-gallery__art{border-radius:15px}
  .mode-gallery__card figcaption{padding:10px 2px 0}
}
@media(prefers-color-scheme:dark){.mode-gallery{background:#101824}.mode-gallery__art{background:#202b39}}