/* Sencali website. One stylesheet, no inline styles (the CSP is style-src 'self').
   Colours are the app's tokens: design/brand-assets/sencali-design-tokens.json and
   Sencali/Sources/Views/Theme.swift. Rules carried over from design/BRAND.md §4:
   - a Volt surface always carries Ink, in both themes (white on Volt fails at every size);
   - Volt marks something you press, something you chose, or something happening now,
     never decoration;
   - the wordmark's dot is Volt on a dark ground and voltInk on a light one. */

:root {
  --volt: #C7F542;
  --volt-hover: #B9EA2E;
  --ink: #17181C;
  --sand: #F8F8F5;

  --ground: #F8F8F5;
  --card: #FFFFFF;
  --text: #17181C;
  --secondary: #5C5E50;
  --tertiary: #6B6D5C;
  --hairline: rgba(23, 24, 28, .09);
  --rule: rgba(23, 24, 28, .12);
  --link: #565CFF;
  --focus: #565CFF;
  --volt-ink: #4B7020;
  --dot: #4B7020;

  --chip-fill: #EAEDE5;
  --attention: #F0A32E;
  --attention-fill: #FDF4E3;

  /* The join band is dark in both themes: the reversed lockup, Volt on Ink. */
  --band: #17181C;
  --band-text: #F8F8F5;
  --band-secondary: #AEB1BC;
  --band-link: #9AA0FF;
  --band-rule: rgba(248, 248, 245, .28);

  --phone-shadow: 0 0 0 1px rgba(23, 24, 28, .10), 0 2px 4px rgba(23, 24, 28, .06), 0 28px 56px -16px rgba(23, 24, 28, .28);
  --gutter: 16px;
  --max: 1080px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC",
    "Hiragino Sans", "Noto Sans SC", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #17181C;
    --card: #212329;
    --text: #F8F8F5;
    --secondary: #AEB1BC;
    --tertiary: #969AA5;
    --hairline: rgba(255, 255, 255, .10);
    --rule: rgba(248, 248, 245, .14);
    --link: #8189E1;
    --focus: #9AA0FF;
    --volt-ink: #AFC981;
    --dot: #C7F542;

    --chip-fill: #2A2C31;
    --attention-fill: #2A2013;

    --band: #212329;
    --band-link: #9AA0FF;

    --phone-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 28px 56px -16px rgba(0, 0, 0, .6);
  }
}

/* ------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* Short pages keep the footer at the bottom of the window. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
main { flex: 1 0 auto; }

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; text-wrap: balance; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
main:focus { outline: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 960px) { :root { --gutter: 32px; } }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--volt);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------ brand */

.wordmark {
  font-weight: 800;
  letter-spacing: -.0625em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
/* AppChrome.swift Wordmark: a dot 0.19 em wide, set just after the last letter. */
.wordmark-dot {
  display: inline-block;
  width: .19em;
  height: .19em;
  margin-left: .1em;
  border-radius: 50%;
  background: var(--dot);
}

.mark { display: block; height: 20px; width: auto; color: var(--text); }

/* The app icon, drawn as on the home screen: the mark sits where it sits on the
   1024 canvas (x 199–765, y 238–763). The radius is CSS only; the source has none. */
.app-tile {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 22.37%;
  background: var(--volt);
  box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .06);
}
.app-tile .mark {
  position: absolute;
  left: 19.43%;
  top: 23.24%;
  width: 55.27%;
  height: 51.27%;
  color: var(--ink);
}

/* ------------------------------------------------------------ header */

.site-header { border-bottom: 1px solid var(--hairline); }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 60px;
  padding-block: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--text);
  text-decoration: none;
  font-size: 22px;
}

.site-nav ul, .lang-switch ul { display: flex; flex-wrap: wrap; gap: 2px; }

.site-nav a, .lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover, .lang-switch a:hover { background: var(--chip-fill); }
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}
.lang-switch a[aria-current="true"] { color: var(--secondary); }

@media (min-width: 640px) {
  .site-nav a { padding: 0 12px; }
}

/* ------------------------------------------------------------ buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.button-primary { background: var(--volt); color: var(--ink); }
.button-primary:hover { background: var(--volt-hover); text-decoration: none; }
.button-secondary { background: var(--chip-fill); color: var(--text); }

.text-link { font-weight: 600; }
.text-link::after { content: " →"; }

/* The pending state of the TestFlight link: deliberately not a button. */
.cta-block { display: grid; gap: 10px; justify-items: start; }
.pending-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 20px;
  border: 1.5px dashed var(--rule);
  border-radius: 14px;
  color: var(--secondary);
  font-weight: 600;
}
.pending-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tertiary);
  flex: none;
}
.cta-note { color: var(--secondary); font-size: 15px; }

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

.hero { padding-block: 48px 16px; }

.hero-inner { display: grid; gap: 48px; align-items: center; }
.hero-copy { display: grid; gap: 20px; justify-items: start; }

.hero-title { display: grid; gap: 14px; }
.hero-kicker {
  font-size: 17px;
  font-weight: 600;
  color: var(--secondary);
}
.hero-slogan {
  display: block;
  /* 7.4vw keeps "戴上 Apple Watch 去练。" on one line on a 375–390 pt phone. */
  font-size: clamp(27px, 7.4vw, 44px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.015em;
  /* Break at the spaces around "Apple Watch", not inside a Chinese phrase. */
  word-break: keep-all;
}
.hero-slogan .beat { display: block; }

.hero-lead { max-width: 30em; color: var(--secondary); font-size: 18px; }
.hero-cta { margin-top: 8px; }
.hero-note { color: var(--tertiary); font-size: 14px; }

/* No hero screenshot yet: one centred column, no empty box beside it. */
.hero-centered { text-align: center; }
.hero-centered .hero-copy { justify-items: center; max-width: 760px; margin-inline: auto; }
.hero-centered .hero-lead { margin-inline: auto; }

@media (min-width: 900px) {
  .hero { padding-block: 88px 24px; }
  .hero-kicker { font-size: 19px; }
  .hero-centered { padding-block: 120px 40px; }
  .hero-centered .hero-slogan { font-size: clamp(48px, 5.2vw, 64px); }
  .hero-split .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 64px; }
  .hero-split .hero-slogan { font-size: clamp(40px, 4.2vw, 54px); }
  .hero-split .phone { max-width: 320px; }
}

/* ------------------------------------------------------------ app screenshots */

/* An iPhone drawn around a simulator screenshot (it brings its own status bar,
   so no notch is drawn). Corner radii are elliptical percentages, which keeps
   them round at the iPhone's ~1:2.17 proportion at any width. The device is a
   dark object in both themes; the edge ring keeps it off a dark ground. */
.phone {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
}
.phone-frame {
  width: 100%;
  padding: 2.6%;
  border-radius: 15% / 6.9%;
  background: #0B0C0E;
  box-shadow: var(--phone-shadow);
}
.phone-frame picture, .phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12.6% / 5.8%;
}

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

.section { padding-block: 64px; }
.section-ruled { border-top: 1px solid var(--hairline); }
.section-title, .join h2 { font-size: clamp(26px, 5.4vw, 36px); letter-spacing: -.01em; }

@media (min-width: 900px) { .section { padding-block: 104px; } }

/* ------------------------------------------------------------ features */

.section-features .section-title { margin-bottom: 40px; }

.features { display: grid; gap: 56px; }
.feature { display: grid; gap: 28px; align-content: start; }
.feature-copy {
  display: grid;
  gap: 10px;
  align-content: start;
  max-width: 34em;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.feature-number {
  color: var(--tertiary);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.feature h3 { font-size: 22px; }
.feature .phone { max-width: 220px; }
.feature-body { color: var(--secondary); }
.feature-note { margin-top: 4px; color: var(--tertiary); font-size: 14px; line-height: 1.55; }

/* Narrow screens: the features stack, so a rule between the screenshot and
   its words read as splitting the pair. Words first, their screenshot right
   under them, and the rule moves to the gap between one feature and the next. */
@media (max-width: 859.98px) {
  .features { gap: 48px; }
  .feature + .feature { padding-top: 40px; border-top: 1px solid var(--rule); }
  .feature-copy { order: -1; padding-top: 0; border-top: 0; }
  .feature { gap: 24px; }
}

.requirements {
  margin-top: 56px;
  color: var(--secondary);
  font-size: 15px;
}

@media (min-width: 860px) {
  .section-features .section-title { margin-bottom: 56px; }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .feature .phone { max-width: 260px; }
  .feature h3 { font-size: 24px; }
  .requirements { margin-top: 72px; }
}

/* ------------------------------------------------------------ data, FAQ */

/* Heading in the first of the features' three columns, body across the other two. */
.split { display: grid; gap: 20px; align-items: start; }
.split-body { display: grid; gap: 16px; max-width: 40em; }
.data-body { font-size: 19px; line-height: 1.6; }

@media (min-width: 860px) {
  .split { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .split-body { grid-column: 2 / span 2; }
}

.faq { gap: 0; }
.faq details + details { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq details:first-child summary { padding-top: 0; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--tertiary);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 18px; color: var(--secondary); }

/* ------------------------------------------------------------ join band */

.join { padding-block: 64px; background: var(--band); color: var(--band-text); }
.join-inner { display: grid; gap: 18px; justify-items: start; }
.join p { color: var(--band-secondary); max-width: 34em; }
.join a { color: var(--band-link); }
.join .button-primary { color: var(--ink); }
.join .pending-pill { border-color: var(--band-rule); color: var(--band-text); }
.join .pending-dot { background: var(--band-secondary); }
.join .cta-note { color: var(--band-secondary); }
.join :focus-visible { outline-color: var(--band-link); }

@media (min-width: 900px) { .join { padding-block: 88px; } }

/* ------------------------------------------------------------ long-form pages */

.doc { max-width: calc(760px + 2 * var(--gutter)); padding-block: 48px 72px; }
.doc-head { display: grid; gap: 8px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.doc-head h1 { font-size: clamp(30px, 6.4vw, 42px); letter-spacing: -.01em; }
.doc-updated { color: var(--tertiary); font-size: 14px; }

.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 44px; font-size: 23px; }
.prose h3 { margin-top: 28px; font-size: 19px; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: 10px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--tertiary); }
.prose .lead { font-size: 19px; color: var(--secondary); }
.prose .note { color: var(--tertiary); font-size: 15px; }
.prose .cta-block { margin-block: 28px; }

.prose ol.steps { list-style: none; padding-left: 0; counter-reset: step; gap: 14px; }
.prose ol.steps li {
  position: relative;
  padding: 16px 16px 16px 60px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--card);
  counter-increment: step;
}
.prose ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--text);
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
}
.prose ol.steps strong { display: block; }

/* Visible only in a preview built with --allow-placeholders; a real build refuses them. */
[data-placeholder] {
  padding: 12px 16px;
  border: 1.5px dashed var(--attention);
  border-radius: 10px;
  background: var(--attention-fill);
}

.notfound { padding-block: 80px 120px; display: grid; gap: 16px; justify-items: start; }
.notfound h1 { font-size: clamp(30px, 6.4vw, 42px); }
.notfound p { color: var(--secondary); }

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

.site-footer {
  padding-block: 40px 48px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}
.footer-inner {
  display: grid;
  gap: 24px;
}
.footer-brand { display: grid; gap: 8px; }
.lockup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lockup .wordmark { font-size: 20px; }
.lockup-category { color: var(--secondary); font-size: 13px; }
.footer-contact { color: var(--secondary); }

.footer-nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }
.footer-nav a[aria-current="page"] { text-decoration: underline; }

.footer-fine { display: grid; gap: 4px; color: var(--tertiary); font-size: 13px; }

@media (min-width: 760px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .footer-fine { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .site-nav a { transition: background-color .15s ease; }
}

/* ------------------------------------------------------------ privacy policy (rendered from Markdown) */

.toc {
  margin-bottom: 36px;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--card);
}
.toc h2 { font-size: 15px; color: var(--secondary); margin-bottom: 8px; }
.toc ul { display: grid; gap: 2px; }
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  text-decoration: none;
}
.toc a:hover { text-decoration: underline; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 16px; }

mark.placeholder {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--attention-fill);
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--attention);
}