/* CamoChat site — shared styles. Colours follow the Moyu tokens (design/tokens/moyu/primitive.json). */
:root{
  --bg:#101214;        /* night-900 */
  --bg-2:#0B0D0E;      /* night-950 */
  --surface:#1A1D1F;   /* night-800 */
  --surface-2:#212528; /* night-700 */
  --line:#26292C;      /* mist-800 */
  --text:#EDEFF1;      /* mist-100 */
  --muted:#A2A8AD;     /* mist-300 */
  --dim:#6C7378;       /* mist-500 */
  --jade:#3FAE8C;      /* jade-400 */
  --jade-deep:#1E7A68; /* jade-600 */
  --jade-ink:#1C4438;  /* jade-900 */
  --jade-pale:#D9F0E8; /* jade-100 */
  --red:#E0605A;       /* red-400 */
  --red-ink:#4A1F1D;   /* red-900 */
  --amber:#D89A4A;     /* amber-400 */
  --maxw:1080px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:var(--jade); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono); font-size:.92em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}
@media(min-width:640px){ .wrap{padding:0 24px} }

/* Header */
header{position:sticky; top:0; z-index:10; backdrop-filter:blur(10px);
  background:rgba(16,18,20,.82); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:60px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:800; font-size:19px; letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand img{width:32px; height:32px; display:block}
.nav nav{display:flex; align-items:center; gap:20px}
.nav nav a{color:var(--muted); font-size:15px}
.nav nav a:hover{color:var(--text); text-decoration:none}
.nav .lang{border:1px solid var(--line); border-radius:999px; padding:3px 12px; color:var(--text)}
@media(max-width:760px){ .nav nav a:not(.lang){display:none} }

/* Hero */
.hero{position:relative; padding:72px 0 56px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 60% at 50% 0%, rgba(63,174,140,.16), transparent 70%)}
.hero-grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
@media(max-width:860px){ .hero-grid{grid-template-columns:1fr} }
.wordmark{display:block; width:min(300px,70%); height:auto; margin:0 0 22px}
.hero h1{font-size:clamp(32px,5.2vw,54px); line-height:1.12; margin:0 0 18px; font-weight:800; letter-spacing:-.02em}
.hero h1 .hl{color:var(--jade)}
.hero p.sub{font-size:clamp(16px,2.1vw,19px); color:var(--muted); margin:0 0 28px; max-width:560px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:12px;
  font-weight:650; font-size:16px; border:1px solid transparent; cursor:pointer}
.btn.primary{background:var(--jade); color:#06140f}
.btn.primary:hover{background:#4cc29d; text-decoration:none}
.btn.ghost{border-color:var(--line); color:var(--text)}
.btn.ghost:hover{border-color:var(--jade); text-decoration:none}
.btn[aria-disabled="true"]{opacity:.5; pointer-events:none}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding:0; list-style:none}
.badges li{font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 12px}

/* Hero illustration: the same message, as WeChat sees it and as your friend reads it */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.phone{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:14px 12px 16px; min-width:0}
.phone .bar{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin:0 4px 12px}
.phone .bar img{width:16px; height:16px}
.phone .bar .dot{width:8px; height:8px; border-radius:50%; background:var(--dim)}
.bubble{font-size:14px; line-height:1.5; padding:9px 12px; border-radius:14px; margin:6px 0; max-width:92%; overflow-wrap:anywhere}
.bubble.them{background:var(--surface-2); color:var(--text); border-top-left-radius:4px}
.bubble.me{background:var(--jade-ink); color:var(--jade-pale); margin-left:auto; border-top-right-radius:4px}
.bubble.cipher{font-family:var(--mono); font-size:12.5px; color:var(--muted); background:var(--surface-2)}
.bubble.cipher.me{background:#1d2a25; color:#8fb9a9}
.duo figcaption, .fig-cap{grid-column:1 / -1; font-size:13px; color:var(--dim); text-align:center; margin-top:4px}

/* Sections */
section.block{padding:72px 0; border-top:1px solid var(--line)}
.eyebrow{display:block; text-align:center; color:var(--jade); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px}
.block h2{font-size:clamp(26px,3.8vw,36px); margin:0 0 12px; text-align:center; font-weight:800; letter-spacing:-.015em}
.block .lead{text-align:center; color:var(--muted); max-width:660px; margin:0 auto 44px}
.block h3{font-size:18px; margin:0 0 6px}

/* Flow diagram: nodes and arrows; vertical on phones */
.flow{display:flex; align-items:stretch; justify-content:center; gap:0}
.flow .node{flex:1 1 0; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 18px; text-align:center}
.flow .node.hot{border-color:var(--jade-deep); box-shadow:0 0 0 1px rgba(63,174,140,.12) inset}
.flow .node.cold{border-style:dashed}
.flow .node .ico{width:44px; height:44px; margin:0 auto 10px; display:block}
.flow .node .tag{display:inline-block; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 10px; margin-bottom:10px}
.flow .node p{margin:8px 0 0; font-size:14px; color:var(--muted)}
.flow .node .bubble{margin:8px auto; text-align:left}
.flow .arrow{flex:0 0 64px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--jade); font-size:12px; text-align:center; gap:2px; padding:0 4px}
.flow .arrow svg{width:44px; height:16px}
.flow .arrow span{color:var(--muted); line-height:1.3}
@media(max-width:760px){
  .flow{flex-direction:column}
  .flow .arrow{flex-basis:auto; padding:8px 0; flex-direction:row; gap:8px}
  .flow .arrow svg{transform:rotate(90deg); width:30px}
}
.under{margin:18px auto 0; max-width:760px; text-align:center; font-size:14px; color:var(--muted)}
.under strong{color:var(--text)}
.no-server{display:flex; align-items:center; justify-content:center; gap:10px; margin:22px auto 0; max-width:560px;
  border:1px dashed var(--line); border-radius:14px; padding:12px 16px; color:var(--muted); font-size:14px}
.no-server svg{flex:0 0 28px; width:28px; height:28px}

/* Numbered steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; counter-reset:step; list-style:none; padding:0}
@media(max-width:760px){ .steps{grid-template-columns:1fr} }
.steps li{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 22px 22px; position:relative}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; top:-14px; left:20px; width:30px; height:30px;
  background:var(--jade); color:#06140f; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px}
.steps li p{margin:0; color:var(--muted); font-size:15px}

/* Pairing: emoji fingerprint match */
.pair{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; max-width:820px; margin:0 auto}
@media(max-width:700px){ .pair{grid-template-columns:1fr} .pair .eq{transform:rotate(90deg)} }
.pair .phone{text-align:center; padding:18px}
.pair .who{font-size:13px; color:var(--muted); margin-bottom:10px}
.emoji{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; font-size:26px; line-height:1.3; background:var(--bg-2); border-radius:14px; padding:12px 8px}
.pair .eq{justify-self:center; color:var(--jade); font-size:30px; font-weight:800}
.pair .ok{margin-top:10px; font-size:13px; color:var(--jade)}
.pair-notes{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:820px; margin:28px auto 0}
@media(max-width:700px){ .pair-notes{grid-template-columns:1fr} }
.note{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; font-size:15px; color:var(--muted)}
.note strong{color:var(--text); display:block; margin-bottom:4px}
.note.warn{border-color:#5a3a1c}
.note.warn strong{color:var(--amber)}

/* Who can read what */
.who-table{width:100%; max-width:860px; margin:0 auto; border-collapse:separate; border-spacing:0 8px}
.who-table th{font-size:12px; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:.08em; text-align:left; padding:0 16px}
.who-table td{background:var(--surface); padding:14px 16px; vertical-align:middle; font-size:15px}
.who-table td:first-child{border-radius:12px 0 0 12px; font-weight:650; white-space:nowrap}
.who-table td:last-child{border-radius:0 12px 12px 0; color:var(--muted)}
.who-table .sees{font-family:var(--mono); font-size:13px}
.verdict{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap}
.verdict.yes{background:var(--jade-ink); color:var(--jade-pale)}
.verdict.no{background:var(--red-ink); color:#f3c9c6}
@media(max-width:640px){
  .who-table, .who-table tbody, .who-table tr, .who-table td{display:block; width:100%}
  .who-table thead{display:none}
  .who-table tr{background:var(--surface); border-radius:12px; margin-bottom:10px; padding:4px 0}
  .who-table td{background:none; padding:6px 16px; border-radius:0 !important; white-space:normal}
}

/* Key ratchet diagram */
.keys{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px}
@media(max-width:860px){ .keys{grid-template-columns:1fr} }
.panel{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 22px}
.panel > p{color:var(--muted); font-size:15px; margin:8px 0 0}
.panel svg{display:block; width:100%; height:auto; margin-top:14px}

/* Spec chips */
.spec{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
@media(max-width:860px){ .spec{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .spec{grid-template-columns:1fr} }
.spec div{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.spec b{display:block; font-size:13px; color:var(--dim); font-weight:600}
.spec span{font-size:15px}
.limits{max-width:860px; margin:28px auto 0}

/* Feature grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:860px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .grid{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .ico{width:30px; height:30px; display:block; margin-bottom:12px}

/* FAQ */
details{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0 20px; margin-bottom:10px}
details summary{cursor:pointer; padding:16px 0; font-weight:650; font-size:16px; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; float:right; color:var(--jade); font-weight:800}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px; color:var(--muted)}

/* Download */
.dl-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:780px; margin:0 auto}
@media(max-width:700px){ .dl-grid{grid-template-columns:1fr} }
.dl-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 22px; display:flex; flex-direction:column; gap:12px}
.dl-card h3{margin:0; font-size:19px}
.dl-card p{margin:0; color:var(--muted); font-size:14px; flex-grow:1}
.dl-card .row{display:flex; gap:10px; flex-wrap:wrap}
.dl-card .row .btn{flex:1 1 160px}
.dl-meta{font-size:12px; color:var(--dim); border-top:1px solid var(--line); padding-top:10px; margin:0}
.dl-note{max-width:780px; margin:22px auto 0; font-size:14px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 20px}
.dl-note strong{color:var(--text)}

/* Footer */
footer{border-top:1px solid var(--line); padding:36px 0 44px; color:var(--muted); font-size:14px}
.footrow{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px 24px; align-items:flex-start}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}
footer .links{display:flex; flex-wrap:wrap; gap:6px 16px}
footer .made-by{margin:14px 0 0; color:var(--dim)}
footer .made-by a{color:var(--jade)}

/* Plain article pages (verify) */
.article{max-width:760px; padding-top:48px; padding-bottom:72px}
.article h1{font-size:clamp(28px,5vw,40px); font-weight:800; margin:0 0 6px}
.article .updated{color:var(--muted); font-size:14px; margin-bottom:32px}
.article h2{font-size:22px; margin:40px 0 12px; text-align:left}
.article p, .article li{color:#d4d8db}
.fp{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:10px 0}
.fp b{display:block; color:var(--muted); font-size:14px; font-weight:600; margin-bottom:4px}
.fp code{color:var(--amber); word-break:break-all}
pre{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; overflow-x:auto; font-size:14px}