:root {
  --bg: #000;
  --bg-2: #0b0b0d;
  --card: #141416;
  --card-2: #1c1c1f;
  --line: rgba(255,255,255,.09);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --dim: #6e6e73;
  --accent: #2997ff;
  --accent-2: #64d2ff;
  --radius: 22px;
  --max: 1120px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* nav */
nav {
  position: sticky; top: 0; z-index: 10; height: 52px;
  background: rgba(0,0,0,.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; align-items: center; height: 100%; gap: 28px; }
nav .brand { font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--text); display: flex; align-items: center; gap: 9px; }
nav .brand:hover { text-decoration: none; }
nav .links { display: flex; gap: 24px; margin-left: auto; font-size: 14px; }
nav .links a { color: var(--muted); }
nav .links a:hover { color: var(--text); text-decoration: none; }
nav .lang { font-size: 14px; color: var(--muted); }
nav .lang:hover { color: var(--text); text-decoration: none; }
nav .cta { font-size: 14px; padding: 6px 14px; border-radius: 980px; background: var(--accent); color: #fff; }
nav .cta:hover { text-decoration: none; background: #0077ed; }

/* hero */
.hero { text-align: center; padding: 96px 0 40px; overflow: hidden; }
.eyebrow { color: var(--muted); font-size: 19px; font-weight: 600; letter-spacing: .01em; margin: 0 0 10px; }
h1 {
  font-size: clamp(44px, 8vw, 92px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; margin: 0;
  background: linear-gradient(180deg, #fff 30%, #b9c3d0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(19px, 2.3vw, 24px); color: var(--muted); max-width: 720px; margin: 22px auto 0; line-height: 1.45; }
.lede strong { color: var(--text); font-weight: 600; }
.actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 980px; font-size: 17px; font-weight: 500;
  transition: transform .18s var(--ease), background .2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: #0077ed; }
.btn.ghost { color: var(--accent); border: 1px solid rgba(41,151,255,.5); }
.btn.ghost:hover { background: rgba(41,151,255,.1); }

/* tv frame */
.tv { position: relative; margin: 64px auto 0; max-width: 1040px; container-type: inline-size; }
.tv .screen {
  position: relative; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 10px #111, 0 0 0 11px #2a2a2d, 0 40px 120px -20px rgba(41,151,255,.25), 0 30px 80px rgba(0,0,0,.8);
}
/* The screen is 16:9, rounded down to whole pixels. At a fractional height (201.38px on a phone)
   iPhone Safari drew the sliding Aerial shot a device pixel short while it moved, so the stock
   launcher showed as a line along the bottom, and the shot jumped down when the wipe ended. */
.tv .screen { aspect-ratio: 16 / 9; height: round(down, 100cqw * 9 / 16, 1px); }
.tv .screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.compare { --x: 0%; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.compare img { -webkit-user-drag: none; pointer-events: none; }
/* Aerial's shot lies on top, in a window that slides in from the left while the shot inside slides
   back, so the shot stays put and grows from the left edge. The stock shot underneath is never cut:
   iPhone Safari let the last pixel row of a cut image (clip-path, or a sliding window) show past the
   cut, so whatever it leaks now lands under Aerial's shot, not over it. */
.compare .after { position: absolute; inset: 0 0 -1px; z-index: 1; overflow: hidden; transform: translateX(calc(var(--x) - 100%)); }
.compare .after img { transform: translateX(calc(100% - var(--x))); }
/* Wiped all the way to Aerial: drop the stock shot altogether. */
.compare.done .before { display: none; }
.compare .divider { transition: opacity .25s ease; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: rgba(255,255,255,.9); box-shadow: 0 0 18px rgba(0,0,0,.5); }
.compare .knob {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; color: #111; background: rgba(255,255,255,.92);
  box-shadow: 0 6px 24px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .2s var(--ease);
}
.compare:hover .knob, .compare:focus-visible .knob { transform: scale(1.08); }
.compare-legend { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.replay {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; appearance: none; font: inherit; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 980px; padding: 7px 16px; transition: color .2s ease, border-color .2s ease, transform .15s var(--ease);
}
.replay:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
.replay:active { transform: scale(.96); }
.compare-hint { color: var(--dim); font-size: 13px; }
@media (hover: none) { .compare-hint { display: none; } }
.tv .stand { width: 26%; height: 14px; margin: 18px auto 0; border-radius: 0 0 10px 10px; background: linear-gradient(#2a2a2d, #141416); }
.glow { position: absolute; inset: -10% -20% auto; height: 70%; z-index: -1; filter: blur(80px); opacity: .55;
  background: radial-gradient(40% 50% at 30% 50%, #1f7a6a, transparent 70%), radial-gradient(40% 50% at 70% 40%, #3b2a9c, transparent 70%); }

/* sections */
section { padding: 110px 0; }
section.alt { background: var(--bg-2); }
.head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -.03em; margin: 0; font-weight: 700; }
.head p { color: var(--muted); font-size: 21px; margin: 18px 0 0; line-height: 1.5; }

.feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
.feature + .feature { margin-top: 110px; }
.feature.flip { grid-template-columns: 1fr 1.35fr; }
.feature.flip .shot { order: 2; }
.feature h3 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 16px; }
.feature p { color: var(--muted); margin: 0 0 12px; }
.feature p strong { color: var(--text); font-weight: 600; }
.shot { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 30px 70px rgba(0,0,0,.6); background: #000; }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sub { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 16px; }
.muted { color: var(--muted); }
.kicker { color: var(--accent-2); font-size: 15px; font-weight: 600; margin: 0 0 10px; letter-spacing: .02em; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gallery figure { margin: 0; }
.gallery figcaption { color: var(--dim); font-size: 14px; margin-top: 10px; text-align: center; }

.phone-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
.phone { width: min(300px, 100%); margin: 0 auto; border-radius: 42px; padding: 12px; background: #111; box-shadow: 0 0 0 1px #2a2a2d, 0 30px 80px rgba(0,0,0,.7); }
.phone img { border-radius: 32px; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.tile .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 18px; background: rgba(41,151,255,.14); color: var(--accent-2); }
.tile h4 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.01em; }
.tile p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

.devices { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.devices-note { text-align: center; margin-top: 18px; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 980px; padding: 8px 16px; font-size: 15px; color: var(--muted); }
.chip b { color: var(--text); font-weight: 600; }
a.chip-link { color: var(--muted); transition: border-color .2s ease, color .2s ease; }
a.chip-link b { color: var(--accent); }
a.chip-link:hover { text-decoration: none; border-color: rgba(41,151,255,.5); color: var(--text); }

/* install */
.install { max-width: 860px; margin: 0 auto; }
.field { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 18px; margin-bottom: 22px; }
.field label { color: var(--muted); font-size: 15px; white-space: nowrap; }
.field input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 17px; padding: 10px 4px; outline: none; }
.field input::placeholder { color: var(--dim); }
.field .opt { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; padding-right: 12px; white-space: nowrap; cursor: pointer; }
.tabs { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 18px; }
.tabs button {
  appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 500;
  padding: 8px 18px; border-radius: 9px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.tabs button { display: inline-flex; align-items: center; gap: 7px; }
.tabs .logo { display: block; flex: none; height: 14px; aspect-ratio: 1; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.tabs .logo.xiaomi { --logo: url(img/brands/xiaomi.svg); height: 16px; }
.tabs .logo.android { --logo: url(img/brands/android.svg); height: 18px; }
.tabs .logo.tcl { --logo: url(img/brands/tcl.svg); height: 17px; aspect-ratio: 1.678; }
.tabs .logo.haier { --logo: url(img/brands/haier.svg); height: 13px; aspect-ratio: 3.247; }
.tabs .logo.oppo { --logo: url(img/brands/oppo.svg); height: 11px; aspect-ratio: 4.207; }
.tabs button[aria-selected="true"] { background: var(--card-2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.panel { display: none; }
.panel.on { display: block; }
.panel > p { color: var(--muted); margin: 0 0 14px; }
.panel > p.note { color: var(--dim); margin: 14px 0 0; }
.panel ol { color: var(--muted); margin: 0 0 14px; padding-left: 22px; }
.panel ol li { margin: 4px 0; }
.code { position: relative; background: #0d0d0f; border: 1px solid var(--line); border-radius: 16px; }
.code pre {
  margin: 0; padding: 22px 22px 22px; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  font: 14px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #e6e6e9;
}
.code .copy {
  position: absolute; top: 12px; right: 12px; appearance: none; border: 1px solid var(--line); background: var(--card-2);
  color: var(--text); font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  transition: background .2s ease, transform .15s var(--ease);
}
.code .copy:hover { background: #2a2a2e; }
.code .copy:active { transform: scale(.96); }
.note { color: var(--dim); font-size: 14px; margin-top: 14px; }
.step { display: flex; align-items: center; gap: 12px; font-size: 21px; letter-spacing: -.01em; margin: 44px 0 14px; }
.step:first-child { margin-top: 0; }
.step span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--card-2); color: var(--text); font-size: 14px; font-weight: 600; display: grid; place-items: center; }
.panel b { color: var(--text); font-weight: 600; }
.panel a b { color: inherit; }
.hint { color: var(--muted); margin: 0 0 14px; }
.agents { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; }
.agents li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 980px; background: var(--card); color: var(--text); font-size: 15px; line-height: 1.3; }
.agents img { width: 20px; height: 20px; flex: none; }

details { border-bottom: 1px solid var(--line); padding: 18px 0; }
details summary { cursor: pointer; font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details summary::after { content: "+"; color: var(--muted); font-weight: 400; transition: transform .25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); margin: 12px 0 0; }

/* Modern Elegant Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 44px;
  background: linear-gradient(180deg, transparent 0%, rgba(15,15,18,0.7) 100%);
  color: var(--dim);
  font-size: 13px;
  line-height: 1.7;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-brand {
  max-width: 320px;
}

.footer-brand .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.footer-slogan {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 14px 0 18px;
}

.footer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 980px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
}

.footer-nav-grid {
  display: flex;
  gap: 52px;
  flex-wrap: wrap;
}

.footer-col {
  min-width: 130px;
}

.footer-col-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
  display: inline-block;
}

.footer-col a:hover {
  color: var(--accent);
  text-decoration: none;
  transform: translateX(2px);
}

.footer-bottom {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.6;
}

.footer-disclaimer {
  max-width: 720px;
}

.footer-copy {
  color: var(--dim);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .site-footer { padding: 48px 0 36px; }
  .footer-top { flex-direction: column; gap: 36px; }
  .footer-nav-grid { gap: 32px; display: grid; grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: 16px; }
}

@media (max-width: 480px) {
  .footer-nav-grid { grid-template-columns: 1fr; gap: 28px; }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  nav .links { display: none; }
  nav .lang { margin-left: auto; }
  .hero { padding-top: 64px; }
  section { padding: 80px 0; }
  .feature, .feature.flip, .phone-row { grid-template-columns: 1fr; gap: 28px; }
  .feature.flip .shot { order: 0; }
  .feature + .feature { margin-top: 72px; }
  .grid3, .gallery { grid-template-columns: 1fr; }
  .field { flex-wrap: wrap; padding: 10px 14px; }
  .field .opt { padding: 4px 0 6px; }
  .tabs[data-tabs="brand"] { display: flex; }
  .tabs[data-tabs="brand"] button { flex: 1 1 auto; justify-content: center; padding: 8px; }
  .compare-legend { margin-top: 18px; }
  .compare .knob { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
}
@media (max-width: 480px) {
  .tabs .logo.xiaomi, .tabs .logo.android { display: none; }
  .tabs[data-tabs="method"] { display: flex; flex-wrap: wrap; }
  .tabs[data-tabs="method"] button { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
}

/* voices: posts from Weibo, X and Xiaohongshu, one stack of cards per platform */
nav .links a[aria-current] { color: var(--text); }
.voices-hero { text-align: center; padding: 96px 0 8px; }
.voices { padding-top: 56px; overflow-x: clip; }  /* a thrown card must not widen the page */
.decks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px 40px; }
.deck-col { width: 100%; max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; }
.deck-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.deck-count { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.pf { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 980px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.pf.weibo { background: rgba(230,22,45,.16); color: #ff6b7a; }
.pf.x { background: rgba(255,255,255,.1); color: var(--text); }
.pf.xhs { background: rgba(255,36,66,.16); color: #ff7088; }

/* All cards share one grid cell, so the deck is as tall as its longest card and every card
   matches it. The cards behind peek out above the top one; room for two of them sits above. */
.deck { flex: 1; display: grid; margin-top: 32px; outline: none; touch-action: pan-y; }
.deck:focus-visible .vcard[data-p="0"] { box-shadow: 0 0 0 2px var(--accent), 0 24px 60px rgba(0,0,0,.55); }
.vcard {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,.55); transform-origin: 50% 100%;
  transition: transform .42s var(--ease), opacity .3s ease; user-select: none; -webkit-user-select: none; cursor: pointer;
}
/* Cards further back go darker, so the stack reads as depth rather than clutter. */
.vcard::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; transition: opacity .42s var(--ease); }
.vcard[data-p="0"] { transform: none; }
.vcard[data-p="1"] { transform: translate(-8px, -16px) rotate(-3deg) scale(.95); }
.vcard[data-p="1"]::after { opacity: .22; }
.vcard[data-p="2"], .vcard[data-p="3"] { transform: translate(10px, -30px) rotate(3.2deg) scale(.9); }
.vcard[data-p="2"]::after { opacity: .42; }
.vcard[data-p="3"] { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .deck:hover .vcard[data-p="1"] { transform: translate(-16px, -19px) rotate(-4deg) scale(.95); }
  .deck:hover .vcard[data-p="2"] { transform: translate(18px, -34px) rotate(4.5deg) scale(.9); }
}
/* Leaving: the top card is thrown to one side, then tucked in at the back. */
.vcard.out-r { transform: translate(72%, 10px) rotate(9deg) !important; transition-duration: .22s; }
.vcard.out-l { transform: translate(-72%, 10px) rotate(-9deg) !important; transition-duration: .22s; }
.vcard.dragging { transition: none; }
.vcard img { -webkit-user-drag: none; }

.vcard header { display: flex; align-items: center; gap: 12px; }
.vcard .avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--card-2); }
.vcard .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vcard .who b { font-size: 15px; font-weight: 600; }
.vcard .who span { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard .q {
  flex: none; margin: 0; color: #e8e8ed; font-size: 16px; line-height: 1.65;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 11; overflow: hidden;
}
.vcard.has-pic .q { -webkit-line-clamp: 5; }
.vcard .q.big { font-size: 22px; line-height: 1.5; letter-spacing: -.01em; font-weight: 500; color: var(--text); -webkit-line-clamp: 9; }
.vcard .pic { flex: none; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.vcard .pic img { width: 100%; height: 100%; object-fit: cover; }
.vcard footer { display: flex; align-items: center; justify-content: space-between; font-size: 13px; line-height: 1.4; margin-top: auto; padding: 2px 0 0; border: 0; color: inherit; }
.vcard .stat { color: var(--dim); }
.vcard footer a { color: var(--muted); padding: 4px 0; }
.vcard footer a:hover { color: var(--text); text-decoration: none; }

.deck-nav { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.deck-nav button {
  appearance: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  transition: color .2s ease, border-color .2s ease, transform .15s var(--ease);
}
.deck-nav button:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
.deck-nav button:active { transform: scale(.94); }

.voices-cta { text-align: center; }
.voices-cta .lede { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .vcard { transition: opacity .2s ease; }
  .vcard.out-r, .vcard.out-l { transform: none !important; opacity: 0; }
}
@media (max-width: 860px) {
  .voices-hero { padding-top: 64px; }
  .voices { padding-top: 40px; }
  .decks { gap: 56px; }
}
@media (max-width: 400px) {
  .vcard .q.big { font-size: 20px; }
}