/* ShowLine — site styles · Apple-minimal pass (2026-10-20)
   Rules of this file (enforced by generator/check-site.py rule 18):
   · every @media uses max-width, in ascending order
   · no bare px font-size (use rem / clamp / var(--fs-*))
   · every box-shadow goes through --sh-1 / --sh-2 / --sh-3, inset or none
   · no third-party fonts: the product ships no network code, the site should
     not need one either — the system stack is the design. */

:root {
  --white: #fff;
  --grey: #F5F5F7;
  --grey-2: #FAFAFA;
  --ink: #1D1D1F;
  --ink-2: #3A3A3C;
  --muted: #6E6E73;
  --muted-2: #86868B;
  --blue: #0071E3;
  --blue-d: #0066CC;
  --hair: #D2D2D7;
  --hair-soft: #E8E8ED;
  --peg: #C8925A;
  --dark: #000;
  --dark-2: #1D1D1F;
  --dark-line: #2C2C2E;
  --red: #FF3B30;
  --red-bg: rgba(255, 59, 48, .1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI", Inter, "Helvetica Neue", Helvetica,
    Arial, "Microsoft YaHei", "PingFang SC", "Hiragino Sans", "Malgun Gothic",
    sans-serif;
  --mono: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, "Liberation Mono",
    "Courier New", monospace;

  /* Two display sizes. The home headline is a short phrase and can carry the
     big type; a product headline is a whole sentence ("Du brauchst die Farbe.
     Du hast das Fenster schon geschlossen.") and at 3.45rem it broke into four
     ragged lines with a one-word last line in eight of the twelve languages.
     Measured across 5 pages x 12 languages: 2.875rem keeps every product
     headline at three lines or fewer inside a 535px column. */
  --fs-display: clamp(2.6rem, 4.2vw, 3.45rem);
  /* Home hero only: the headline is a short phrase and carries the whole first
     screen, so it runs one step larger than --fs-display (which has to keep a
     product sentence inside a 535px column). */
  --fs-display-xl: clamp(2.3rem, 6.8vw, 4.55rem);
  --fs-display-2: clamp(2rem, 3.2vw, 2.875rem);
  --fs-h1: clamp(2.1rem, 4.8vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 3.2vw, 2.3rem);
  --fs-h3: clamp(1.12rem, 2vw, 1.42rem);
  --fs-lead: clamp(1.05rem, 1.9vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-body-s: 1rem;
  --fs-ui: .9375rem;
  --fs-cap: .8125rem;
  --fs-eb: .8125rem;
  --fs-k: .75rem;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .06);
  --sh-2: 0 18px 60px rgba(0, 0, 0, .12);
  --sh-3: 0 8px 20px rgba(0, 0, 0, .14);

  --max: 980px;
  --gut: 22px;
  /* One value drives every section boundary: the gap between two sections is
     2 x --pad-sec, so the page keeps a single rhythm instead of stacking a
     section's padding on top of the next one's margin. */
  --pad-sec: clamp(18px, 1.9vw, 20px);
  /* 纵向节奏按《官网-视觉设计优化方案》§2.3：三档 40 / 64 / 96，块内连接线 32。
     旧值 56 / 88 / 118 偏松，一段一段叠起来就是"间隔太大"的来源。 */
  --gap-s: 40px;
  --gap-m: 64px;
  --gap-l: 96px;
  --gap-block: 32px;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.47059;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg { max-width: 100%; }
img { height: auto; border: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); text-decoration: underline; }

::selection { background: rgba(0, 113, 227, .16); }

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

/* ---------------------------------------------------------------- layout */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(var(--max), 100% - var(--gut) * 2);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
}
.skip:focus { left: 0; }

section { padding: var(--pad-sec) 0; }

/* 有底色的段落（浅灰 / 深色）比白底段落多留一点内边距，否则色块一上来就贴住标题。 */
section.band-grey,
section.band-grey-2,
section.band-dark { padding-block: calc(var(--pad-sec) + 12px); }

.stack-s > * + * { margin-top: 20px; }
.stack-m > * + * { margin-top: 34px; }

.center { text-align: center; }
.center .lead, .center .stmt-p { margin-inline: auto; }

.band-grey { background: var(--grey); }
.band-grey-2 { background: var(--grey-2); }
.band-dark { background: var(--dark); color: var(--grey); }
.band-dark a { color: #2997FF; }
.band-dark .lead, .band-dark .stmt-p { color: #A1A1A6; }

/* ------------------------------------------------------------ typography */
.h1, .h2, .h3, h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.06;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--fs-display);
  letter-spacing: -.028em;
  line-height: 1.04;
}

.h2, h2 {
  font-size: var(--fs-h2);
  letter-spacing: -.025em;
  line-height: 1.08;
}

.h3, h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.16;
}

.lead {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: -.017em;
}

.lead-tight { max-width: 46ch; }

.eyebrow {
  display: block;
  margin: 0 0 14px;
  font-size: var(--fs-eb);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--blue);
}
.band-dark .eyebrow { color: #2997FF; }

/* 产品页页眉上的产品图标：和浏览器标签页、商店包同一份美术资源。
   图标自带圆角瓷片与描边，这里只负责对齐和尺寸。 */
.eyebrow-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow-logo .pm {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
}

/* 底部深色区的四个产品入口也挂上各自的图标 */
.app-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.app-hd img {
  display: block;
  width: 26px;
  height: 26px;
  flex: none;
}
.app-hd h3 { margin: 0; }

.kicker {
  margin: 0 0 12px;
  font-size: var(--fs-eyebrow, 1.05rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--blue);
}

.quote {
  margin: var(--gap-block) 0;
  max-width: 22ch;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.small {
  margin: 14px 0 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: -.012em;
}

.mono {
  font-family: var(--mono);
  font-size: var(--fs-cap);
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.prose { max-width: 62ch; }
.prose p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.62; }
.prose li { margin-bottom: 10px; color: var(--ink-2); line-height: 1.6; }

.blurb { max-width: 60ch; color: var(--muted); }

/* CJK: tighter tracking reads wrong at display sizes */
html[lang="zh-Hans"] h1, html[lang="zh-Hant"] h1,
html[lang="ja"] h1, html[lang="ko"] h1,
html[lang="zh-Hans"] .h1, html[lang="zh-Hant"] .h1,
html[lang="ja"] .h1, html[lang="ko"] .h1 {
  /* CJK glyphs are full-width: at the Latin display size the headline only
     fits four characters a line, so it is set a step smaller here. */
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  letter-spacing: 0;
  line-height: 1.24;
  font-weight: 600;
}

html[lang="zh-Hans"] .h2, html[lang="zh-Hant"] .h2,
html[lang="ja"] .h2, html[lang="ko"] .h2,
html[lang="zh-Hans"] .quote, html[lang="zh-Hant"] .quote,
html[lang="ja"] .quote, html[lang="ko"] .quote {
  letter-spacing: 0;
  line-height: 1.28;
  font-weight: 600;
}

/* Korean breaks inside words by default; keep the headline whole. */
html[lang="ko"] .hero-copy h1 { word-break: keep-all; }

/* Japanese and Chinese break anywhere between glyphs, so a line can end on a
   comma or open a quote mark. line-break: strict applies the kinsoku rules:
   no punctuation at the start of a line, no opening bracket at the end. */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] .h1,
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] .h1,
html[lang="zh-Hant"] h1, html[lang="zh-Hant"] h2, html[lang="zh-Hant"] .h1 {
  line-break: strict;
}

html[lang="zh-Hans"] .lead, html[lang="zh-Hant"] .lead,
html[lang="ja"] .lead, html[lang="ko"] .lead,
html[lang="zh-Hans"] .stmt-p, html[lang="zh-Hant"] .stmt-p,
html[lang="ja"] .stmt-p, html[lang="ko"] .stmt-p {
  line-height: 1.6;
  letter-spacing: 0;
}

/* 中日韩首屏导语：让各行长度尽量均匀。中文一行放不下时，末尾常被甩出一个
   “的。”之类的孤字；balance 会把这点余量摊回前面几行。不支持的浏览器只是
   忽略这一条，退回原来的断行。 */
html[lang="zh-Hans"] .hero-copy .lead,
html[lang="zh-Hant"] .hero-copy .lead,
html[lang="ja"] .hero-copy .lead,
html[lang="ko"] .hero-copy .lead {
  text-wrap: balance;
}

/* ------------------------------------------------------------------- nav */
.hd {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid rgba(0, 0, 0, .1);
}

.hd-in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 48px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }

.brand .cn { display: none; }

/* 页头品牌标：用真图标（assets/icon.svg），不用渐变方块糊一个 */
.brand .bm {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.nav a {
  font-size: .84375rem;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.nav a:hover { color: var(--blue); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.hd-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-pick {
  appearance: none;
  -webkit-appearance: none;
  max-width: 132px;
  padding: 6px 10px;
  font-family: var(--font);
  font-size: .8125rem;
  color: var(--ink-2);
  background: transparent;
  border: .5px solid var(--hair);
  border-radius: 980px;
  cursor: pointer;
}
.lang-pick:hover { border-color: var(--muted-2); }

.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--ink);
  box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink);
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 26px;
  font-family: var(--font);
  font-size: var(--fs-body-s);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--white);
  background: var(--blue);
  border: 0;
  border-radius: 980px;
  cursor: pointer;
  text-align: center;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover {
  color: var(--white);
  background: var(--blue-d);
  text-decoration: none;
  transform: scale(1.015);
}
.btn:active { transform: scale(.995); }

.btn.ghost {
  color: var(--blue);
  background: transparent;
  border: .5px solid var(--hair);
}
.btn.ghost:hover {
  color: var(--blue-d);
  border-color: var(--blue);
  background: transparent;
}

.btn.sm {
  min-height: 32px;
  padding: 0 15px;
  font-size: .84375rem;
}

.btn.lg {
  min-height: 52px;
  padding: 0 32px;
  font-size: 1.0625rem;
}

.hd-buy { flex: 0 0 auto; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-body-s);
  font-weight: 500;
  color: var(--blue);
}
.link::after { content: " ›"; font-size: 1.05em; line-height: 1; }
.link:hover { color: var(--blue-d); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.hero-actions { margin-top: 28px; }

.center-row { justify-content: center; }
.center .quote { margin-inline: auto; }
.center .h2 { max-width: 20ch; margin-inline: auto; }
.center .btn-row { justify-content: center; }

/* ------------------------------------------------------------- buy / ms */
.buy-box {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.buy-price {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}

.buy-price .price {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.buy-price .ms-trial {
  font-size: var(--fs-cap);
  color: var(--blue);
  font-weight: 500;
}

.buy-price .one {
  font-size: var(--fs-cap);
  color: var(--muted-2);
}

/* The official Microsoft Store badge ships as a 161x44 SVG per language;
   it is the whole link, so the wrapper stays out of the way. */
.ms-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 5px;
  transition: opacity .18s ease, transform .18s ease;
}
.ms-badge:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; }
.ms-badge .msbadge {
  display: block;
  width: 161px;
  height: 44px;
}

.ms-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-cap);
  color: var(--muted);
  border-bottom: .5px solid var(--hair);
  padding-bottom: 2px;
}
.ms-link:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.band-dark .ms-link { color: #A1A1A6; border-color: var(--dark-line); }

.ms-trial {
  display: inline-block;
  font-size: var(--fs-cap);
  font-weight: 500;
  color: var(--blue);
}

.store-note {
  font-size: var(--fs-cap);
  color: var(--muted-2);
  line-height: 1.5;
}

.store-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: .5px solid var(--hair);
}

.store-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.cta-strip {
  margin-top: var(--gap-s);
  padding: clamp(32px, 5vw, 52px);
  background: var(--grey);
  border-radius: var(--r-lg);
}
.cta-strip .h2 { max-width: 22ch; }
.cta-strip .buy-box { margin-top: 26px; }

.price-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-top: var(--gap-s);
  padding: clamp(28px, 4vw, 44px);
  background: var(--grey);
  border-radius: var(--r-lg);
}

.price-txt .small { margin-top: 0; color: var(--ink-2); }

.price-foot {
  margin: 10px 0 0;
  font-size: var(--fs-cap);
  color: var(--muted-2);
}

.trust {
  margin: 30px 0 0;
  font-size: var(--fs-cap);
  color: var(--muted-2);
  letter-spacing: -.005em;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  font-size: var(--fs-cap);
  font-weight: 500;
  color: var(--blue);
}
.facts span { white-space: nowrap; }
.facts span + span::before {
  content: "·";
  margin-right: 20px;
  color: var(--hair);
}

/* ------------------------------------------------------------------ hero */
.hero {
  /* the line reserves its own band; hang.js writes the real value */
  padding-top: var(--hang-pad, 72px);
  padding-bottom: clamp(20px, 3vw, 36px);
}

/* The hero carries words only: the product is already on screen above it, as
   the hanging line (assets/hang.js), so a second picture of the window would be
   the same thing twice. One column, left-aligned. The headline gets its own
   measure rather than inheriting the column one: the German, French, Dutch and
   Russian sentences need 24ch (products 34ch) to stay on two lines. */
.hero-grid {
  display: block;
}

.hero-copy h1 { max-width: 24ch; }

/* Product pages open on a whole sentence rather than a phrase, so the headline
   steps down to --fs-display-2 and gets one more line of room. */
.hero-pd .hero-copy h1 { max-width: 34ch; font-size: var(--fs-display-2); }
.hero-copy .lead { max-width: 46ch; }
.hero-copy .trust { margin-top: 18px; font-size: var(--fs-cap); color: var(--muted-2); }
.hero-copy .trust b { color: var(--ink); font-weight: 600; }

/* Home hero: one centred column (2026-10-21)

   Kicker, headline, lead, two pills, price line, store fine print — all on the
   centre line. The headline is deliberately NOT text-wrap: balance: it fills the
   full measure and drops only its last word, which is what makes the block read
   as one sentence instead of two even halves. */
.hero-home { padding-bottom: clamp(28px, 4vw, 52px); }
.hero-grid--center { text-align: center; }
.hero-copy--center .h1 {
  max-width: 23ch;
  margin-inline: auto;
  font-size: var(--fs-display-xl);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: wrap;
}

/* 产品页首屏也用首页那一套（2026-10-21）：图标 + 名字仍是 40px 小标，其余全部居中，
   标题放大到 --fs-display-xl；主按钮买，次按钮改成"免费试用 7 天"，同样直连商店。
   产品页的标题是一整句话，中文一句就能铺满整幅，所以不给 ch 宽度、改用 balance
   均分两行，否则会出现"……盖住" + 单字"了。"的孤字。 */
.hero-pd .hero-copy--center h1 {
  max-width: 100%;
  margin-inline: auto;
  font-size: var(--fs-display-xl);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-pd .hero-copy--center .eyebrow-logo { justify-content: center; }
.hero-pd .hero-copy--center .lead { margin: 22px auto 0; max-width: 52ch; }
.hero-pd .btn-row { justify-content: center; gap: 14px; margin-top: 30px; }
.hero-pd .btn { min-height: 48px; padding: 0 28px; font-size: var(--fs-body); }
.hero-pd .btn.ghost { color: var(--ink); }
.hero-pd .btn.ghost:hover { color: var(--ink); border-color: var(--ink); }
.hero-pd .hero-copy--center .trust { margin-top: 18px; text-align: center; }
.hero-kicker {
  margin: 0 0 6px;
  font-size: var(--fs-k);
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* CJK has no case, so the tracking above only makes the line look gappy. */
html[lang="zh-Hans"] .hero-kicker,
html[lang="zh-Hant"] .hero-kicker,
html[lang="ja"] .hero-kicker,
html[lang="ko"] .hero-kicker { letter-spacing: .02em; }

.hero-copy--center .lead {
  margin: 22px auto 0;
  max-width: 54ch;
  font-size: var(--fs-lead);
  color: var(--ink-2);
  /* German and Dutch land a single word on the last line at this measure;
     pretty rebalances the last two lines without touching the first break. */
  text-wrap: pretty;
}
.hero-home .btn-row { justify-content: center; gap: 14px; margin-top: 30px; }
.hero-home .btn { min-height: 48px; padding: 0 28px; font-size: var(--fs-body); }
.hero-home .btn.ghost { color: var(--ink); }
.hero-home .btn.ghost:hover { color: var(--ink); border-color: var(--ink); }
.hero-price {
  margin: 18px 0 0;
  font-size: var(--fs-body-s);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}
.hero-home .fineprint { margin-top: 12px; }

/* The home headline now runs a step larger than --fs-display, so the CJK
   step-down above (52px) has to follow it — otherwise Chinese, Japanese and
   Korean open a size smaller than the Latin pages next to them. */
html[lang="zh-Hans"] .hero-copy--center .h1,
html[lang="zh-Hant"] .hero-copy--center .h1,
html[lang="ja"] .hero-copy--center .h1,
html[lang="ko"] .hero-copy--center .h1 {
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  line-height: 1.16;
}

/* the hanging line, one canvas above the page

   The app draws its rope and its cards in one pass, and the rope goes down
   first: every card is drawn over it, so a peg covers the rope instead of
   floating beside it. The site does the same in a single canvas, with the same
   physics the app uses. The peg point and the rope come from one sampled
   curve, so they cannot drift apart, and the whole line leaves together when
   it tucks away. Every pixel is the app's own render (generator/make-hang.py). */
.line-canvas {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the hint that the line can be called back out

   Once the reader scrolls, the line tucks itself away and lives on the right
   edge — and nothing on the page says so. This pill says it, and it only
   appears while the line is away, so it never sits on top of the cards. On a
   touch screen there is no pointer to move, so there the pill is not a hint but
   the only way in: it stays, and tapping it brings the line out. */
.peek {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 56;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 14rem;
  padding: 9px 14px;
  border: 0;
  border-radius: 980px;
  background: rgba(29, 29, 31, .82);
  color: var(--white);
  font: inherit;
  font-size: var(--fs-cap);
  line-height: 1.25;
  text-align: left;
  box-shadow: var(--sh-3);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: peek-in .3s ease both;
}
/* the rule above sets display, which would defeat the hidden attribute */
.peek[hidden] { display: none; }
.peek::after {
  content: "›";
  font-size: 1.2em;
  line-height: 1;
  opacity: .7;
}
.peek:hover,
.peek:focus-visible { background: var(--ink); }
.peek:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.peek-touch { display: none; }
@keyframes peek-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* No hover: the hint becomes a tap target. Right-centre would sit on top of the
   text column all the way down a phone, so on touch it docks to the bottom-right
   instead — clear of the paragraphs and inside thumb reach. 84px keeps it above
   the language bar, which parks at bottom: 18px and is about 56px tall. */
@media (hover: none) {
  .peek {
    right: 12px;
    top: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    transform: none;
    max-width: 12rem;
    padding: 11px 16px;
  }
  .peek::after { content: ""; gap: 0; }
  .peek-t { display: none; }
  .peek-touch { display: inline; }
}
/* the hanging banner under the hero */
.hero-band {
  margin: clamp(36px, 5vw, 64px) auto 0;
  width: min(var(--max) + 120px, 100% - var(--gut) * 2);
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.hero-band .hero-pic,
.hero-band .hero-still,
.hero-band img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-band .hero-live { display: none; }

.wfake {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 46%;
  bottom: 20px;
  padding: 16px 18px;
  background: var(--white);
  border: .5px solid rgba(0, 0, 0, .07);
  border-radius: 10px;
  box-shadow: var(--sh-1);
  font-size: .8rem;
  line-height: 1.6;
  color: #A1A1A6;
  overflow: hidden;
}
.wfake b { display: block; margin-bottom: 6px; font-weight: 500; color: #8E8E93; }

.wfake .ln {
  height: 8px;
  margin: 9px 0;
  border-radius: 4px;
  background: #F0F0F3;
}
.wfake .w80 { width: 80%; }
.wfake .w60 { width: 60%; }
.wfake .w45 { width: 45%; }

/* legacy hero helpers kept for the generator's alternate forms */
.hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  padding: 28px 0 8px;
}
.hero-row .hero-rope-svg { position: absolute; width: 100%; }
.hero-row .hero-card { display: block; }
.hero-live { position: relative; }
.hero-item { position: absolute; }

/* -------------------------------------------------------------- sections */
.stmt {
  max-width: 20ch;
  margin: 0;
}
.stmt-p {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.52;
  color: var(--muted);
  letter-spacing: -.017em;
  text-wrap: pretty;
}
.stmt-p + .caps,
.stmt-p + .gal,
.stmt-p + .grid,
.stmt-p + .fails { margin-top: var(--gap-block); }

.proof {
  max-width: 46em;
  padding-top: 30px;
  border-top: .5px solid var(--hair);
}
.proof .stmt { max-width: 24ch; }

/* ------------------------------------------------------------- cap cards */
.caps-head { display: block; }

.caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: var(--gap-block);
}

.cap {
  padding: 26px 22px 24px;
  background: var(--grey-2);
  border: .5px solid rgba(0, 0, 0, .04);
  border-radius: var(--r-md);
}
.cap-i {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  opacity: .9;
}
.cap h3 { margin: 0 0 10px; }
.cap-l {
  margin: 0;
  font-size: var(--fs-body-s);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.4;
}
.cap-n {
  margin: 8px 0 0;
  font-size: var(--fs-cap);
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------------- dark band */
.band-dark .h2 { color: var(--white); }
.band-dark .stmt-p { color: #A1A1A6; }

.apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: var(--gap-block);
}

.app {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--dark-2);
  border-radius: var(--r-md);
  border: .5px solid var(--dark-line);
  color: var(--grey);
  transition: transform .18s ease, border-color .18s ease;
}
.band-dark .app, .band-dark .app h3 { color: var(--white); }
.band-dark .app:hover { color: var(--white); border-color: #48484A; transform: translateY(-2px); text-decoration: none; }
.app h3 { margin: 0 0 10px; color: var(--white); }
.app p {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: #A1A1A6;
}
.app .price {
  margin-top: auto;
  padding-top: 18px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
}
/* The whole card is the link to the product's own page now, so this is an
   invitation rather than a second control. The arrow slides on hover. */
.app-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-body-s);
  color: #8E8E93;
  transition: color .18s ease, gap .18s ease;
}
.app-more::after { content: "\2192"; }
.band-dark .app:hover .app-more,
.band-dark .app:focus-visible .app-more { color: var(--white); gap: 10px; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.stat {
  padding: 24px 22px;
  background: var(--dark-2);
  border: .5px solid var(--dark-line);
  border-radius: var(--r-md);
}
.stat b {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--white);
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-cap);
  color: #A1A1A6;
}

/* ------------------------------------------------------------ fails list */
.fails {
  max-width: 44em;
  margin: var(--gap-block) 0 0;
  padding: 0;
  list-style: none;
  border-top: .5px solid var(--hair);
}

.fail {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: .5px solid var(--hair);
}

.fail-x {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--red-bg);
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.fail h3 {
  margin: 0 0 6px;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.3;
}
.fail p {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--muted);
}

/* ----------------------------------------------------------- grid/panel */
.grid {
  display: grid;
  gap: 18px;
  margin-top: var(--gap-block);
}
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.panel {
  padding: 26px 24px;
  background: var(--grey-2);
  border: .5px solid rgba(0, 0, 0, .04);
  border-radius: var(--r-md);
}
.band-grey .panel, .band-grey-2 .panel { background: var(--white); }
.panel h3 { margin: 0 0 8px; }
.panel p {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--muted);
}

.num {
  display: block;
  margin-bottom: 10px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blue);
}

/* ---------------------------------------------------------------- pricing */
.price-card {
  max-width: 520px;
  margin: var(--gap-block) auto 0;
  padding: 44px 40px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  text-align: center;
}
.price-card .amount {
  font-size: clamp(3.4rem, 9vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
}
.price-card .once {
  margin: 10px 0 24px;
  font-size: var(--fs-body-s);
  color: var(--muted);
}
.price-card h3 { margin: 0 0 6px; }
.price-card .price-note {
  margin: 0 0 24px;
  font-size: var(--fs-cap);
  color: var(--muted-2);
}
.price-card .btn { width: 100%; }

.incl {
  margin: 26px 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: .5px solid var(--hair-soft);
  text-align: left;
}
.incl li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 26px;
  font-size: var(--fs-body-s);
  color: var(--ink-2);
  line-height: 1.45;
}
.incl li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: var(--fs-cap);
  color: var(--ink-2);
  background: var(--grey-2);
  border: .5px solid var(--hair-soft);
  border-radius: 980px;
}
.pill b { font-weight: 600; color: var(--ink); }

.fineprint {
  margin: 26px auto 0;
  max-width: 62ch;
  font-size: var(--fs-cap);
  line-height: 1.55;
  color: var(--muted-2);
  text-align: center;
}

/* -------------------------------------------------------------- cards row */
.hang-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--gap-block);
}

.hang {
  position: relative;
  padding-top: 18px;
}

.peg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 13px;
  height: 17px;
  margin-left: -6.5px;
  border-radius: 3px;
  background: linear-gradient(160deg, #E3BE8A, #BE8F55);
  box-shadow: var(--sh-1);
  z-index: 2;
}

.hang::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(160, 130, 95, 0), #B99A6B 12%, #B99A6B 88%, rgba(160, 130, 95, 0));
  z-index: 1;
}

.card {
  background: var(--white);
  border: .5px solid var(--hair-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.card-in {
  display: block;
  padding: 0 0 18px;
  color: var(--ink);
}
.card-in:hover { color: var(--ink); text-decoration: none; }

.card-shot {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px;
  background: var(--grey);
  overflow: hidden;
}
.card-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.card-name {
  display: block;
  margin: 0 16px 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.card-line {
  margin: 0 16px 12px;
  font-size: var(--fs-cap);
  line-height: 1.45;
  color: var(--muted);
}
.card-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 16px;
}
.card-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.card-price .num {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
}
.card-price .one {
  font-size: var(--fs-k);
  color: var(--muted-2);
}

.card-facts {
  margin-top: 14px;
  padding: 0 16px;
}

/* --------------------------------------------------------- product pages */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.step { padding-top: 16px; }
.step .card { padding: 24px 22px; }
.step .card-in { padding: 0; }
.step .k {
  margin: 0 0 10px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blue);
}
.step h3 { margin: 0 0 8px; }
.step p {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  margin-top: var(--gap-m);
}
.split .h2 { max-width: 18ch; }

.spec {
  margin: 0;
  border-top: .5px solid var(--hair);
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: .5px solid var(--hair);
}
.spec-row dt {
  font-size: var(--fs-body-s);
  color: var(--muted);
}
.spec-row dd {
  margin: 0;
  font-size: var(--fs-body-s);
  font-weight: 500;
  text-align: right;
  letter-spacing: -.01em;
}

.faq {
  max-width: 46em;
  margin-top: var(--gap-m);
  border-top: .5px solid var(--hair);
}
.faq details { border-bottom: .5px solid var(--hair); }
.faq summary {
  position: relative;
  padding: 20px 40px 20px 0;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.018em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 26px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--muted-2);
  border-bottom: 1.5px solid var(--muted-2);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .a {
  padding: 0 0 22px;
  max-width: 60ch;
  font-size: var(--fs-body-s);
  line-height: 1.55;
  color: var(--muted);
}

.cross {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: var(--gap-m);
  padding-top: 24px;
  border-top: .5px solid var(--hair);
  font-size: var(--fs-body-s);
  color: var(--muted);
}
.cross p { margin: 0; }

/* ------------------------------------------------------------- galleries */
.gal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: var(--gap-block);
}
.gal figure { margin: 0; }
.gal figure.lead { grid-column: 1 / -1; }

.shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--grey);
  border: .5px solid var(--hair-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .2s ease;
}
.shot-btn:hover { transform: translateY(-2px); }
.gal img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.gal figcaption {
  margin-top: 12px;
  font-size: var(--fs-cap);
  line-height: 1.5;
  color: var(--muted);
}

.lb {
  width: min(1200px, 94vw);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--dark);
  box-shadow: var(--sh-2);
}
.lb::backdrop { background: rgba(0, 0, 0, .82); }
.lb img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.lb-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--white);
  background: rgba(0, 0, 0, .45);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* ---------------------------------------------------------------- tables */
.tbl {
  width: 100%;
  margin-top: 32px;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
}
.tbl thead th {
  padding: 12px 14px;
  font-size: var(--fs-cap);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  border-bottom: .5px solid var(--hair);
}
.tbl td {
  padding: 16px 14px;
  vertical-align: top;
  border-bottom: .5px solid var(--hair-soft);
}
.tbl td.num {
  font-family: var(--mono);
  font-size: var(--fs-body-s);
  color: var(--ink);
  white-space: nowrap;
}
.tbl td small, .tbl td .small { margin: 4px 0 0; }
.tbl tr.suite td { font-weight: 600; }
.tbl-group td.grp {
  padding-top: 30px;
  font-family: var(--mono);
  font-size: var(--fs-cap);
  color: var(--muted);
  vertical-align: top;
  border-bottom: 0;
}

/* --------------------------------------------------------------- policies */
.pol {
  max-width: 74ch;
  padding-top: clamp(40px, 5vw, 72px);
}
.pol .h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.pol-body { margin-top: 34px; }
.pol-sec {
  padding: 24px 0 8px;
  border-top: .5px solid var(--hair);
}
.pol-sec h2 {
  margin: 0 0 12px;
  font-size: var(--fs-h3);
  scroll-margin-top: 80px;
}
.pol-sec p, .pol-sec li {
  line-height: 1.62;
  color: var(--ink-2);
}
.pol-sec ul { padding-left: 20px; }
.pol-contact {
  margin-top: var(--gap-block);
  padding: 26px;
  background: var(--grey);
  border-radius: var(--r-md);
}
.pol-contact h2 { margin: 0 0 8px; font-size: var(--fs-h3); }
.pol-contact p { margin: 0; color: var(--ink-2); }
.pol-back { margin-top: 36px; }

/* ------------------------------------------------------------- changelog */
.rels {
  margin-top: var(--gap-block);
  border-top: .5px solid var(--hair);
}
.rel {
  display: grid;
  grid-template-columns: minmax(96px, max-content) 1fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: .5px solid var(--hair);
}
.rel-ver { margin: 0; font-size: var(--fs-body-s); font-weight: 600; color: var(--ink); }
.rel ul { margin: 10px 0 0; padding-left: 18px; }
.rel li { font-size: var(--fs-body-s); color: var(--ink-2); line-height: 1.55; }

/* ----------------------------------------------------------------- footer */
.ft {
  margin-top: var(--gap-l);
  padding: 40px 0 56px;
  background: var(--grey);
  border-top: .5px solid var(--hair-soft);
  font-size: var(--fs-cap);
  color: var(--muted);
}
.ft a { color: var(--muted); }
.ft a:hover { color: var(--ink); }

.ft-top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: .5px solid var(--hair-soft);
}

.ft-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.ft-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  max-width: 46ch;
}

.ft-legal { margin-top: 20px; }

.ft-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: .5px solid var(--hair-soft);
}
.ft-langs a[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------- i18n bar */
.i18n-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 14px;
  /* 定高居中：left:50% 让可用宽度只有半个视口，写 max-content 才不会被折成三行 */
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  border-radius: 980px;
  box-shadow: var(--sh-2);
  font-size: var(--fs-cap);
}
.i18n-bar a { color: #2997FF; }
.i18n-dismiss {
  font-size: var(--fs-k);
  color: var(--muted-2);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------ breakpoints
   720 → mobile nav, 760 → single column caps/gallery, 900 → split/steps,
   1000 → tighter grids. The hero needs no entry of its own any more: it is one
   column at every width, and its headline measure is in ch. */
@media (max-width: 1000px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hang-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .price-strip { grid-template-columns: minmax(0, 1fr); }

  /* Eight nav items plus the language picker and the store button need 854px
     in one row; below that the bar runs off the edge of the window, so the
     drawer starts here rather than at 720. */
  .hd-in { gap: 12px; }
  .nav {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0 14px;
    background: var(--white);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: .5px solid rgba(0, 0, 0, .1);
  }
  .hd.open .nav { display: flex; }
  .nav a { width: 100%; padding: 11px var(--gut); font-size: .95rem; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 760px) {
  .caps { grid-template-columns: minmax(0, 1fr); }
  .gal { grid-template-columns: minmax(0, 1fr); }
  .faq { max-width: none; }
  .cta-strip { padding: 28px 22px; }
}

@media (max-width: 720px) {
  /* CJK 首屏标题：拉丁句子靠 max-width:23ch 掉最后一个词就很整齐，中文没有词边界，
     390 宽会断成「……的一」+「条线」；CJK 改成平衡换行并放宽到 20ch。 */
  html:lang(zh-Hans) .hero-home .h1,
  html:lang(zh-Hant) .hero-home .h1,
  html:lang(ja) .hero-home .h1,
  html:lang(ko) .hero-home .h1 { max-width: 20ch; text-wrap: balance; }
  :root { --gut: 18px; --gap-m: 48px; --gap-l: 68px; --gap-block: 28px; }

  .hd-buy { display: none; }

  .tbl thead { display: none; }
  .tbl tr { display: block; padding: 14px 0; border-bottom: .5px solid var(--hair-soft); }
  .tbl td {
    display: block;
    padding: 3px 0;
    border: 0;
  }
  .tbl td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-k);
    color: var(--muted-2);
  }
  .tbl td.num { font-size: var(--fs-body); }

  .rel { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .ft-top { flex-direction: column; }
  .i18n-bar { border-radius: var(--r-md); }
}

@media (max-width: 560px) {
  .hang-row { grid-template-columns: minmax(0, 1fr); max-width: min(400px, 100%); }
  .apps { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .lang-pick { display: none; }
  .price-card { padding: 34px 24px; }
  .quote { margin: 32px 0; }
  .fail { gap: 12px; }

  /* 语言提示条：手机上改成一个圆角卡片，正文占满一行，
     两个按钮换到第二行居中——否则正文被按钮挤成一列竖排的字。 */
  .i18n-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    text-align: center;
  }
  .i18n-bar > span { flex: 1 0 100%; }
  .i18n-bar .btn { flex: none; }
}

@media (max-width: 430px) {
  .buy-box { flex-direction: column; align-items: flex-start; gap: 14px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  h1, .h1 { font-size: 2.25rem; }
}

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