/* DealCircle — public product site.
   Palette is taken from the product itself so the site and the app read as one brand.
   No @import and no web fonts: the product has no font-src in its CSP and Google Fonts
   is unreachable on mainland networks, so this relies on real families when installed
   and falls back to the system UI face. */

:root{
  --ink:#20231f;
  --muted:#72786f;
  --line:#e6e8e0;
  --paper:#f7f7f3;
  --white:#fff;
  --lime:#d9f37a;
  --green:#415b35;
  --soft:#eef2e6;
  --amber:#b66c24;
  --sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI','Noto Sans SC','Microsoft YaHei',sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',Consolas,monospace;
  --wrap:1080px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
html[data-lang="en"] .zh,
html[data-lang="zh"] .en{display:none}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:0 0 8px 0;z-index:9;
}
.skip:focus{left:0}

/* ---------- nav ---------- */

.nav{
  max-width:var(--wrap);margin:0 auto;
  padding:22px 28px;
  display:flex;align-items:center;gap:28px;
}

.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em}

.mark{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:9px;
  background:var(--lime);color:var(--green);
  font-family:var(--mono);font-size:15px;font-weight:700;
  flex:0 0 auto;
}
.mark.small{width:24px;height:24px;border-radius:7px;font-size:12px}

.wordmark{font-size:17px}

.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--muted)}
.nav-links a{padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.lang{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.lang:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- layout ---------- */

main{max-width:var(--wrap);margin:0 auto;padding:0 28px}

section{padding:64px 0;border-top:1px solid var(--line)}
.hero{border-top:0;padding:56px 0 72px}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  margin:0 0 26px;
}

.hero h1{
  margin:0;
  font-size:clamp(38px,6.4vw,74px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
}

.lede{
  margin:30px 0 0;max-width:56ch;
  font-size:clamp(16.5px,2vw,19px);
  color:#4a5048;
}

.pledge{
  margin:26px 0 0;max-width:56ch;
  font-size:15.5px;color:var(--green);
  background:var(--soft);
  border-left:3px solid var(--lime);
  border-radius:0 10px 10px 0;
  padding:12px 18px;
}

.section-title{
  margin:0 0 34px;
  font-size:clamp(24px,3.4vw,32px);
  letter-spacing:-.025em;font-weight:600;
}

/* ---------- pillars (bento) ---------- */

.pillars{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 24px 28px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(39,50,26,.06);border-color:#dcded4}

.kicker{
  margin:0 0 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green);
}
.card h2{margin:0 0 10px;font-size:19.5px;letter-spacing:-.015em;font-weight:600}
.card p:last-child{margin:0;font-size:15px;color:var(--muted);line-height:1.6}

/* ---------- how ---------- */

.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{
  display:grid;grid-template-columns:88px 1fr;gap:6px 24px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.steps li:last-child{border-bottom:0}
/* Three children in a two-column grid means the browser wraps the third back into
   column 1 -- the description then renders in the 88px gutter as a vertical stripe.
   Placing them explicitly is the only fix that survives a copy edit. */
.num{grid-column:1;grid-row:1;font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.06em;padding-top:4px}
.steps h3{grid-column:2;grid-row:1;margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em}
.steps p{grid-column:2;grid-row:2;margin:0;color:var(--muted);font-size:15.5px;max-width:60ch}

/* ---------- sources ---------- */

.source-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.source{
  border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 24px;background:#fbfbf8;
}
.source h3{margin:0 0 8px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.source p:last-child{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- boundary ---------- */

.boundary-lede{
  margin:0 0 30px;max-width:60ch;
  font-size:17px;color:#4a5048;
}

.nots{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  border-top:1px solid var(--line);
}
.nots li{
  padding:16px 0 16px 34px;
  border-bottom:1px solid var(--line);
  position:relative;
  font-size:16px;
}
.nots li::before{
  content:"";
  position:absolute;left:6px;top:50%;
  width:10px;height:2px;background:var(--amber);
  transform:translateY(-50%);
}

.fineprint{
  margin:30px 0 0;max-width:66ch;
  font-size:14px;line-height:1.75;color:var(--muted);
}

/* ---------- footer ---------- */

.foot{border-top:1px solid var(--line);margin-top:8px}
.foot-inner{
  max-width:var(--wrap);margin:0 auto;
  padding:34px 28px 56px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.foot-brand{display:flex;align-items:center;gap:9px;margin:0;font-weight:600;font-size:15px}
.foot-line{margin:0;font-size:14px;color:var(--muted)}
.foot-copy{margin:0 0 0 auto;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- responsive ---------- */

@media (max-width:820px){
  .nav{padding:18px 20px;gap:14px;flex-wrap:wrap}
  .nav-links{order:3;width:100%;margin-left:0;gap:18px;font-size:14px;flex-wrap:wrap}
  .lang{margin-left:auto}
  main{padding:0 20px}
  .hero{padding:36px 0 56px}
  section{padding:48px 0}
  .pillars,.source-grid{grid-template-columns:1fr}
  .steps li{grid-template-columns:1fr;gap:6px}
  .num,.steps h3,.steps p{grid-column:1;grid-row:auto}
  .num{padding-top:0}
  .foot-inner{padding:28px 20px 44px;flex-direction:column;align-items:flex-start;gap:10px}
  .foot-copy{margin:6px 0 0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}