/* OneOneTyping v6 — marketing pages (home, membership).
 *
 * A faithful port of andromeld.catchingnow.com/zh-Hans. Every value here was
 * measured off the live page (computed styles + its own stylesheet) rather than
 * eyeballed, so the rhythm matches: the 1072px column, the 168/208px hero
 * padding, the clamp() type scale, the 5fr/6fr split rows, the sticky-head FAQ,
 * the 560px closing CTA band and the whole responsive ladder at
 * 920 / 640 / 560px.
 *
 * Two deliberate departures:
 *
 *   1. The accent is OneOneTyping's light blue rather than andromeld's green.
 *      The *relationships* are preserved exactly — accent → accent-soft at 10%
 *      alpha, a lighter same-hue glow plus a contrasting teal glow, a darker
 *      button fill with a 45%-alpha shadow at the same hue.
 *   2. The body font is andromeld's own system stack, not Quicksand. That is
 *      what makes the page read the way it does, and it renders Chinese with
 *      PingFang SC natively. The app pages keep Quicksand (typing.com style).
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --mk-bg: #ffffff;
  --mk-bg-soft: #f3f7fa;          /* his #f3f7f4, one hue over */
  --mk-ink: #101012;              /* headings — his are near-black */
  --mk-ink-2: #56565e;            /* body — his exact value */
  --mk-ink-3: #6f7378;
  --mk-line: rgba(0, 0, 0, 0.11);
  --mk-line-soft: rgba(0, 0, 0, 0.07);

  /* The accent, matched to andromeld's green on L* and contrast rather than
     picked by eye — see the derivation in tokens.css. */
  --mk-accent: #0d76c9;
  --mk-accent-soft: #eaf4fd;
  --mk-accent-line: rgba(13, 118, 201, 0.24);
  --mk-glow-a: rgba(63, 165, 240, 0.16);
  --mk-glow-b: rgba(90, 130, 230, 0.12);
  --mk-btn-bg: #0c6dbd;           /* 5.33:1 with white */
  --mk-btn-ink: #ffffff;
  --mk-btn-shadow: rgba(12, 109, 189, 0.45);
  --mk-heading: #101012;

  --mk-nav-bg: rgba(255, 255, 255, 0.8);
  --mk-shot-border: rgba(0, 0, 0, 0.1);
  --mk-shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    0 28px 60px -28px rgba(10, 20, 15, 0.3);
  --mk-maxw: 1072px;

  /* The system stack andromeld uses — no webfont anywhere on the page. */
  --mk-font: -apple-system, system-ui, 'SF Pro Text', 'Segoe UI', Roboto,
    'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', Helvetica, Arial,
    sans-serif;
  --mk-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

html[data-theme='dark'] {
  --mk-bg: #0a0a0b;
  --mk-bg-soft: #101519;
  --mk-ink: #f4f4f5;
  --mk-ink-2: #a6a6ad;
  --mk-ink-3: #929299;
  --mk-line: rgba(255, 255, 255, 0.13);
  --mk-line-soft: rgba(255, 255, 255, 0.08);

  --mk-accent: #3d9ae4;
  --mk-accent-soft: rgba(63, 159, 232, 0.14);
  --mk-accent-line: rgba(63, 159, 232, 0.28);
  --mk-glow-a: rgba(63, 159, 232, 0.14);
  --mk-glow-b: rgba(90, 130, 230, 0.1);
  --mk-btn-bg: #1a659e;
  --mk-btn-ink: #ffffff;
  --mk-btn-shadow: rgba(0, 0, 0, 0.6);
  --mk-heading: #f4f4f5;

  --mk-nav-bg: rgba(12, 12, 13, 0.78);
  --mk-shot-border: rgba(255, 255, 255, 0.14);
  --mk-shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 32px 70px -30px rgba(0, 0, 0, 0.9);
}

/* Marketing pages opt out of the app font and page floor. */
body.mk {
  background: var(--mk-bg);
  color: var(--mk-ink);
  font-family: var(--mk-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

.mk .wrap {
  max-width: var(--mk-maxw);
}

/* -------------------------------------------------------------- nav bar */

.mk .nav {
  height: 56px;
  background: var(--mk-nav-bg);
  border-bottom: 1px solid var(--mk-line-soft);
}

.mk .nav-inner {
  justify-content: space-between;
}

.mk .brand {
  gap: 9px;
  color: var(--mk-ink);
  font-size: 16px;
  font-weight: 800;
}

.mk .brand-mark {
  width: 34px;
  height: 34px;
}

.mk .nav-links {
  gap: 22px;
}

.mk .nav-links a {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--mk-ink-2);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}

.mk .nav-links a:hover {
  color: var(--mk-ink);
  background: none;
}

.mk .nav-links a[aria-current='page'] {
  color: var(--mk-ink);
  font-weight: 650;
  background: none;
}

/* 会员 is the accented nav item — the equivalent of his Web App chip. */
.mk .nav-links a.nav-vip,
.mk .nav-links a.nav-vip[aria-current='page'] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-left: 0;
  border-radius: 0;
  background: none;
  color: var(--mk-ink);
  font-weight: 650;
}

.mk .nav-links a.nav-vip:hover {
  color: var(--mk-accent);
  background: none;
}

.mk .nav-icon-btn {
  width: 30px;
  height: 30px;
  border-color: var(--mk-line);
  color: var(--mk-ink-2);
}

.mk .nav-avatar {
  border-color: var(--mk-line);
  color: var(--mk-ink);
  font-weight: 500;
}

/* ------------------------------------------------------------- the hero */

.hero {
  position: relative;
  padding: 168px 0 84px;
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 640px;
  background: radial-gradient(
    900px 460px at 50% -120px,
    var(--mk-glow-a),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero h1 {
  max-width: 940px;
  margin: 0 auto 24px;
  color: var(--mk-heading);
  font-size: clamp(34px, 6.2vw, 62px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: normal;
  text-wrap: balance;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero .tagline {
  max-width: 820px;
  margin: 0 auto 38px;
  color: var(--mk-ink-2);
  font-size: clamp(19px, 2.5vw, 25px);
  font-weight: 550;
  line-height: 1.42;
  text-wrap: balance;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s both;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both;
}

.hero-alt-link {
  margin-top: 0;
  color: var(--mk-ink-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--mk-line);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.hero-alt-link:hover {
  color: var(--mk-accent);
  text-decoration-color: var(--mk-accent);
}

.hero-requirements {
  margin: 20px auto;
  padding: 0 16px;
  color: var(--mk-ink-2);
  font-size: 14px;
}

.hero-points {
  max-width: 1080px;
  margin: 72px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  text-align: left;
  animation: rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s both;
}

.hero-points p {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--mk-line);
  color: var(--mk-ink-2);
  font-size: 17px;
  font-weight: 450;
  line-height: 1.5;
}

.hero-points strong {
  display: block;
  margin-bottom: 5px;
  color: var(--mk-ink);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
}

.hero-points span {
  display: block;
  text-wrap: balance;
}

/* --------------------------------------------------------- store button */

.appstore-btn {
  --btn-radius: 22px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 24px 12px 20px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--mk-btn-bg);
  color: var(--mk-btn-ink);
  text-align: left;
  box-shadow: 0 10px 26px -14px var(--mk-btn-shadow);
  transition: box-shadow 0.24s, filter 0.24s;
}

.appstore-btn::after {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: calc(var(--btn-radius) + 16px);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
      95% 120% at 42% 46%,
      color-mix(in srgb, var(--mk-btn-bg) 34%, transparent),
      transparent 64%
    ),
    radial-gradient(84% 105% at 62% 58%, var(--mk-glow-b), transparent 74%);
}

.appstore-btn:hover {
  color: var(--mk-btn-ink);
  box-shadow: 0 16px 34px -17px var(--mk-btn-shadow);
  filter: saturate(1.04);
}

.appstore-btn:hover::after {
  opacity: 0.52;
  animation: appstoreGlowDrift 3.8s cubic-bezier(0.45, 0, 0.35, 1) infinite
    alternate;
}

.appstore-btn > * {
  position: relative;
}

.appstore-btn svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  flex: 0 0 auto;
}

.appstore-btn small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  opacity: 0.75;
}

.appstore-btn b {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}

@keyframes appstoreGlowDrift {
  0% {
    transform: translate3d(-4px, 1px, 0) scale(0.98);
  }
  45% {
    transform: translate3d(4px, -2px, 0) scale(1.01);
  }
  100% {
    transform: translate3d(-2px, 2px, 0) scale(0.99);
  }
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes capSwap {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------- hero video carousel */

.hero-shot {
  position: relative;
  margin-top: 60px;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.38s both;
}

.hero-shot::before {
  content: '';
  position: absolute;
  inset: 10% -3% -8%;
  pointer-events: none;
  background: radial-gradient(
      58% 55% at 28% 62%,
      var(--mk-glow-a),
      transparent 66%
    ),
    radial-gradient(52% 50% at 76% 38%, var(--mk-glow-b), transparent 66%);
}

.shot-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 1920 / 1246;
  overflow: hidden;
  border: 1px solid var(--mk-shot-border);
  border-radius: clamp(8px, 1.4vw, 14px);
  background: var(--mk-bg-soft);
  box-shadow: var(--mk-shot-shadow);
  touch-action: pan-y;
  user-select: none;
  cursor: pointer;
  will-change: transform;
}

.shot-frame:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 3px;
}

.shot-frame.is-dragging {
  cursor: grabbing;
}

.shot-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.22, 1);
}

.shot-frame.is-dragging .shot-track {
  transition: none;
}

.shot-slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}

.shot-slide video,
.shot-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Placeholder shown until the real videos land. Drop a <video> or <img>
   inside .shot-slide and this is simply never rendered. */
.shot-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background: linear-gradient(
    150deg,
    var(--mk-accent-soft),
    var(--mk-bg-soft) 52%,
    var(--mk-glow-b)
  );
}

.shot-ph .ph-keys {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 620px;
}

.shot-ph .ph-keys b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--mk-line);
  border-radius: 9px;
  background: var(--mk-bg);
  color: var(--mk-ink-2);
  font-family: var(--mk-mono);
  font-size: 17px;
  font-weight: 500;
  box-shadow: 0 2px 0 var(--mk-line);
}

.shot-ph .ph-keys b.on {
  border-color: var(--mk-accent);
  color: var(--mk-accent);
  box-shadow: 0 2px 0 var(--mk-accent);
}

.shot-ph .ph-keys b.ok {
  border-color: #7fc47a;
  color: #4f8a49;
  box-shadow: 0 2px 0 #7fc47a;
}

.shot-ph .ph-note {
  color: var(--mk-ink-3);
  font-family: var(--mk-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shot-playpause {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(16, 18, 17, 0.44);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, background-color 0.2s;
}

.shot-playpause svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.shot-playpause .pp-pause {
  display: none;
}

.shot-playpause.is-playing .pp-pause {
  display: block;
}

.shot-playpause.is-playing .pp-play {
  display: none;
}

.shot-playpause:hover {
  background: rgba(16, 18, 17, 0.62);
}

.shot-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 18, 17, 0.4);
  color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.shot-expand svg {
  width: 14px;
  height: 14px;
}

.shot-captions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 18px;
  margin-top: 26px;
  text-align: left;
}

.shot-cap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: baseline;
  padding: 13px 2px 0;
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  color: var(--mk-ink-3);
  cursor: pointer;
  transition: color 0.3s;
}

.shot-cap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--mk-line-soft);
}

.shot-cap:hover {
  color: var(--mk-ink-2);
}

.shot-cap.is-on {
  color: var(--mk-ink);
}

.cap-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
}

.cap-bar i {
  position: absolute;
  inset: 0;
  background: var(--mk-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.cap-idx {
  font-style: normal;
  font-family: var(--mk-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: color 0.3s;
}

.shot-cap.is-on .cap-idx {
  color: var(--mk-accent);
}

.cap-label {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}

/* Mobile collapses the three captions into one line of text. */
.shot-caption-current {
  display: none;
  margin-top: 14px;
  color: var(--mk-ink-2);
  font-size: 14px;
}

.shot-caption-current.swap {
  animation: capSwap 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------- sections */

.sec {
  padding: 42px 0 84px;
  scroll-margin-top: 56px;
}

.sec-rule {
  border-top: 1px solid var(--mk-line-soft);
}

.sec-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.sec h2 {
  color: var(--mk-heading);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: normal;
  text-wrap: balance;
}

.sec-lead {
  margin-top: 14px;
  color: var(--mk-ink-2);
  font-size: 16.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent);
}

.kicker i {
  font-style: normal;
  color: var(--mk-ink-3);
  letter-spacing: 0.06em;
}

.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 32px;
}

.col h3 {
  margin-bottom: 7px;
  color: var(--mk-ink);
  font-size: 16.5px;
  font-weight: 600;
}

.col p {
  color: var(--mk-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

.col .chip-icon,
.hp-tint .chip-icon {
  display: flex;
  align-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  color: var(--mk-accent);
  transition: transform 0.25s;
}

.col .chip-icon svg,
.hp-tint .chip-icon svg {
  width: 24px;
  height: 24px;
}

.col:hover .chip-icon {
  transform: translateY(-2px);
}

.sec-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px 64px;
  align-items: start;
}

.sec-grid .sec-head {
  margin-bottom: 0;
}

.split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 72px;
  align-items: center;
}

.split .sec-head {
  margin-bottom: 0;
}

.split-media img,
.split-media video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--mk-shot-border);
  box-shadow: var(--mk-shot-shadow);
  background: var(--mk-bg-soft);
}

.ticks {
  display: grid;
  gap: 14px;
}

.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.ticks li b {
  color: var(--mk-ink);
  font-weight: 600;
}

.ticks svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--mk-accent);
  flex: 0 0 auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cards-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  padding: 28px 26px;
  border: 1px solid var(--mk-line-soft);
  border-radius: 18px;
  background: var(--mk-bg-soft);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}

.card:hover {
  border-color: var(--mk-line);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
  transform: translateY(-2px);
}

.card h3 {
  margin-bottom: 7px;
  color: var(--mk-ink);
  font-size: 16.5px;
  font-weight: 600;
}

.card p {
  color: var(--mk-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

/* --------------------------------------------------------------- pricing */

.price-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.price-plan h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--mk-ink-2);
  font-size: 14px;
  font-weight: 600;
}

.price-plan.is-featured {
  border-top: 2px solid var(--mk-accent);
  padding-top: 18px;
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.price-amt {
  color: var(--mk-ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.price-per {
  color: var(--mk-ink-3);
  font-size: 13.5px;
}

.price-sub {
  color: var(--mk-ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.price-action {
  margin-top: 20px;
}

.price-note {
  max-width: 62ch;
  margin-top: 26px;
  color: var(--mk-ink-3);
  font-size: 13px;
}

.price-compare {
  width: 100%;
  margin-top: 36px;
  border-collapse: collapse;
  text-align: left;
}

.price-compare th,
.price-compare td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--mk-line-soft);
  color: var(--mk-ink-2);
  font-size: 14px;
  font-weight: 400;
}

.price-compare thead th {
  color: var(--mk-ink);
  font-weight: 600;
}

.price-compare th:first-child {
  width: 58%;
}

.price-compare td:last-child,
.price-compare thead th:last-child {
  color: var(--mk-accent);
}

/* ------------------------------------------------------------------- faq */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: 32px 88px;
  align-items: start;
}

.faq-grid .sec-head {
  position: sticky;
  top: 88px;
  margin-bottom: 0;
  align-self: start;
}

.faq-list {
  max-width: 760px;
  justify-self: stretch;
}

.faq-list details {
  border-top: 1px solid var(--mk-line-soft);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--mk-line-soft);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  color: var(--mk-ink);
  font-size: 16.5px;
  font-weight: 600;
}

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

.faq-list summary svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--mk-ink-3);
  transition: transform 0.25s, color 0.2s;
}

.faq-list details[open] summary svg {
  transform: rotate(135deg);
  color: var(--mk-accent);
}

.faq-list details p {
  max-width: 64ch;
  padding: 0 2px 22px;
  color: var(--mk-ink-2);
  font-size: 15.5px;
  line-height: 1.65;
}

.faq-more {
  grid-column: 2;
  max-width: 760px;
  padding: 0 2px;
  color: var(--mk-ink-2);
  font-size: 15px;
}

.faq-more a {
  color: var(--mk-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- cta band */

.cta {
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: 154px 0 148px;
  border-top: 1px solid var(--mk-line-soft);
  background: radial-gradient(
      900px 520px at 50% 4%,
      var(--mk-glow-a),
      transparent 74%
    ),
    var(--mk-accent-soft);
  text-align: center;
}

.cta .wrap {
  width: 100%;
}

.cta h2 {
  margin-bottom: 66px;
  color: var(--mk-heading);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

.cta .hero-cta {
  margin: 0 auto;
  gap: 34px;
}

/* ---------------------------------------------------------------- footer */

.mk .footer {
  padding: 34px 0;
  border-top: 1px solid var(--mk-line-soft);
  background: var(--mk-bg-soft);
}

.foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.foot-inner p {
  color: var(--mk-ink-3);
  font-size: 13px;
}

.foot-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.foot-links a {
  color: var(--mk-ink-2);
  font-size: 13.5px;
}

.foot-links a:hover {
  color: var(--mk-ink);
}

/* --------------------------------------------------- marketing controls
   The marketing pages reuse the app's .btn/.chip classes, so their colours
   are re-pointed at the marketing palette here. */

.mk .btn {
  border-radius: 980px;
  font-size: 15px;
  font-weight: 600;
}

.mk .btn-ghost {
  border-color: var(--mk-line);
  color: var(--mk-ink);
  background: transparent;
}

.mk .btn-ghost:hover {
  border-color: var(--mk-accent);
  color: var(--mk-accent);
  background: var(--mk-accent-soft);
  box-shadow: none;
}

.mk .chip {
  background: var(--mk-bg-soft);
  color: var(--mk-ink-2);
}

.mk .chip-gold {
  background: var(--gold-soft);
  color: var(--gold-soft-ink);
}

.mk .chip-green {
  background: var(--green-soft);
  color: var(--green-ink);
}

/* ------------------------------------------------------------ responsive */

@media (min-width: 921px) {
  .hero {
    padding-top: 208px;
  }

  .hero h1 {
    margin-bottom: 32px;
  }

  .hero .tagline {
    margin-bottom: 50px;
  }

  .hero-points {
    margin-top: 94px;
  }

  .hero-shot {
    margin-top: 84px;
  }
}

@media (min-width: 921px) and (max-height: 820px) {
  .hero {
    padding-top: 168px;
  }

  .hero h1 {
    margin-bottom: 24px;
  }

  .hero .tagline {
    margin-bottom: 38px;
  }

  .hero-points {
    margin-top: 72px;
  }

  .hero-shot {
    margin-top: 60px;
  }
}

@media (hover: hover) {
  .shot-frame:hover .shot-playpause {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

.shot-frame.is-paused .shot-playpause {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

@media (max-width: 920px) {
  .cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 28px;
  }

  .sec-grid,
  .split,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sec-grid .sec-head {
    margin-bottom: 0;
  }

  .split {
    gap: 40px;
  }

  .split.media-first-mobile .split-media {
    order: -1;
  }

  .faq-grid {
    gap: 36px;
  }

  .faq-grid .sec-head {
    position: static;
    margin-bottom: 0;
  }

  .faq-list {
    max-width: 760px;
    justify-self: stretch;
  }

  .faq-more {
    grid-column: 1;
    margin-top: -16px;
  }

  .cards,
  .cards-2,
  .price-plans {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .sec {
    padding: 34px 0 68px;
  }

  .sec-head {
    margin-bottom: 36px;
  }

  .hero {
    padding: 108px 0 68px;
  }

  .hero-points {
    margin-top: 48px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-points p {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 640px) {
  .shot-captions {
    gap: 0 10px;
    margin-top: 20px;
  }

  .shot-cap {
    display: block;
    padding: 10px 0 12px;
  }

  .shot-cap .cap-idx,
  .shot-cap .cap-label {
    display: none;
  }

  .shot-caption-current {
    display: block;
  }

  .shot-frame {
    cursor: pointer;
  }
}

@media (max-width: 560px) {
  .cols-4 {
    grid-template-columns: 1fr;
  }

  .hero {
    text-align: left;
  }

  .hero h1 {
    margin-left: 0;
    font-size: 30px;
  }

  .hero .tagline {
    margin-left: 0;
    margin-bottom: 30px;
  }

  .hero-cta {
    align-items: flex-start;
    gap: 16px;
  }

  .hero-shot {
    margin-top: 44px;
  }

  .cta .hero-cta {
    align-items: center;
  }

  .cta {
    min-height: 0;
    padding: 90px 0 86px;
  }

  .cta h2 {
    margin-bottom: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .appstore-btn:hover::after {
    animation: none;
  }
}

/* ------------------------------------------------------- member panel
   The member's own view on the membership page: status and unlocked benefits,
   not another pitch. */

.member-card {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--mk-line);
  border-radius: 18px;
  background: var(--mk-bg);
  overflow: hidden;
}

.member-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--mk-line-soft);
  background: var(--mk-accent-soft, rgba(13, 118, 201, 0.06));
}

.member-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue-deep, #2470a6);
  color: #fff;
}

.member-mark svg {
  width: 24px;
  height: 24px;
}

.member-id {
  flex: 1 1 auto;
  min-width: 0;
}

.member-id b {
  display: block;
  color: var(--mk-ink);
  font-size: 17px;
  font-weight: 600;
}

.member-id span {
  display: block;
  margin-top: 2px;
  color: var(--mk-ink-3);
  font-size: 12.5px;
}

.member-body {
  padding: 20px 22px 22px;
}

.member-h {
  margin-bottom: 12px;
  color: var(--mk-ink);
  font-size: 15px;
  font-weight: 600;
}

.member-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-list li {
  display: grid;
  grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  color: var(--mk-ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.member-list li b {
  color: var(--mk-ink);
  font-weight: 600;
}

.member-note {
  margin-top: 16px;
  color: var(--mk-ink-3);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .member-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Course cards are links to the course, so the whole card is the target. */
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-link h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card-meta {
  display: block;
  margin-top: 10px;
  color: var(--mk-ink-3);
  font-size: 12.5px;
}

/* Product previews use the same quiet surfaces as the practice workspace. */
.mk .hero { padding-top: clamp(68px, 8vw, 120px); }
.home-membership-callout { display:flex; align-items:center; gap:32px; justify-content:space-between; padding:32px; border:1px solid var(--mk-line); border-radius:20px; background:var(--mk-bg-soft); }
.home-membership-callout h3 { margin:0 0 12px; }
.home-membership-callout p { margin:0; max-width:650px; color:var(--mk-ink-2); }
.home-membership-callout .btn { flex:none; }
@media(max-width:640px) { .home-membership-callout { align-items:flex-start; flex-direction:column; padding:24px; gap:20px; } }

.product-preview { width:100%; min-height:490px; padding:28px 42px; box-sizing:border-box; background:var(--mk-bg); color:var(--mk-ink); text-align:left; }
.preview-top,.preview-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px; color:var(--mk-ink-3); }
.preview-top { padding-bottom:20px; border-bottom:1px solid var(--mk-line-soft); }
.preview-top > span { display:flex; align-items:center; gap:8px; color:var(--mk-ink-2); font-weight:600; }
.preview-top i { width:7px;height:7px;background:#42a77f;border-radius:50%; }
.preview-copy { padding:26px 0 14px; }
.preview-eyebrow { font-size:12px; color:var(--mk-accent); font-weight:600; }
.preview-copy h3 { font-size:26px; margin:7px 0 10px; letter-spacing:-.6px; }
.preview-copy p { margin:0; font-size:14px; color:var(--mk-ink-2); }
.preview-passage { font:clamp(20px,3.5vw,38px)/1.6 var(--mk-mono); color:var(--mk-ink-3); padding:14px 0 20px; white-space:nowrap; }
.preview-passage > span { color:#298261; }
.preview-passage > b { color:var(--mk-ink); border-bottom:3px solid var(--mk-accent); font-weight:500; }
.preview-passage em { color:#c54251;background:rgba(220,70,90,.1);border-radius:4px; font-style:normal; }
.preview-keyboard { display:grid; gap:7px; margin:0 auto 20px; max-width:590px; }
.preview-key-row { display:flex; justify-content:center; gap:7px; }
.preview-key-row kbd { display:flex; justify-content:center; align-items:center; width:43px;height:34px;border:1px solid var(--mk-line); border-bottom-width:3px;border-radius:6px;background:var(--mk-bg-soft);font:14px var(--mk-mono);text-transform:uppercase; }
.preview-key-row kbd.is-target { color:white;background:var(--mk-accent);border-color:var(--mk-accent); }
.preview-bottom { border-top:1px solid var(--mk-line-soft);padding-top:15px; }
.preview-feedback { display:flex;align-items:center;gap:16px;padding:24px;background:var(--mk-bg-soft);border-radius:12px;margin:12px 0 30px;font-size:14px; }
.preview-feedback p { font-size:13px;color:var(--mk-ink-2);margin:5px 0 0; }
.preview-feedback kbd { margin-left:auto;font-size:26px; }
.feedback-dot { width:8px;height:8px;border-radius:50%;background:#c54251; }
.preview-bars { display:grid;gap:18px;padding:20px 0 32px; }
.preview-bars > div { display:flex;align-items:center;gap:18px;font-size:13px; }
.preview-bars kbd { width:24px;font:18px var(--mk-mono); }
.preview-bars span { height:13px;border-radius:4px;flex:1;background:var(--mk-bg-soft);overflow:hidden; }
.preview-bars i { display:block;height:100%;border-radius:4px;background:var(--mk-accent);opacity:.65; }
.preview-bars small { min-width:50px;color:var(--mk-ink-2); }
@media(max-width:640px) { .product-preview { min-height:410px;padding:20px; } .preview-copy h3 {font-size:22px;} .preview-copy p {font-size:12px;} .preview-key-row {gap:4px;} .preview-key-row kbd {width:24px;height:28px;font-size:11px;} .preview-passage {overflow:hidden;} .preview-bottom {font-size:10px;} .preview-top small {font-size:10px;} }
/* Keep every preview visible on narrow screens; its text is not a video crop. */
.shot-frame { aspect-ratio: auto; }
.product-preview { height: 100%; }
.hero-points #homeCourseCount { display: inline; font: inherit; color: inherit; }


/* ---- games collage: the first cover large, the other two beneath ---- */
.home-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-games a {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 18px 40px -26px rgba(16, 17, 19, 0.45);
  transition: transform 0.25s ease;
}

.home-games a:first-child {
  grid-column: 1 / -1;
}

.home-games a:hover {
  transform: translateY(-3px);
}

.home-games svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ======================================================================
   Home sections laid out after andromeld's rhythm: each section a different
   arrangement, so the page reads as a sequence, not a stack of the same box.
   ====================================================================== */

/* Big heading left, content right (andromeld Finder / Essentials). */
.hp-split {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 32px 64px;
  align-items: start;
}

.hp-split .sec-head {
  margin-bottom: 0;
}

.hp-split .sec-head h2 {
  font-size: clamp(28px, 3.8vw, 40px);
}

.hp-checks {
  grid-template-columns: 1fr 1fr;
  gap: 22px 36px;
}

.hp-note {
  margin-top: 26px;
  color: var(--mk-ink-3);
  font-size: 14px;
}

.hp-note a,
.hp-link {
  color: var(--mk-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mk-accent) 35%, transparent);
  text-underline-offset: 3px;
}

.hp-note a:hover,
.hp-link:hover {
  text-decoration-color: currentColor;
}

/* Three tinted cards (andromeld Continuity). */
.hp-tint-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hp-tint {
  display: block;
  padding: 28px 26px 30px;
  border: 1px solid var(--mk-line-soft);
  border-radius: 18px;
  background: var(--mk-bg-soft);
  color: inherit;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}

.hp-tint:hover {
  border-color: var(--mk-line);
  transform: translateY(-2px);
}

.hp-tint .chip-icon {
  margin-bottom: 26px;
}

.hp-tint h3 {
  margin-bottom: 8px;
  color: var(--mk-ink);
  font-size: 17px;
  font-weight: 600;
}

.hp-tint p {
  color: var(--mk-ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Four columns, each ending in a link (andromeld Camera, calls). */
.hp-cols-links .col {
  display: flex;
  flex-direction: column;
}

.hp-cols-links .col p {
  flex: 1 1 auto;
}

.hp-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 14.5px;
}

/* Right-hand three columns with a hairline on top (andromeld Essentials). */
.hp-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.hp-cols-3 .col {
  padding-top: 22px;
  border-top: 1px solid var(--mk-line);
}

.hp-cols-3 .col p {
  color: var(--mk-ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.kicker-new {
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mk-accent);
  color: #fff;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.hp-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Pricing: three plan columns, then a free/member table (andromeld Pricing). */
.hp-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 8px;
}

.hp-plan {
  padding-top: 20px;
  border-top: 1px solid var(--mk-line-soft);
}

.hp-plan.is-featured {
  border-top: 2px solid var(--mk-accent);
}

.hp-plan > span {
  color: var(--mk-ink-2);
  font-size: 14px;
  font-weight: 600;
}

.hp-plan b {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 6px;
  color: var(--mk-ink);
  font-size: 30px;
  font-weight: 700;
}

.hp-plan b small {
  color: var(--mk-ink-3);
  font-size: 13px;
  font-weight: 500;
}

.hp-plan p {
  color: var(--mk-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.hp-fine {
  margin-top: 18px;
  color: var(--mk-ink-3);
  font-size: 12.5px;
}

.hp-compare {
  width: 100%;
  margin-top: 36px;
  border-collapse: collapse;
  font-size: 14px;
}

.hp-compare th {
  padding: 12px 8px;
  border-bottom: 1px solid var(--mk-line);
  color: var(--mk-ink);
  font-weight: 600;
  text-align: left;
}

.hp-compare th:last-child,
.hp-compare td.is-pro {
  color: var(--mk-accent);
}

.hp-compare td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--mk-line-soft);
  color: var(--mk-ink-2);
}

.hp-compare td:first-child {
  color: var(--mk-ink);
  width: 50%;
}

@media (max-width: 900px) {
  .hp-split,
  .hp-checks,
  .hp-tint-cards,
  .hp-cols-3,
  .hp-plans {
    grid-template-columns: 1fr;
  }
}

/* Real screenshots in the hero frame (1920 x 1200, 16:10). */
.shot-frame {
  aspect-ratio: 16 / 10;
}

.shot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hp-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  vertical-align: 3px;
}

/* 小一 & 小零 sitting on the hero button (home.js heroDuo): the button's top
   edge is the edge they sit on (sprite row 48 of 52). */
.cta-duo {
  position: absolute;
  left: 8px;
  right: 8px;
  top: -72px;
  height: 78px;
  pointer-events: none;
  z-index: 2;
}
.cta-duo > span { position: absolute; bottom: 0; display: flex; }
.cta-duo-xiaoyi { left: 0; }
.cta-duo-xiaoling { right: 0; }
.cta-duo .xy-shadow { display: none; }
.has-duo { padding-top: 34px; }
@media (max-width: 560px) {
  .cta-duo { transform: scale(0.8); transform-origin: bottom center; }
  .has-duo { padding-top: 46px; }
}

/* ---- the site's scene language on the home page -------------------------- */
.hero > .wrap { position: relative; z-index: 1; }
.hero-scene {
  position: absolute;
  inset: 0 0 auto 0;
  height: 640px;
  background: linear-gradient(180deg, #d9edff 0%, #eef7ff 48%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
[data-theme='dark'] .hero-scene { background: linear-gradient(180deg, #16263d 0%, #121c2c 55%, rgba(0, 0, 0, 0) 100%); }
.hero-art { position: absolute; top: 110px; height: 250px; width: auto; }
.hero-art.is-left { left: max(16px, calc(50% - 700px)); }
.hero-art.is-right { right: max(16px, calc(50% - 700px)); }
@media (max-width: 1180px) { .hero-art { display: none; } }

/* Course covers (same art as the course center). */
.hc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.hc-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mk-line-soft, #e8edf3); border-radius: 16px; background: #fff; color: inherit; transition: transform 0.16s, box-shadow 0.16s; }
.hc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--ca) 85%, transparent); color: inherit; }
.hc-cover { display: block; aspect-ratio: 16 / 8; overflow: hidden; }
.hc-cover svg { display: block; width: 100%; height: 100%; }
.hc-body { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; }
.hc-body b { font-size: 15px; }
.hc-body small { color: var(--ca-deep); font-size: 12px; font-weight: 700; }
.hp-checks.is-compact li:first-child { display: none; }
[data-theme='dark'] .hc-card { background: var(--bg-elevated); }
@media (max-width: 640px) { .hc-grid { grid-template-columns: 1fr; } }