/* emoke website — shared styles
   Palette mirrors lib/core/theme/app_theme.dart */

@font-face {
  font-family: 'Anton SC';
  src: url('assets/AntonSC-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --yellow: #FFF44F;
  --light-yellow: #E8F48C;
  --mint: #B8E0D2;
  --cream: #FFF8E7;
  --orange: #FFB84D;
  --ink: #2D2D2D;
  --gray: #9E9E9E;
  --radius: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans CJK SC', 'Noto Sans JP', sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
}

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

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

.display {
  font-family: 'Anton SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Nav ─────────────────────────────────────────────── */
/* Just the home icon + the single language trigger — kept intentionally
   minimal (no duplicate wordmark, no text link row) now that the homepage
   drops this bar entirely and other pages only need a way back + a way to
   change language. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.nav .brand { display: flex; align-items: center; text-decoration: none; }
.nav .brand img.icon { width: 34px; height: 34px; border-radius: 9px; }

/* ── Language pills ────────────────────────────────────
   Three outline pills (简/繁/EN), tap to switch — the active locale is
   filled. On the homepage they float top-right over the hero; inside
   .nav they sit inline on the right of the icon. */
.lang-switch { display: inline-flex; gap: 6px; }
.hero .lang-switch {
  position: absolute;
  top: 18px;
  right: 18px;
}
.lang-switch a {
  border: 1px solid rgba(45, 45, 45, 0.22);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}
.lang-switch a.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  background: #fff;
  text-align: center;
  padding: 240px 32px 48px;
}
.hero .mascot {
  width: 128px;
  height: 128px;
  margin: 0 auto 26px;
  border-radius: 32px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
/* Wordmark is the main visual anchor now that the tagline line is gone —
   sized up so "emoke" reads as the hero, not a caption under the icon. */
.hero .wordmark { height: 60px; width: auto; margin: 0 auto 22px; }
.hero h1 {
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1.2;
}
.hero .zh-tag {
  font-size: clamp(17px, 3vw, 21px);
  margin-top: 10px;
  font-weight: 600;
}
.hero .blurb {
  max-width: 480px;
  margin: 0 auto;
  font-size: 14.5px;
  color: rgba(45, 45, 45, 0.6);
}
.hero .blurb .zh { display: block; margin-top: 6px; }

/* Stacked, equal-width pills — Android first (primary ask), App Store
   below, both the same size so neither reads as the "secondary" option.
   Capped narrower than the hero width so they read as buttons rather
   than a full-bleed bar edge-to-edge. */
.store-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-top: 72px;
}
.btn-store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 260px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 22px;
  line-height: 1.2;
}
.btn-store svg { width: 22px; height: 22px; fill: #fff; flex: none; }
.btn-store small { display: block; font-size: 11px; opacity: 0.8; }
.btn-store strong { display: block; font-size: 18px; font-weight: 600; }
.btn-store:hover { background: #1c1c1c; }


/* Slim variant for sub-pages (e.g. /android) — same band, tighter padding,
   smaller mascot. */
.hero.ahero { padding: 48px 24px 36px; }
.hero.ahero .mascot {
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}
.hero.ahero h1 { font-size: clamp(22px, 5.2vw, 30px); letter-spacing: -0.01em; }
.hero.ahero .blurb { margin-top: 12px; font-size: 14.5px; line-height: 1.7; max-width: 480px; color: rgba(45, 45, 45, 0.6); }

/* ── Android channel list ───────────────────────────────
   Apple-style grouped list: one soft card, hairline separators between
   rows instead of a bordered box per row — quieter and more "settings
   list" than the previous boxed-card look. */
.pkg {
  margin: 28px 0 10px;
  padding: 14px 18px;
  background: rgba(45, 45, 45, 0.035);
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(45, 45, 45, 0.6);
}
.pkg code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  background: #fff;
  padding: 2px 9px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-left: 4px;
  color: var(--ink);
}
.channels {
  display: flex;
  flex-direction: column;
  margin: 28px 0 24px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 28px rgba(0, 0, 0, 0.05);
}
.channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: none;
  border-bottom: 1px solid rgba(45, 45, 45, 0.07);
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  transition: background-color 0.15s ease;
}
.channels > :last-child { border-bottom: none; }
.channel .logo {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.channel .logo.plain { background: none; }
.channel .logo.plain img { width: 100%; height: 100%; object-fit: contain; }
.channel .label { flex: 1 1 auto; min-width: 0; }
.channel .label b { font-weight: 600; }
.channel .label b,
.channel .label .alt {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel .alt { color: var(--gray); font-size: 12.5px; font-weight: 400; margin-top: 1px; }
.channel .badge { margin-left: auto; }
a.channel:hover,
a.channel:active { background: rgba(45, 45, 45, 0.035); }

/* Primary channel (official direct APK) — subtle tint so the one-tap
   first-party option stands out above the store rows. */
.channel.primary { background: var(--yellow); }
a.channel.primary:hover { background: #f2e944; }
.badge {
  font-size: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(45, 45, 45, 0.06);
  color: var(--gray);
  white-space: nowrap;
  flex: none;
}
.badge.on { background: var(--mint); color: #1a5c43; font-weight: 600; }
.notice { font-size: 13.5px; color: var(--gray); line-height: 1.7; }

/* ── Sections ────────────────────────────────────────── */
/* Horizontally swipeable screenshot strip — the section below the hero.
   Scroll-snap + edge padding make it feel like an App-Store-style gallery
   on touch devices; scrollbar hidden for a clean minimal look. */
.shots {
  /* Clear air between the download buttons and the gallery below — the
     page reads as two distinct sections (decide → browse) instead of
     one cramped scroll. */
  padding: 220px 0 64px;
}
.shots-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  padding: 4px 20px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shots-track::-webkit-scrollbar { display: none; }
.shots-track img {
  flex: none;
  height: min(120vw, 460px);
  width: auto;
  border-radius: 22px;
  scroll-snap-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* ── CTA band ────────────────────────────────────────── */
.cta {
  background: var(--mint);
  border-radius: 48px;
  text-align: center;
  padding: 56px 24px;
  margin-bottom: 72px;
}
.cta h2 { font-size: clamp(22px, 4vw, 30px); margin-bottom: 6px; }
.cta .zh-tag { font-weight: 600; margin-bottom: 24px; }

/* ── Legal / content pages ──────────────────────────────
   Shared by /privacy, /terms, /about and the text around the /android
   channel list — generous line-height and a softer ink tone read calmer
   than pure black-on-white, closer to the app's own therapeutic tone. */
.legal { max-width: 640px; margin: 0 auto; padding: 52px 24px 88px; }
.legal h1 {
  font-size: clamp(26px, 5vw, 32px);
  letter-spacing: -0.01em;
  margin: 14px 0 8px;
}
.legal .updated { color: var(--gray); font-size: 13px; margin-bottom: 32px; }
.legal h2 { font-size: 19px; font-weight: 700; margin: 44px 0 12px; letter-spacing: -0.005em; }
.legal h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.legal p { font-size: 15.5px; line-height: 1.75; margin: 12px 0; color: rgba(45, 45, 45, 0.72); }
.legal ul { margin: 12px 0 12px 22px; font-size: 15.5px; line-height: 1.75; color: rgba(45, 45, 45, 0.72); }
.legal li { margin: 7px 0; }
/* Exclude .channel rows — those must stay ink regardless of nesting, and a
   higher-specificity rule here would otherwise paint every live store link
   the generic link-blue. Links inside legal copy use the mint-dark accent
   (same tone as .badge.on text) instead of the off-palette blue. */
.legal a:not(.channel) { color: #1a5c43; }

/* ── Footer ──────────────────────────────────────────── */
footer {
  border-top: 1px solid rgba(45, 45, 45, 0.08);
  padding: 44px 0 60px;
  font-size: 13.5px;
  color: var(--gray);
  text-align: center;
}
/* Tappable links read as links — ink-colored with an underline — instead
   of matching the plain copyright/company text below. That's the one
   fix this section needed: before, all 4 footer items (3 real links + a
   copyright string) looked identical on phones, so nothing signaled
   "tap here" vs "just info". */
footer .foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  align-items: center;
  line-height: 1.4;
  font-size: 14.5px;
}
footer .foot-links a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(45, 45, 45, 0.28);
  text-underline-offset: 3px;
}
footer .foot-links a:hover { text-decoration-color: var(--ink); }

/* Pure info, visually quieter and clearly separated from the links above —
   the ICP link is the one exception that stays clickable (regulatory
   requirement to link out), so it keeps a faint underline too. */
footer .icp {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(45, 45, 45, 0.06);
  font-size: 12px;
  line-height: 1.8;
  color: var(--gray);
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer .icp a { color: var(--gray); text-decoration: underline; text-decoration-color: rgba(158, 158, 158, 0.4); }
footer .icp a:hover { color: var(--ink); }

@media (max-width: 560px) {
  /* Phone layout: icon + wordmark + download choice is the whole job of
     this screen, so it gets generous top air and a clear gap before the
     screenshot gallery — not squeezed into the smallest space possible.
     Mascot/wordmark/buttons scale down a touch from desktop but stay
     visually the largest thing on the page. */
  .hero { padding: 160px 28px 24px; }
  .hero .mascot { width: 96px; height: 96px; margin-bottom: 20px; border-radius: 26px; }
  .hero .wordmark { height: 48px; margin-bottom: 18px; }
  .hero .blurb { font-size: 13.5px; }
  .store-row { margin-top: 56px; gap: 12px; }
  .btn-store { max-width: 240px; padding: 12px 20px; border-radius: 999px; }
  .btn-store svg { width: 20px; height: 20px; }
  .btn-store small { font-size: 10px; }
  .btn-store strong { font-size: 16px; }
  .shots { padding: 180px 0 48px; }
  .cta { border-radius: 32px; margin: 0 12px 56px; }
}

/* Smallest phones (iPhone SE / narrow Android, ~360px and down) */
@media (max-width: 380px) {
  .hero .lang-switch { top: 14px; right: 14px; }
  .lang-switch a { font-size: 11.5px; padding: 4px 9px; }
}