/* m655 · RUDO Hub pages · tokens per RUDO brand kit (02_BRAND)
   Moss-green is the world; casque red appears ONCE per page.
   Fonts: production self-hosts Instrument Serif / DM Sans / JetBrains Mono
   (copy fonts/ from m8201 product_surfaces). Fallbacks below keep pages honest offline. */
:root{
  --moss-100:#eef2e6; --moss-200:#d8e3cf; --moss-300:#c5d4b3; --moss-400:#b9c9a8;
  --moss-500:#8fa67a; --moss-700:#4a5d3a; --moss-900:#1f2a18;
  --paper:#f4ece0; --paper-cream:#f8f1e1;
  --r-casque:#a8392c; --r-bill:#d4a82a; --r-belly:#f7f1e4; --r-body:#1a1a22;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--moss-100);color:var(--moss-900);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--moss-700)}
a:focus-visible,button:focus-visible{outline:3px solid var(--moss-700);outline-offset:2px}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--moss-700)}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.05}
h1{font-size:clamp(34px,6vw,56px)}
h1 em{font-style:italic}
h2{font-size:clamp(22px,3.5vw,30px);margin-bottom:12px}
header.site{padding:56px 0 28px;border-bottom:1px solid var(--moss-300)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--r-casque);margin-right:10px;vertical-align:2px}
.sub{margin-top:14px;max-width:56ch;color:var(--moss-700)}
.zh{color:var(--moss-900)}
section{padding:36px 0;border-bottom:1px solid var(--moss-200)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:20px}
.card{background:var(--paper-cream);border:1px solid var(--moss-300);border-radius:14px;padding:20px;
  box-shadow:0 1px 0 var(--moss-300)}
.card .tier{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss-700);border:1px solid var(--moss-400);border-radius:999px;padding:3px 10px;display:inline-block}
.card h3{font-family:var(--display);font-weight:400;font-size:22px;margin:12px 0 4px}
.card .zh-name{font-size:14px;color:var(--moss-700)}
.card p{margin-top:10px;font-size:14.5px}
.card .status{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.status.active{color:var(--moss-700)}
.status.pending{color:var(--moss-500)}
.honest{background:var(--moss-200);border:1px dashed var(--moss-500);border-radius:12px;padding:16px 18px;margin-top:20px;font-size:14.5px}
.pillars{list-style:none;display:grid;gap:10px;margin-top:14px}
.pillars li{padding-left:18px;position:relative;font-size:14.5px}
.pillars li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--moss-500);border-radius:2px}
.btn{display:inline-block;background:var(--moss-700);color:var(--paper-cream);text-decoration:none;
  border-radius:10px;padding:12px 22px;font-weight:600;margin-top:16px}
.btn:hover{background:var(--moss-900)}
footer{padding:32px 0 56px;font-size:13px;color:var(--moss-700)}
.stitch{border-top:2px dashed var(--moss-400);margin:8px 0 0}
/* MASCOT SLOT: do not inline-draw the hornbill here.
   TSX port imports PlushCompact from m8201 plush/rudo.jsx (reuse, never re-draw). */
.mascot-slot{min-height:0}

/* --- v0.2 additions: journey steps, privacy cue, slogan, fineprint --- */
.steps{list-style:none;counter-reset:none;display:grid;gap:14px;margin-top:18px}
.step{position:relative;padding:14px 16px 14px 52px;background:var(--paper-cream);
  border:1px solid var(--moss-300);border-radius:12px;font-size:14.5px}
.step .n{position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--moss-700);
  color:var(--paper-cream);font-family:var(--mono);font-size:13px}
.step .zh{display:block;margin-top:6px;color:var(--moss-700)}
.fineprint{margin-top:12px;font-size:13px;color:var(--moss-700)}
.cue{width:18px;height:18px;vertical-align:-3px;margin-right:8px;fill:var(--moss-700)}
.slogan{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--moss-700);margin-top:4px}