/* Compass Chinese — Seal & Ledger (朱印手卷), marketing site
   Colors/type/components mirror /Users/neo/中文软件/DESIGN.md and the
   native app's DesignSystem package 1:1 — do not drift from those tokens. */
:root{
  --paper:#ece2c8;
  --bg-grid: radial-gradient(1400px 900px at 50% -10%, #f7f0dc 0%, var(--paper) 58%);
  --panel:#f6efdd;
  --panel-raised:#fbf7ea;
  --border: rgba(46,36,22,.16);
  --border-soft: rgba(46,36,22,.09);
  --ledger-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 22px -16px rgba(46,36,22,.4);

  --ink:#2a2116;
  --ink-2: rgba(42,33,22,.62);
  --ink-3: rgba(42,33,22,.36);
  --ink-4: rgba(42,33,22,.16);

  --vermilion:#b8371c;
  --vermilion-deep:#8c2812;
  --vermilion-dim: rgba(184,55,28,.14);
  --vermilion-glow: rgba(184,55,28,.28);

  --ochre:#a97a34;
  --ochre-dim: rgba(169,122,52,.16);

  --jade:#4c7b60;
  --jade-dim: rgba(76,123,96,.14);

  --radius-l:20px; --radius-m:14px; --radius-s:9px;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --font-brush: "STKaiti", "Kaiti SC", "Baoli SC", "Xingkai SC", "Songti SC", "PingFang SC", serif;
  --max: 1080px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg-grid), var(--paper);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-ui);
  line-height:1.5;
}
h1,h2,h3{text-wrap:balance; font-family:var(--font-brush); font-weight:600; letter-spacing:-.01em; margin:0 0 .4em;}
p{margin:0 0 1em; color:var(--ink-2);}
a{color:var(--vermilion);}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; background:rgba(246,239,221,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--border-soft);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.brand img{width:30px; height:30px; border-radius:7px; box-shadow:0 2px 5px -1px rgba(140,40,18,.35);}
.brand span{font-family:var(--font-brush); font-weight:600; font-size:17px; letter-spacing:-.01em;}
.nav-links{display:flex; align-items:center; gap:26px; font-size:14px;}
.nav-links a{color:var(--ink-2); text-decoration:none;}
.nav-links a:hover{color:var(--ink);}
.nav-links .cta{color:var(--vermilion); font-weight:600;}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px; position:relative; overflow:hidden;}
.hero::before{content:'';position:absolute;inset:-40px;z-index:-1;background:
    radial-gradient(320px 220px at 18% 10%, rgba(76,123,96,.10), transparent 60%),
    radial-gradient(280px 240px at 88% 0%, rgba(184,55,28,.08), transparent 55%),
    radial-gradient(360px 260px at 50% 100%, rgba(169,122,52,.08), transparent 60%);
  filter:blur(6px); pointer-events:none;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; letter-spacing:.03em; color:var(--vermilion); background:var(--vermilion-dim); border:1px solid rgba(184,55,28,.28); padding:6px 12px; border-radius:999px; font-weight:600; margin-bottom:18px;}
.hero h1{font-size:44px; line-height:1.15; margin-bottom:16px;}
.hero h1 em{font-style:normal; color:var(--vermilion);}
.hero .lede{font-size:17px; line-height:1.6; max-width:46ch; margin-bottom:28px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.lang-note{margin-top:14px; font-size:12.5px; color:var(--ink-3);}

.hero-seal-wrap{display:flex; justify-content:center; align-items:center;}
.hero-seal{width:min(280px, 62vw); aspect-ratio:1; border-radius:34px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(30,22,12,.5), 0 0 0 1px rgba(46,36,22,.12); transform:rotate(-1.4deg);}
.hero-seal img{width:100%; height:100%; display:block; object-fit:cover;}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-ui); font-size:14.5px; font-weight:600; border-radius:var(--radius-s); padding:13px 22px; border:1px solid var(--border); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;}
.btn-primary{background:var(--vermilion); color:#f7ecdd; border-color:var(--vermilion-deep); box-shadow:0 2px 5px -1px rgba(140,40,18,.5), 0 10px 20px -12px var(--vermilion-glow);}
.btn-primary:hover{background:var(--vermilion-deep);}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:var(--border);}
.btn-ghost:hover{color:var(--ink); border-color:var(--ink-3);}

/* ---------- sections ---------- */
section{padding:64px 0;}
.section-head{max-width:56ch; margin-bottom:36px;}
.kicker{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ochre); font-weight:700; margin-bottom:10px; display:block;}
.section-head h2{font-size:28px;}
.section-head p{font-size:15px;}

/* ---------- ledger card ---------- */
.ledger{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--ledger-shadow); padding:22px; position:relative;}
.ledger::before{content:'';position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg, transparent, rgba(46,36,22,.22) 20%, rgba(46,36,22,.22) 80%, transparent);}

.feature-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.feature-card{padding:24px 22px;}
.feature-card .ic{width:38px; height:38px; border-radius:10px; background:var(--panel-raised); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--vermilion);}
.feature-card .ic svg{width:19px; height:19px; stroke:currentColor;}
.feature-card h3{font-size:15.5px; font-family:var(--font-ui); font-weight:700; margin-bottom:6px;}
.feature-card p{font-size:13.5px; margin-bottom:0; line-height:1.55;}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.step{padding:20px 18px;}
.step .num{font-family:var(--font-mono); font-size:12px; color:var(--vermilion); font-weight:700; margin-bottom:10px;}
.step h3{font-size:14.5px; font-family:var(--font-ui); font-weight:700; margin-bottom:6px;}
.step p{font-size:13px; margin-bottom:0;}

/* ---------- levels strip ---------- */
.tape{display:flex; align-items:flex-end; gap:6px; padding:8px 2px;}
.tape-tick{flex:1; height:40px; border-radius:5px; background:rgba(42,33,22,.13); position:relative; display:flex; align-items:flex-end; justify-content:center;}
.tape-tick.on{background:var(--vermilion-dim);}
.tape-tick span{font-family:var(--font-mono); font-size:11px; padding-bottom:6px; color:var(--ink-3); font-weight:600;}
.tape-tick.on span{color:var(--vermilion-deep);}

/* ---------- pricing ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:640px;}
.plan-card{padding:24px 22px; position:relative;}
.plan-card.pro{border-color:rgba(184,55,28,.32); background:var(--panel-raised);}
.plan-badge{position:absolute; top:-10px; right:18px; background:var(--vermilion); color:#f7ecdd; font-size:10px; font-weight:700; padding:4px 10px; border-radius:99px; letter-spacing:.02em;}
.plan-card .price{font-family:var(--font-mono); font-size:26px; font-weight:700; margin:6px 0 2px; color:var(--ink);}
.plan-card .price small{font-size:13px; font-weight:500; color:var(--ink-3);}
.plan-card ul{list-style:none; margin:14px 0 0; padding:0; font-size:13px; color:var(--ink-2);}
.plan-card li{padding:6px 0; border-bottom:1px solid var(--border-soft);}
.plan-card li:last-child{border-bottom:none;}
.pricing-note{font-size:12.5px; color:var(--ink-3); margin-top:16px; max-width:56ch;}

/* ---------- languages ---------- */
.lang-strip{display:flex; gap:12px; flex-wrap:wrap;}
.lang-pill{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:13.5px; box-shadow:var(--ledger-shadow);}
.lang-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--jade);}

/* ---------- final cta ---------- */
.final-cta{text-align:center; padding:64px 0 84px;}
.final-cta h2{font-size:26px; margin-bottom:10px;}
.final-cta p{max-width:44ch; margin:0 auto 26px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border-soft); padding:32px 0 48px;}
footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
footer .fbrand{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3);}
footer .fbrand img{width:18px; height:18px; border-radius:4px;}
footer .flinks{display:flex; gap:20px; font-size:13px;}
footer .flinks a{color:var(--ink-2); text-decoration:none;}
footer .flinks a:hover{color:var(--ink);}

/* ---------- legal pages ---------- */
.legal{padding:56px 0 90px;}
.legal .doc{max-width:74ch; margin:0 auto;}
.legal h1{font-size:28px; margin-bottom:6px;}
.legal .updated{font-size:12.5px; color:var(--ink-3); margin-bottom:32px; font-family:var(--font-mono);}
.legal h2{font-family:var(--font-ui); font-size:16px; font-weight:700; color:var(--ink); margin:32px 0 10px; padding-top:16px; border-top:1px solid var(--border-soft);}
.legal h2:first-of-type{border-top:none; padding-top:0;}
.legal p, .legal li{font-size:14.5px; line-height:1.7; color:var(--ink-2);}
.legal ul{padding-left:20px;}
.legal strong{color:var(--ink);}
.legal table{width:100%; border-collapse:collapse; font-size:13.5px; margin:14px 0;}
.legal th, .legal td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--border-soft);}
.legal th{color:var(--ink-3); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.legal .back{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); text-decoration:none; margin-bottom:28px;}

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-seal-wrap{order:-1;}
  .hero h1{font-size:34px;}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .nav-links{gap:16px;}
}
@media (max-width: 560px){
  .feature-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .hero h1{font-size:28px;}
  .nav .lang-note-inline{display:none;}
}