/* self-hosted fonts (OFL): Fraunces ~ Canela feel, Hanken Grotesk ~ Clarkson feel.
   Hosted inside the site so they load in mainland China (Google Fonts is blocked). */
@font-face { font-family:'Fraunces'; src:url('fraunces.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('hanken.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Oldenburg'; src:url('oldenburg.woff2') format('woff2'); font-weight:400; font-display:swap; }
:root { --hand:'Oldenburg','Segoe Print','Comic Sans MS',cursive; }

/* ================================================================
   Adapt to China — shared stylesheet
   Arial throughout; weight (not typeface) carries the hierarchy.
   Palette & hard-shadow language carried over from the original.
================================================================ */

:root {
  --sky:#e8d7b8; --card:#f7eedb; --ink:#1b1610; --blue:#3a6b8a; --blue-deep:#2c5069;
  --red:#c8432f; --red-deep:#9a3420; --amber:#d98a2b; --teal:#2f6d54;
  --line:#cfbc97; --muted:#6d5f49; --shadow:rgba(27,22,16,.9);
  --font:'Hanken Grotesk', Arial, 'Helvetica Neue', sans-serif;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  background:var(--sky); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1040px; margin:0 auto; padding:0 22px; }
::selection { background:rgba(27,22,16,.14); }
a { color:var(--blue-deep); text-decoration-thickness:1px; text-underline-offset:3px; }
img { max-width:100%; display:block; }

/* ---------- shared type ---------- */
h1,h2,h3 { font-family:var(--font); letter-spacing:-.01em; }
h1 { font-weight:800; font-size:clamp(2.3rem,5.5vw,3.6rem); line-height:1.02; }
h2 { font-weight:800; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.1; }
h3 { font-weight:700; font-size:1.05rem; line-height:1.2; }
.eyebrow { font-weight:700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-deep); }
.lead { color:var(--muted); font-size:1.05rem; max-width:60ch; }

/* ---------- plate label ---------- */
.plate { display:inline-flex; align-items:center; gap:10px; border:1.5px solid var(--ink); background:var(--card); padding:6px 14px; box-shadow:3px 3px 0 var(--shadow); }
.plate .tag { font-weight:800; background:var(--blue-deep); color:var(--card); padding:2px 9px; font-size:.8rem; letter-spacing:.05em; }
.plate .en { font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; }
.plate.red .tag { background:var(--red); }
.plate.teal .tag { background:var(--teal); }

/* ---------- nav ---------- */
nav { position:sticky; top:0; z-index:50; background:rgba(232,215,184,.93); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.nav-in { max-width:1040px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; justify-content:flex-start; gap:18px; }
.logo { font-weight:800; font-size:1.02rem; letter-spacing:.04em; text-decoration:none; color:var(--ink); }
.logo span { color:var(--blue); }
.nav-links { display:flex; gap:20px; align-items:center; }
.nav-links a { font-weight:700; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.nav-links a:hover { color:var(--blue); }
.nav-links a.active { color:var(--blue); border-bottom:2px solid var(--blue); padding-bottom:2px; }
.nav-cta { background:var(--red); color:#fff !important; padding:8px 15px; box-shadow:3px 3px 0 var(--shadow); border-bottom:none !important; }


/* ---------- buttons ---------- */
.btn { font-weight:700; font-size:.92rem; letter-spacing:.02em; text-decoration:none; text-align:center; padding:12px 20px; display:inline-block; border:1.5px solid var(--ink); box-shadow:4px 4px 0 var(--shadow); background:var(--card); color:var(--ink); transition:transform .12s ease, box-shadow .12s ease; cursor:pointer; }
.btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--shadow); }
.btn.primary { background:var(--red); color:#fff; border-color:var(--red-deep); }
.btn.blue { background:var(--blue-deep); color:#fff; border-color:var(--blue-deep); }
.btn.teal { background:var(--teal); color:#fff; border-color:var(--teal); }
.btn.sm { padding:9px 15px; font-size:.85rem; box-shadow:3px 3px 0 var(--shadow); }

/* ---------- page header (interior pages) ---------- */
.page-head { padding:44px 0 30px; border-bottom:1px solid var(--line); }
.page-head .eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.page-head .eyebrow::after { content:""; height:1px; flex:1; background:var(--line); }
.page-head h1 { margin-bottom:12px; }
.page-head .lead { font-style:normal; }
.crumb { font-size:.8rem; color:var(--muted); margin-bottom:18px; }
.crumb a { text-decoration:none; font-weight:700; }
.crumb a:hover { text-decoration:underline; }

/* ---------- footer ---------- */
footer { border-top:1.5px solid var(--ink); margin-top:20px; padding:30px 0 42px; font-size:.88rem; color:var(--muted); }
.foot-grid { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
.foot-links { display:flex; gap:16px; flex-wrap:wrap; }
.foot-links a { color:var(--muted); text-decoration:none; font-weight:700; font-size:.8rem; letter-spacing:.04em; }
.foot-links a:hover { color:var(--blue); }
.foot-120 { font-weight:800; background:var(--red); color:#fff; padding:4px 10px; letter-spacing:.06em; font-size:.82rem; }

/* ================================================================
   HOME PAGE
================================================================ */
/* photo background, warm-white gradient that only thickens on the LEFT
   (over the text) and clears by the Oriental Pearl tower on the right */
header.hero {
  position:relative; min-height:80vh; display:flex; align-items:center;
  border-bottom:1px solid var(--ink);
  background:
    linear-gradient(93deg,
      rgba(253,250,240,.97) 0px,
      rgba(253,250,240,.95) 470px,
      rgba(253,250,240,.86) 640px,
      rgba(253,250,240,.45) 800px,
      rgba(253,250,240,.12) 950px,
      rgba(253,250,240,0) 1080px),
    url('hero_lujiazui.jpg') center 60% / cover no-repeat;
}
header.hero .wrap { max-width:none; width:100%; }
.hero-in { padding:96px 0; max-width:640px; }
.hero-in .eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hero-in .eyebrow::after { content:""; height:1px; width:90px; background:var(--ink); opacity:.35; }
h1 .accent { color:var(--red-deep); }
.hero-sub { font-size:1.22rem; color:#5a4d38; margin:18px 0 28px; max-width:46ch; }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }
.photo-credit { position:absolute; right:16px; bottom:12px; font-size:.74rem; letter-spacing:.04em; color:rgba(27,22,16,.55); }
/* mobile: flat paper hero + framed photo below (the liked version) */
.hero-photo { display:none; }
@media (max-width:900px){
  header.hero { min-height:auto; background:var(--sky); }
  .hero-in { padding:44px 0 4px; }
  .photo-credit { display:none; }
  .hero-photo { display:block; margin:14px 0 44px; }
  .hero-photo img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 45%; border:1px solid var(--ink); border-radius:14px; display:block; }
  .hero-photo figcaption { font-size:.76rem; letter-spacing:.03em; color:var(--muted); margin-top:8px; text-align:right; }
}
@media (max-width:520px){ .btn-row .btn{ flex:1 1 100%; } }

/* home sections */
section { padding:52px 0; }
section + section { border-top:1px solid var(--line); }
.sec-head { margin-bottom:26px; }
.sec-head h2 { margin-top:12px; }
.sec-head .lead { margin-top:10px; }

/* the four doors */
.doors { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:720px){ .doors{ grid-template-columns:1fr; } }
.door {
  position:relative; background:#fdf3c4; border:none; border-radius:4px;
  box-shadow:0 8px 18px rgba(27,22,16,.13);
  padding:30px 24px 24px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:8px; min-height:172px;
  transition:transform .14s ease, box-shadow .14s ease;
}
.door::before {
  content:""; position:absolute; top:-9px; left:34px; width:88px; height:20px;
  background:rgba(203,172,110,.45);
  border-left:1px dashed rgba(27,22,16,.15); border-right:1px dashed rgba(27,22,16,.15);
  transform:rotate(-2.5deg);
}
.door:nth-child(1){ transform:rotate(-.5deg); }
.door:nth-child(2){ background:#e6ecc4; transform:rotate(.5deg); }
.door:nth-child(3){ background:#f4ddc8; transform:rotate(.4deg); }
.door:nth-child(4){ background:#e8e6c6; transform:rotate(-.4deg); }
.door:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--shadow); }
.door .d-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.door .d-no { font-family:var(--display); font-weight:600; font-size:1.25rem; color:var(--red-deep); }
.door h3 { font-family:var(--display); font-weight:600; font-size:1.4rem; }
.door p { font-family:var(--hand); color:#3a3016; font-size:1.02rem; line-height:1.4; flex:1; }
.door .go { font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }


.pill { font-weight:700; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border:2px solid currentColor; }
.pill.teal { color:var(--teal); }
.pill.red { color:var(--red); }
.pill.blue { color:var(--blue-deep); }

/* compact trust strip */
.trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px; }
@media (max-width:760px){ .trust-row{ grid-template-columns:1fr; } }
.t-mini { background:var(--card); border:1px solid var(--line); padding:16px 18px; }
.t-mini .no { font-weight:800; font-size:1.3rem; color:var(--blue); }
.t-mini h3 { margin:4px 0 6px; }
.t-mini p { font-size:.9rem; color:var(--muted); }

/* ================================================================
   TRIAGE (healthcare page)
================================================================ */
.free-badge { font-weight:700; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; background:var(--teal); color:#fff; padding:4px 10px; margin-left:8px; box-shadow:2px 2px 0 var(--shadow); vertical-align:middle; }
.tiers { display:grid; gap:12px; }
.tier { background:var(--card); border:1px solid var(--line); padding:16px 18px; display:grid; grid-template-columns:44px 1fr; gap:15px; }
.tier.t1 { border-left:5px solid var(--red); background:#f2e0cb; border-color:rgba(200,67,47,.35); }
.tier.t2 { border-left:5px solid var(--amber); }
.tier.t3 { border-left:5px solid var(--blue); }
.tier.t4 { border-left:5px solid var(--teal); }
.t-badge { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.25rem; color:#fff; }
.t1 .t-badge{background:var(--red);} .t2 .t-badge{background:var(--amber);}
.t3 .t-badge{background:var(--blue);} .t4 .t-badge{background:var(--teal);}
.t-title { font-weight:700; font-size:1.15rem; }
.t-act { font-weight:700; color:var(--red-deep); margin:2px 0 6px; }
.t3 .t-act, .t4 .t-act { color:var(--blue-deep); }
.t-eg { color:var(--muted); font-size:.92rem; }
.t-note { font-size:.92rem; margin-top:6px; }
.caution { margin-top:16px; background:#f2e0cb; border:1px solid rgba(200,67,47,.4); border-left:4px solid var(--red); padding:13px 18px; font-size:.93rem; }
.caution b { color:var(--red-deep); }
.source-note { margin-top:12px; font-size:.82rem; color:var(--muted); }

/* six chapter cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:820px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .cards{ grid-template-columns:1fr; } }
.mcard { background:var(--card); border:1px solid var(--line); padding:18px 16px 14px; display:flex; flex-direction:column; gap:8px; min-height:158px; }
.mcard .tag-mini { font-weight:700; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:var(--blue); align-self:flex-start; padding:3px 9px; }
.mcard.hot .tag-mini { background:var(--blue-deep); }
.mcard h3 { font-size:1.08rem; }
.mcard h3 .star { color:var(--amber); font-size:.85em; }
.mcard p { font-size:.9rem; color:var(--muted); flex:1; }
.mcard .tag { font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border-top:1px dashed var(--line); padding-top:9px; }
.mcard .tag.free { color:var(--teal); }

/* PDF get box */
.get { background:var(--card); border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--shadow); padding:32px; display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; }
@media (max-width:860px){ .get{ grid-template-columns:1fr; padding:26px 22px; } }
.get ul { list-style:none; margin:14px 0 4px; }
.get li { padding:5px 0 5px 24px; position:relative; font-size:.96rem; }
.get li::before { content:"\2713"; position:absolute; left:0; color:var(--teal); font-weight:700; }
.get-side { display:flex; flex-direction:column; gap:12px; }
.price { font-weight:800; font-size:2.2rem; color:var(--blue-deep); }
.price small { font-size:.82rem; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; display:block; }
.price .usd { font-size:1rem; font-weight:700; color:var(--muted); }
.fineprint { font-size:.82rem; color:var(--muted); }

/* ================================================================
   ANSWER DESK + WALL (answers page)
================================================================ */
.lanes { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
@media (max-width:760px){ .lanes{ grid-template-columns:1fr; } }
.lane { position:relative; background:var(--card); border:1.5px solid var(--ink); box-shadow:4px 4px 0 var(--shadow); padding:24px 22px 20px; display:flex; flex-direction:column; gap:10px; }
.lane.priority { border-color:var(--red-deep); box-shadow:6px 6px 0 rgba(154,52,32,.9); }
.lane-name { font-weight:700; font-size:1.05rem; }
.lane-price { font-weight:800; font-size:2rem; color:var(--blue-deep); line-height:1; }
.lane-price .usd { font-size:.9rem; font-weight:700; color:var(--muted); }
.lane ul { list-style:none; margin:4px 0 10px; flex:1; }
.lane li { padding:4px 0 4px 22px; position:relative; font-size:.92rem; }
.lane li::before { content:"\2713"; position:absolute; left:0; color:var(--teal); font-weight:700; }
.lane.priority li::before { color:var(--red); }
.stamp-48 { position:absolute; top:-13px; right:14px; background:var(--card); border:2px solid var(--red); color:var(--red); font-weight:700; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; transform:rotate(2deg); }
.howto { margin-top:16px; background:var(--card); border:1.5px solid var(--ink); box-shadow:4px 4px 0 var(--shadow); padding:20px 22px; }
.howto h3 { margin-bottom:12px; }
.howto ol { list-style:none; counter-reset:s; display:grid; gap:10px; }
.howto li { counter-increment:s; position:relative; padding-left:40px; font-size:.95rem; }
.howto li::before { content:counter(s); position:absolute; left:0; top:-2px; width:26px; height:26px; background:var(--blue-deep); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; }
.rules-strip { margin-top:16px; background:var(--card); border:1.5px dashed var(--ink); padding:15px 20px; font-size:.93rem; }
.rules-strip b { color:var(--red-deep); }

/* wall */
.qa { background:var(--card); border:1px solid var(--line); margin-bottom:10px; }
.q-tag { font-weight:700; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--teal); padding:2px 8px; margin-right:10px; position:relative; top:-2px; }

/* ask form */
.ask-box { background:var(--card); border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--shadow); padding:30px; display:grid; grid-template-columns:.85fr 1.15fr; gap:30px; }
@media (max-width:820px){ .ask-box{ grid-template-columns:1fr; padding:24px 20px; } }
form.ask { display:flex; flex-direction:column; gap:12px; }
.field label { display:block; font-weight:700; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px; color:var(--blue-deep); }
.field input, .field textarea, .field select { width:100%; border:1.5px solid var(--ink); background:#fffcf3; padding:11px 12px; font-family:var(--font); font-size:.98rem; color:var(--ink); }
.field textarea { min-height:110px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--blue); outline-offset:1px; }
.check { display:flex; gap:9px; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.check input { margin-top:3px; width:16px; height:16px; accent-color:var(--teal); flex-shrink:0; }
form.ask button { align-self:flex-start; }
.hidden { display:none; }

/* ---------- FAQ (shared) ---------- */
details { background:var(--card); border:1px solid var(--line); margin-bottom:10px; }
summary { cursor:pointer; padding:15px 46px 15px 20px; font-weight:700; font-size:1.02rem; list-style:none; position:relative; }
summary::-webkit-details-marker{ display:none; }
summary::after { content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-weight:800; color:var(--blue); font-size:1.2rem; }
details[open] summary::after { content:"\2013"; }
details .a { padding:0 20px 16px; color:var(--muted); font-size:.95rem; }
details .a p { margin:8px 0; }
details .a p:first-child { margin-top:0; }

/* ================================================================
   GUIDES PAGE (article/reference styles)
================================================================ */
.guides-body { background-image:radial-gradient(circle at 8% 4%, rgba(122,94,48,.07), transparent 40%), radial-gradient(circle at 94% 92%, rgba(122,94,48,.06), transparent 44%); }
.guides-body .wrap { max-width:880px; }
.guides-body .nav-in { max-width:880px; }

.g-head { padding:44px 0 26px; }
.kicker { font-weight:700; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.kicker::after { content:""; height:1px; flex:1; background:var(--line); }
.sub { color:var(--muted); margin-top:12px; max-width:54ch; }
.toc { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 8px; }
.chip { font-weight:700; font-size:.76rem; letter-spacing:.04em; text-decoration:none; color:var(--ink); background:var(--card); border:1.5px solid var(--ink); padding:7px 12px; box-shadow:3px 3px 0 var(--shadow); }
.chip b { color:var(--blue-deep); margin-right:5px; }
.updated { font-size:.8rem; color:var(--muted); margin-top:10px; }

article { padding:38px 0; border-top:1px solid var(--line); scroll-margin-top:64px; }
article .plate { margin-bottom:12px; }
article .plate .no { font-weight:800; background:var(--blue-deep); color:var(--card); padding:2px 9px; font-size:.85rem; }
article h2 { margin-bottom:4px; }
article .lead { margin:8px 0 14px; }
article h3 { margin:16px 0 6px; color:var(--blue-deep); font-size:1.08rem; }
article p { margin:8px 0; }
article strong { font-weight:700; }
ul.clean { list-style:none; margin:8px 0; }
ul.clean li { padding:4px 0 4px 20px; position:relative; }
ul.clean li::before { content:"\203A"; position:absolute; left:2px; color:var(--blue); font-weight:800; }
.trap { background:#f2e0cb; border-left:4px solid var(--red); padding:12px 16px; margin:14px 0; font-size:.94rem; }
.trap b { color:var(--red-deep); }
.tip { background:#e7e6c8; border-left:4px solid var(--teal); padding:12px 16px; margin:14px 0; font-size:.94rem; }
.tip b { color:var(--teal); }
.snippet { display:inline-block; background:#fffcf3; border:1.5px dashed var(--ink); padding:8px 14px; margin:6px 0; font-size:1.02rem; }
.snippet-cap { font-size:.8rem; color:var(--muted); }

table.ref { width:100%; border-collapse:collapse; margin:14px 0; font-size:.88rem; }
table.ref th { background:#e2d2ab; text-align:left; padding:8px 10px; font-weight:700; border:1px solid var(--line); }
table.ref td { padding:8px 10px; border:1px solid var(--line); vertical-align:top; background:var(--card); }

.cta-band { margin:32px 0 0; background:var(--card); border:1.5px solid var(--ink); box-shadow:5px 5px 0 var(--shadow); padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cta-band .t { font-weight:700; font-size:1.02rem; }

/* ---------- three-tier pricing (answers) ---------- */
.tiers-pay { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
@media (max-width:820px){ .tiers-pay{ grid-template-columns:1fr; } }
.ptier { position:relative; background:var(--card); border:1.5px solid var(--ink); box-shadow:5px 5px 0 var(--shadow); padding:22px 20px 20px; display:flex; flex-direction:column; gap:8px; }
.ptier.mid { border-color:var(--red-deep); box-shadow:6px 6px 0 rgba(154,52,32,.9); }
.ptier .p-band { font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ptier.mid .p-band { color:var(--red-deep); }
.ptier .p-price { font-weight:800; font-size:1.9rem; color:var(--blue-deep); line-height:1; margin-top:2px; }
.ptier .p-price .usd { font-size:.82rem; font-weight:700; color:var(--muted); }
.ptier .p-name { font-weight:700; font-size:1.02rem; margin-top:4px; }
.ptier .p-desc { font-size:.9rem; color:var(--muted); }
.ptier ul { list-style:none; margin:6px 0 4px; flex:1; }
.ptier li { padding:4px 0 4px 20px; position:relative; font-size:.88rem; }
.ptier li::before { content:"\2713"; position:absolute; left:0; color:var(--teal); font-weight:700; }
.ptier .p-excl { font-size:.82rem; color:var(--muted); border-top:1px dashed var(--line); padding-top:8px; margin-top:2px; }
.ptier .p-excl b { color:var(--ink); }
.pick-tag { position:absolute; top:-12px; right:14px; background:var(--red); color:#fff; font-weight:700; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; transform:rotate(2deg); }

/* wechat panel under tiers */
.wechat-panel { margin-top:16px; background:var(--card); border:1.5px solid var(--ink); box-shadow:5px 5px 0 var(--shadow); padding:22px 22px 20px; display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; }
@media (max-width:760px){ .wechat-panel{ grid-template-columns:1fr; } }
.wechat-panel .wp-id { text-align:center; }
.wechat-panel .refund-line { font-size:.82rem; color:var(--muted); margin-top:10px; }

/* suggestion box (home) */
.suggest-box { background:var(--card); border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--shadow); padding:28px 26px; display:grid; grid-template-columns:.8fr 1.2fr; gap:26px; }
@media (max-width:760px){ .suggest-box{ grid-template-columns:1fr; padding:22px 20px; } }
.suggest-box textarea { width:100%; border:1.5px solid var(--ink); background:#fffcf3; padding:11px 12px; font-family:var(--font); font-size:.98rem; color:var(--ink); min-height:120px; resize:vertical; }
.suggest-box textarea:focus { outline:2px solid var(--blue); outline-offset:1px; }
.be-kind { display:inline-block; background:#e7e6c8; border-left:4px solid var(--teal); padding:8px 14px; font-size:.9rem; margin:2px 0 12px; }
.be-kind b { color:var(--teal); }

/* medical disclaimer band */
.med-disclaimer { margin-top:18px; background:#f2e0cb; border:1.5px solid var(--red); border-left:5px solid var(--red); padding:16px 20px; font-size:.9rem; }
.med-disclaimer b { color:var(--red-deep); }

/* ---------- burger nav (mobile) ---------- */
.nav-links { margin-left:auto; }
.nav-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav-links + .nav-right { margin-left:0; }
.nav-burger { display:none; background:var(--card); border:1.5px solid var(--ink); box-shadow:2px 2px 0 var(--shadow); font-size:1.05rem; line-height:1; padding:7px 11px; cursor:pointer; }
@media (max-width:1024px){
  .nav-burger { display:block; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--sky); border-bottom:1.5px solid var(--ink); flex-direction:column; align-items:flex-start; gap:14px; padding:16px 22px 20px; margin-left:0; }
  .nav-links.open { display:flex; }
}

/* ---------- soft corners: hand-made, not machine-cut ---------- */
.plate { border-radius:10px; }
.plate .tag { border-radius:6px; }
.btn, .nav-cta, .nav-burger, form.ask button { border-radius:10px; }
.door, .t-mini, .get, .ask-box, .suggest-box, .wechat-panel, .ptier, .tier, .mcard,
.rules-strip, .med-disclaimer, .cta-band, .lane, .howto, .hero-in { border-radius:14px; }
details { border-radius:12px; overflow:hidden; }
.tip, .trap, .caution, .be-kind { border-radius:10px; }
.snippet { border-radius:10px; }
.chip, .pill { border-radius:999px; }
.q-tag, .free-badge, .foot-120, .mcard .tag-mini, .pick-tag, .stamp-48, .kicker b { border-radius:6px; }
.field input, .field textarea, .field select, .suggest-box textarea { border-radius:10px; }

/* ---------- story section ---------- */
.story { max-width:68ch; }
.story p { margin:12px 0; font-size:1.02rem; }
.story-sign { font-weight:700; margin-top:18px; }
.story-photo { width:210px; border-radius:14px; border:1px solid var(--ink); float:right; margin:4px 0 16px 26px; box-shadow:none; }
@media (max-width:600px){
  .story-photo { float:none; width:150px; margin:0 0 14px; }
  section { padding:44px 0; }
}

/* ---------- about teaser (home) ---------- */
.teaser-card { background:var(--card); border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--shadow); border-radius:14px; padding:26px; display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:center; }
@media (max-width:640px){ .teaser-card{ grid-template-columns:1fr; text-align:left; } }
.teaser-photo { width:200px; height:auto; border-radius:14px; border:1.5px solid var(--ink); box-shadow:4px 4px 0 var(--shadow); }
@media (max-width:640px){ .teaser-photo{ width:150px; } }
.teaser-text p { color:var(--muted); margin:12px 0 16px; font-size:1rem; }

/* ---------- about page ---------- */
.about-hero { display:grid; grid-template-columns:190px 1fr; gap:34px; align-items:start; padding:20px 0 8px; }
@media (max-width:680px){ .about-hero{ grid-template-columns:1fr; gap:18px; } }
.about-photo { width:190px; height:auto; border-radius:16px; border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--shadow); }
@media (max-width:680px){ .about-photo{ width:150px; } }
.about-hero h1 { margin:14px 0 10px; }
#story { padding-top:22px; }
.mission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0 4px; }
@media (max-width:760px){ .mission-grid{ grid-template-columns:1fr; } }
.mission-card { background:var(--card); border:1.5px solid var(--ink); box-shadow:5px 5px 0 var(--shadow); border-radius:14px; padding:22px 20px; }
.mission-card .m-ico { font-size:1.5rem; margin-bottom:6px; }
.mission-card h3 { margin-bottom:6px; }
.mission-card p { color:var(--muted); font-size:.93rem; }
.pledge { background:#e7e6c8; border:1.5px solid var(--teal); border-left:5px solid var(--teal); border-radius:12px; padding:18px 22px; margin-top:8px; }
.pledge b { color:var(--teal); }
.prose { max-width:70ch; }
.prose p { margin:13px 0; font-size:1.03rem; }
.prose h2 { margin:30px 0 6px; }
.prose .sign { font-weight:700; margin-top:18px; }

/* ---------- single paid consultation (answers) ---------- */
.single-pay { display:grid; grid-template-columns:1fr 1.4fr; gap:0; background:var(--card); border:1.5px solid var(--red-deep); box-shadow:6px 6px 0 rgba(154,52,32,.9); border-radius:14px; overflow:hidden; }
@media (max-width:720px){ .single-pay{ grid-template-columns:1fr; } }
.sp-left { padding:26px 24px; background:#f2e0cb; border-right:1.5px solid rgba(154,52,32,.25); }
@media (max-width:720px){ .sp-left{ border-right:none; border-bottom:1.5px solid rgba(154,52,32,.25); } }
.sp-left .p-band { font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red-deep); }
.sp-left .p-price { font-weight:800; font-size:2.4rem; color:var(--blue-deep); line-height:1; margin:6px 0; }
.sp-left .p-price .usd { font-size:.9rem; font-weight:700; color:var(--muted); }
.sp-left .p-name { font-weight:700; font-size:1.08rem; margin-top:4px; }
.sp-left .p-desc { font-size:.92rem; color:var(--muted); margin-top:8px; }
.sp-right { padding:26px 24px; }
.sp-right ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.sp-right li { padding-left:24px; position:relative; font-size:.94rem; }
.sp-right li::before { content:"\2713"; position:absolute; left:0; color:var(--red); font-weight:700; }

/* ================================================================
   EDITORIAL RESTYLE: warm paper, serif display, flat blocks,
   full-bleed nav, wide layout  (imitating the reference look)
================================================================ */
body { font-size:17px; }
a { color:var(--ink); }
h1, h2 { font-family:var(--display); font-weight:600; letter-spacing:-.015em; }
h1 { font-size:clamp(2.6rem,5.2vw,4.1rem); line-height:1.05; }
h2 { font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.12; }
h1 .accent { color:var(--red-deep); }
.logo span { color:var(--red-deep); }
.price, .lane-price, .sp-left .p-price { font-family:var(--display); }

/* pull everything to the edges */
.wrap { max-width:1320px; padding:0 48px; }
.nav-in { max-width:none; padding:14px 48px; }
.guides-body .wrap { max-width:1100px; }
.guides-body .nav-in { max-width:none; }
@media (max-width:700px){ .wrap{ padding:0 22px; } .nav-in{ padding:12px 18px; } }
.hero-sub { max-width:58ch; font-size:1.22rem; }
.lead { max-width:74ch; font-size:1.06rem; }
section { padding:68px 0; }
@media (max-width:600px){ section{ padding:46px 0; } }

/* flat editorial blocks: kill offset shadows, thin the borders */
.door,.t-mini,.get,.ask-box,.suggest-box,.wechat-panel,.single-pay,.mcard,
.rules-strip,.med-disclaimer,.cta-band,details,.hero-in,.teaser-card,.tier,
.howto,.lane,.ptier,.chip,.plate,.snippet { box-shadow:none; }
.about-photo,.teaser-photo,.story-photo { box-shadow:none; border-width:1px; }
.door,.get,.ask-box,.suggest-box,.wechat-panel,.single-pay,.rules-strip,
.med-disclaimer,.cta-band,.teaser-card,.howto,.hero-in { border-width:1px; }
.door:hover { transform:translateY(-3px) rotate(0deg); box-shadow:0 14px 26px rgba(27,22,16,.2); }

header.hero { border-bottom-width:1px; }

/* plates: flat tags, no boxes */
.plate { background:transparent; border:none; box-shadow:none; padding:0; }

/* buttons: solid ink, editorial */
.btn, form.ask button { background:transparent; color:var(--ink); border:1px solid var(--ink); box-shadow:none; }
.btn.primary, .btn.blue, .btn.teal, form.ask button.teal { background:var(--ink); color:var(--card); border-color:var(--ink); }
.btn:active { transform:translateY(1px); box-shadow:none; }
.nav-cta { background:var(--ink); box-shadow:none; }
.nav-burger { box-shadow:none; border-width:1px; }
.nav-links a.active { color:var(--ink); border-bottom-color:var(--ink); }
.nav-links a:hover { color:var(--red-deep); }
.field input:focus, .field textarea:focus, .field select:focus, .suggest-box textarea:focus { outline:2px solid var(--ink); }

/* ================================================================
   HEADS-UP BOARD: sticky notes, hand font, human accountability
================================================================ */
.notes { columns:3; column-gap:22px; }
@media (max-width:980px){ .notes{ columns:2; } }
@media (max-width:620px){ .notes{ columns:1; } }
.note {
  break-inside:avoid; display:block; margin:0 0 24px; padding:34px 20px 20px;
  background:#fdf3c4; border-radius:3px; position:relative;
  box-shadow:0 8px 16px rgba(27,22,16,.14);
  transform:rotate(-.7deg);
}
.note:nth-child(2n){ background:#e6ecc4; transform:rotate(.6deg); }
.note:nth-child(3n){ background:#f4ddc8; transform:rotate(-.4deg); }
.note::before {
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:92px; height:22px; background:rgba(203,172,110,.5);
  border-left:1px dashed rgba(27,22,16,.15); border-right:1px dashed rgba(27,22,16,.15);
}
.note-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.note-ava { width:42px; height:42px; border-radius:50%; object-fit:cover; border:1px solid var(--ink); background:#fffcf3; flex-shrink:0; }
.note-ava.emoji { display:flex; align-items:center; justify-content:center; font-size:1.35rem; }
.note-name { font-weight:700; font-size:.86rem; line-height:1.25; }
.note-name small { display:block; font-weight:400; color:var(--muted); font-size:.72rem; letter-spacing:.03em; }
.note-body { font-family:var(--hand); font-size:1.05rem; line-height:1.45; color:#2b2416; }
.doors .door.wide { grid-column:1 / -1; background:#f8ecc7; transform:rotate(0deg); min-height:auto; }
.field input[type=file] { padding:9px 12px; }

/* keep sticky-note shadow on doors (override the flat sweep above) */
.door { box-shadow:0 8px 18px rgba(27,22,16,.13) !important; }
.door:hover { box-shadow:0 14px 26px rgba(27,22,16,.2) !important; }