/* =====================================================================
   Landing / guide pages — builds on styles.css (variables + base + footer)
   Link order:  <link styles.css> then <link landing.css>
   ===================================================================== */

.doc { padding-top: clamp(5.5rem, 10vh, 7rem); }

/* ---------- Breadcrumb ---------- */
.crumb {
  font-size: 0.76rem; letter-spacing: 0.06em; color: var(--ink-soft);
  padding-block: 1rem 0.4rem;
}
.crumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.crumb li { display: flex; align-items: center; gap: 0.5rem; }
.crumb li:not(:last-child)::after { content: "/"; color: var(--line); }
.crumb a { color: var(--clay); }
.crumb a:hover { text-decoration: underline; }
.crumb [aria-current] { color: var(--ink-soft); }

/* ---------- Hero ---------- */
.doc-hero { padding-block: clamp(1rem, 3vw, 2.2rem) clamp(2rem, 5vw, 3.4rem); border-bottom: 1px solid var(--line); }
.doc-hero .eyebrow { display: inline-block; margin-bottom: 1rem; }
.doc-h1 {
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: -0.015em;
  max-width: 20ch;
}
.doc-h1 em { font-style: italic; color: var(--clay); }
.doc-h1 .zh {
  display: block; font-family: "Noto Serif SC", var(--font-display), serif;
  font-weight: 500; font-size: 0.62em; letter-spacing: 0.02em; margin-top: 0.5rem; color: var(--ink-soft);
}
.doc-lede { margin-top: 1.4rem; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-soft); max-width: 60ch; }
.doc-lede .zh { display: block; font-family: "Noto Serif SC", serif; font-size: 0.94em; line-height: 1.9; margin-top: 0.7rem; }
.doc-actions { margin-top: 1.8rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.doc-meta {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-soft);
}
.doc-meta strong { color: var(--ink); font-weight: 500; }

/* ---------- TL;DR / key facts ---------- */
.tldr {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--clay);
  border-radius: 14px; padding: clamp(1.4rem, 3vw, 2rem);
}
.tldr h2 { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--clay); margin-bottom: 1rem; }
.tldr ul { display: grid; gap: 0.7rem; }
.tldr li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); }
.tldr li::before { content: "→"; position: absolute; left: 0; color: var(--clay); }
.tldr strong { color: var(--ink); }

/* ---------- Article body ---------- */
.doc-body { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.doc-body > section { max-width: 68ch; margin-inline: auto; }
.doc-body > section + section { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.doc-body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.doc-body h2 .zh { display: block; font-family: "Noto Serif SC", serif; font-size: 0.6em; color: var(--ink-soft); margin-top: 0.3rem; }
.doc-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin: 1.6rem 0 0.6rem; }
.doc-body p { color: var(--ink-soft); margin-bottom: 1rem; font-size: 1.05rem; }
.doc-body p .zh, .doc-body li .zh { color: var(--ink-soft); }
.doc-body a { color: var(--clay); text-decoration: underline; text-underline-offset: 2px; }
.doc-body ul, .doc-body ol { margin: 0 0 1.2rem 0; display: grid; gap: 0.6rem; }
.doc-body ul li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.doc-body ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.doc-body ol { counter-reset: step; list-style: none; }
.doc-body ol li { position: relative; padding-left: 2.2rem; color: var(--ink-soft); counter-increment: step; }
.doc-body ol li::before {
  content: counter(step); position: absolute; left: 0; top: 0.05em;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-size: 0.85rem; display: grid; place-items: center;
}

/* bilingual paragraph block */
.zh-block {
  font-family: "Noto Serif SC", var(--font-display), serif;
  line-height: 1.95; letter-spacing: 0.01em;
  background: var(--bone-2); border-radius: 12px; padding: 1.2rem 1.4rem;
  margin: 1.2rem 0; color: var(--ink-soft);
}
.zh-label { display: block; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay); margin-bottom: 0.6rem; }

/* pull stat row */
.doc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 1.6rem 0; }
.doc-stats div { background: var(--cream); padding: 1.4rem 1.2rem; text-align: center; }
.doc-stats dt { font-family: var(--font-display); font-size: 1.9rem; color: var(--clay); line-height: 1; }
.doc-stats dd { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 0.4rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 68ch; margin-inline: auto; }
.faq h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 1.4rem; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 1rem;
  font-family: var(--font-ui); font-size: 1.4rem; color: var(--clay); transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding-bottom: 1.3rem; color: var(--ink-soft); }
.faq-item .faq-a p { margin-bottom: 0.8rem; }
.faq-item .faq-a .zh { display: block; font-family: "Noto Serif SC", serif; line-height: 1.9; margin-top: 0.5rem; }

/* ---------- Agents strip ---------- */
.agents-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 68ch; margin: clamp(2.4rem,5vw,3.6rem) auto 0; }
.agent-mini { display: flex; gap: 1rem; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
.agent-mini img { width: 72px; height: 88px; object-fit: cover; border-radius: 10px; flex: none; background: var(--sand); }
.agent-mini .am-role { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); }
.agent-mini .am-name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; margin: 0.2rem 0; }
.agent-mini .am-phone { font-size: 0.9rem; color: var(--ink-soft); }
.agent-mini .am-phone a { color: var(--ink); border-bottom: 1px solid var(--clay); }

/* ---------- Related guides ---------- */
.related { max-width: 68ch; margin: clamp(2.4rem,5vw,3.6rem) auto 0; }
.related h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: 1.2rem; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.related-grid a {
  display: block; background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.3rem; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.related-grid a:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(32,28,23,0.1); border-color: var(--clay); }
.related-grid .rg-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); display: block; margin-bottom: 0.3rem; }
.related-grid .rg-sub { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--cream); border-radius: 18px; padding: clamp(2rem, 5vw, 3.2rem); text-align: center; margin: clamp(2.6rem,5vw,4rem) auto 0; max-width: 68ch; }
.cta-band h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.1; }
.cta-band h2 em { font-style: italic; color: var(--gold); }
.cta-band .zh { display: block; font-family: "Noto Serif SC", serif; font-size: 0.55em; color: rgba(251,248,242,0.7); margin-top: 0.6rem; }
.cta-band p { color: rgba(251,248,242,0.72); margin-top: 1rem; }
.cta-band .doc-actions { justify-content: center; margin-top: 1.8rem; }
.cta-band .btn-outline { color: var(--cream); border-color: rgba(251,248,242,0.4); }
.cta-band .btn-outline:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- Simple landing header ---------- */
.doc-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-block: 0.7rem; background: rgba(244,239,231,0.9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }

@media (max-width: 720px) {
  .doc-stats { grid-template-columns: 1fr; }
  .agents-strip, .related-grid { grid-template-columns: 1fr; }
}