/* Apply website. One stylesheet for every page. No frameworks, no scripts from other companies.
   Dark like the app, with the logo's red. */

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --red: #be0b29;
  --red-hot: #d81834;
  --red-text: #ff5a6e;
  --night: #0c0c0d;
  --surface: #151517;
  --surface-2: #1d1d20;
  --line: #2a2a2e;
  --text: #f3f1ee;
  --text-2: #d9d6d1;
  --muted: #a3a09a;
  /* The colour behind the current block: cut-out letters are painted in it, so they read as holes. */
  --bg: var(--night);
  --gutter: 16px;
  --max: 1160px;
  --radius: 16px;
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang HK', 'Noto Sans HK', sans-serif;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:lang(zh-Hans) { font-family: 'Geist', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; }
:lang(zh-Hant-HK) { font-family: 'Geist', 'PingFang HK', 'Noto Sans HK', 'Microsoft JhengHei', sans-serif; }

img { max-width: 100%; display: block; }

a { color: inherit; }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--red-text);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-red a:focus-visible { outline-color: #fff; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--text);
  color: var(--night);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── header: logo on the left, a pill joined to a round menu button on the right ──────────── */

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--top-h);
  transition: height 0.3s ease;
}
:root { --top-h: 104px; --btn: 72px; --pill-h: 52px; }
.top.is-scrolled { --top-h: 76px; --btn: 52px; --pill-h: 40px; }
.top.is-scrolled:not(.is-open) {
  background: rgba(21, 21, 23, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line);
}
@media (max-width: 719px) {
  :root { --top-h: 80px; --btn: 54px; --pill-h: 44px; }
  .top.is-scrolled { --top-h: 64px; --btn: 46px; --pill-h: 44px; }
}

.brand { display: inline-flex; align-items: center; }
.brand img { height: 37.4px; width: auto; transition: height 0.3s ease; }
.top.is-scrolled .brand img { height: 28.6px; }
@media (max-width: 719px) {
  .brand img { height: 28.6px; }
  .top.is-scrolled .brand img { height: 24.2px; }
}

.top-actions { display: flex; align-items: center; }

/* The pill tucks under the round button. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--pill-h);
  margin-right: calc(var(--btn) * -0.5);
  padding: 0 calc(var(--btn) * 0.5 + 20px) 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(21, 21, 23, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--red-text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: height 0.3s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pill svg { width: 20px; height: 20px; flex: none; }
.pill:hover { background: rgba(255, 255, 255, 0.1); }
.top.is-open .pill { background: #fff; border-color: #fff; color: var(--red-hot); }
@media (max-width: 719px) {
  .pill { font-size: 12px; letter-spacing: 0.12em; gap: 8px; padding-left: 14px; }
  .pill svg { width: 16px; height: 16px; }
}
@media (max-width: 359px) {
  .pill span { display: none; }
}

.menu-btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--red-hot);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(216, 24, 52, 0.7);
  transition: width 0.3s ease, height 0.3s ease, background-color 0.2s ease;
}
.menu-btn:hover { background: var(--red); }
.menu-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* three lines, the middle one shorter; an X when the menu is open */
.bars { position: relative; display: block; width: 44%; height: 30%; }
.bars i {
  position: absolute;
  right: 0;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease, top 0.3s ease;
}
.bars i:nth-child(1) { top: 0; width: 100%; }
.bars i:nth-child(2) { top: calc(50% - 1.25px); width: 66%; }
.bars i:nth-child(3) { top: calc(100% - 2.5px); width: 100%; }
.top.is-open .bars i:nth-child(1) { top: calc(50% - 1.25px); transform: rotate(45deg); }
.top.is-open .bars i:nth-child(2) { opacity: 0; width: 0; }
.top.is-open .bars i:nth-child(3) { top: calc(50% - 1.25px); transform: rotate(-45deg); }

/* ── the menu: a dark screen of big items; an item with more opens a red panel beside it ──── */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  background: #161618;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  overflow: hidden;
}
.site-menu.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s ease; }

/* Apply's mark, large and faint, the way the menu's background carries the brand */
.menu-mark {
  position: absolute;
  right: -6vw;
  bottom: -14vh;
  width: min(62vw, 760px);
  aspect-ratio: 452 / 451;
  background: #1f1f22;
  -webkit-mask: url('assets/apply-icon.png') center / contain no-repeat;
  mask: url('assets/apply-icon.png') center / contain no-repeat;
  pointer-events: none;
}
.menu-panel .menu-mark { background: rgba(255, 255, 255, 0.07); }

.menu-left {
  position: relative;
  z-index: 1;
  flex: none;
  width: calc(var(--col) + 440px);
  padding: calc(var(--top-h) + 36px) 0 40px var(--col);
  overflow-y: auto;
  --col: max(var(--gutter), calc((100vw - var(--max)) / 2));
}
.menu-list { margin: 0; padding: 0; list-style: none; }
.menu-item { position: relative; }
.menu-item > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: calc(var(--col) * -1);
  padding: 13px 24px 13px var(--col);
  color: #a9a6a0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.menu-item > a::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6d6a66;
  transition: background-color 0.2s ease;
}
.menu-item > a[aria-current='page'] { color: var(--red-text); }
.menu-item > a[aria-current='page']::before { background: var(--red-hot); }
.menu-item.is-active > a,
.menu-item > a:hover,
.menu-item > a:focus-visible {
  color: #fff;
  background: linear-gradient(90deg, rgba(190, 11, 41, 0.95), rgba(190, 11, 41, 0.55) 70%, rgba(190, 11, 41, 0));
  outline: none;
}
.menu-item.is-active > a::before,
.menu-item > a:hover::before,
.menu-item > a:focus-visible::before { background: #fff; }

.menu-sub-toggle { display: none; }

.menu-foot { margin: 48px 0 0; color: #6d6a66; font-size: 14px; }

/* the red panel and its links */
.menu-panel {
  position: relative;
  flex: 1;
  background: var(--red);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.site-menu.has-panel .menu-panel { transform: translateX(0); }
.menu-sub {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(var(--col) + 440px);
  z-index: 1;
  overflow-y: auto;
  padding: calc(var(--top-h) + 40px) var(--gutter) 40px 80px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.menu-sub.is-shown { opacity: 1; visibility: visible; transition: opacity 0.25s ease 0.1s; }
.menu-sub li { margin: 0 0 6px; }
.menu-sub a {
  display: inline-block;
  padding: 10px 0;
  color: #ffc9cf;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.2s ease;
}
.menu-sub a:hover, .menu-sub a:focus-visible { color: #fff; transform: translateX(6px); outline: none; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Phones: one column; the + next to an item opens its links under it. */
@media (max-width: 899px) {
  .menu-left { width: 100%; padding-right: var(--gutter); }
  .menu-panel { display: none; }
  .menu-mark { width: 120vw; right: -40vw; bottom: -20vh; }
  .menu-item { display: flex; flex-wrap: wrap; align-items: center; }
  .menu-item > a { flex: 1; min-width: 0; font-size: 24px; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
  .menu-sub-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 26px;
    font-weight: 400;
    cursor: pointer;
  }
  .menu-sub-toggle[aria-expanded='true'] { color: var(--red-text); }
  .menu-sub-toggle .minus { display: none; }
  .menu-sub-toggle[aria-expanded='true'] .plus { display: none; }
  .menu-sub-toggle[aria-expanded='true'] .minus { display: inline; }
  .menu-item .menu-sub {
    position: static;
    flex-basis: 100%;
    padding: 0 0 10px 35px;
    opacity: 1;
    visibility: visible;
    display: none;
    transition: none;
  }
  .menu-item .menu-sub.is-shown { display: block; }
  .menu-item .menu-sub a { font-size: 18px; padding: 8px 0; color: #ffb3bc; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu, .menu-panel, .menu-sub, .bars i, .top, .top .wrap, .brand img, .pill, .menu-btn { transition: none; }
}

/* ── quick links: tabs on the right edge, a bar along the bottom on phones ─────────────────── */

.quick {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-38%);
}
.quick a {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 76px;
  height: 76px;
  padding: 0 24px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 0;
  border-radius: 22px 0 0 22px;
  background: rgba(29, 29, 32, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease;
}
.quick svg { flex: none; width: 28px; height: 28px; }
.quick svg .accent { color: var(--red-text); }
.quick span {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.quick a:hover, .quick a:focus-visible {
  width: 214px;
  background: var(--red-hot);
  border-color: var(--red-hot);
  outline: none;
}
.quick a:hover svg .accent, .quick a:focus-visible svg .accent { color: #fff; }
.quick a:hover span, .quick a:focus-visible span { opacity: 1; }
body.menu-open .quick { visibility: hidden; }

/* The side tabs need the space to the right of the content column; below that width they become a bottom bar. */
@media (max-width: 1311px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  /* A link reached by Tab scrolls clear of the bar. */
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .quick {
    top: auto;
    bottom: 0;
    left: 0;
    flex-direction: row;
    gap: 0;
    transform: none;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(21, 21, 23, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .quick a {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: auto;
    height: 68px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .quick a + a { border-left: 1px solid var(--line); }
  .quick svg { width: 22px; height: 22px; }
  .quick span { opacity: 1; font-size: 10px; letter-spacing: 0.06em; color: var(--text-2); }
  .quick a:hover, .quick a:focus-visible { width: auto; background: rgba(216, 24, 52, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .quick a, .quick span { transition: none; }
}

/* ── type ─────────────────────────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; font-weight: 850; letter-spacing: -0.035em; line-height: 1.02; }
/* Heavy letters carry a little space on their left; pull big type back so its ink lines up with the text below. */
.h2, .step h3, .num { margin-left: -0.045em; }

.display {
  font-size: clamp(46px, 9.4vw, 112px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.92;
}

.h2 {
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.lede {
  max-width: 32em;
  margin: 28px 0 0;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--text-2);
}

/* One word in the app's red. */
.red { color: var(--red-hot); }

/* ── store buttons ────────────────────────────────────────────────────────────────────── */

.stores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 12px;
  margin-top: 34px;
}

.store {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 58px;
  padding: 0 22px;
  border-radius: 14px;
  background: #fff;
  color: var(--night);
  text-decoration: none;
  line-height: 1.1;
}
.store small { font-size: 12px; font-weight: 550; color: #55524d; letter-spacing: 0.01em; }
.store strong { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
a.store { transition: background-color 0.15s ease, color 0.15s ease; }
a.store:hover { background: var(--red-hot); color: #fff; }
a.store:hover small { color: #fff; }

/* ── hero ─────────────────────────────────────────────────────────────────────────────── */

.hero { padding: calc(var(--top-h) + 32px) 0 72px; }

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

@media (min-width: 980px) {
  .hero { padding: calc(var(--top-h) + 40px) 0 96px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; }
  .hero .display { font-size: min(8vw, 100px); }
}

.hero h1 .line { display: block; white-space: nowrap; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.facts li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 2px; background: var(--red-hot); vertical-align: 2px; }

/* ── phones ───────────────────────────────────────────────────────────────────────────── */

/* A phone: metal rim, black bezel, side buttons, a status bar with the island, then the real screenshot.
   Sizes inside use cqw (a hundredth of the phone's width), so a small phone is the same phone, smaller. */
.phone {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 300px;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(145deg, #5a5a62 0%, #232327 14%, #0b0b0c 45%, #18181b 78%, #4a4a52 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 5px #070708,
    0 2px 0 1px #1f1f23,
    0 50px 80px -28px rgba(0, 0, 0, 0.95),
    0 30px 110px -30px rgba(216, 24, 52, 0.42);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* volume buttons on the left, the side button on the right */
.phone::before,
.phone::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2b2b30, #5d5d65);
}
.phone::before { left: -3px; top: 25%; height: 11cqw; box-shadow: 0 15cqw 0 0 #3d3d43; }
.phone::after { right: -3px; top: 30%; height: 17cqw; background: linear-gradient(90deg, #5d5d65, #2b2b30); }

.screen {
  position: relative;
  overflow: hidden;
  border-radius: 43px;
  padding-top: 9.5cqw;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12' fill='%23fff'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29 3.2a10.5 10.5 0 0 1 13 0l-1.6 1.9a8 8 0 0 0-9.8 0zM31.4 6.1a6.6 6.6 0 0 1 8.2 0l-1.6 1.9a4.1 4.1 0 0 0-5 0zM33.8 9a2.7 2.7 0 0 1 3.4 0L35.5 11z'/%3E%3Crect x='46.5' y='1.5' width='18' height='9' rx='2.6' fill='none' stroke='%23fff' stroke-opacity='.45'/%3E%3Crect x='48.3' y='3.3' width='12.5' height='5.4' rx='1.4'/%3E%3Crect x='65.6' y='4.3' width='1.6' height='3.4' rx='.7' fill-opacity='.45'/%3E%3C/svg%3E") no-repeat right 8cqw top 3.6cqw / 17cqw auto;
}
/* the island */
.screen::before {
  content: '';
  position: absolute;
  top: 2.4cqw;
  left: 50%;
  width: 29cqw;
  height: 8.2cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #000;
  box-shadow: inset 0 0 0 1px #16161a;
  z-index: 2;
}
/* the clock */
.screen::after {
  content: '9:41';
  position: absolute;
  top: 3cqw;
  left: 9.5cqw;
  font-size: 4.3cqw;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
}
.screen img {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
}

/* Turned a little toward the reader, and straightened on hover. */
.tilt { perspective: 1600px; }
.tilt .phone { transform: rotateY(-11deg) rotateX(4deg); transform-origin: 50% 60%; }
.tilt .phone:hover { transform: rotateY(-4deg) rotateX(1deg) translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .phone { transition: none; }
  .tilt .phone:hover { transform: rotateY(-11deg) rotateX(4deg); }
}

/* Two phones in the hero: the feed in front, a post behind it. */
.pair { display: flex; justify-content: center; perspective: 1800px; }
.duo { position: relative; width: min(300px, 100%); transform-style: preserve-3d; }
.duo .phone { max-width: none; }
.duo .front { z-index: 2; transform: rotateY(-16deg) rotateX(5deg); }
.duo .back { display: none; }

@media (min-width: 560px) {
  .duo { width: min(480px, 100%); }
  .duo .front { width: 62.5%; }
  .duo .back {
    display: block;
    position: absolute;
    right: 0;
    top: 9%;
    width: 55.8%;
    z-index: 1;
    transform: rotateY(-16deg) rotateX(5deg) translateZ(-60px);
    filter: brightness(0.82);
  }
}

@media (min-width: 980px) {
  .pair { justify-content: flex-end; }
}

/* ── example posts strip ──────────────────────────────────────────────────────────────── */

.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.strip .wrap { display: flex; align-items: center; gap: 10px; padding-top: 18px; padding-bottom: 18px; }
.strip-label {
  flex: none;
  padding: 9px 15px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}
.drift {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent);
}
.drift-track { display: flex; width: max-content; animation: drift 80s linear infinite; }
.drift ul { display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; }
.drift li {
  flex: none;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--night);
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}
.drift:hover .drift-track, .drift:focus-within .drift-track, .drift:focus .drift-track { animation-play-state: paused; }
.drift:focus-visible { outline-offset: 2px; }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .drift { overflow-x: auto; scrollbar-width: thin; }
  .drift-track { animation: none; }
  .drift ul[aria-hidden] { display: none; }
}

/* ── sections ─────────────────────────────────────────────────────────────────────────── */

.section { padding: 88px 0; }
@media (min-width: 980px) { .section { padding: 120px 0; } }

.alt { --bg: var(--surface); background: var(--surface); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head p { margin: 20px 0 0; font-size: 19px; color: var(--text-2); max-width: 34em; }

/* how it works */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
}

.step { display: flex; flex-direction: column; }
.step h3 { font-size: 30px; margin-top: 20px; }
.step p { margin: 12px 0 0; padding-bottom: 32px; color: var(--text-2); max-width: 26em; }
.step .phone { max-width: 280px; }
.step .tilt { margin-top: auto; }

@media (max-width: 899px) {
  .step .phone { max-width: 240px; margin-inline: auto; }
}

.num {
  display: block;
  color: var(--red-hot);
  font-size: 72px;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.05em;
}

/* what other members see */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 72px; }
  .split .tilt { justify-self: end; width: 100%; max-width: 300px; }
}
@media (min-width: 980px) and (min-height: 760px) {
  .split .tilt { position: sticky; top: 110px; }
}
@media (max-width: 979px) {
  .split .tilt .phone { margin-inline: auto; }
}

.rules { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rules li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .rules li { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
}
.rules strong { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.3; }
.rules span { color: var(--muted); }
#safety .rules { max-width: 900px; }

/* plans */
.plans {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.plans th, .plans td { padding: 20px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.plans tbody th { padding-left: 0; }
.plans thead th {
  padding-top: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--text);
}
.plans tbody th { font-size: 26px; font-weight: 850; letter-spacing: -0.035em; }
/* Every first line in a row is the same size, so the plan, the price and the numbers share one baseline. */
.plans .big { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.plans .price { white-space: nowrap; }
.plans .price .per { font-size: 15px; font-weight: 600; color: var(--text-2); }
.plans .price small { display: block; margin-top: 4px; font-weight: 500; font-size: 14px; color: var(--muted); }
/* The plan's diamond hangs before its name; the "Plan" heading lines up with the name, not the diamond. */
.plans thead th:first-child { padding-left: 25px; }
/* The two number columns sit centred under their headings. */
@media (min-width: 701px) {
  .plans th:nth-child(3), .plans th:nth-child(4), .plans th:nth-child(5), .plans td:nth-child(3), .plans td:nth-child(4), .plans td:nth-child(5) { text-align: center; }
  .plans th:nth-child(3), .plans th:nth-child(4), .plans th:nth-child(5) { width: 16%; }
}

/* The app's plan mark: a small diamond, outlined for Regular. */
.tier-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 14px;
  margin-left: 2px;
  border-radius: 1.5px;
  transform: rotate(45deg);
  vertical-align: 4px;
}
.t-regular { background: transparent; box-shadow: inset 0 0 0 1.5px #9aa0a6; }
.t-silver { background: #c0c0c0; }
.t-gold { background: #cd853f; }
.t-diamond { background: #8ab4d4; }

@media (max-width: 700px) {
  .plans thead { display: none; }
  .plans, .plans tbody, .plans tr, .plans th, .plans td { display: block; width: 100%; }
  .plans tr { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .plans th, .plans td { padding: 0; border: 0; }
  .plans tbody th { grid-column: 1 / -1; }
  .plans td.price { grid-column: 1 / -1; }
  .plans td:nth-child(5) { grid-column: 1 / -1; }
  .plans td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
  /* On phones the price and the numbers sit under the plan's name, lined up with it. */
  .plans td { padding-left: 25px; }
}

.plan-note { margin: 32px 0 0; max-width: 46em; color: var(--text-2); font-size: 16px; }

/* faq */
.faq { border-top: 2px solid var(--text); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  content: '+' / '';
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  font-size: 22px;
  font-weight: 500;
}
.faq details[open] summary::after { content: '\2212'; content: '\2212' / ''; background: var(--red-hot); color: #fff; }
.faq .answer { padding: 0 0 24px; max-width: 46em; color: var(--text-2); }
.faq .answer p { margin: 0 0 10px; }
.faq a, .prose a { color: var(--red-text); text-underline-offset: 3px; }
/* an email address stays on one line, so it is never split at its hyphen */
.faq a[href^='mailto:'], .prose a[href^='mailto:'] { white-space: nowrap; }

/* download: the red block with the app icon */
.download {
  background: var(--red);
  color: #fff;
}
.download .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding-top: 104px;
  padding-bottom: 104px;
}
.download .h2 { font-size: clamp(40px, 6vw, 72px); }
.download p { max-width: 30em; margin: 24px 0 0; font-size: 20px; color: #fff; }
.download-mark { width: clamp(120px, 15vw, 200px); height: auto; }
@media (max-width: 719px) {
  .download .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 80px; padding-bottom: 88px; }
  .download-mark { display: none; }
}

/* ── footer ───────────────────────────────────────────────────────────────────────────── */

.foot { background: var(--night); color: var(--text-2); font-size: 15px; }
.foot .wrap { padding-top: 56px; padding-bottom: 40px; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot img { height: 28px; width: auto; }
.foot-company { margin: 18px 0 0; }
.foot h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8c8984; margin-bottom: 12px; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { margin: 7px 0; }
.foot a { color: var(--text); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .legal-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: #8c8984;
  font-size: 13px;
}
.foot .legal-line span:last-child { max-width: 46em; }

/* A fact only the company can fill in (address, email, links). Visible on purpose until it is filled. */
.fill {
  padding: 0 4px;
  border-radius: 4px;
  background: #3d3410;
  color: #ffe08a;
  font-style: normal;
  white-space: nowrap;
}

/* ── legal pages ──────────────────────────────────────────────────────────────────────── */

.doc-head { padding: calc(var(--top-h) + 40px) 0 40px; border-bottom: 1px solid var(--line); }
.doc-head .h2 { font-size: clamp(40px, 6vw, 72px); }
.doc-head p { margin: 18px 0 0; color: var(--muted); font-size: 16px; }

.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 96px;
}
@media (min-width: 980px) {
  .doc { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; }
}

.toc { font-size: 15px; }
.toc h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 5px 0; color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--red-text); }
@media (min-width: 980px) {
  .toc nav { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; }
}
/* On phones the sections are numbered in the text; the list would push the first one off the screen. */
@media (max-width: 979px) { .toc { display: none; } }

.prose { max-width: 44em; }
.prose .summary {
  margin: 0 0 40px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 17px;
}
.prose .summary p { margin: 0; }
.prose .summary p + p { margin-top: 10px; }
.prose section { padding-top: 8px; margin-bottom: 34px; }
.prose h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 12px; }
.prose p, .prose li { color: var(--text-2); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin: 6px 0; }

/* numbered steps (Delete your account): the number sits in a red square, like the + of a question */
.prose ol.howto { counter-reset: howto; margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.prose ol.howto li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 48px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
}
.prose ol.howto li::before {
  counter-increment: howto;
  content: counter(howto);
  position: absolute;
  left: 0;
  top: 11px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--red-hot);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

/* ── the 404 page: the main pages as big links ───────────────────────────────────────────── */

.lost {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 48px 0 96px;
  list-style: none;
}
@media (min-width: 640px) { .lost { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .lost { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lost a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lost a::after { content: '\2192'; content: '\2192' / ''; flex: none; color: var(--red-text); font-weight: 600; }
.lost a:hover { background: var(--red-hot); border-color: var(--red-hot); }
.lost a:hover::after { color: #fff; }

/* ── languages ──────────────────────────────────────────────────────────────────────────── */

/* A returning Chinese reader: hide the English for the moment it takes to swap it (i18n.js lifts this). */
html.i18n-wait body { visibility: hidden; }

/* Chinese reads badly with the tight Latin tracking; give it room. */
html[lang^='zh'] h1, html[lang^='zh'] h2, html[lang^='zh'] h3, html[lang^='zh'] .display, html[lang^='zh'] .h2,
html[lang^='zh'] .num, html[lang^='zh'] .rules strong, html[lang^='zh'] .faq summary, html[lang^='zh'] .menu-item > a { letter-spacing: 0; }
html[lang^='zh'] .display { line-height: 1.08; }
html[lang^='zh'] .h2 { line-height: 1.15; }
html[lang^='zh'] .lede, html[lang^='zh'] .section-head p, html[lang^='zh'] .step p, html[lang^='zh'] .rules span, html[lang^='zh'] .faq .answer { line-height: 1.75; }
/* a page translated in full (Delete your account); the Terms and the Privacy Policy mark their English text lang="en" */
html[lang^='zh'] .prose:not([lang='en']) p, html[lang^='zh'] .prose:not([lang='en']) li { line-height: 1.75; }
html[lang^='zh'] .lost a { letter-spacing: 0; }
html[lang^='zh'] .pill { letter-spacing: 0.06em; }
html[lang^='zh'] .menu-sub a { letter-spacing: 0.02em; }
html[lang^='zh'] .quick span, html[lang^='zh'] .foot h2, html[lang^='zh'] .plans thead th { letter-spacing: 0.04em; }

/* the header button: a globe and EN, 繁 or 简 */
.lang { position: relative; margin-right: 12px; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--pill-h);
  padding: 0 16px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(21, 21, 23, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: height 0.3s ease, background-color 0.2s ease;
}
.lang-btn svg { width: 20px; height: 20px; }
.lang-btn svg .accent { color: currentColor; }
.lang-btn:hover, .lang-btn[aria-expanded='true'] { background: rgba(255, 255, 255, 0.1); }
.lang-code { min-width: 1.4em; text-align: center; }
.top.is-open .lang { visibility: hidden; }

.lang-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
}
.lang-pop[hidden] { display: none; }
.lang-pop button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.lang-pop button:hover, .lang-pop button:focus-visible { background: rgba(255, 255, 255, 0.07); color: #fff; outline: none; }
.lang-pop button[aria-checked='true'] { color: #fff; }
.lang-pop button[aria-checked='true']::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red-hot); }

@media (max-width: 599px) {
  .lang { display: none; }
}

/* the language tab in the phone bar */
.quick .quick-lang { display: none; }
@media (max-width: 599px) {
  .quick .quick-lang {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 68px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
  }
  .quick .quick-lang svg { width: 22px; height: 22px; }
  .quick .quick-lang svg .accent { color: var(--red-text); }
  .quick .quick-lang span { opacity: 1; font-size: 10px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
  .quick .quick-lang:focus-visible { outline: 3px solid var(--red-text); outline-offset: -3px; }
}

/* the language row in the menu */
.menu-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; }
.menu-langs button {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.menu-langs button:hover { border-color: #55555b; color: #fff; }
.menu-langs button[aria-pressed='true'] { background: var(--red-hot); border-color: var(--red-hot); color: #fff; }
.menu-foot { margin-top: 18px; }

/* the chooser: a small card that rises in a moment after the page appears (a sheet from the bottom on phones) */
.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 5, 6, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.lang-modal.is-open { visibility: visible; opacity: 1; transition: opacity 0.4s ease; }
.lang-card {
  position: relative;
  width: min(330px, 100%);
  padding: 26px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(21, 21, 23, 0.96);
  text-align: center;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  outline: none;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.lang-modal.is-open .lang-card { opacity: 1; transform: none; }
/* The card takes focus when it opens so the reader starts inside it; it never draws a ring itself. */
.lang-card:focus, .lang-card:focus-visible { outline: none; }
.lang-mark { width: 38px; height: auto; margin: 0 auto 14px; }
.lang-card h2 { display: grid; gap: 3px; margin-bottom: 18px; letter-spacing: 0; }
.lang-card h2 [lang='en'] { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.lang-card h2 [lang^='zh'] { font-size: 14px; font-weight: 500; color: var(--muted); }
.lang-card h2 .zh-pair { display: flex; justify-content: center; gap: 10px; }
.lang-options { display: grid; gap: 8px; }
.lang-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 10px 0 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(12, 12, 13, 0.7);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease, background-color 0.15s ease;
}
.lang-modal.is-open .lang-options button { opacity: 1; transform: none; }
.lang-modal.is-open .lang-options button:nth-child(1) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
.lang-modal.is-open .lang-options button:nth-child(2) { transition-delay: 0.14s, 0.14s, 0s, 0s; }
.lang-modal.is-open .lang-options button:nth-child(3) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
.lang-options button:hover { border-color: #4a4a50; background: #141416; }
.lang-options button:active { transform: scale(0.98); }
.lang-options button.is-suggested { border-color: rgba(216, 24, 52, 0.55); }
.lang-options button:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
.lang-short {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-options button.is-suggested .lang-short,
.lang-options button:hover .lang-short { background: var(--red-hot); color: #fff; }
.lang-later { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.lang-later span { white-space: nowrap; }
.lang-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lang-close:hover { background: var(--surface-2); color: #fff; }
.lang-close:focus-visible { outline: 2px solid var(--red-text); outline-offset: 1px; }

/* phones: a sheet that slides up from the bottom */
@media (max-width: 599px) {
  .lang-modal { place-items: end stretch; padding: 0; }
  .lang-card {
    width: 100%;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    opacity: 1;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lang-card::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin: -10px auto 16px;
    border-radius: 2px;
    background: #3a3a3f;
  }
  .lang-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-modal, .lang-card, .lang-options button { transition: opacity 0.2s ease; transform: none !important; }
}

/* switching language: the page fades out, changes and fades back in */
main, footer { transition: opacity 0.16s ease; }
html.lang-swap main, html.lang-swap footer { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  main, footer { transition: none; }
  html.lang-swap main, html.lang-swap footer { opacity: 1; }
}

/* legal pages in a Chinese reading: the text below is English */
.lang-note {
  display: inline-block;
  margin: 16px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
}

/* ── Sign in: the header button, the "on the web" badge and the Sign in page ──────────────── */

/* The header button: solid red, so the way in is the first thing on the right. The About Apply pill, the language
   button and the round menu button keep their places. It hides while the menu is open (the menu has its own Sign in). */
.signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pill-h);
  margin-right: 12px;
  padding: 0 22px;
  border: 1px solid var(--red-hot);
  border-radius: 999px;
  background: var(--red-hot);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: height 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.signin-btn:hover { background: var(--red); border-color: var(--red); }
.signin-btn:focus-visible { outline-color: #fff; }
.top.is-open .signin-btn { visibility: hidden; }
@media (max-width: 719px) {
  .signin-btn { margin-right: 10px; padding: 0 16px; font-size: 12px; letter-spacing: 0.12em; }
}
/* On a phone the header has room for the logo, Sign in and the menu button; About Apply is the menu's How it works. */
@media (max-width: 599px) {
  .top-actions .pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .signin-btn { transition: none; }
}
html[lang^='zh'] .signin-btn { letter-spacing: 0.06em; }

/* The third badge under "Coming soon": the web is the one way in that works today. */
.store.web { grid-column: 1 / -1; background: var(--red-hot); color: #fff; }
.store.web small { color: #fff; }
a.store.web:hover { background: #fff; color: var(--red-hot); }
a.store.web:hover small { color: var(--red-hot); }
.download .store.web { background: var(--night); }
.download a.store.web:hover { background: #fff; color: var(--night); }
.download a.store.web:hover small { color: var(--night); }

/* The Sign in page: three ways in, one card each. */
.ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 48px 0 0;
  list-style: none;
}
@media (min-width: 980px) {
  .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.way {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.way-icon { width: 40px; height: 40px; margin-bottom: 20px; color: var(--red-text); }
.way h2 { margin-bottom: 12px; font-size: 32px; letter-spacing: -0.035em; line-height: 1.05; }
.way p { margin: 0 0 28px; color: var(--text-2); }
.way .go, .way .stores { margin-top: auto; }
.way .stores { grid-template-columns: minmax(0, 1fr); }
.go {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 14px;
  background: var(--red-hot);
  color: #fff;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.go:hover { background: var(--red); }
.go:focus-visible { outline-color: #fff; outline-offset: -6px; }

/* "For this device": set by signin.js on the way that fits where you are. */
.yours {
  display: none;
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--red-hot);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.way.is-yours { border-color: var(--red-hot); box-shadow: 0 24px 60px -34px rgba(216, 24, 52, 0.7); }
.way.is-yours .yours { display: inline-flex; }
html[lang^='zh'] .yours { letter-spacing: 0.04em; }
/* On a phone or tablet, the way for handheld devices comes first and the desktop one last. The head script sets data-device before
   the first paint, so nothing jumps; signin.js then moves the cards in the page itself, so Tab and screen readers follow the same order. */
html[data-device='mobile'] #way-mobile-web { order: -1; }
html[data-device='mobile'] #way-desktop { order: 1; }

.signin-help { max-width: 46em; padding: 40px 0 96px; }
.signin-help h2 { margin-bottom: 14px; font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.signin-help > p { margin: 20px 0 0; color: var(--text-2); }
.signin-help .faq { margin-bottom: 8px; }
.os-steps { margin: 14px 0 0; padding: 0; list-style: none; }
.os-steps li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 560px) {
  .os-steps li { grid-template-columns: 10em minmax(0, 1fr); gap: 16px; }
}
.os { font-weight: 750; color: var(--text); }

/* The global focus rule above sets border-radius: 6px on every focused link and button, which squared these pills and badges
   while they had focus; each keeps its own shape. */
.signin-btn:focus-visible, .pill:focus-visible, .lang-btn:focus-visible { border-radius: 999px; }
.menu-btn:focus-visible { border-radius: 50%; }
.go:focus-visible, a.store:focus-visible { border-radius: 14px; }