/* =============================================================
   Meridian One — bespoke layer (one.css)
   Loaded AFTER styles.css. Additive, override-only refinements
   that elevate the shared "future city" system toward
   world-class craft without destabilising the base.
   ============================================================= */

:root {
  --read: #dee5f2;        /* high-contrast ink for long-form prose */
  --measure: 66ch;        /* comfortable line length */
}

/* ===================== ROUND 1 · typography, measure, rhythm, focus ===================== */

/* Reading comfort — measure + line-height tuned for calm reading */
.section-copy { color: var(--muted); max-width: 62ch; line-height: 1.8; }
body.zh .section-copy { line-height: 1.95; letter-spacing: 0.01em; }

.warm-prose { max-width: var(--measure); }
.warm-prose p { color: var(--read); font-size: 1.07rem; line-height: 1.86; margin: 0 0 1.05em; }
body.zh .warm-prose p { font-size: 1.05rem; line-height: 2.0; letter-spacing: 0.01em; }

.hero-copy { line-height: 1.72; }
body.zh .hero-copy { line-height: 1.95; }
.hero-soft-line { color: var(--muted); font-size: 1.04rem; line-height: 1.8; max-width: 50ch; }
body.zh .hero-soft-line { line-height: 1.95; }

/* Modern, progressive niceties — ignored safely by old engines */
h1, h2, h3, .hero-title { text-wrap: balance; }
p, li, .pdesc { text-wrap: pretty; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Vertical rhythm — a touch more breathing room around headings/grids */
.section-heading { margin-bottom: clamp(26px, 3.4vw, 44px); }
.definition-grid, .assurance-grid, .pricing-grid, .merchant-flow { margin-top: clamp(10px, 2vw, 22px); }

/* Keep the closing statement as airy as a coda */
.closing-cta p { color: var(--read); line-height: 1.85; max-width: 60ch; }
body.zh .closing-cta p { line-height: 2.0; }

/* Focus visibility — a single, confident gold ring everywhere (a11y) */
a:focus-visible,
.button:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===================== ROUND 2 · signature visuals ===================== */

/* "A day" — the trust loop reads as light moving from dawn to night.
   Each step's label and top-rule is tinted along the day's spectrum. */
#loop .merchant-flow .merchant-step {
  border-top: 2px solid var(--line-gold);
  padding-top: 22px;
  transition: transform 0.32s cubic-bezier(0.16,0.84,0.32,1), border-color 0.32s ease, box-shadow 0.32s ease;
}
#loop .merchant-step .step-no { font-weight: 600; letter-spacing: 0.04em; }
#loop .merchant-step:nth-child(1) { border-top-color: rgba(227,189,99,0.55); }
#loop .merchant-step:nth-child(1) .step-no { color: #e3bd63; }   /* 清晨 / Dawn */
#loop .merchant-step:nth-child(2) { border-top-color: rgba(255,210,122,0.60); }
#loop .merchant-step:nth-child(2) .step-no { color: #ffd27a; }   /* 上午 / Morning */
#loop .merchant-step:nth-child(3) { border-top-color: rgba(255,244,208,0.70); }
#loop .merchant-step:nth-child(3) .step-no { color: #fff4d0; }   /* 正午 / Noon */
#loop .merchant-step:nth-child(4) { border-top-color: rgba(255,207,158,0.60); }
#loop .merchant-step:nth-child(4) .step-no { color: #ffcf9e; }   /* 午后 / Afternoon */
#loop .merchant-step:nth-child(5) { border-top-color: rgba(242,164,140,0.62); }
#loop .merchant-step:nth-child(5) .step-no { color: #f2a48c; }   /* 傍晚 / Dusk */
#loop .merchant-step:nth-child(6) { border-top-color: rgba(108,224,214,0.60); }
#loop .merchant-step:nth-child(6) .step-no { color: #6ce0d6; }   /* 夜里 / Night */
#loop .merchant-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

/* Card craft — a quiet, consistent lift + gold edge on hover */
.definition-card,
.assurance-item,
.pricing-card,
.boundary-panel,
.std-chip {
  transition: transform 0.32s cubic-bezier(0.16,0.84,0.32,1), border-color 0.32s ease, box-shadow 0.32s ease, background 0.32s ease;
}
.definition-card:hover,
.assurance-item:hover,
.pricing-card:hover,
.boundary-panel:hover {
  transform: translateY(-4px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow-soft);
}

/* The "underneath" card closes the capabilities grid — a faint cyan kinship */
#capabilities .definition-grid .definition-card:last-child small { color: var(--cyan-soft); }

/* ===================== ROUND 3 · motion & interaction (reduced-motion aware) ===================== */

/* Inline links draw a calm underline on hover/focus */
.next-step a,
.warm-prose a {
  text-decoration: none;
  background-image: linear-gradient(var(--gold-bright), var(--gold-bright));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.22,0.61,0.36,1), color 0.2s ease;
}
.next-step a:hover, .next-step a:focus-visible,
.warm-prose a:hover, .warm-prose a:focus-visible { background-size: 100% 1px; color: var(--gold-bright); }

/* Buttons settle a touch faster than they lift — feels responsive, not floaty */
.button:active { transform: translateY(0); transition-duration: 0.06s; }

/* Motion that only plays when the visitor welcomes it */
@media (prefers-reduced-motion: no-preference) {
  /* The wordmark holds a slow dawn — light breathing across the letters */
  .hero-title { background-size: 100% 220%; animation: oneDawn 16s ease-in-out infinite alternate; }
  @keyframes oneDawn {
    from { background-position: 50% 4%; }
    to   { background-position: 50% 40%; }
  }
}

/* Respect a reduced-motion preference: no auto-motion, no hover travel */
@media (prefers-reduced-motion: reduce) {
  .hero-title { animation: none; }
  .definition-card:hover,
  .assurance-item:hover,
  .pricing-card:hover,
  .boundary-panel:hover,
  #loop .merchant-step:hover { transform: none; }
}

/* ===================== ROUND 4 · a11y / responsive / performance ===================== */

/* Comfortable on the smallest screens */
@media (max-width: 520px) {
  .warm-prose p { font-size: 1rem; line-height: 1.8; }
  .hero-soft-line { font-size: 1rem; }
  .hero-metrics { gap: 14px; }
  .closing-cta p { line-height: 1.8; }
}

/* Honour Windows High Contrast / forced-colors: keep structure visible */
@media (forced-colors: active) {
  .button,
  .definition-card,
  .pricing-card,
  .assurance-item,
  .boundary-panel { border-color: CanvasText; }
  a:focus-visible,
  .button:focus-visible,
  button:focus-visible { outline-color: Highlight; }
}

/* Crisp mark, no layout shift */
.brand-logo, .packet-logo { image-rendering: -webkit-optimize-contrast; }

/* ===================== ROUND 6 · 中文阅读体验 (CJK typography) =====================
   中文读起来最舒服的版心是每行 ~36–40 字、行距 ~2.0、字间留一点点呼吸。
   拉丁文的 ch 测量对中文偏窄，这里按字符宽度(em)重新给中文设定。 */
body.zh .hero-copy { font-size: clamp(1.1rem, 1.6vw, 1.34rem); line-height: 2.0; letter-spacing: 0.02em; max-width: 30em; }
body.zh .hero-soft-line { font-size: 1.08rem; line-height: 2.0; letter-spacing: 0.02em; max-width: 32em; }
body.zh .notice { line-height: 1.9; }
body.zh .section-copy { max-width: 40rem; line-height: 2.0; letter-spacing: 0.02em; }
body.zh .warm-prose { max-width: 40rem; }
body.zh .warm-prose p { font-size: 1.1rem; line-height: 2.05; letter-spacing: 0.02em; margin: 0 0 1.25em; }
body.zh .closing-cta p { font-size: 1.12rem; line-height: 2.05; letter-spacing: 0.02em; max-width: 38rem; }
body.zh .definition-card p,
body.zh .assurance-item p,
body.zh .pricing-card .pdesc,
body.zh .merchant-step p { line-height: 1.95; letter-spacing: 0.015em; }
body.zh .memory-spine span { line-height: 1.95; letter-spacing: 0.015em; }
body.zh .section-heading h2 { line-height: 1.42; }

/* ===================== ROUND 7 (post-launch polish) ===================== */
/* Capabilities has 6 cards — balance them as a clean 3×2 on wider screens
   (the shared definition-grid otherwise wraps to a lopsided 4 + 2). */
@media (min-width: 761px) {
  #capabilities .definition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}