/* askfish.app — one stylesheet for every page.
   Dark water: the app's navy (#04234D) sinking to near-black, the brand blue
   (#1A8FCC, the app's dark-mode brand) for accents, aqua (#12C2C8) for light
   on the water. Motion lives in site.js; everything here also reads without it. */

:root {
  --bg: #02060d;
  --bg-raise: #060e1a;
  --bg-sunk: #01040a;
  --card: rgba(255, 255, 255, 0.035);
  --card-strong: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f3f6fa;
  --text-2: #a9b6c6;
  --text-3: #6f7f93;
  --brand: #1a8fcc;
  --brand-bright: #46b4ec;
  --navy: #04234d;
  --midwater: #0a4a7a;
  --aqua: #12c2c8;
  --tide: #2e9ec7;
  --gold: #db9e29;
  --legend: #b847db;
  --ok: #3ccf91;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius: 16px;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --header: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color-scheme: dark;
}

:lang(zh-Hant) {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The viewport never scrolls sideways (body clips without becoming a
     scroller, so sticky stories still stick to the window). */
  overflow-x: hidden;
  background: var(--bg);
  scroll-padding-top: calc(var(--header) + 12px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* No paragraph ends on a lone character. */
p,
li,
dd {
  text-wrap: pretty;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(26, 143, 204, 0.45);
  color: #fff;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.skip:focus {
  top: 12px;
}

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

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

/* ---- Type ----------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  /* Even lines: no lone character on a heading's last line. */
  text-wrap: balance;
}

.step h3,
.rail-head h3,
.card-body h4,
.detail-sec h3 {
  text-wrap: balance;
}

:lang(zh) .display {
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.grad {
  background: linear-gradient(100deg, #7fd3ff 0%, #2fa6e6 38%, var(--aqua) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-soft {
  background: linear-gradient(180deg, #ffffff 30%, #b9c6d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-bright);
}

:lang(zh) .kicker {
  letter-spacing: 0.18em;
}

.kicker .num {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.kicker .bar {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.lead {
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

.fine {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
}

/* ---- Header ----------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--header);
  transition: transform 0.5s var(--ease-out), background-color 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-solid {
  background: rgba(2, 6, 13, 0.62);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  border-bottom-color: var(--line);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-right: auto;
  white-space: nowrap;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.brand .brand-sub {
  color: var(--text-3);
  font-weight: 500;
}

.nav-links {
  display: flex;
  gap: 26px;
  font-size: 14.5px;
  color: var(--text-2);
}

.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: color 0.25s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.nav-links a:hover,
.nav-links a.is-current {
  color: var(--text);
}

.nav-links a:hover::after,
.nav-links a.is-current::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang {
  position: relative;
}

.lang-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.lang-button:hover,
.icon-button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.lang-button svg,
.icon-button svg {
  width: 16px;
  height: 16px;
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 168px;
  padding: 6px;
  margin: 0;
  list-style: none;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 16, 28, 0.92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out);
}

.lang.is-open .lang-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lang-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--text-2);
}

.lang-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.lang-menu a[aria-current] {
  color: var(--text);
}

.lang-menu a[aria-current]::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-bright);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: #02060d;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, background-color 0.3s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(70, 180, 236, 0.35);
}

.menu-button {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  position: relative;
}

.menu-button span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.4s var(--ease-out), opacity 0.2s ease;
}

.menu-button span:nth-child(1) {
  top: 15px;
}

.menu-button span:nth-child(2) {
  top: 23px;
}

.menu-open .menu-button span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.menu-open .menu-button span:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  padding: calc(var(--header) + 24px) var(--gutter) 40px;
  background: rgba(2, 6, 13, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

.mobile-menu a {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.02em;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s ease;
}

.menu-open .mobile-menu a {
  transform: none;
  opacity: 1;
}

.mobile-menu .mobile-langs {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.mobile-menu .mobile-langs a {
  font-size: 15px;
  font-family: var(--font);
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.mobile-menu .mobile-langs a[aria-current] {
  background: #fff;
  color: var(--bg);
}

.progress-line {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--brand), var(--aqua));
  opacity: 0.85;
  pointer-events: none;
}

/* ---- The phone ------------------------------------------------------------------ */
/* Drawn to the iPhone 17 Pro's proportions; --w sets its width. The status bar,
   the island and the home indicator are drawn here, over the app's screen. */

.phone {
  --w: 320px;
  /* 3.6% of the width: with a 402:874 screen the whole phone comes out at
     150 : 71.9, the iPhone 17 Pro's own outline. */
  --bezel: calc(var(--w) * 0.036);
  /* The display's 55 pt corners plus the bezel, as on the real phone. */
  --radius: calc(var(--w) * 0.162);
  position: relative;
  width: var(--w);
  /* The screen inside the bezel keeps 402:874 (iPhone 17 Pro): an explicit
     height, so a flex or grid parent can never stretch the phone. */
  height: calc((var(--w) - 2 * var(--bezel)) * 874 / 402 + 2 * var(--bezel));
  flex: none;
  align-self: auto;
  border-radius: var(--radius);
  padding: var(--bezel);
  background: linear-gradient(145deg, #3a4048 0%, #16191e 22%, #0a0c0f 55%, #24282e 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 calc(var(--bezel) * 0.55) #050607, 0 50px 120px -30px rgba(0, 0, 0, 0.85),
    0 30px 90px -40px rgba(26, 143, 204, 0.55);
}

.phone::before {
  /* Side buttons. */
  content: "";
  position: absolute;
  right: -2px;
  top: 22%;
  width: 3px;
  height: 11%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #22262c, #3b4149);
}

.phone::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 18%;
  width: 3px;
  height: 5%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(270deg, #22262c, #3b4149);
  box-shadow: 0 calc(var(--w) * 0.12) 0 #2a2e34, 0 calc(var(--w) * 0.21) 0 #2a2e34;
}

.phone-screen {
  --screen-radius: calc(var(--radius) - var(--bezel));
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--screen-radius);
  background: #f2f2f7;
  isolation: isolate;
  /* overflow + border-radius alone lets animated children escape the
     corners while the phone turns in 3D; a clip-path and a mask do not. */
  clip-path: inset(0 round var(--screen-radius));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.phone-screen[data-scheme="dark"] {
  background: #000;
}

.phone-screen .screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--screen-radius);
  opacity: 0;
  /* A screen being replaced stays fully opaque under the next one until that
     one has faded in over it: a cross-fade would leave both half see-through
     and the picture would dip toward black mid-change. */
  transition: opacity 0s linear 0.6s;
}

.phone-screen .screen.is-on {
  opacity: 1;
  z-index: 1;
  transition: opacity 0.55s ease;
}

.phone-screen .screen:only-of-type {
  opacity: 1;
}

.statusbar {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  height: 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2% 9.5% 0 12%;
  font: 600 calc(var(--w) * 0.044) / 1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.01em;
  color: #000;
  pointer-events: none;
}

.phone-screen[data-scheme="dark"] .statusbar,
.statusbar.is-light {
  color: #fff;
}

.statusbar .icons {
  display: flex;
  gap: calc(var(--w) * 0.013);
  align-items: center;
}

.statusbar svg {
  height: calc(var(--w) * 0.036);
  width: auto;
  fill: currentColor;
}

.island {
  position: absolute;
  z-index: 4;
  top: 1.45%;
  left: 50%;
  width: 31.5%;
  height: 4.25%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

.home-indicator {
  position: absolute;
  z-index: 3;
  bottom: 0.9%;
  left: 50%;
  width: 36%;
  height: 0.6%;
  min-height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.phone-screen[data-scheme="dark"] .home-indicator {
  background: rgba(255, 255, 255, 0.85);
}

.glare {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  border-radius: var(--screen-radius);
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 24%, transparent 42%);
}

/* ---- Hero -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header) + 20px) 0 48px;
  overflow: hidden;
  isolation: isolate;
}

.hero .water,
.hero .water-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

/* Under the water: what shows before WebGL is ready, or without it. */
.hero .water-fallback {
  z-index: -3;
}

.water-fallback {
  background: radial-gradient(ellipse 70% 60% at 72% 30%, rgba(26, 143, 204, 0.32), transparent 70%),
    linear-gradient(180deg, #0a4a7a 0%, #04234d 45%, var(--bg) 100%);
}

.hero .water {
  opacity: 0;
  transition: opacity 1.6s ease;
}

.hero .water.is-ready {
  opacity: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(4, 35, 77, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13.5px;
  font-weight: 550;
  color: #d8e6f3;
}

.eyebrow img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.hero h1 {
  font-size: clamp(46px, 7vw, 108px);
  margin: 26px 0 0;
}

:lang(zh) .hero h1 {
  font-size: clamp(44px, 6.4vw, 96px);
}

.hero h1 .line {
  display: block;
}

/* background-clip: text only paints inside the box: room for y, g, p. */
.hero h1 .line.grad {
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.hero .lead {
  margin-top: 26px;
  max-width: 34em;
  color: #c3d0de;
}

:lang(zh) .hero .lead {
  max-width: 27em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 36px;
}

.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 12px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}

.store-badge img {
  height: 54px;
  width: auto;
}

.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(26, 143, 204, 0.35);
}

.qr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.qr img {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  background: #fff;
  padding: 5px;
}

.qr span {
  max-width: 9em;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}

.hero-meta {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--text-3);
  letter-spacing: 0.01em;
}

.hero-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1600px;
}

.hero-stage .phone {
  /* The phone, its caption and the tab pills under it fit one laptop screen:
     the phone is about 2.1 times as tall as it is wide. */
  --w: max(240px, min(clamp(260px, 25vw, 360px), calc((100vh - var(--header) - 204px) * 0.476)));
  transform: rotateY(-7deg) rotateX(3deg);
}

.hero-stage .halo {
  position: absolute;
  inset: 8% -10% 6%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(18, 194, 200, 0.28), rgba(26, 143, 204, 0.12) 55%, transparent 75%);
}

.chip {
  position: absolute;
  z-index: 6;
  display: block;
  white-space: nowrap;
}

.chip-in {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px 10px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 26, 46, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  font-weight: 600;
  color: #eaf3fb;
  animation: float 5s ease-in-out infinite;
}

.chip svg {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.scroll-cue i {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6));
  position: relative;
  overflow: hidden;
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: #fff;
  animation: cue 2.2s var(--ease-in-out) infinite;
}

@supports (animation-timeline: scroll()) {
  .progress-line {
    animation: page-progress linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes page-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes cue {
  to {
    top: 110%;
  }
}

/* ---- Statement and stats ------------------------------------------------------- */

.statement {
  padding: clamp(110px, 16vh, 200px) 0 clamp(60px, 10vh, 120px);
}

.statement p {
  margin: 0;
  max-width: 21em;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.3vw, 62px);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

:lang(zh) .statement p {
  max-width: 17em;
  /* Each clause keeps to one line, so the longest (about 12.5 characters)
     has to fit a phone's width. */
  font-size: min(clamp(30px, 4.3vw, 62px), calc((100vw - 2 * var(--gutter)) / 12.6));
  letter-spacing: 0;
  line-height: 1.32;
}

.statement .ph {
  white-space: nowrap;
}

.statement .w {
  transition: opacity 0.2s linear;
}

.js .statement .w {
  opacity: 0.16;
}

.stats {
  padding: 0 0 clamp(80px, 14vh, 170px);
}

.stats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.stats li {
  padding: 28px 18px 0 0;
}

.stats li + li {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.stats .value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.2vw, 78px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stats .label {
  display: block;
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.45;
}

/* ---- Chapters ---------------------------------------------------------------------- */

.chapter {
  position: relative;
  overflow-x: clip;
  padding: clamp(90px, 14vh, 160px) 0 clamp(60px, 10vh, 120px);
}

.chapter + .chapter {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.chapter-head {
  position: relative;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.chapter-head .ghost {
  position: absolute;
  left: 50%;
  top: -0.42em;
  z-index: -1;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(160px, 26vw, 380px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}

.chapter-head h2 {
  font-size: clamp(38px, 5.6vw, 84px);
  margin: 22px 0 0;
}

.chapter-head .lead {
  margin: 26px auto 0;
  max-width: 40em;
}

:lang(zh) .chapter-head .lead {
  max-width: 33em;
}

.chapter-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: min(1100px, 120vw);
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 30%, var(--glow, rgba(26, 143, 204, 0.18)), transparent 65%);
  pointer-events: none;
}

/* ---- Story: the phone stays, the steps scroll by ------------------------------- */

.story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 110px);
  margin-top: clamp(40px, 8vh, 90px);
}

.story.is-flipped .story-media {
  order: 2;
}

.story-media {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}

.story-media .phone {
  /* As wide as the column allows, never taller than the window. It stands
     still while the page scrolls; it only settles in once, as the story
     arrives. */
  --w: min(clamp(250px, 24vw, 340px), calc((100vh - var(--header) - 56px) * 0.46));
}

.js .story-media .phone {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}

.js .story.is-in .story-media .phone {
  opacity: 1;
  transform: none;
}

.story-media .halo {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, rgba(26, 143, 204, 0.3)), transparent);
  z-index: -1;
}

.story-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step {
  min-height: 80vh;
  min-height: 80svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 30em;
  transition: opacity 0.6s ease;
}

.js .step {
  opacity: 0.26;
}

.js .step.is-active {
  opacity: 1;
}

.step-num {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  color: var(--brand-bright);
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 14px 0 16px;
}

:lang(zh) .step h3 {
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.step p {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--text-2);
}

.step-progress {
  display: flex;
  gap: 8px;
  margin-top: 30px;
}

.step-progress i {
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 0.4s ease, width 0.5s var(--ease-out);
}

.step-progress i.on {
  width: 36px;
  background: var(--brand-bright);
}

/* ---- Rails: cards that swipe sideways -------------------------------------------- */

.rail {
  margin-top: clamp(70px, 10vh, 120px);
}

.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.rail-head h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.15;
}

.rail-head p {
  margin: 10px 0 0;
  max-width: 40em;
  color: var(--text-2);
}

.rail-nav {
  display: flex;
  gap: 10px;
  flex: none;
}

.rail-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.3s var(--ease-out);
}

.rail-nav button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.rail-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

.rail-nav svg {
  width: 18px;
  height: 18px;
}

.rail-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 6px var(--gutter) 34px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.rail-track::-webkit-scrollbar {
  display: none;
}

/* A finger flicks card by card; a trackpad or mouse scrolls freely, so a short
   swipe never springs back to the card it started on. */
@media (hover: none), (pointer: coarse) {
  .rail-track {
    scroll-snap-type: x mandatory;
  }
}

.rail-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.rail-track.is-dragging * {
  pointer-events: none;
}

.rail-track::after {
  /* Room after the last card, so it can snap to the gutter. */
  content: "";
  flex: 0 0 1px;
}

@media (min-width: 1380px) {
  .rail-track {
    padding-left: calc((100vw - var(--maxw)) / 2);
    scroll-padding-inline: calc((100vw - var(--maxw)) / 2);
  }
}

.card {
  position: relative;
  flex: 0 0 clamp(282px, 29vw, 392px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015) 60%);
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.6s var(--ease-out);
}

.card:hover {
  border-color: var(--line-strong);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(120, 200, 255, 0.12), transparent 60%);
  transition: opacity 0.4s ease;
}

.card:hover::after {
  opacity: 1;
}

.card-media {
  position: relative;
  height: clamp(330px, 32vw, 410px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 30px;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, var(--glow, rgba(26, 143, 204, 0.26)), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent);
}

.card-media .phone {
  --w: clamp(200px, 19vw, 248px);
  transition: transform 0.9s var(--ease-out);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 calc(var(--bezel) * 0.55) #050607, 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}

.card:hover .card-media .phone {
  transform: translateY(-14px);
}

.card-body {
  padding: 4px 26px 28px;
}

.card-body h4 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.card-body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.card .tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
}

.rail-foot {
  display: flex;
  align-items: center;
  gap: 18px;
}

.rail-progress {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.rail-progress span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--aqua));
  transition: width 0.2s linear, transform 0.2s linear;
}

.rail-note {
  margin-top: 14px;
}

/* Mode cards: the four 钓问 modes. */

.card.mode {
  justify-content: space-between;
  min-height: clamp(400px, 34vw, 470px);
  padding: 28px 26px 26px;
  --tier: var(--brand-bright);
}

.card.mode[data-tier="tide"] {
  --tier: var(--tide);
}

.card.mode[data-tier="gold"] {
  --tier: var(--gold);
}

.card.mode[data-tier="legend"] {
  --tier: var(--legend);
}

.card.mode::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 60% at 100% 0%, color-mix(in srgb, var(--tier) 28%, transparent), transparent 70%);
  opacity: 0.8;
  pointer-events: none;
}

.mode-top {
  position: relative;
  z-index: 1;
}

.mode-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mode-name strong {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.mode-name span {
  font-size: 13px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.meter {
  display: flex;
  gap: 6px;
  margin: 18px 0 22px;
}

.meter i {
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
}

.meter i.on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--brand), var(--tier));
  transform-origin: left;
}

.js .meter i.on::after {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) var(--d, 0s);
}

.js .is-in .meter i.on::after {
  transform: scaleX(1);
}

.mode-summary {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px;
}

.mode-example {
  margin: 0;
  font-size: 15px;
  color: var(--text-3);
  line-height: 1.55;
}

.mode-bottom {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.mode-cost strong {
  display: block;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mode-cost span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.mode-who {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  background: color-mix(in srgb, var(--tier) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent);
  text-align: center;
}

/* Drawn visuals inside cards. */

.visual {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  color: var(--brand-bright);
}

.visual svg {
  width: min(78%, 260px);
  height: auto;
  overflow: visible;
}

.visual .stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visual .soft {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.5;
}

.visual .fillc {
  fill: currentColor;
}

.visual .ink {
  fill: var(--text);
}

.visual .muted {
  fill: var(--text-3);
}

.visual text {
  font-family: var(--font);
  font-weight: 600;
}

.pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 3.2s var(--ease-out) infinite;
}

.pulse.d2 {
  animation-delay: 1.07s;
}

.pulse.d3 {
  animation-delay: 2.13s;
}

@keyframes pulse {
  0% {
    transform: scale(0.3);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.float {
  animation: float 6s ease-in-out infinite;
}

.float.d2 {
  animation-delay: -2s;
}

.float.d3 {
  animation-delay: -4s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.draw {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}

.is-in .draw {
  animation: draw 2.4s var(--ease-out) forwards var(--d, 0.2s);
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 14s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.bubble {
  position: absolute;
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 550;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

.bubble.me {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.bubble.them {
  background: rgba(255, 255, 255, 0.92);
  color: #0b1220;
  border-bottom-left-radius: 6px;
}

.mini-cards {
  position: relative;
  width: 230px;
  height: 230px;
}

.mini-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: #0b1220;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.8s var(--ease-out);
}

.mini-card b {
  display: block;
  font-size: 14px;
}

.mini-card small {
  display: block;
  font-size: 12px;
  color: #5b6472;
}

.mini-card i {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #e6f2fa;
  color: var(--brand);
}

.mini-card i svg {
  width: 20px;
  height: 20px;
}

.mini-card:nth-child(1) {
  transform: translate(-50%, -50%) translate(-14px, -66px) rotate(-6deg);
}

.mini-card:nth-child(2) {
  transform: translate(-50%, -50%) translate(10px, 0) rotate(3deg);
}

.mini-card:nth-child(3) {
  transform: translate(-50%, -50%) translate(-6px, 66px) rotate(-2deg);
}

.card:hover .mini-card:nth-child(1) {
  transform: translate(-50%, -50%) translate(-24px, -80px) rotate(-9deg);
}

.card:hover .mini-card:nth-child(3) {
  transform: translate(-50%, -50%) translate(-14px, 80px) rotate(-4deg);
}

.lang-chips {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.lang-chips span {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  font-size: 22px;
  font-weight: 650;
  color: var(--text);
}

.lang-chips span:nth-child(2) {
  margin-left: 70px;
  background: var(--brand);
  border-color: transparent;
}

.lang-chips span:nth-child(3) {
  margin-right: 60px;
}

/* ---- Style chapter: the wardrobe (tabs over drifting strips) ------------------------ */

.wardrobe {
  margin-top: 44px;
}

.wardrobe-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.wardrobe-tabs button {
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 15px;
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.9s var(--ease-out),
    transform 1.1s var(--ease-out);
}

/* The tabs arrive like everything else, then change colour without that delay. */
.js .wardrobe-tabs button {
  transition: background-color 0.3s ease 0s, border-color 0.3s ease 0s, color 0.3s ease 0s,
    opacity 0.9s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s);
}

.wardrobe-tabs button b {
  color: var(--text);
  font-size: 18px;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.wardrobe-tabs button:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.wardrobe-tabs button[aria-selected="true"] {
  background: #fff;
  border-color: #fff;
  color: #2a3442;
}

.wardrobe-tabs button[aria-selected="true"] b {
  color: #02060d;
}

/* The strips of every tab sit on top of each other; the chosen one shows. */
.wardrobe-stage {
  position: relative;
  height: 252px;
  margin-top: 30px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.wardrobe-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.6s var(--ease-out), visibility 0s linear 0.4s;
}

.wardrobe-panel.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.08s, transform 0.7s var(--ease-out) 0.08s, visibility 0s;
}

.ward-strip ul {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee var(--dur, 60s) linear infinite;
}

.ward-strip.reverse ul {
  animation-direction: reverse;
}

/* Only the strip on show moves; any of them stops under the pointer. */
.wardrobe-panel:not(.is-on) ul,
.ward-strip:hover ul {
  animation-play-state: paused;
}

.ward-strip li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}

.ward-strip img {
  height: calc(var(--h) * var(--s, 1));
  width: auto;
  transition: transform 0.5s var(--ease-out);
}

.ward-strip li:hover img {
  transform: translateY(-5px) scale(1.04);
}

.k-icons img {
  border-radius: calc(24px * var(--s, 1));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.45);
}

.k-backgrounds img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 50px rgba(0, 0, 0, 0.5);
  border-radius: calc(16px * var(--s, 1));
}

.k-bubbles .ward-strip ul {
  align-items: flex-end;
}

.k-bubbles li,
.k-plates li {
  gap: 8px;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---- Pass ------------------------------------------------------------------------ */

.billing {
  display: inline-flex;
  position: relative;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  margin: 40px auto 0;
}

.billing button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.3s ease;
}

.billing button[aria-pressed="true"] {
  color: var(--bg);
}

.billing button small {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ok);
}

.billing button[aria-pressed="true"] small {
  color: #0a7a4c;
}

.billing .knob {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out);
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
  text-align: left;
}

.plan {
  --tier: var(--tide);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  overflow: hidden;
}

.plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tier);
}

.plan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--tier) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.plan[data-tier="gold"] {
  --tier: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--gold) 45%, transparent);
}

.plan[data-tier="legend"] {
  --tier: var(--legend);
}

@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.plan[data-tier="gold"] .plan-edge {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--sweep), transparent 0deg, rgba(255, 214, 140, 0.9) 40deg, transparent 90deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sweep 5s linear infinite;
  pointer-events: none;
}

@keyframes sweep {
  to {
    --sweep: 360deg;
  }
}

.plan > * {
  position: relative;
  z-index: 1;
}

.plan-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan-flag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: #241500;
  font-size: 12px;
  font-weight: 750;
}

.plan-for {
  margin: 8px 0 0;
  min-height: 3em;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-3);
}

.price {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  height: 64px;
  overflow: hidden;
}

.price strong {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.price span {
  font-size: 15px;
  color: var(--text-3);
}

.price-note {
  min-height: 1.6em;
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--ok);
}

.plan-amber {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 600;
  width: fit-content;
}

.coin {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe3a3, #e0a73a 55%, #9b6a12);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25);
}

.plan ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}

.plan li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
}

.plan li svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--tier);
}

.compare {
  margin-top: 64px;
}

.compare h3,
.amber h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

.table-wrap {
  position: relative;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--card);
}

.compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}

.compare th,
.compare td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.compare tr:last-child th,
.compare tr:last-child td {
  border-bottom: 0;
}

.compare thead th {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 650;
}

.compare thead th:nth-child(3) {
  color: var(--tide);
}

.compare thead th:nth-child(4) {
  color: var(--gold);
}

.compare thead th:nth-child(5) {
  color: var(--legend);
}

.compare tbody th {
  text-align: left;
  font-weight: 550;
  color: var(--text-2);
  white-space: normal;
  min-width: 11em;
}

.compare td {
  color: var(--text);
  font-weight: 550;
}

.compare td.dash {
  color: var(--text-3);
}

.compare td.check svg {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  color: var(--ok);
}

/* On a phone all four columns fit, so nobody has to find out the table scrolls. */
@media (max-width: 640px) {
  .compare table {
    min-width: 0;
    table-layout: fixed;
    font-size: 12.5px;
  }

  .compare th,
  .compare td {
    padding: 12px 4px;
    white-space: normal;
    line-height: 1.35;
  }

  .compare tbody th {
    width: 31%;
    min-width: 0;
    padding-left: 14px;
    font-size: 13px;
  }

  .compare thead th {
    font-size: 10.5px;
    letter-spacing: 0;
  }

  .compare thead th:first-child {
    width: 31%;
  }
}

.amber {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 28px;
  align-items: start;
}

.amber .lead {
  font-size: 16.5px;
  margin-bottom: 22px;
}

.packs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.packs li {
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
}

.packs .pack-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.packs .pack-name {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-2);
}

.packs .pack-price {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-3);
}

.packs .pack-price b {
  color: var(--text);
  font-size: 15px;
}

.costs {
  padding: 24px 24px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--card);
}

.costs h4 {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--text-2);
  font-weight: 600;
}

.costs dl {
  margin: 0;
  display: grid;
  gap: 2px;
}

.costs .row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.costs .row:last-child {
  border-bottom: 0;
}

.costs dt {
  font-weight: 600;
}

.costs dt small {
  display: block;
  font-weight: 450;
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 2px;
}

.costs dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pass-fine {
  margin-top: 36px;
  max-width: 62em;
}

/* ---- Trust --------------------------------------------------------------------- */

.trust {
  padding: clamp(100px, 15vh, 180px) 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.trust h2 {
  font-size: clamp(36px, 4.8vw, 70px);
}

.trust .lead {
  margin-top: 22px;
}

.trust ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.trust li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 24px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 16px;
  font-weight: 550;
  line-height: 1.5;
}

.trust li svg {
  width: 26px;
  height: 26px;
  color: var(--brand-bright);
}

.fuzz-visual {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  margin: 40px 0 0;
}

/* ---- FAQ -------------------------------------------------------------------------- */

.faq {
  padding: 0 0 clamp(100px, 15vh, 180px);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(32px, 6vw, 100px);
}

.faq h2 {
  font-size: clamp(34px, 4vw, 56px);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq details:first-child {
  border-top: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary i {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform 0.5s var(--ease-out), background-color 0.3s ease;
}

.faq summary i::before,
.faq summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  background: var(--text);
  transform: translate(-50%, -50%);
}

.faq summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.4s var(--ease-out);
}

.faq details[open] summary i {
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(180deg);
}

.faq details[open] summary i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq .answer {
  overflow: hidden;
}

.faq .answer p {
  margin: 0;
  padding: 0 48px 26px 0;
  color: var(--text-2);
  line-height: 1.7;
}

/* ---- Final call ------------------------------------------------------------------ */

.cta {
  position: relative;
  padding: clamp(110px, 18vh, 200px) 0 clamp(110px, 16vh, 180px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(10, 74, 122, 0.55), transparent 70%);
}

.cta-icon {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto;
}

.cta-icon img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 80px rgba(0, 0, 0, 0.6);
}

.cta-icon .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  border: 1px solid rgba(70, 180, 236, 0.5);
  animation: ripple 6s var(--ease-out) infinite;
  z-index: 1;
}

.cta-icon .ring:nth-child(2) {
  animation-delay: 2s;
}

.cta-icon .ring:nth-child(3) {
  animation-delay: 4s;
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  10% {
    opacity: 0.9;
  }

  100% {
    transform: scale(5.2);
    opacity: 0;
  }
}

.cta h2 {
  font-size: clamp(42px, 6.4vw, 100px);
  margin: 46px 0 0;
}

.cta .lead {
  margin: 22px auto 0;
}

.cta .hero-actions {
  justify-content: center;
}

/* ---- Phones: a download bar once the hero is gone ------------------------------- */

.dock {
  display: none;
}

@media (max-width: 860px) {
  .dock {
    position: fixed;
    z-index: 60;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 12px;
    border-radius: 22px;
    border: 1px solid var(--line-strong);
    background: rgba(8, 18, 32, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(140%);
    visibility: hidden;
    transition: transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
  }

  .dock.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.6s var(--ease-out);
  }

  .dock img {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .dock-text {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
  }

  .dock-text b {
    display: block;
    font-size: 15px;
  }

  .dock-text small {
    display: block;
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dock .button {
    display: inline-flex;
    height: 38px;
    padding: 0 18px;
  }
}

/* ---- Footer -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 44px;
  font-size: 14px;
  color: var(--text-3);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 40px;
}

.footer-brand p {
  margin: 12px 0 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.footer-links a,
.footer-langs a {
  color: var(--text-2);
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-langs a:hover {
  color: var(--text);
}

.footer-langs {
  display: flex;
  gap: 16px;
}

.footer-langs a[aria-current] {
  color: var(--text);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ---- Text pages (privacy, terms, support, shared links) -------------------------- */

.page {
  padding: calc(var(--header) + 56px) 0 100px;
}

.page .wrap {
  max-width: calc(760px + 2 * var(--gutter));
}

.page h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 10px;
}

:lang(zh) .page h1 {
  letter-spacing: -0.01em;
}

.page h2 {
  font-size: 21px;
  line-height: 1.35;
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
}

.page p,
.page ul,
.page ol {
  margin: 0 0 16px;
  color: #c3cdd9;
  line-height: 1.75;
}

.page ul,
.page ol {
  padding-left: 22px;
}

.page li {
  margin: 6px 0;
}

.page a {
  color: var(--brand-bright);
}

.page a:hover {
  text-decoration: underline;
}

.updated {
  color: var(--text-3);
  font-size: 14px;
  margin-bottom: 30px;
}

.contact {
  margin: 10px 0 18px;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
}

.contact a {
  font-size: 19px;
  font-weight: 650;
}

.muted {
  color: var(--text-3);
}

.link-hero {
  text-align: center;
  padding-top: 10px;
}

.link-hero .icon {
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 20px 50px rgba(0, 0, 0, 0.5);
}

.link-hero h1 {
  margin-top: 24px;
}

.link-hero .lead {
  max-width: 30em;
  margin: 10px auto 26px;
  font-size: 18px;
}

.code {
  display: inline-block;
  margin: 0 0 22px;
  padding: 14px 22px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
}

.code-label {
  color: var(--text-3);
  font-size: 14px;
}

.code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.code-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  -webkit-user-select: all;
  user-select: all;
}

.copy {
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  color: var(--brand-bright);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.open {
  font-size: 15px;
  font-weight: 650;
}

.steps {
  text-align: left;
  max-width: 460px;
  margin: 34px auto 0;
  padding-left: 24px;
}

.note {
  font-size: 14px;
  margin: 22px auto 0;
  max-width: 460px;
}

[hidden] {
  display: none !important;
}

/* ---- Entrances (only with JavaScript; site.js adds .is-in) ---------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.js .split .c {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 26ms + var(--d, 0s));
}

.js .split.is-in .c {
  opacity: 1;
  transform: none;
}

.split .c.sp {
  width: 0.28em;
}

.split .ph,
h2 .ph,
h3 .ph {
  display: inline-block;
  white-space: nowrap;
}

/* ---- Small screens -------------------------------------------------------------- */

@media (max-width: 1080px) {
  .nav-links {
    display: none;
  }

  .menu-button {
    display: inline-block;
  }

  .stats ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }

  .stats li:nth-child(4) {
    border-left: 0;
    padding-left: 0;
  }

  .plans {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .amber,
  .trust-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  :root {
    --header: 58px;
  }

  .header-actions .button {
    display: none;
  }

  .brand .brand-sub {
    display: none;
  }

  .hero {
    padding-top: calc(var(--header) + 28px);
    padding-bottom: 60px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .qr {
    display: none;
  }

  .hero-stage {
    margin-top: 18px;
  }

  .hero-stage .phone {
    --w: min(68vw, 290px);
    transform: none;
  }

  .hero-stage .chip-in {
    font-size: 12.5px;
    padding: 8px 12px 8px 9px;
  }

  .eyebrow-name {
    display: none;
  }

  .scroll-cue {
    display: none;
  }

  /* The story stacks: the phone sticks under the header, the steps scroll up
     beneath it and fade out behind its panel. The panel reaches the top of the
     screen, so nothing shows above the phone while the header is tucked away. */
  .story {
    display: block;
  }

  .story-media {
    position: sticky;
    top: 0;
    z-index: 2;
    height: calc(62svh + var(--header));
    height: calc(62vh + var(--header));
    padding: calc(var(--header) + 10px) 0 0;
    align-items: flex-start;
    background: linear-gradient(180deg, var(--bg) 80%, rgba(2, 6, 13, 0));
  }

  .story-media .phone {
    --w: min(54vw, 250px, calc((62vh - 24px) * 0.46));
  }

  .story-steps {
    position: relative;
    z-index: 1;
    padding-bottom: 20vh;
  }

  .step {
    min-height: 58vh;
    min-height: 58svh;
    justify-content: flex-start;
    padding-top: 2vh;
    max-width: none;
  }

  .step h3 {
    margin: 8px 0 10px;
  }

  .step-progress {
    display: none;
  }

  .chapter-head .ghost {
    font-size: 46vw;
    top: -0.3em;
  }

  .rail-nav {
    display: none;
  }

  .card {
    flex-basis: min(80vw, 340px);
  }

  .stats ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats li,
  .stats li + li,
  .stats li:nth-child(4) {
    border-left: 0;
    padding-left: 0;
  }

  .stats li:nth-child(odd) {
    padding-right: 12px;
  }

  .trust ul {
    grid-template-columns: 1fr;
  }

  .packs {
    grid-template-columns: 1fr 1fr;
  }

  .faq .answer p {
    padding-right: 0;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 42px;
  }

  :lang(zh) .hero h1 {
    font-size: 40px;
  }

  .lang-button span {
    display: none;
  }

  .packs {
    grid-template-columns: 1fr;
  }
}

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

  .js [data-reveal],
  .js .split .c,
  .js .statement .w,
  .js .step,
  .js .story-media .phone {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .ward-strip ul {
    animation: none;
  }
}

/* ---- The hero phone you can tap -------------------------------------------------- */

.hero-stage {
  flex-direction: column;
  gap: 26px;
}

.proto-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.proto-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--screen-radius);
  opacity: 0;
  z-index: 0;
}

.proto-layer.is-on {
  opacity: 1;
  z-index: 1;
}

.proto-hots {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.hot {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hot:focus {
  outline: none;
}

.hot:focus-visible {
  outline: 2px solid rgba(120, 200, 255, 0.7);
  outline-offset: -2px;
}

.hot-back {
  width: 11%;
  aspect-ratio: 1;
  height: auto !important;
  border-radius: 50%;
  background: rgba(60, 64, 72, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  color: #fff;
}

.hot-back svg {
  width: 52%;
  height: 52%;
}

.proto-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  text-align: center;
}

.proto-caption {
  margin: 0;
  min-height: 2.9em;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

.proto-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 8px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: rgba(70, 180, 236, 0.16);
  color: #9fdcff;
  font-weight: 650;
  font-size: 12.5px;
  vertical-align: 1px;
}

.proto-hint i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fd0ff;
  box-shadow: 0 0 0 0 rgba(111, 208, 255, 0.7);
  animation: hint-dot 2s ease-out infinite;
}

@keyframes hint-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(111, 208, 255, 0.7);
  }

  100% {
    box-shadow: 0 0 0 9px rgba(111, 208, 255, 0);
  }
}

.proto-text {
  transition: opacity 0.25s ease;
}

.proto-pills {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(4, 18, 34, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.proto-pills button {
  border: 0;
  background: none;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.proto-pills button:hover {
  color: var(--text);
}

.proto-pills button[aria-pressed="true"] {
  background: #fff;
  color: var(--bg);
}

/* The callouts follow the screen on show. */
.hero-stage .chip {
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.6s var(--ease-out);
}

.hero-stage .chip.is-shown {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--pos-delay, 0s) + 0.15s);
}

.hero-stage .chip[data-pos="1"] {
  left: -10%;
  top: 22%;
  --pos-delay: 0s;
}

.hero-stage .chip[data-pos="2"] {
  right: -9%;
  top: 46%;
  left: auto;
  --pos-delay: 0.12s;
}

.hero-stage .chip[data-pos="3"] {
  left: -4%;
  bottom: 14%;
  top: auto;
  --pos-delay: 0.24s;
}

.hero-stage .chip[data-pos="2"] .chip-in {
  animation-delay: -1.6s;
}

.hero-stage .chip[data-pos="3"] .chip-in {
  animation-delay: -3.2s;
}

/* ---- Cards, steps and plans that open a detail ---------------------------------- */

.card-link {
  font: inherit;
  color: inherit;
  text-align: left;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.card-link:focus-visible {
  outline: none;
}

.card:has(.card-link:focus-visible) {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
}

.card.has-detail {
  cursor: pointer;
}

.card.has-detail:hover {
  transform: translateY(-4px);
  border-color: rgba(120, 200, 255, 0.28);
}

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--brand-bright);
}

.card-more i {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(70, 180, 236, 0.5);
  transition: transform 0.4s var(--ease-out), background-color 0.3s ease;
}

.card-more i::before,
.card-more i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.card-more i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.card.has-detail:hover .card-more i {
  transform: rotate(90deg);
  background: rgba(70, 180, 236, 0.18);
}

.card.mode .card-more {
  position: relative;
  margin-top: 14px;
}

.mode-name .card-link {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.step-more,
.plan-more,
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 9px 16px 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(70, 180, 236, 0.45);
  background: rgba(26, 143, 204, 0.12);
  color: #bfe6ff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  cursor: pointer;
  width: fit-content;
  transition: background-color 0.3s ease, transform 0.35s var(--ease-out), border-color 0.3s ease;
}

.step-more:hover,
.plan-more:hover,
.link-more:hover {
  background: rgba(26, 143, 204, 0.26);
  border-color: rgba(120, 200, 255, 0.7);
  transform: translateX(3px);
}

.step-more svg,
.plan-more svg,
.link-more svg {
  width: 15px;
  height: 15px;
}

.link-more {
  margin: 0 0 0 4px;
  padding: 3px 10px 3px 12px;
  font-size: 13.5px;
  vertical-align: 1px;
}

.plan-more {
  margin-top: auto;
  align-self: flex-start;
}

.plan ul {
  margin-bottom: 22px;
}

/* ---- The detail sheet ---------------------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.sheet[hidden] {
  display: none !important;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 10, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.sheet.is-open .sheet-backdrop {
  opacity: 1;
}

.sheet-panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(90vh, 980px);
  display: flex;
  flex-direction: column;
  border-radius: 34px;
  border: 1px solid var(--line-strong);
  background: radial-gradient(ellipse 80% 50% at 25% 0%, rgba(26, 143, 204, 0.18), transparent 70%),
    linear-gradient(180deg, #0a1524 0%, #050b14 70%);
  box-shadow: 0 50px 140px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px) scale(0.965);
  transition: opacity 0.4s ease, transform 0.65s var(--ease-out);
}

.sheet.is-open .sheet-panel {
  opacity: 1;
  transform: none;
}

.sheet-panel:focus {
  outline: none;
}

.sheet-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(10, 20, 34, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), background-color 0.25s ease;
}

.sheet-close:hover {
  transform: rotate(90deg);
  background: rgba(30, 44, 62, 0.9);
}

.sheet-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--text);
  transform: translate(-50%, -50%) rotate(45deg);
}

.sheet-close span + span {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.detail {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(36px, 4.5vw, 64px) clamp(28px, 4.5vw, 64px) 40px;
}

.detail-media {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 520px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  perspective: 1600px;
  padding-top: 8px;
}

.detail-phone {
  position: relative;
  transition: transform 0.8s var(--ease-out), opacity 0.6s ease;
}

.detail-phone .phone {
  --w: clamp(190px, 17vw, 236px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 calc(var(--bezel) * 0.55) #050607, 0 40px 90px -20px rgba(0, 0, 0, 0.85);
}

.detail-media.n2 .detail-phone:nth-child(1) {
  z-index: 2;
  transform: translateX(16%) rotateY(4deg);
}

.detail-media.n2 .detail-phone:nth-child(2) {
  z-index: 1;
  transform: translateX(-16%) translateY(46px) rotateY(-6deg) scale(0.9);
  opacity: 0.85;
}

.detail-media.n3 .detail-phone:nth-child(1) {
  z-index: 3;
}

.detail-media.n3 .detail-phone:nth-child(2) {
  z-index: 2;
  margin-left: -120px;
  transform: translateY(54px) rotateY(-6deg) scale(0.86);
  opacity: 0.82;
}

.detail-media.n3 .detail-phone:nth-child(3) {
  z-index: 1;
  margin-left: -120px;
  transform: translateY(104px) rotateY(-8deg) scale(0.74);
  opacity: 0.6;
}

.detail-media:hover .detail-phone:nth-child(2) {
  transform: translateY(40px) translateX(20px) rotateY(-3deg) scale(0.88);
  opacity: 1;
}

.detail-media.n3:hover .detail-phone:nth-child(3) {
  transform: translateY(80px) translateX(44px) rotateY(-4deg) scale(0.78);
  opacity: 0.9;
}

.detail-text {
  padding-top: 6px;
  padding-right: 44px;
}

.detail-text h2 {
  font-size: clamp(34px, 3.6vw, 54px);
  margin: 16px 0 0;
}

.detail-text > .lead {
  margin-top: 18px;
  font-size: clamp(16.5px, 1.25vw, 19px);
  color: #c6d2df;
}

.detail-facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 112px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.detail-facts b {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #9fe0ff, #46b4ec);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.detail-facts span {
  font-size: 13px;
  color: var(--text-3);
}

.detail-sec {
  margin-top: 30px;
}

.detail-sec h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.detail-sec p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.75;
}

.detail-sec ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.detail-sec li {
  position: relative;
  padding-left: 22px;
  color: var(--text-2);
  line-height: 1.6;
}

.detail-sec li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-bright), var(--aqua));
}

.mode-compare {
  margin-top: 30px;
}

.mode-compare h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.mode-compare ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.mode-compare li {
  --tier: var(--brand-bright);
}

.mode-compare li[data-tier="tide"] {
  --tier: var(--tide);
}

.mode-compare li[data-tier="gold"] {
  --tier: var(--gold);
}

.mode-compare li[data-tier="legend"] {
  --tier: var(--legend);
}

.mode-compare button {
  width: 100%;
  display: grid;
  grid-template-columns: 4.2em 1fr auto 9.5em;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.mode-compare button:hover {
  background: rgba(255, 255, 255, 0.07);
}

.mode-compare .is-current button {
  border-color: color-mix(in srgb, var(--tier) 70%, transparent);
  background: color-mix(in srgb, var(--tier) 14%, transparent);
}

.mode-compare .meter {
  margin: 0;
}

.mode-compare .meter i {
  height: 5px;
}

.mode-compare .meter i.on {
  background: linear-gradient(90deg, var(--brand), var(--tier));
}

.mc-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mc-cost .coin {
  width: 14px;
  height: 14px;
}

.mc-who {
  color: var(--text-3);
  font-size: 13px;
  text-align: right;
}

.detail-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-3);
}

.detail-cta .store-badge img {
  height: 46px;
}

.sheet-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: rgba(4, 10, 18, 0.85);
}

.sheet-nav button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 48%;
  padding: 8px 12px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.sheet-nav button[data-step="1"] {
  text-align: right;
  margin-left: auto;
}

.sheet-nav button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sheet-nav button[hidden] {
  display: none;
}

.sheet-nav svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand-bright);
}

.sheet-nav small {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.sheet-nav b {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entrances inside the sheet. */
.sheet .detail-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.8s var(--ease-out);
}

.sheet .detail-phone {
  opacity: 0;
}

.sheet.is-ready .detail-text > * {
  opacity: 1;
  transform: none;
}

.sheet.is-ready .detail-text > *:nth-child(2) { transition-delay: 0.05s; }
.sheet.is-ready .detail-text > *:nth-child(3) { transition-delay: 0.1s; }
.sheet.is-ready .detail-text > *:nth-child(4) { transition-delay: 0.15s; }
.sheet.is-ready .detail-text > *:nth-child(5) { transition-delay: 0.2s; }
.sheet.is-ready .detail-text > *:nth-child(n + 6) { transition-delay: 0.25s; }

.sheet.is-ready .detail-phone {
  opacity: 1;
  animation: phone-rise 0.9s var(--ease-out) both;
  animation-delay: calc(var(--k) * 0.09s + 0.05s);
}

.sheet.is-ready .detail-media.n2 .detail-phone:nth-child(2),
.sheet.is-ready .detail-media.n3 .detail-phone:nth-child(2) {
  opacity: 0.85;
}

.sheet.is-ready .detail-media.n3 .detail-phone:nth-child(3) {
  opacity: 0.6;
}

@keyframes phone-rise {
  from {
    translate: 0 60px;
  }

  to {
    translate: 0 0;
  }
}

.sheet.is-swapping .sheet-body {
  opacity: 0;
  transform: translateX(var(--swap, 24px));
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sheet-body {
  transition: opacity 0.35s ease, transform 0.45s var(--ease-out);
}

html.sheet-open {
  overflow: hidden;
}

@media (max-width: 960px) {
  .detail {
    grid-template-columns: 1fr;
    padding: 64px 22px 30px;
  }

  .detail-media {
    position: relative;
    min-height: 0;
    padding-top: 0;
  }

  .detail-media .detail-phone .phone {
    --w: min(46vw, 210px);
  }

  .detail-media.n3 .detail-phone:nth-child(2),
  .detail-media.n3 .detail-phone:nth-child(3) {
    margin-left: -26vw;
  }

  .detail-text {
    padding-right: 0;
  }
}

@media (max-width: 860px) {
  .sheet {
    padding: 0;
    place-items: end stretch;
  }

  .sheet-panel {
    width: 100%;
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 28px 28px 0 0;
    transform: translateY(100%);
  }

  .sheet.is-open .sheet-panel {
    transform: none;
  }

  .sheet-close {
    top: 12px;
    right: 12px;
  }

  .mode-compare button {
    grid-template-columns: 3.6em 1fr auto;
  }

  .mc-who {
    display: none;
  }

  .hero-stage {
    gap: 18px;
  }

  .hero-stage .chip[data-pos="1"] {
    left: -3%;
  }

  .hero-stage .chip[data-pos="2"] {
    right: -3%;
  }

  .hero-stage .chip[data-pos="3"] {
    left: 0;
  }

  .proto-pills button {
    padding: 6px 11px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet .detail-text > *,
  .sheet .detail-phone {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

}

/* ---- Questions people ask (the 钓问 chapter) -------------------------------------- */

.asks {
  margin-top: clamp(50px, 8vh, 90px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.asks-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.asks-row ul {
  display: flex;
  gap: 12px;
  width: max-content;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  animation: marquee 70s linear infinite;
}

.asks-row.reverse ul {
  animation-direction: reverse;
  animation-duration: 80s;
}

.asks:hover .asks-row ul {
  animation-play-state: paused;
}

.asks-row li {
  position: relative;
  padding: 12px 18px 12px 40px;
  border-radius: 20px 20px 20px 6px;
  border: 1px solid rgba(70, 180, 236, 0.28);
  background: linear-gradient(180deg, rgba(26, 143, 204, 0.16), rgba(26, 143, 204, 0.06));
  font-size: 15px;
  white-space: nowrap;
  color: #d9ecfa;
}

.asks-row li::before {
  content: "?";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  color: #02060d;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/* ---- North America ----------------------------------------------------------------- */

.na-grid {
  list-style: none;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.na-tile {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 22px 46px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), border-color 0.3s ease, background-color 0.3s ease;
}

.na-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(120, 200, 255, 0.3);
  background-color: rgba(26, 143, 204, 0.06);
}

.na-tile > svg {
  width: 28px;
  height: 28px;
  color: var(--brand-bright);
}

.na-tile b {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
}

.na-tile span {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.na-go {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 180, 236, 0.4);
  color: var(--brand-bright);
  transition: transform 0.4s var(--ease-out), background-color 0.3s ease;
}

.na-go svg {
  width: 14px;
  height: 14px;
}

.na-tile:hover .na-go {
  transform: translateX(4px);
  background: rgba(70, 180, 236, 0.16);
}

@media (max-width: 1080px) {
  .na-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .na-grid {
    grid-template-columns: 1fr;
  }

  .wardrobe-tabs {
    gap: 8px;
  }

  .wardrobe-tabs button {
    padding: 9px 13px;
    font-size: 13.5px;
  }

  .wardrobe-tabs button b {
    font-size: 16px;
  }

  .wardrobe-stage {
    --s: 0.78;
    height: 206px;
    margin-top: 22px;
  }

  .wardrobe-panel {
    gap: 18px;
  }

  .ward-strip ul {
    gap: 22px;
  }

  .asks-row li {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asks-row ul {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }

  .asks-row li[aria-hidden="true"] {
    display: none;
  }
}