/* Snippet landing: hand-designed, no script. Identity kept from the product: coral to orange gradient, app-window mock-up.
   Text on the gradient is dark slate (white on #ffb347 fails contrast); every muted text colour is at least AA on its background.
   All demos are CSS keyframes that only toggle visibility and position (never opacity, so text contrast is the same at every
   instant); prefers-reduced-motion shows a still frame instead. */

:root {
  color-scheme: light;
  --coral: #ff7f66;
  --coral-deep: #ff6b5b;
  --ink: #1f2937;
  --ink-soft: #374151;
  --muted: #6b7280;
  --tag: #4b5563;
  --red-text: #b42318;
  --line: #f3f4f6;
  --mint: #6ee7b7;
  --night: #0f1117;
  --grad: linear-gradient(135deg, #ff6b5b 0%, #ff8c5a 40%, #ffb347 100%);
  --wrap: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }
kbd { font: inherit; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: rgba(31, 41, 55, .1); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; top: 8px; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
section[id] { scroll-margin-top: 64px; }

/* ── nav ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav__in { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }
.brand { flex-shrink: 0; }
.brand__lockup { display: block; width: auto; height: 28px; max-width: none; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-radius: 8px; }
.nav__link:hover { color: var(--red-text); }
.nav__cta { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; margin-left: 8px; padding: 0 18px; font-size: .875rem; font-weight: 700; color: var(--ink); background: var(--coral); border-radius: 999px; text-decoration: none; transition: background .15s, transform .1s; }
.nav__cta:hover { background: var(--coral-deep); transform: translateY(-1px); }
/* The language link (rendered by FE landing_i18n.mjs): always visible, at every width, in the target language. */
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: 8px; white-space: nowrap; }
.lang-switch:hover { color: var(--red-text); }

/* Chinese page: CJK system fonts, no negative tracking on headings, headings break at punctuation (keep-all) with a safety
   wrap so a long phrase can never overflow a 320px screen; strict line-break keeps punctuation off the start of a line. */
html:lang(zh-CN) body { font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; line-break: strict; }
html:lang(zh-CN) :is(.hero__title, .hero__sub, .h2, .cta__h, .fcard__h, .step__h) { letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; }
/* Chinese paragraphs: no one-glyph last line ("口。" alone), the browser rebalances the last lines. */
html:lang(zh-CN) :is(p, li) { text-wrap: pretty; }
/* Each Chinese clause of the title ("任何设备都能粘贴。" is 9 glyphs) stays on one line down to a 280px column. */
html:lang(zh-CN) .hero__title { font-size: clamp(1.85rem, 4.6vw, 3.5rem); line-height: 1.18; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; font-size: .95rem; font-weight: 800; text-decoration: none; border-radius: 999px; border: 2px solid transparent; transition: transform .1s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--red-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.btn--light:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.btn--ghost { color: var(--ink); border-color: var(--ink); background: rgba(255, 255, 255, .25); }
.btn--ghost:hover { background: rgba(255, 255, 255, .45); }
.btn--coral { background: var(--coral); color: #1a1a1a; border-radius: 10px; }
.btn--coral:hover { background: #ff9580; }
.btn--dark { background: var(--ink); color: #fff; }

/* ── hero ── */
.hero { background: var(--grad); padding: 72px 0 80px; overflow: hidden; color: #1a1a2e; }
.hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.badge { display: inline-flex; padding: 6px 14px; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: rgba(31, 41, 55, .92); border-radius: 999px; }
.hero__title { font-size: clamp(2.4rem, 5vw, 3.9rem); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; color: #1a1a2e; text-wrap: balance; }
.hero__l2 { display: block; text-wrap: balance; }
.hero__sub { font-size: 1.15rem; line-height: 1.55; color: #26263a; max-width: 30em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__stage { display: flex; justify-content: center; }
.win { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(60, 20, 10, .3); color: var(--ink); }
.win__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dot--r { background: #ff5f57; } .dot--y { background: #ffbd2e; } .dot--g { background: #28ca41; }
.win__addr { flex: 1; margin-left: 8px; padding: 3px 10px; font-size: .72rem; color: var(--muted); background: #fff; border-radius: 6px; text-align: center; }
.win__body { display: flex; height: 292px; }
.side { flex: none; width: 90px; display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; background: #fafafa; border-right: 1px solid var(--line); }
.side__item { padding: 5px 8px; font-size: .7rem; color: var(--muted); border-radius: 6px; }
.side__item--on { color: var(--red-text); font-weight: 700; background: #fff1ef; }
.cards { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; animation: cardOn 14s ease-in-out infinite; }
.card__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.card__title { flex: 1; min-width: 0; font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__tag { padding: 2px 6px; font-size: .62rem; color: var(--tag); background: #f3f4f6; border-radius: 4px; }
.card__copy { padding: 3px 8px; font-size: .62rem; font-weight: 700; color: var(--ink); background: var(--coral); border-radius: 5px; animation: copyOn 14s ease-in-out infinite; }
.c2, .c2 .card__copy { animation-delay: 2.8s; } .c3, .c3 .card__copy { animation-delay: 5.6s; }
.c4, .c4 .card__copy { animation-delay: 8.4s; } .c5, .c5 .card__copy { animation-delay: 11.2s; }
.toast { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 14px; font-size: .7rem; font-weight: 700; color: #fff; background: rgba(31, 41, 55, .94); border-radius: 999px; white-space: nowrap; visibility: hidden; animation: toast 2.8s steps(1, end) infinite; }
@keyframes cardOn { 0%, 22%, 100% { border-color: var(--line); background: #fff; box-shadow: none; } 3%, 18% { border-color: var(--coral); background: #fff8f7; box-shadow: 0 0 0 2px rgba(255, 127, 102, .14); } }
@keyframes copyOn { 0%, 22%, 100% { background: var(--coral); } 8%, 18% { background: #22c55e; } }
@keyframes toast { 0%, 20% { visibility: hidden; } 21%, 72% { visibility: visible; } 73%, 100% { visibility: hidden; } }

/* ── trust ── */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; padding: 20px 24px; background: var(--ink); }
.trust li { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: rgba(255, 255, 255, .92); }

/* ── shared headings ── */
.h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.15; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.h2--dark { color: #f0f4ff; text-align: left; font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.lede { max-width: 38em; margin: 12px auto 0; font-size: 1rem; color: var(--muted); text-align: center; }
.lede--left { text-align: left; margin: 0; color: var(--ink-soft); }
.label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff9580; }
.label--dark { color: var(--red-text); }

/* ── sync demo (CSS only) ── */
.sync { padding: 88px 0; background: #fffaf7; }
.devices { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 44px; }
.device { flex: 1; max-width: 420px; background: #fff; border: 1.5px solid #f3e6e0; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(120, 50, 30, .08); }
.device__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f4f6; }
.device__label { margin-left: 6px; font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.device__input { height: 42px; margin: 12px; padding: 0 12px; display: flex; align-items: center; font-size: .82rem; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 8px; }
.device__input--idle { border-style: dashed; background: #fafafa; }
.typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--coral); animation: typed 9s steps(24, end) infinite; }
.device__list { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 14px; min-height: 130px; }
.row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; font-size: .78rem; }
.row__t { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__tag { padding: 2px 7px; font-size: .65rem; color: var(--tag); background: #f3f4f6; border-radius: 4px; }
.badge-s { padding: 2px 8px; font-size: .65rem; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.badge-s--sync { color: #92400e; background: #fef3c7; }
.badge-s--done { color: #065f46; background: #d1fae5; }
.bolt { flex: none; padding: 0 18px; font-size: 1.6rem; color: var(--red-text); }
.row--new { visibility: hidden; animation: rowNew 9s steps(1, end) infinite; }
.row--new .badge-s { visibility: hidden; animation: syncing 9s steps(1, end) infinite; }
.row--arrive { visibility: hidden; animation: rowArrive 9s steps(1, end) infinite; }
@keyframes typed { 0% { width: 0; } 30%, 100% { width: 24ch; } }
@keyframes rowNew { 0%, 33% { visibility: hidden; } 34%, 94% { visibility: visible; } 95%, 100% { visibility: hidden; } }
@keyframes syncing { 0%, 40% { visibility: hidden; } 41%, 58% { visibility: visible; } 59%, 100% { visibility: hidden; } }
@keyframes rowArrive { 0%, 58% { visibility: hidden; background: #fafafa; } 59%, 94% { visibility: visible; background: #ecfdf5; } 95%, 100% { visibility: hidden; background: #fafafa; } }

/* ── hotkey (dark) ── */
.hotkey { padding: 88px 0; background: var(--night); }
.hotkey__in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hotkey__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.hotkey__sub { max-width: 28em; font-size: 1rem; line-height: 1.7; color: #a5acc0; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; font-size: .85rem; color: #d1d7e4; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; }
.pill__n { display: grid; place-items: center; width: 24px; height: 24px; font-size: .72rem; font-weight: 800; color: #1a1a1a; background: var(--coral); border-radius: 50%; }
.hotkey__req { font-size: .8rem; color: #8b92a8; }
.stage { position: relative; height: 320px; }
.term { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background: #0a0d13; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; }
.term__bar { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: #252836; }
.term__label { margin-left: 44px; font-size: .72rem; color: #9aa3b5; }
.term__body { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; font: .78rem/1.8 ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; background: var(--night); }
.tl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .7ch; }
.tl__p { color: var(--mint); font-weight: 700; }
.tl__c { color: #d1d7e4; }
.tl__o { padding-left: 16px; color: #8b92a8; }
.tl__pasted { visibility: hidden; animation: pasted 8s steps(1, end) infinite; }
.tl__cursor { display: inline-block; width: 7px; height: 14px; margin-left: 4px; background: var(--mint); animation: blink 1s step-end infinite; }
.flash { position: absolute; top: 50%; left: 50%; padding: 10px 22px; font-size: 1rem; font-weight: 800; letter-spacing: .04em; color: #1a1a1a; background: var(--coral); border-radius: 8px; visibility: hidden; transform: translate(-50%, -50%); animation: flash 8s steps(1, end) infinite; z-index: 10; }
.picker { position: absolute; top: 50%; left: 50%; width: 84%; max-width: 340px; overflow: hidden; background: rgba(22, 27, 42, .98); border: 1px solid rgba(255, 127, 102, .4); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); visibility: hidden; transform: translate(-50%, -50%); animation: picker 8s steps(1, end) infinite; z-index: 20; }
.picker__search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.picker__icon { color: #9aa3b5; }
.picker__text { flex: 1; font-size: .82rem; color: #e2e8f0; }
.picker__kbd { padding: 2px 6px; font-size: .65rem; font-weight: 700; letter-spacing: .05em; color: #b4bccd; background: rgba(255, 255, 255, .08); border-radius: 5px; }
.picker__list { padding: 6px 0; }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.prow--sel { background: rgba(255, 127, 102, .16); }
.prow__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.prow__t { flex: 1; min-width: 0; font-size: .8rem; color: #d1d7e4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__tag { padding: 2px 7px; font-size: .65rem; font-weight: 600; color: #b4bccd; background: rgba(255, 255, 255, .07); border-radius: 4px; }
.pasted { position: absolute; right: 18px; bottom: 18px; padding: 6px 14px; font-size: .78rem; font-weight: 700; color: #052e16; background: #4ade80; border-radius: 999px; visibility: hidden; animation: pastedBadge 8s steps(1, end) infinite; z-index: 30; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes flash { 0%, 9% { visibility: hidden; } 10%, 19% { visibility: visible; } 20%, 100% { visibility: hidden; } }
@keyframes picker { 0%, 21% { visibility: hidden; } 22%, 64% { visibility: visible; } 65%, 100% { visibility: hidden; } }
@keyframes pastedBadge { 0%, 59% { visibility: hidden; } 60%, 88% { visibility: visible; } 89%, 100% { visibility: hidden; } }
@keyframes pasted { 0%, 70% { visibility: hidden; } 71%, 95% { visibility: visible; } 96%, 100% { visibility: hidden; } }

/* ── features ── */
.features { padding: 88px 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.fcard { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; background: #fafafa; border: 1.5px solid var(--line); border-radius: 16px; transition: box-shadow .15s, transform .15s; }
.fcard:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.fcard__i { font-size: 1.8rem; line-height: 1; }
.fcard__h { font-size: 1rem; font-weight: 800; }
.fcard__p { font-size: .9rem; line-height: 1.6; color: var(--muted); }

/* ── download ── */
.download { padding: 88px 0; background: #fff5ef; }
.download__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.download__hero { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.download__hero .h2 { text-align: left; }
.download__req { font-size: .85rem; color: var(--muted); }
.download__other { font-size: .9rem; color: var(--ink-soft); }
.download__other a { font-weight: 700; color: var(--red-text); }
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 16px; padding: 18px 20px; background: #fff; border: 1.5px solid #f3e6e0; border-radius: 14px; }
.step__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; font-weight: 800; color: #1a1a1a; background: var(--coral); border-radius: 50%; }
.step__h { font-size: 1rem; font-weight: 800; }
.step__p { margin-top: 2px; font-size: .9rem; color: var(--muted); }

/* ── cta + footer ── */
.cta { padding: 80px 0; text-align: center; background: var(--grad); color: #1a1a2e; }
.cta__in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta__h { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.cta__sub { font-size: 1rem; font-weight: 600; color: #26263a; }
.cta .btn { margin-top: 8px; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn__glyph { flex: none; }
.nav__cta .btn__glyph { width: 12px; height: 14px; margin-right: 8px; }

/* ── legal pages (landing/pages/legal.html): one readable column in the landing's type ── */
.doc { padding: 56px 0 72px; background: #fff; }
.doc__in { max-width: 760px; }
.doc__h { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; color: #1a1a2e; }
.doc__updated { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.doc__s { margin-top: 36px; scroll-margin-top: 72px; }
.doc__s h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: #1a1a2e; }
.doc__s p, .doc__s ul { margin-top: 12px; color: var(--ink-soft); line-height: 1.7; }
.doc__s ul { padding-left: 1.25rem; list-style: disc; }
.doc__s li + li { margin-top: 8px; }
.doc__s a { color: var(--red-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
html:lang(zh-CN) .doc__h { letter-spacing: 0; }

/* ── 404 (landing/pages/404.html): English and Chinese side by side, one way back to each landing ── */
.nf { min-height: calc(100vh - 170px); padding: 64px 0 80px; background: var(--grad); }
.nf__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.nf__code { grid-column: 1 / -1; font-size: clamp(4rem, 14vw, 8rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #1a1a2e; }
.nf__block { padding: 28px; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(120, 30, 10, .18); }
.nf__h { font-size: 1.5rem; font-weight: 900; line-height: 1.2; color: #1a1a2e; }
.nf__p { margin: 10px 0 20px; color: var(--ink-soft); }
.foot__tm { font-size: .75rem; }
.foot { padding: 28px 0; background: #f9fafb; border-top: 1px solid var(--line); }
.foot__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.foot__brand { display: inline-flex; align-items: center; min-height: 44px; }
.foot__brand img { display: block; width: auto; height: 24px; }
.foot__copy { font-size: .85rem; color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 6px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: .85rem; color: var(--muted); text-decoration: none; }
.foot__links a:hover { color: var(--red-text); text-decoration: underline; }

/* ── responsive ── */
@media (max-width: 900px) {
  .hero { padding: 48px 0 56px; }
  .hero__in, .hotkey__in, .download__in { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .win { max-width: 360px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .nav__link--login { display: none; }
  .devices { flex-direction: column; gap: 14px; }
  .device { width: 100%; max-width: 460px; }
  .bolt { padding: 0; transform: rotate(90deg); }
  .hotkey, .features, .download, .sync { padding: 64px 0; }
  .stage { height: 270px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .nav__link { display: none; }
  .nav__cta { padding: 0 16px; margin-left: 0; }
  .nav__in { gap: 8px; }
  .badge { padding: 7px 14px; border-radius: 16px; font-size: .7rem; line-height: 1.35; }
  .grid { grid-template-columns: 1fr; }
  .term__body { padding: 12px 14px; font-size: .68rem; }
  .stage { height: 250px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .nf__in { grid-template-columns: minmax(0, 1fr); }
  .doc { padding: 40px 0 56px; }
  .cta__btns { width: 100%; }
  .cta__btns .btn { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  .brand__lockup { height: 24px; }
  .lang-switch { padding: 0 8px; }
  .nav__cta { padding: 0 12px; }
  .nav__cta .btn__glyph { display: none; }
}

/* ── reduced motion: still frames instead of loops ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .toast { visibility: visible; }
  .c1 { border-color: var(--coral); background: #fff8f7; }
  .typed { width: auto; border-right: 0; }
  .row--new, .row--arrive { visibility: visible; }
  .row--arrive { background: #ecfdf5; }
  .picker { visibility: visible; }
  .pasted { visibility: visible; }
}