/* ═══════════════════════════════════════════════════════════════════════
   Moneki Website V3 — marketing site stylesheet
   Built on the DS4 token layer (colors.css / spacing.css / typography.css,
   loaded BEFORE this file). This file adds the marketing-site layout system,
   shared components (nav, buttons, cards, footer, modal) and section styles.
   Source of truth: Figma "Web.3" (nIsIGH7QuyWhZgeIEy0Lzf · 2096:700).
   Everything here is namespaced with an `s-`/`v3` prefix so it never collides
   with the dashboard UI kit that also lives under /ds.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Language gate ──────────────────────────────────────────────────────
   Set by the inline gate in base.html, cleared by i18n.js once its first
   translation pass has run (or by that gate's own 1.5s failsafe). `visibility`
   rather than `display`, so the page keeps its layout and only the untranslated
   glyphs are withheld: the first frame a reader sees is in their language, and
   nothing reflows when it arrives. Applied only when the reader's language
   differs from the 中文 this markup is authored in. ── */
html.i18n-pending body { visibility: hidden; }

/* ── V3 marketing layout tokens ─────────────────────────────────────────
   Web.3 canvas is 1440 wide; sections sit in a 1200 content column
   (120px gutters), nav in a 1248 column (96px gutters). We express that as a
   centred content container with responsive side padding. ── */
:root {
  --v3-content:      1200px;  /* section content column */
  --v3-nav:          1248px;  /* nav rail is slightly wider */
  --v3-gutter:       120px;   /* desktop side gutter */
  --v3-gutter-md:    48px;
  --v3-gutter-sm:    20px;

  /* Section vertical rhythm (DS4 mkt/space) */
  --v3-section-y:    112px;
  --v3-section-y-sm: 72px;

  /* Eyebrow→title→lead vertical steps */
  --v3-step-eyebrow: 20px;
  --v3-step-lead:    24px;

  /* Marketing display scale (Web.3 measured; fluid via clamp) */
  --v3-fs-h1:   clamp(2.4rem, 1.6rem + 3.4vw, 3.5rem);   /* hero / final CTA */
  --v3-fs-h2:   clamp(1.9rem, 1.4rem + 2.1vw, 2.5rem);   /* section titles */
  --v3-fs-h3:   1.375rem;                                /* card / feature titles */
  --v3-fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);  /* section lead copy */
  --v3-fs-body: 1rem;
  --v3-fs-small: 0.875rem;

  --v3-nav-h:   68px;

  /* ── Figma-exact values (Web.3) — used verbatim for 1:1 fidelity ── */
  --fig-ink:      #1e1e1e;
  --fig-sec:      #5f5f5f;
  --fig-muted:    #9a9a9a;
  --fig-eyebrow:  #a9641c;   /* section eyebrow gold-brown */
  --fig-pill-txt: #919191;   /* hero eyebrow pill grey */
  --fig-surface:  #fbfbfb;   /* raised pill/card face */
  --fig-grad:     linear-gradient(164deg, #FFC84A 14.6%, #FF9A1D 50%, #FF7467 85.4%);
  --fig-sh-card:    -10px -10px 24px rgba(255,255,255,0.8), 12px 12px 28px rgba(0,0,0,0.08), inset 1px 1px 0 #fff;
  --fig-sh-control: -6px -6px 14px rgba(255,255,255,0.7), 7px 7px 16px rgba(0,0,0,0.08), inset 1px 1px 0 #fff;
  --fig-sh-btn:     -6px -6px 14px rgba(255,255,255,0.3), 7px 7px 16px rgba(0,0,0,0.04), inset 0 8px 4px rgba(255,255,255,0.25), inset 1px 1px 0 #fff;
  --fig-sh-shell:   -10px -10px 24px rgba(255,255,255,0.8), 12px 12px 28px rgba(0,0,0,0.08), inset 1px 1px 0 #fff;
  --fig-sh-inset:   inset 5px 5px 12px rgba(0,0,0,0.08), inset -5px -5px 12px rgba(255,255,255,0.9);
}

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

.v3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--v3-fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.v3 img { max-width: 100%; display: block; }
.v3 a { color: inherit; text-decoration: none; }
.v3 button { font-family: inherit; cursor: pointer; }
.v3 :focus-visible {
  outline: 2px solid var(--acc-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── CJK-aware line breaking (GLOBAL typography rule) ─────────────────────
   Chinese text must break only at semantic boundaries — never split a word or
   short phrase mid-character, and never leave a 1–2 character orphan line.
   Do NOT fix wrapping with hardcoded <br> in strings.
   Strategy (learned the hard way): keep-all is applied ONLY to headings and to
   inline emphasis/links — NOT to body prose. On a long punctuation-free clause,
   body-level keep-all forces an emergency break that orphans the trailing 。 and
   also wastes lines (breaking at every 、／，). Body prose therefore uses normal
   CJK wrapping + `text-wrap: pretty`, which fills lines and keeps 。 attached to
   its character (line-break: strict), so no lone-punctuation orphan.
     • body: line-break strict + text-wrap pretty (+ break-word only for URLs)
     • headings / inline <b><strong><a>: word-break keep-all (short → won't overflow)
     • buttons / labels / short interactive: white-space nowrap
   ── */
.v3 {
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}
/* Headings & short display titles: keep phrases whole + balance lines (no single-char tail) */
.v3 h1, .v3 h2, .v3 h3, .v3 h4,
.v3-h1, .v3-h2, .v3-h3,
.v3-hero__h1, .v3-insight__title, .v3-product__title, .v3-trust__title,
.v3-cta__title, .v3-faq__title, .v3-faq__q, .v3-ph-h,
.v3-preview__title, .v3-preview__desc,
.v3-ba__t, .v3-ba__sp, .v3-fcard__t, .v3-step__t, .v3-splitcard__t,
.v3-ctaband__h, .v3-tl__t {
  word-break: keep-all;
  text-wrap: balance;
}
/* Inline emphasis / links inside body copy: keep the short run intact (protects 登录, bold lead-ins) */
.v3 p b, .v3 p strong, .v3 p a, .v3 li b, .v3 li strong {
  word-break: keep-all;
}
/* Short interactive / label text: never wrap a phrase across lines */
.v3-btn,
.v3-nav__links a, .v3-nav__signin, .v3-nav__brand,
.v3-field label,
.v3-fcard__tag, .v3-step__tag, .pv-tag, .v3-ba__lab,
.v3-tl__time, .v3-preview__live, .v3-answer__brand,
.v3-valuebar__text strong, .v3-selector__label, .v3-nowrap {
  white-space: nowrap;
}

/* ── Layout: container + section ─────────────────────────────────────────── */
.v3-container {
  width: 100%;
  max-width: calc(var(--v3-content) + var(--v3-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--v3-gutter);
}
.v3-container--nav {
  max-width: calc(var(--v3-nav) + 96px * 2);
  padding-inline: 96px;
}
.v3-section { padding-block: var(--v3-section-y); }
.v3-section--tight { padding-block: var(--v3-section-y-sm); }

/* ── Typography helpers ──────────────────────────────────────────────────── */
/* Section eyebrow — uppercase gold-brown (Figma: 11.5px / Bold / tracking 1.61px / #a9641c) */
.v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 1.61px;
  text-transform: uppercase;
  color: var(--fig-eyebrow);
}
.v3-eyebrow .v3-spark { flex: none; }
.v3-eyebrow img { display: block; }

/* Hero eyebrow — a raised pill, mixed-case grey (Figma: 14px / #919191) */
.v3-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 13px;
  border-radius: var(--radius-pill);
  background: var(--fig-surface);
  box-shadow: var(--fig-sh-control);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--fig-pill-txt);
  white-space: nowrap;
}
.v3-eyebrow-pill img { display: block; }

.v3-h1 {
  margin: 0;
  font-size: var(--v3-fs-h1);
  font-weight: var(--fw-title);
  letter-spacing: var(--tracking-title);
  line-height: var(--lh-display);
  color: var(--text-primary);
}
.v3-h2 {
  margin: 0;
  font-size: var(--v3-fs-h2);
  font-weight: var(--fw-title);
  letter-spacing: var(--tracking-title);
  line-height: 1.12;
  color: var(--text-primary);
}
.v3-h3 {
  margin: 0;
  font-size: var(--v3-fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.v3-lead {
  margin: 0;
  font-size: var(--v3-fs-lead);
  line-height: 1.6;
  color: var(--text-secondary);
}
.v3-muted { color: var(--text-muted); }
.v3-grad-text {
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section header block (eyebrow + title + lead), reused across sections */
.v3-head { display: flex; flex-direction: column; }
.v3-head .v3-eyebrow { margin-bottom: var(--v3-step-eyebrow); }
.v3-head .v3-lead { margin-top: var(--v3-step-lead); max-width: 620px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--spring), box-shadow var(--spring), filter 160ms ease;
}
.v3-btn--primary {
  color: #fff;
  background: var(--fig-grad);
  box-shadow: var(--fig-sh-btn);
}
.v3-btn--primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
/* A primary button written as a link keeps its white label: `.v3 a` (colour: inherit) outranks
   `.v3-btn--primary` on specificity and would otherwise give it the surrounding ink. */
.v3 a.v3-btn--primary { color: #fff; }
.v3-btn--ghost {
  padding: 16px 26px;
  color: var(--fig-ink);
  font-weight: var(--fw-semibold);
  background: linear-gradient(164deg, #ffffff 5%, #f1f1f1 74%);
  box-shadow: var(--fig-sh-control);
}
.v3-btn--ghost:hover { transform: translateY(-1px); }
.v3-btn--nav { padding: 12px 22px; font-size: 14px; }

/* Text/inline link with arrow */
.v3-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.v3-link .v3-arrow { transition: transform var(--spring); }
.v3-link:hover .v3-arrow { transform: translateX(4px); }

/* ── Pills / badges ──────────────────────────────────────────────────────── */
.v3-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 33px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-high);
  box-shadow: var(--sh-control);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.v3-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.v3-badge--live { color: var(--good); background: var(--good-soft); }
.v3-badge--beta { color: var(--info); background: var(--info-soft); }
.v3-badge--soon { color: var(--warn); background: var(--warn-soft); }
.v3-badge .v3-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Surfaces / cards ────────────────────────────────────────────────────── */
.v3-card {
  background: var(--grad-card);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
}
.v3-feature {
  background: var(--grad-card-feature);
  border-radius: var(--radius-feature);
  box-shadow: var(--sh-feature);
}
.v3-inset {
  background: var(--surface-main);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-inset);
}

/* ═══════════════════════════════════════════════════════════════════════
   Navbar
   ═══════════════════════════════════════════════════════════════════════ */
.v3-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 20px 0 32px;
  border-radius: var(--radius-pill);
  background: var(--fig-surface);
  box-shadow: var(--fig-sh-card);
}
.v3-nav__brand { display: inline-flex; align-items: center; gap: 9px; }
.v3-nav__brand img { display: block; }
.v3-nav__brand span { font-weight: var(--fw-display); font-size: 20px; letter-spacing: -0.4px; color: var(--fig-ink); }
.v3-nav__links { display: flex; align-items: center; gap: 34px; }
.v3-nav__links a { font-size: 15px; font-weight: var(--fw-medium); color: var(--fig-sec); }
.v3-nav__links a:hover { color: var(--fig-ink); }
.v3-nav__cta { display: flex; align-items: center; gap: 14px; }
.v3-nav__signin { font-size: 15px; font-weight: var(--fw-semibold); color: var(--fig-ink); }

/* Language toggle (nav) — sliding switch: one click flips 中 ⇄ EN */
.v3-lang { position: relative; display: inline-flex; align-items: center; padding: 3px; border: none; border-radius: 999px; background: var(--surface-main); box-shadow: inset 2px 2px 5px rgba(0,0,0,0.07), inset -2px -2px 5px rgba(255,255,255,0.7); cursor: pointer; font-family: inherit; }
.v3-lang__thumb { position: absolute; top: 3px; left: 3px; width: 32px; height: calc(100% - 6px); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.16); transition: transform .22s cubic-bezier(.4,.1,.2,1); }
:root[data-lang="en"] .v3-lang__thumb { transform: translateX(32px); }
.v3-lang__face { position: relative; z-index: 1; width: 32px; text-align: center; padding: 4px 0; font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--fig-muted); white-space: nowrap; transition: color .18s ease; }
:root:not([data-lang="en"]) .v3-lang__face[data-lang-face="zh"] { color: var(--fig-ink); }
:root[data-lang="en"] .v3-lang__face[data-lang-face="en"] { color: var(--fig-ink); }

/* ═══════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════ */
/* Footer — 1:1 Figma (1440x465, bg #1b1e25) */
.v3-footer { background: #1b1e25; }
.v3-footer__frame { position: relative; width: 1440px; height: 465px; margin: 0 auto; }
.v3-footer__brand { position: absolute; left: 120px; top: 64px; display: flex; flex-direction: column; gap: 16px; }
.v3-footer__logo { display: inline-flex; align-items: center; gap: 10px; }
.v3-footer__logo img { display: block; }
.v3-footer__logo span { font-weight: 800; font-size: 24px; letter-spacing: -0.48px; color: #edeff3; }
.v3-footer__tagline { margin: 0; font-weight: 500; font-size: 14px; line-height: 1.5; color: #9ba2ae; }
.v3-footer__lang { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: var(--radius-pill); background: #23262e; width: fit-content; }
.v3-footer__lang button { border: 0; padding: 6px 12px; border-radius: var(--radius-pill); background: transparent; font-weight: 500; font-size: 12.5px; color: #6e7683; cursor: pointer; }
.v3-footer__lang button.is-active { background: #2a2e37; font-weight: 700; color: #edeff3; }
.v3-footer__col { position: absolute; top: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.v3-footer__col h4 { margin: 0; line-height: 1; font-weight: 700; font-size: 11px; letter-spacing: 1.32px; color: #6e7683; }
.v3-footer__col a { line-height: 1; font-weight: 500; font-size: 14px; color: #c9cfd9; }
.v3-footer__col a:hover { color: #fff; }
.v3-footer__rule { position: absolute; left: 120px; top: 268px; width: 1200px; height: 1px; background: rgba(255,255,255,0.08); }
.v3-footer__copy { position: absolute; left: 120px; top: 290px; margin: 0; font-weight: 500; font-size: 13px; color: #6e7683; }
.v3-footer__legal { position: absolute; left: 1142px; top: 290px; display: flex; gap: 22px; }
.v3-footer__legal a { font-weight: 500; font-size: 13px; color: #9ba2ae; }
.v3-footer__legal a:hover { color: #fff; }

/* Footer reflow on small screens (the frame is otherwise a fixed 1440 layout) */
@media (max-width: 900px) {
  .v3-footer__frame { width: 100%; height: auto; margin: 0; padding: 48px 20px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .v3-footer__brand { position: static; grid-column: 1 / -1; }
  .v3-footer__col { position: static; left: auto !important; }
  .v3-footer__rule { position: static; grid-column: 1 / -1; margin: 6px 0; }
  .v3-footer__copy { position: static; grid-column: 1 / -1; }
  .v3-footer__legal { position: static; grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Request Access modal
   ═══════════════════════════════════════════════════════════════════════ */
.v3-modal[hidden] { display: none; }
.v3-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20,20,20,0.28);
  backdrop-filter: blur(3px);
}
.v3-modal__card {
  width: 100%;
  max-width: 460px;
  padding: 34px;
  background: var(--surface-card);
  border-radius: var(--radius-feature);
  box-shadow: 0 24px 60px rgba(0,0,0,0.16), 0 4px 14px rgba(0,0,0,0.07);
}
.v3-modal__close { float: right; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-high); box-shadow: var(--sh-control); color: var(--text-secondary); }
.v3-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.v3-field label { font-size: var(--v3-fs-small); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.v3-field input, .v3-field select {
  height: 48px;
  padding-inline: 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-main);
  box-shadow: var(--sh-inset);
  font: inherit;
  font-size: var(--v3-fs-small);
  color: var(--text-primary);
}
.v3-field input::placeholder { color: var(--text-muted); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --v3-gutter: var(--v3-gutter-md); --v3-section-y: 88px; }
  .v3-container--nav { padding-inline: var(--v3-gutter-md); }
}
@media (max-width: 768px) {
  :root { --v3-gutter: var(--v3-gutter-sm); --v3-section-y: var(--v3-section-y-sm); }
  .v3-container--nav { padding-inline: var(--v3-gutter-sm); }
  .v3-nav__links { display: none; }
  .v3-nav__burger { display: inline-flex; }
  .v3-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .v3-footer__brand { grid-column: 1 / -1; }
  .v3-footer__legal { flex-direction: column; gap: 14px; align-items: flex-start; }
}