/* ══════════════════════════════════════════════════════════
   Hono Subtitles — promotional site
   Light-only by design: every brand asset (icon, App Store
   art, in-app screenshots) is built on a light surface.
   ══════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  --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; }

@media (max-width:1000px){ .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);
}
@media (max-width:900px){ .anyapp{ grid-template-columns:1fr; } .anyapp__media{ order:-1; } }

.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{ display:inline; }
html:lang(es) .hero__title .br-b,
html:lang(pt) .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);
}

/* ── 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. */
html:lang(es) .hero__title,
html:lang(pt) .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;
}
/* :not() keeps this off the two paragraphs that are deliberately not body copy.
   Without it `.guide p` wins on specificity and flattens the whole hierarchy. */
.guide p:not(.guide__answer):not(.eyebrow){
  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; }