/* YOSOMICHI LP — A3 design tokens (spec/a3-design-tokens.md) */
:root{
  --paper-bg:#F6F4EE; --paper-raised:#FCFBF7; --hairline:#DDD8CC;
  --ink:#211F1A; --ink-2:#55524A; --ink-3:#6E6A5F; --ink-dec:#A29C8C;
  --input-fill:#F1EADC; --input-border:#E5DCCB;
  --night-bg:#15171D; --night-surface:#1C1F27; --night-text:#E8E6E0; --night-sub:#8B8D96; --night-line:#2A2E38;
  --gold:#D6A75C; --vermilion:#B5533C; --vermilion-text:#9E4630;
  --disp:'Shippori Mincho',serif; --body:'Zen Kaku Gothic New',sans-serif;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp7:28px; --sp8:40px; --sp9:64px;
}
html[lang="en"]{ --disp:'Cormorant Garamond',serif; --body:'Karla',sans-serif; }
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper-bg);color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.9;font-size:16px}
.wrap{max-width:680px;margin:0 auto;padding:0 var(--sp7)}
a{color:var(--ink);text-underline-offset:3px}
.small{font-size:13px;color:var(--ink-3)}

/* hero */
header{padding:var(--sp9) 0 var(--sp8);text-align:center}
.mark{font-family:var(--disp);font-weight:500;letter-spacing:.28em;font-size:15px;color:var(--ink-2)}
.mark .st{color:var(--vermilion-text)}
h1{font-family:var(--disp);font-weight:500;font-size:clamp(28px,6vw,40px);line-height:1.7;margin:var(--sp8) 0 var(--sp5);letter-spacing:.04em}
.lede{color:var(--ink-2);max-width:34em;margin:0 auto}
.path{width:1.2px;height:56px;background:var(--ink);margin:var(--sp8) auto 0;opacity:.85}

/* phone mock (CSS only — no fake screenshots) */
.mock{width:min(300px,80vw);margin:var(--sp8) auto;border:1.5px solid var(--input-border);border-radius:28px;background:var(--paper-raised);padding:var(--sp6) var(--sp5) var(--sp7);box-shadow:0 1px 0 var(--hairline)}
.mock .date{font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.mock .title{font-family:var(--disp);letter-spacing:.24em;font-size:12px;margin-top:var(--sp6);color:var(--ink-2)}
.mock .q{font-family:var(--disp);font-size:44px;margin:var(--sp5) 0;color:var(--ink)}
.mock .open{display:inline-block;border:1px solid var(--ink);border-radius:999px;padding:10px 34px;font-size:14px;letter-spacing:.14em}
.mock .foot{margin-top:var(--sp6);font-size:12px;color:var(--ink-3)}
.mock .foot .st{color:var(--vermilion)}

/* sections */
section{padding:var(--sp9) 0;border-top:1px solid var(--hairline)}
h2{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:.08em;margin-bottom:var(--sp7)}
.step{display:flex;gap:var(--sp5);margin-bottom:var(--sp7);align-items:baseline}
.step .n{font-family:var(--disp);color:var(--vermilion);font-size:18px;min-width:1.6em}
.step h3{font-size:16px;font-weight:500;margin-bottom:var(--sp1)}
.step p{color:var(--ink-2);font-size:15px}

/* night band */
.night{background:var(--night-bg);color:var(--night-text);border-top:none}
.night .wrap{text-align:center;padding-top:var(--sp8);padding-bottom:var(--sp8)}
.night .st{color:var(--gold);font-size:22px}
.night h2{color:var(--night-text);margin-top:var(--sp4)}
.night p{color:var(--night-sub);max-width:32em;margin:0 auto}

/* quiet list */
.quiet li{list-style:none;padding:var(--sp4) 0;border-bottom:1px solid var(--hairline);color:var(--ink-2)}
.quiet li b{color:var(--ink);font-weight:500}

/* premium */
.price{font-family:var(--disp);font-size:26px;margin:var(--sp4) 0}
.price small{font-family:var(--body);font-size:13px;color:var(--ink-3)}
.trial{background:var(--input-fill);border:1.5px solid var(--input-border);border-radius:12px;padding:var(--sp5) var(--sp6);font-size:14px;color:var(--ink-2);margin-top:var(--sp5)}

/* stores + footer */
.stores{display:flex;gap:var(--sp4);justify-content:center;margin-top:var(--sp7);flex-wrap:wrap}
.badge{border:1px solid var(--ink);border-radius:8px;padding:10px 22px;font-size:13px;letter-spacing:.06em}
footer{padding:var(--sp8) 0 var(--sp9);border-top:1px solid var(--hairline);text-align:center}
footer p{font-size:13px;color:var(--ink-3);margin-top:var(--sp2)}
.lang{position:absolute;top:18px;right:22px;font-size:12px;letter-spacing:.1em}
@media (max-width:480px){ .wrap{padding:0 var(--sp5)} }

/* insight examples */
.insights{display:grid;gap:var(--sp5);margin-top:var(--sp7)}
.card{background:var(--paper-raised);border:1px solid var(--hairline);border-radius:14px;padding:var(--sp6)}
.card .k{font-size:11px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:var(--sp3)}
.card .axis{font-family:var(--disp);font-size:17px;margin-bottom:var(--sp3)}
.bar{position:relative;height:1.2px;background:var(--ink-dec);margin:var(--sp5) 0 var(--sp3)}
.bar .core,.bar .cur{position:absolute;top:-4px;width:9px;height:9px;border-radius:50%}
.bar .core{background:var(--ink);left:78%}
.bar .cur{background:var(--paper-raised);border:1.5px solid var(--ink);left:20%}
.legend{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.gapnum{font-family:var(--disp);color:var(--vermilion);font-size:20px}
.hyp{font-size:14.5px;color:var(--ink-2);line-height:1.9}
.hyp .tag{display:inline-block;background:var(--input-fill);border:1px solid var(--input-border);border-radius:999px;padding:1px 12px;font-size:11.5px;color:var(--ink-2);margin-top:var(--sp3)}
.locked{text-align:center;color:var(--ink-3);font-size:14px}
.locked .qq{font-family:var(--disp);font-size:26px;letter-spacing:.3em;color:var(--ink-dec);display:block;margin-bottom:var(--sp2)}
.honest{margin-top:var(--sp6);font-size:14px;color:var(--ink-2);border-left:2px solid var(--vermilion);padding-left:var(--sp4)}