/* Hoardy / 囤梗 — same palette and "pop card" material as the app (ios-app/ReMeme/Theme/Theme.swift). */
@font-face{font-family:"Hoardy Display";src:url("/fonts/display.woff") format("woff");font-display:swap}
:root{
 --cream:#FFF7EA;--cream-deep:#F1E7D5;--ink:#21170F;--muted:#846E5D;--white:#FFFDF8;
 --honey:#C4620A;--yellow:#FFCA2E;--mint:#BDECC7;--blue:#B9DEF3;--lavender:#D7C0EF;--coral:#F2A48E;
 --line:2.5px;--radius:18px;
 --display:"Hoardy Display","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
 --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","PingFang TC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
 color-scheme:light dark;
}
/* The display font (Smiley Sans) covers Simplified Chinese and Latin only; Traditional headings use the system face
   instead of mixing two typefaces inside one word. */
html:lang(zh-Hant){--display:"PingFang TC","Heiti TC","Microsoft JhengHei",system-ui,sans-serif}
html:lang(zh-Hant) :is(h1,h2,h3,.brand-name,.step-no){font-weight:900;letter-spacing:.02em}
@media (prefers-color-scheme:dark){:root{
 --cream:#17120D;--cream-deep:#241C15;--ink:#FFF3E2;--muted:#B9A490;--white:#2B221A;
 --honey:#FFB347;--yellow:#FFD447;--mint:#2E5A3E;--blue:#24485C;--lavender:#4A3A63;--coral:#6B3A2E;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:#21170F;padding:8px 12px;border-radius:10px;z-index:10}
.skip:focus{left:12px}
.shell{max-width:1120px;margin:0 auto;padding:0 20px}

/* header */
header{display:flex;align-items:center;gap:18px;padding:18px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{border-radius:9px;border:1.5px solid var(--ink)}
.brand-name{font:900 24px/1 var(--display);letter-spacing:.01em}
.brand em{font-style:normal;color:var(--muted);font-size:14px;font-weight:600}
.top-nav{display:flex;gap:18px;margin-left:auto;font-weight:700;font-size:15px}
.top-nav a{text-decoration:none;opacity:.8}.top-nav a:hover{opacity:1;text-decoration:underline}
.header-actions{display:flex;align-items:center;gap:12px}
.language-select{font:600 14px var(--body);color:var(--ink);background:var(--white);border:var(--line) solid var(--ink);border-radius:12px;padding:6px 10px}
.enliva{font-weight:700;font-size:14px;text-decoration:none;color:var(--muted)}

/* shared blocks */
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0}
h2{font-size:clamp(30px,4.4vw,46px);margin-bottom:26px}
h3{font-size:22px;margin-bottom:8px}
section{padding:64px 0}
.lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:40em}
.card{background:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius);box-shadow:0 4px 0 var(--ink);padding:22px}
.card p{margin:.35em 0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.phone{margin:0;justify-self:center;width:min(300px,78vw)}
.phone img{border:3px solid var(--ink);border-radius:38px;box-shadow:0 6px 0 var(--ink);background:var(--cream-deep)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:36px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;background:var(--white);border:var(--line) solid var(--ink);border-radius:999px;padding:6px 14px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink)}
h1{font-size:clamp(46px,8vw,88px);margin:22px 0 18px}
h1 .mark{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 90%,transparent 90%);padding:0 .06em}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:900;background:var(--yellow);color:#21170F;border:var(--line) solid var(--ink);border-radius:16px;padding:12px 20px;box-shadow:0 4px 0 var(--ink)}
.cta:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.pill{font-weight:700;font-size:14px;color:var(--muted)}
.hero-phone{transform:rotate(2.5deg)}

/* how */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step-no{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);color:#21170F;border:var(--line) solid var(--ink);font:900 18px var(--display);margin-bottom:12px}
.steps li:nth-child(2) .step-no{background:var(--mint);color:var(--ink)}
.steps li:nth-child(3) .step-no{background:var(--blue);color:var(--ink)}

/* features / pro */
.features,.pro{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
.pro{grid-template-columns:.75fr 1.25fr}
.feature h3{font-size:20px}
.checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.checks li{display:grid;gap:2px;padding:14px 16px 14px 52px;position:relative;background:var(--white);border:var(--line) solid var(--ink);border-radius:16px}
.checks li::before{content:"✓";position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--mint);border:2px solid var(--ink);font-weight:900;font-size:14px}
.checks b{font-size:17px}
.checks span{color:var(--muted);font-size:15px}

/* privacy / next */
.privacy .card:nth-child(1){background:var(--yellow);color:#21170F}.privacy .card:nth-child(1) p{color:#5a4637}
.more{margin-top:22px;font-weight:800}
.soon{border-style:dashed;box-shadow:none;background:transparent}

/* footer */
footer{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:36px 0 48px;border-top:var(--line) solid var(--ink);margin-top:24px;font-size:15px;color:var(--muted)}
footer .brand-name{font-size:20px;color:var(--ink)}
footer small{margin-left:auto}

/* privacy policy page */
.policy{max-width:760px;padding:28px 0 40px}
.policy h1{font-size:clamp(40px,6vw,60px);margin:10px 0 6px}
.policy .updated{color:var(--muted);font-weight:600;margin:0 0 18px}
.policy .card{margin:16px 0;box-shadow:0 3px 0 var(--ink)}
.policy .card h2{font-size:22px;margin:0 0 6px}
.policy .card p{color:var(--ink);opacity:.85}

@media (max-width:860px){
 .top-nav{display:none}
 .header-actions{margin-left:auto}
 .hero,.features,.pro{grid-template-columns:1fr}
 .pro .phone{order:2}
 .steps{grid-template-columns:1fr}
 section{padding:44px 0}
 footer small{margin-left:0}
}
@media (max-width:420px){
 .brand em,.enliva{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-phone{transform:none}}