/* Vonode website (CHG-20261008-IOS-SITE-REDESIGN). Dark only, like the app.
   Visual system taken from the iOS app handoff (Design/handoff/README.md, "dark frosted glass").
   No webfonts: system stacks match the app (SF Pro / PingFang) on Apple devices. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0a0c11;
  --bg-elev: #12141b;
  --glass-1: rgba(255, 255, 255, .07);
  --glass-2: rgba(255, 255, 255, .08);
  --glass-3: rgba(255, 255, 255, .10);
  --stroke-1: rgba(255, 255, 255, .10);
  --stroke-2: rgba(255, 255, 255, .12);
  --stroke-3: rgba(255, 255, 255, .14);
  --highlight: rgba(255, 255, 255, .08);
  --sheet: rgba(26, 28, 34, .82);
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .72);
  --text-3: rgba(255, 255, 255, .60);
  --separator: rgba(255, 255, 255, .07);
  --accent: #93c5fd;
  --accent-bg: rgba(147, 197, 253, .12);
  --accent-line: rgba(147, 197, 253, .5);
  --ok: #4ade80;
  --ok-soft: #86efac;
  --ok-bg: rgba(74, 222, 128, .15);
  --warn: #fdba74;
  --warn-bg: rgba(253, 186, 116, .14);
  --danger: #fca5a5;
  --danger-bg: rgba(239, 68, 68, .14);
  --muted-bg: rgba(255, 255, 255, .08);
  --sms: #60a5fa;
  --call: #4ade80;
  --violet: #c4b5fd;
  --sky: #7dd3fc;
  --teal: #5eead4;
  --gold: #fde047;
  --amber: #fdba74;
  --glow-a: rgba(37, 99, 235, .42);
  --glow-b: rgba(34, 197, 94, .26);
  --glow-c: rgba(139, 92, 246, .22);
  --btn-fill: linear-gradient(180deg, rgba(147, 197, 253, .32), rgba(96, 165, 250, .16));
  --btn-stroke: rgba(147, 197, 253, .45);
  --btn-text: #dbeafe;
  --code-bg: rgba(0, 0, 0, .42);
  --code-text: #e2e8f0;
  --shadow: 0 30px 80px rgba(0, 0, 0, .45);
  --focus: #93c5fd;

  --radius-card: 24px;
  --radius-small: 18px;
  --radius-pill: 999px;
  --radius-tile: 12px;
  --radius-button: 27px;
  --wrap: 1200px;
  --gutter: 16px;
  --header-h: 64px;

  --font-latin: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-hans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-hant: "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans CJK TC", "Source Han Sans TC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --header-h: 72px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-latin);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The two blurred glows of every app screen: blue top-left, green lower-right. */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
body::before { width: 900px; height: 900px; left: -320px; top: -420px; background: radial-gradient(closest-side, var(--glow-a), transparent); }
body::after { width: 900px; height: 900px; right: -360px; bottom: -460px; background: radial-gradient(closest-side, var(--glow-b), transparent); }

:lang(zh-Hans) body, body:lang(zh-Hans) { font-family: var(--font-latin), var(--font-hans); }
:lang(zh-Hant) body, body:lang(zh-Hant) { font-family: var(--font-latin), var(--font-hant); }
body:lang(zh) { line-height: 1.8; letter-spacing: .01em; line-break: strict; text-autospace: normal; text-spacing-trim: normal; }

img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--bg-elev); color: var(--text); }
.skip-link:focus { top: 12px; }

h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 700; text-wrap: balance; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4 { letter-spacing: .01em; line-height: 1.3; }
/* a clause of a Chinese heading (common.phrases): wrap after the clause's punctuation, not inside it */
.ph { display: inline-block; }
h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.75rem); }
h3 { font-size: 1.2rem; letter-spacing: -.012em; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: .9em; }
code, pre, kbd { font-family: var(--font-mono); font-size: .88em; }
:not(pre) > code { padding: .1em .38em; border-radius: 6px; background: var(--muted-bg); color: var(--text); overflow-wrap: anywhere; }
strong { font-weight: 650; }
.num { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--text-2); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.lead { color: var(--text-2); font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); line-height: 1.6; max-width: 40em; }
:lang(zh) .lead { line-height: 1.85; }
.muted { color: var(--text-2); }
.small { font-size: 14px; line-height: 1.55; }
:lang(zh) .small { line-height: 1.75; }
.caption { color: var(--text-3); font-size: 13px; line-height: 1.5; }

/* ---------- Glass surfaces ---------- */
.glass {
  background: var(--glass-2);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--highlight);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
}
.card { padding: 24px; }
@media (min-width: 1024px) { .card { padding: 28px; } }

/* ---------- Buttons, pills, tiles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-button);
  border: 1px solid var(--stroke-3);
  background: var(--glass-3);
  color: var(--text);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--highlight);
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { text-decoration: none; background: var(--glass-3); transform: translateY(-1px); }
.btn-primary { background: var(--btn-fill); border-color: var(--btn-stroke); color: var(--btn-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px rgba(37, 99, 235, .22); }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: 11px; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; white-space: nowrap; background: var(--muted-bg); color: var(--text-2); }
.pill svg { width: 13px; height: 13px; }
.pill-ok { background: var(--ok-bg); color: var(--ok-soft); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-accent { background: var(--accent-bg); color: var(--accent); }
.pill-gold { background: rgba(234, 179, 8, .14); color: var(--gold); }

.tile { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-tile); background: var(--muted-bg); color: var(--text); }
.tile svg { width: 22px; height: 22px; }
.tile-sms { background: rgba(59, 130, 246, .18); color: var(--sms); }
.tile-call { background: rgba(34, 197, 94, .16); color: var(--call); }
.tile-sky { background: rgba(14, 165, 233, .16); color: var(--sky); }
.tile-violet { background: rgba(139, 92, 246, .18); color: var(--violet); }
.tile-teal { background: rgba(20, 184, 166, .16); color: var(--teal); }
.tile-amber { background: rgba(245, 158, 11, .16); color: var(--amber); }
.tile-gold { background: rgba(234, 179, 8, .16); color: var(--gold); }

/* ---------- Header: floating capsule, like the app tab bar ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 12px 0; }
.site-header .bar {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px 8px 6px 16px;
  border-radius: 32px;
  background: var(--sheet);
  border: 1px solid var(--stroke-3);
  box-shadow: inset 0 1px 0 var(--highlight), 0 12px 40px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand img, .brand svg { width: 32px; height: 32px; border-radius: 9px; }
.nav { display: none; align-items: center; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; color: var(--text-2); font-size: 15px; font-weight: 550; text-decoration: none; }
.nav a:hover { color: var(--text); background: var(--muted-bg); }
.nav a[aria-current="page"] { background: var(--text); color: var(--bg); }
.tools { display: flex; align-items: center; gap: 4px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: var(--muted-bg); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
/* language switcher: a disclosure, no auto-redirect */
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 22px; color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { background: var(--muted-bg); color: var(--text); }
.lang summary svg { width: 18px; height: 18px; }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; margin: 0; padding: 6px; list-style: none; border-radius: 20px; background: var(--sheet); border: 1px solid var(--stroke-3); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.lang li a { display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 14px; color: var(--text); text-decoration: none; font-size: 15px; }
.lang li a:hover { background: var(--muted-bg); }
.lang li a[aria-current="true"]::after { content: "✓"; color: var(--accent); font-weight: 700; }
.lang li a span { color: var(--text-3); font-size: 13px; }

.menu-btn { display: inline-grid; }
.mobile-nav { display: none; margin-top: 8px; padding: 8px; border-radius: 24px; background: var(--sheet); border: 1px solid var(--stroke-3); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.mobile-nav.open { display: grid; }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 16px; color: var(--text); font-weight: 550; text-decoration: none; }
.mobile-nav a[aria-current="page"] { background: var(--muted-bg); }
@media (min-width: 900px) { .nav { display: flex; } .menu-btn, .mobile-nav, .mobile-nav.open { display: none; } }

.lang-hint { display: none; }
.lang-hint.show { display: block; }
.lang-hint .glass { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 10px 10px 18px; border-radius: 22px; font-size: 15px; }
.lang-hint .glass > span { margin-right: auto; }

/* ---------- Sections ---------- */
main { display: block; }
.section { padding: 64px 0; }
@media (min-width: 1024px) { .section { padding: 96px 0; } }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head h2 + p { margin-top: 16px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Home: hero ---------- */
.hero { padding: 40px 0 56px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero h1 { max-width: 14ch; }
:lang(zh) .hero h1 { max-width: 13em; font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); }
.hero .lead { margin-top: 22px; }
.hero .btn-row { margin-top: 32px; }
.hero-note { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-3); font-size: 14px; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 16px; height: 16px; color: var(--ok); }
@media (min-width: 1024px) {
  .hero { padding: 56px 0 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; }
}

/* phone frames with real app captures. The two phones sit side by side (staggered, never overlapping) and the
   floating chips only cover the empty lower half of the My Numbers capture (data-free on its <img>, checked by
   scripts/site/layout_probe.js) or the free space above the second phone, never text or controls of a capture. */
.phones { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 20px; align-items: start; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto; }
.phone {
  position: relative; min-width: 0;
  padding: 10px;
  border-radius: 46px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
  border: 1px solid var(--stroke-3);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.phone img { display: block; width: 100%; border-radius: 37px; background: #0a0c11; }
.phones .phone + .phone { margin-top: 96px; }
.float-chip { position: absolute; z-index: 3; background: var(--sheet); display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 20px; font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.float-chip .tile { width: 34px; height: 34px; border-radius: 10px; }
.float-chip .tile svg { width: 18px; height: 18px; }
.float-chip small { display: block; color: var(--text-3); font-size: 12px; font-weight: 500; }
/* chip-1 lives in the first phone: 48% of its height is inside the empty band of the capture at every width */
.chip-1 { left: -16px; top: 48%; }
/* chip-2 sits above the second phone, in the space the stagger leaves free. It may not reach the first phone
   (max-width = one column + the 16px overhang); a wider system font (e.g. Microsoft YaHei) wraps the text instead,
   and the 96px stagger leaves room for a third line. */
.chip-2 { right: -16px; top: 8px; max-width: calc(50% + 6px); white-space: normal; }
@media (max-width: 639px) {
  .phones { grid-template-columns: minmax(0, 240px); }
  .phones .phone + .phone { display: none; }
  /* one phone: both chips stacked inside the empty band of the My Numbers capture */
  .chip-2 { top: calc(48% + 64px); right: -16px; max-width: none; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .hero-grid > .phones { justify-self: center; }
  .phones { grid-template-columns: repeat(2, minmax(0, 270px)); }
}

/* how it works: phone - gateway - network */
.flow { display: grid; gap: 16px; }
.flow-node { display: flex; gap: 16px; align-items: flex-start; padding: 22px; }
.flow-node h3 { font-size: 18px; margin-bottom: 6px; }
.flow-link { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-3); font-size: 13px; font-weight: 600; text-align: center; }
.flow-link::before, .flow-link::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); }
@media (max-width: 899px) {
  .flow-link { flex-direction: column; gap: 6px; }
  .flow-link::before, .flow-link::after { flex: none; width: 1px; height: 18px; background: var(--accent-line); }
}
@media (min-width: 900px) {
  .flow { grid-template-columns: 1fr 150px 1fr 150px 1fr; align-items: center; gap: 0; }
  .flow-node { flex-direction: column; min-height: 230px; }
}

/* feature bento */
.bento { display: grid; gap: 16px; }
.feature { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.feature h3 { margin-top: 4px; }
.feature p { color: var(--text-2); font-size: 16px; }
.feature .shot { margin: 8px -24px -24px; display: flex; justify-content: center; padding-top: 4px; }
.feature .shot img { width: 78%; max-width: 300px; border-radius: 28px 28px 0 0; border: 1px solid var(--stroke-3); border-bottom: 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); aspect-ratio: 540 / 560; object-fit: cover; object-position: top; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* two columns: an odd last card takes the whole row instead of leaving an empty cell */
@media (min-width: 640px) and (max-width: 1023px) { .bento > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento .f-wide { grid-column: span 3; }
  .bento .f-third { grid-column: span 2; }
}
/* the capture runs to the card edges: the negative margin equals the .card padding (24px, 28px from 1024px) */
@media (min-width: 1024px) { .feature .shot { margin: 8px -28px -28px; } }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

/* plans */
.plans { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; gap: 16px; }
.plan-head { display: flex; align-items: center; gap: 14px; }
.plan h3 { font-size: 22px; }
.plan .sub { color: var(--text-2); }
.plan-sub-gold { border-color: rgba(253, 224, 71, .28); background: linear-gradient(160deg, rgba(234, 179, 8, .10), var(--glass-2) 55%); }
.checks { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); }
.checks li svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ok); }
.checks li.no svg { color: var(--text-3); }
.checks li.no { color: var(--text-2); }
.plan-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--separator); color: var(--text-3); font-size: 14px; }

/* trust row */
.trust { display: grid; gap: 16px; }
@media (min-width: 900px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust .card { display: flex; flex-direction: column; gap: 12px; }
.trust p { color: var(--text-2); font-size: 16px; }

.cta-band { display: grid; gap: 24px; align-items: center; padding: 32px; background: radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, .20), transparent 60%), radial-gradient(100% 140% at 100% 100%, rgba(34, 197, 94, .14), transparent 60%), var(--glass-2); }
.cta-band h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; padding: 48px; } }

/* ---------- Footer ---------- */
.site-footer { margin-top: 48px; padding: 48px 0 40px; border-top: 1px solid var(--separator); color: var(--text-2); font-size: 15px; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-grid .foot-brand { grid-column: 1 / -1; }
.foot-grid h2 { margin-bottom: 12px; color: var(--text); font-size: 14px; font-weight: 650; letter-spacing: .02em; }
.foot-grid ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.foot-grid a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-2); text-decoration: none; }
.foot-grid a:hover { color: var(--text); text-decoration: underline; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--separator); color: var(--text-3); font-size: 13px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); } .foot-grid .foot-brand { grid-column: auto; } }

/* ---------- Inner pages ---------- */
.page-hero { padding: 32px 0 24px; }
.page-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem); max-width: 16ch; }
:lang(zh) .page-hero h1 { max-width: none; }
.page-hero .lead { margin-top: 18px; }
@media (min-width: 1024px) { .page-hero { padding: 56px 0 32px; } }
.crumbs { display: flex; gap: 8px; margin-bottom: 18px; color: var(--text-3); font-size: 14px; }
.crumbs a { color: var(--text-2); text-decoration: none; }

.steps-summary { display: grid; gap: 10px; margin-top: 32px; padding: 0; list-style: none; counter-reset: s; }
.steps-summary li { counter-increment: s; }
.steps-summary a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 20px; color: var(--text); text-decoration: none; }
.steps-summary a::before { content: counter(s); display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent); font-weight: 700; font-size: 15px; }
.steps-summary small { display: block; color: var(--text-3); font-size: 13px; }
@media (min-width: 640px) { .steps-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 32px; }
.doc > *, .hero-grid > *, .plans > *, .bento > * { min-width: 0; }
.doc-toc { display: none; }
@media (min-width: 1024px) {
  .doc { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
  .doc-toc { display: block; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
  .doc-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--separator); }
  .doc-toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-2); font-size: 15px; text-decoration: none; }
  .doc-toc a:hover { color: var(--text); border-left-color: var(--accent-line); }
  .doc-toc a.active { color: var(--text); border-left-color: var(--accent); }
  .doc-toc .toc-title { margin-bottom: 12px; color: var(--text-3); font-size: 13px; font-weight: 600; }
}
.doc-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.doc-section + .doc-section { margin-top: 64px; }
.doc-section > h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.doc-section > h2 .n { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent); font-size: 18px; }
.doc-section > p, .doc-section > .prose { color: var(--text-2); max-width: 46em; }
.doc-section > p + .grid-3, .doc-section > p + .path-switch, .doc-section > p + .step-list { margin-top: 24px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }

.grid-3 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.need { display: flex; flex-direction: column; gap: 12px; }
.need ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--text-2); font-size: 15px; }
.need li { display: flex; gap: 8px; }
.need li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .65em; border-radius: 50%; background: var(--accent); }
.need .more { margin-top: auto; font-size: 15px; font-weight: 600; }

/* segmented path switch: radio inputs, works without JS */
.path-switch { position: relative; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 22px; background: var(--glass-2); border: 1px solid var(--stroke-2); }
.segmented label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 18px; color: var(--text-2); font-size: 15px; font-weight: 600; cursor: pointer; }
.segmented label svg { width: 18px; height: 18px; flex: none; }
.segmented label small { font-weight: 500; color: var(--text-3); font-size: 12px; }
.path-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#path-docker:checked ~ .segmented label[for="path-docker"],
#path-systemd:checked ~ .segmented label[for="path-systemd"] { background: var(--text); color: var(--bg); }
#path-docker:checked ~ .segmented label[for="path-docker"] small,
#path-systemd:checked ~ .segmented label[for="path-systemd"] small { color: inherit; opacity: .7; }
#path-docker:focus-visible ~ .segmented label[for="path-docker"],
#path-systemd:focus-visible ~ .segmented label[for="path-systemd"] { outline: 3px solid var(--focus); outline-offset: 2px; }
.path-panel { display: none; margin-top: 20px; }
#path-docker:checked ~ .panel-docker, #path-systemd:checked ~ .panel-systemd { display: block; }

.step-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.step { counter-increment: st; position: relative; padding: 22px 22px 22px 76px; }
.step::before { content: counter(st); position: absolute; left: 22px; top: 18px; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--glass-3); border: 1px solid var(--stroke-3); color: var(--text); font-weight: 700; font-size: 15px; }
.step h3 { font-size: 18px; line-height: 1.4; margin-top: 4px; }
.step > p, .step > .prose { margin-top: 6px; color: var(--text-2); font-size: 16px; }
.step > * { min-width: 0; }
.step .codeblock { margin-top: 12px; }
.step .codeblock + .codeblock { margin-top: 8px; }
@media (max-width: 639px) { .step { padding: 20px; } .step::before { position: static; display: grid; margin-bottom: 12px; } }

.grid-3 > *, .shots > *, .ops > *, .hosts > *, .faq > *, .trust > *, .flow > * { min-width: 0; }
/* The copy button keeps its own strip on the right (padding of .codeblock), outside the scrolling <pre>,
   so a long command never runs under it. Wide screens scroll long lines; phones wrap them anywhere. */
.codeblock { max-width: 100%; position: relative; padding-right: 52px; border-radius: var(--radius-small); background: var(--code-bg); border: 1px solid var(--stroke-1); }
.codeblock pre { margin: 0; padding: 16px 8px 16px 18px; overflow-x: auto; color: var(--code-text); font-size: 14px; line-height: 1.65; white-space: pre; tab-size: 2; }
.codeblock pre code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: inherit; }
@media (max-width: 639px) { .codeblock pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; } }
.codeblock .c { color: #94a3b8; }
.codeblock .p { color: #86efac; user-select: none; -webkit-user-select: none; }
.copy-btn { position: absolute; top: 8px; right: 6px; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: #1e2533; color: #e2e8f0; cursor: pointer; }
.copy-btn:hover { background: #2a3344; }
.copy-btn svg { width: 18px; height: 18px; }
.copy-btn .i-check { display: none; color: #86efac; }
.copy-btn.done .i-copy { display: none; }
.copy-btn.done .i-check { display: block; }
.no-js .copy-btn { display: none; }
.no-js .codeblock { padding-right: 0; }

.notice { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-small); background: var(--warn-bg); border: 1px solid rgba(253, 186, 116, .32); color: var(--text); font-size: 15px; }
.notice > svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--warn); }
.notice p + p { margin-top: .5em; }
.notice-info { background: var(--accent-bg); border-color: var(--accent-line); }
.notice-info > svg { color: var(--accent); }
.panel-docker > .notice, .panel-systemd > .notice { margin-bottom: 14px; }

.shots { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 640px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shot-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.shot-card img { display: block; width: 100%; max-width: 270px; margin: 0 auto; border-radius: 30px; border: 1px solid var(--stroke-3); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.shot-card figcaption { color: var(--text-2); font-size: 15px; }
.shot-card figcaption strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
figure { margin: 0; }
.term { margin-top: 18px; padding: 10px; border-radius: var(--radius-small); }
.term img { display: block; width: 100%; border-radius: 12px; }
.term figcaption { padding: 12px 8px 4px; color: var(--text-2); font-size: 15px; }

.ops { display: grid; gap: 12px; }
@media (min-width: 900px) { .ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.op { padding: 18px; }
.op h3 { font-size: 16px; margin-bottom: 10px; }
.op .codeblock pre { font-size: 13px; }
.op p { color: var(--text-2); font-size: 14px; margin-top: 10px; }

.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--radius-small); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(225deg) translateX(-2px); }
.faq .faq-body { padding: 0 20px 20px; color: var(--text-2); font-size: 16px; }
.faq .faq-body .codeblock { margin-top: 12px; }

/* ---------- Hardware page ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; }
.legend > div { display: flex; gap: 10px; align-items: flex-start; max-width: 360px; font-size: 14px; color: var(--text-2); }
.legend .pill { flex: none; }

.hosts { display: grid; gap: 16px; }
@media (min-width: 900px) { .hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.host { display: flex; flex-direction: column; gap: 16px; }
.host-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.host-head h3 { font-size: 22px; }
.host dl { display: grid; gap: 0; margin: 0; }
.host dl > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--separator); font-size: 15px; }
.host dt { color: var(--text-3); }
.host dd { margin: 0; color: var(--text); }
.host[data-status="planned"] dd { color: var(--text-2); }
.host .host-foot { color: var(--text-3); font-size: 13px; }
@media (max-width: 479px) { .host dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* model matrix: a table only from 1200px (nine columns need ~1100px; narrower tables squeezed the module and
   notes columns to a word per line), cards below */
.matrix-wrap { border-radius: var(--radius-card); overflow: hidden; }
.matrix { width: 100%; border-collapse: collapse; font-size: 15px; }
.matrix caption { padding: 20px 24px 0; text-align: left; color: var(--text-3); font-size: 13px; caption-side: bottom; padding-bottom: 18px; }
.matrix th, .matrix td { padding: 14px 12px; text-align: left; vertical-align: middle; border-top: 1px solid var(--separator); }
.matrix thead th { border-top: 0; color: var(--text-3); font-size: 13px; font-weight: 600; white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { padding-left: 24px; }
.matrix th:last-child, .matrix td:last-child { padding-right: 24px; }
.matrix tbody th { font-weight: 650; }
.matrix tbody th small { display: block; color: var(--text-3); font-size: 13px; font-weight: 500; }
.matrix td.cap { text-align: center; }
.matrix thead th.cap { text-align: center; }
.cap-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.cap-mark svg { width: 16px; height: 16px; }
.cap-yes { background: var(--ok-bg); color: var(--ok-soft); }
.cap-code { background: var(--accent-bg); color: var(--accent); }
.cap-no { background: var(--muted-bg); color: var(--text-3); }
.cap-cond { background: var(--warn-bg); color: var(--warn); }
.cap-label { display: none; }
.matrix .src { color: var(--text-3); font-size: 13px; }
@media (min-width: 1200px) { .matrix td.num { white-space: nowrap; } .matrix tbody th { min-width: 9em; } }
@media (max-width: 1199px) {
  .matrix-wrap { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix td, .matrix th { display: block; }
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* the caption stays below the cards, as below the table (caption-side: bottom) */
  .matrix { display: flex; flex-direction: column; }
  .matrix caption { display: block; order: 1; padding: 14px 4px 0; }
  .matrix tbody { display: grid; gap: 14px; }
  .matrix tr { padding: 18px 20px; border-radius: var(--radius-card); background: var(--glass-2); border: 1px solid var(--stroke-2); box-shadow: inset 0 1px 0 var(--highlight); }
  .matrix th, .matrix td { padding: 8px 0; border-top: 1px solid var(--separator); }
  .matrix th:first-child, .matrix td:first-child { padding-left: 0; }
  .matrix th:last-child, .matrix td:last-child { padding-right: 0; }
  .matrix tbody th { border-top: 0; padding-top: 0; font-size: 18px; }
  .matrix td { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .matrix td::before { content: attr(data-label); color: var(--text-3); font-size: 14px; }
  .matrix td.cap { text-align: right; }
  .matrix td.src { display: block; }
  .matrix td.src::before { display: block; margin-bottom: 2px; }
  .cap-label { display: inline; margin-left: 8px; color: var(--text-2); font-size: 14px; }
  .matrix td::before { flex: 0 0 auto; white-space: nowrap; }
  .matrix td.cap > span:first-of-type { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 0; text-align: right; }
}
@media (min-width: 640px) and (max-width: 1199px) {
  .matrix tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cap-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; color: var(--text-2); font-size: 14px; }
.cap-key span { display: inline-flex; align-items: center; gap: 8px; }

.bullets { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bullets li { display: flex; gap: 12px; padding: 16px 18px; font-size: 16px; color: var(--text-2); }
.bullets li svg { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.bullets li strong { color: var(--text); }
.bullets.no li svg { color: var(--danger); }
.bullets.info li svg { color: var(--accent); }

.updated { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding: 20px 24px; font-size: 15px; color: var(--text-2); }

.cap-unsup { background: var(--danger-bg); color: var(--danger); }

/* App Store availability note (Chinese pages) */
.store-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; max-width: 46em; color: var(--text-2); font-size: 14px; }
.store-note svg { flex: none; width: 18px; height: 18px; margin-top: .25em; color: var(--accent); }
.hero .store-note { margin-top: 12px; color: var(--text-3); }
.inline-label { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* long-form guide */
.guide-intro { color: var(--text-2); max-width: 46em; margin-bottom: 48px; }
.guide .doc-section > h3 { margin: 32px 0 10px; font-size: 1.25rem; }
.guide .doc-section > p { margin-top: 14px; }
.guide .doc-section > .codeblock, .guide .doc-section > .notice, .guide .doc-section > figure, .guide .doc-section > .faq,
.guide .doc-section > .ops, .guide .doc-section > .table-wrap { margin-top: 16px; }
.prose-list { margin: 14px 0 0; padding-left: 1.2em; color: var(--text-2); max-width: 46em; }
.prose-list li + li { margin-top: .6em; }
.prose-list strong { color: var(--text); }
.op-wide { grid-column: 1 / -1; }
.shot-pair { padding: 20px; }
.shot-pair-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 580px; }
.shot-pair.single .shot-pair-imgs { grid-template-columns: minmax(0, 1fr); max-width: 280px; }
.shot-pair img { display: block; width: 100%; border-radius: 26px; border: 1px solid var(--stroke-3); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.shot-pair figcaption { margin-top: 14px; color: var(--text-2); font-size: 15px; max-width: 46em; }
.table-wrap { border-radius: var(--radius-small); overflow-x: auto; }
.cmd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmd-table th, .cmd-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--separator); }
.cmd-table thead th { border-top: 0; color: var(--text-3); font-size: 13px; font-weight: 600; }
.cmd-table td:first-child { color: var(--text-2); min-width: 12em; }
.cmd-table code { overflow-wrap: anywhere; }
/* phones: one row per card-like block (task above, command below) instead of two squeezed columns */
@media (max-width: 639px) {
  .cmd-table, .cmd-table tbody, .cmd-table tr, .cmd-table td { display: block; }
  .cmd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmd-table tr { padding: 12px 16px; border-top: 1px solid var(--separator); }
  .cmd-table tbody tr:first-child { border-top: 0; }
  .cmd-table th, .cmd-table td { padding: 0; border-top: 0; }
  .cmd-table td:first-child { min-width: 0; margin-bottom: 6px; }
}

/* support, company, status */
.support-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.support-grid > * { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.support-grid p { color: var(--text-2); font-size: 16px; }
.support-grid .btn { align-self: flex-start; }
.h3 { font-size: 1.2rem; letter-spacing: -.012em; }
.status-list { display: grid; padding: 8px 24px; max-width: 760px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; border-top: 1px solid var(--separator); }
.status-row:first-child { border-top: 0; }
.status-pill { font-size: 13px; }

/* legal and other long text */
.legal { max-width: 860px; }
.legal h2 { margin: 36px 0 12px; font-size: 1.35rem; }
/* only a heading that really opens the card loses its top margin (the notices card starts with a paragraph) */
.legal > h2:first-child, .legal > #notice-content:first-child > h2:first-child { margin-top: 8px; }
.legal p { color: var(--text-2); }
.legal p + p { margin-top: .9em; }
.legal ul, .legal ol { color: var(--text-2); padding-left: 1.3em; }
.legal li + li { margin-top: .45em; }
.legal pre:not(.license) { padding: 14px 16px; border-radius: 12px; background: var(--code-bg); color: var(--code-text); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.legal .notice { margin-top: 20px; margin-bottom: 16px; }
pre.license { margin: 14px 0 0; padding: 16px 18px; max-height: 420px; overflow: auto; border-radius: 12px; background: var(--code-bg); color: var(--code-text); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
.legal-notice { margin-top: 18px; max-width: 46em; }
.lang-404 { margin-top: 18px; color: var(--text-2); }
.lang-404 p + p { margin-top: .4em; }

/* App Review pages (English only) */
.review-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 960px) { .review-layout { grid-template-columns: 340px minmax(0, 1fr); } }
.review-layout > * { min-width: 0; }
.qr-shell { padding: 14px; border-radius: 20px; background: #ffffff; }
.qr-shell img { display: block; width: 100%; }
.review-card h3 { margin: 18px 0 8px; }
.review-card p + p { margin-top: .8em; }
.demo { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.demo video { display: block; width: min(100%, 360px); aspect-ratio: 590 / 1280; border: 1px solid var(--stroke-3); border-radius: 1.25rem; background: #000; }
.demo .notes { flex: 1 1 20rem; min-width: 0; }
.demo .notes h2 { margin-top: 0; }
.demo ol { padding-left: 1.3rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { body::before, body::after, .site-header, .copy-btn { display: none; } .glass { backdrop-filter: none; background: none; } }