/* Ask Miso — two-ink risograph: fluorescent pink + blue on off-white paper.
   Shared by the home pages (/, /zh/) and the legal pages. */
:root{
  --paper:#FAF7F0; --pink:#FF48B0; --blue:#0078BF;
  --ink:#1F4E79;            /* body text: deep blue, 7:1 on paper */
  --pink-tint:#FFE2F1; --blue-tint:#DDEEF9;
  --surface:#FFFDF8;        /* panels */
  --slip:#FAF7F0;           /* art is always printed on paper, also in dark mode */
  --ghost:rgba(255,72,176,.75); /* misregistered pink layer under headings */
  --cut:18px 24px 16px 22px / 22px 16px 24px 18px; /* hand-cut corners */
  --display:"Mali",ui-rounded,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --body:"Zen Maru Gothic",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light dark;
}
/* Chinese text never uses Zen Maru Gothic (it would draw Japanese glyph shapes) */
:lang(zh){--body:ui-rounded,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
[lang]{font-family:var(--body)}
@media (prefers-color-scheme:dark){:root{
  --paper:#141A2C; --pink:#FF6EC2; --blue:#66BBF3; --ink:#E9E2D3;
  --pink-tint:#3A2040; --blue-tint:#1B2E4A; --surface:#1A2137; --ghost:rgba(255,110,194,.6);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:500 17px/1.65 var(--body);overflow-x:clip}
/* riso paper grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .8 0 0 0 0 .75 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){body::after{mix-blend-mode:screen;opacity:.05}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:8px}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
.wrap.narrow{max-width:760px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:60;background:var(--surface);padding:6px 12px}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--blue);margin:0}
h1,h2{text-shadow:.055em .045em 0 var(--ghost)}            /* the misregistration */
h1{font-size:clamp(38px,9.4vw,74px);line-height:1.04;letter-spacing:-.01em;margin:14px 0 18px}
h1 em,h2 em{font-style:normal;color:var(--pink);text-shadow:.055em .045em 0 rgba(0,120,191,.55)}
h2{font-size:clamp(30px,5.6vw,46px);line-height:1.1;margin:12px 0 14px;max-width:18em}
h3{font-size:21px;line-height:1.25}
:lang(zh) h1{letter-spacing:.02em}
.lede{font-size:clamp(17px,2.1vw,19px);max-width:34em;margin:0 0 22px}
.stamp{display:inline-block;font:700 14px/1 var(--display);color:var(--pink);border:2px solid var(--pink);border-radius:999px 980px 999px 960px;padding:6px 12px 5px;transform:rotate(-2deg)}
section{padding:60px 0}
.fine{font-size:14px;opacity:.85;margin:12px 0 0}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center;font:700 22px var(--display);color:var(--blue);text-decoration:none;white-space:nowrap}
.brand img{width:38px;height:38px;border-radius:11px;border:2px solid var(--blue)}
.navr{display:flex;gap:12px;align-items:center;font-weight:700;font-size:15px}
.navr .soon{opacity:.75}
@media(max-width:520px){.navr .soon{display:none}}
.lang{text-decoration:none;border:2px solid var(--blue);border-radius:12px 14px 12px 15px;padding:3px 10px;color:var(--blue)}
.lang:hover{background:var(--blue-tint)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 18px/1.2 var(--display);color:var(--paper);background:var(--blue);border:0;border-radius:16px 20px 15px 21px;padding:14px 22px;box-shadow:4px 4px 0 var(--pink);text-decoration:none;cursor:pointer}
.btn[aria-disabled="true"]{cursor:default}
.btn.ghost{color:var(--blue);background:transparent;border:2.5px solid var(--blue);box-shadow:none;padding:10px 18px;font-size:16px}
.btn.ghost:hover{background:var(--blue-tint)}

/* hero */
.hero{display:grid;gap:34px;padding:18px 0 56px;align-items:center}
@media(min-width:880px){.hero{grid-template-columns:1.05fr .95fr;gap:56px;padding:40px 0 80px}}
.art{position:relative;justify-self:center;width:min(440px,100%)}
.slip{position:relative;background:var(--slip);border:2.5px solid var(--blue);border-radius:var(--cut);box-shadow:6px 6px 0 var(--pink)}
.slip img{width:100%;border-radius:inherit;mix-blend-mode:multiply}
.slip::before{content:"";position:absolute;top:-13px;left:50%;width:92px;height:24px;transform:translateX(-50%) rotate(-4deg);background:rgba(255,72,176,.42);z-index:1}
.art .slip{transform:rotate(1.6deg)}
.bubble{position:relative;background:var(--surface);border:2.5px solid var(--blue);border-radius:20px 24px 18px 26px;padding:10px 16px;font:700 18px/1.35 var(--display);color:var(--blue)}
.art .bubble{max-width:250px;margin:0 0 18px auto;transform:rotate(-2deg)}
.art .bubble::after{content:"";position:absolute;right:48px;bottom:-13px;width:20px;height:20px;background:var(--surface);border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(40deg) skew(8deg)}
@media(min-width:880px){.art .bubble{position:absolute;z-index:2;left:-56px;top:16px;margin:0}.art .bubble::after{right:auto;left:40px}}

/* how it works */
.steps{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:18px;grid-template-columns:1fr;counter-reset:s}
@media(min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--surface);border:2.5px solid var(--blue);border-radius:var(--cut);padding:16px 18px 18px;display:flex;flex-direction:column}
.steps h3{display:flex;align-items:center;gap:10px;margin:12px 0 4px}
.steps h3::before{counter-increment:s;content:counter(s);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pink);color:#fff;font-size:16px}
.steps p{margin:0;font-size:16px}
.pro{display:inline-block;font:700 12px/1 var(--display);color:var(--pink);border:2px solid var(--pink);border-radius:8px;padding:4px 6px 3px;margin-left:2px}
.vis{min-height:136px;border-radius:14px 18px 13px 17px;background:var(--paper);display:grid;place-items:center;overflow:hidden;position:relative;padding:10px}
/* 1 moods */
.moods{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:250px}
.moods span{font:700 14px/1 var(--display);border:2px solid var(--blue);color:var(--blue);border-radius:999px;padding:6px 10px 5px}
.moods span.on{background:var(--pink-tint);border-color:var(--pink);color:var(--pink)}
.dots{display:flex;gap:6px;margin-top:8px;justify-content:center}.dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--pink)}.dots i.on{background:var(--pink)}
/* 2 breathe: 4 s in, 6 s out */
.breath{display:flex;align-items:center;gap:16px;font:700 15px var(--display);color:var(--blue)}
.orb{width:82px;height:82px;border-radius:50%;background:var(--blue-tint);border:3px solid var(--blue);box-shadow:4px 3px 0 var(--ghost);animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%{transform:scale(.62)}40%{transform:scale(1)}100%{transform:scale(.62)}}
.breath .in{animation:inl 10s infinite}.breath .out{animation:outl 10s infinite}
@keyframes inl{0%,38%{opacity:1}42%,100%{opacity:.25}}
@keyframes outl{0%,38%{opacity:.25}42%,98%{opacity:1}100%{opacity:.25}}
/* 3 draw */
.fan3{display:flex;justify-content:center}
.fan3 img{width:62px;border-radius:7px;border:2px solid var(--blue);margin:0 -6px;background:var(--slip)}
.fan3 img:nth-child(1){transform:rotate(-10deg) translateY(6px)}.fan3 img:nth-child(3){transform:rotate(10deg) translateY(6px)}
.fan3 img:nth-child(2){transform:translateY(-6px);position:relative;z-index:1}
/* 4 reflect */
.say{display:flex;gap:8px;align-items:flex-end}
.say img{width:46px;height:46px;border-radius:50%;border:2px solid var(--blue);background:var(--slip);flex:none}
.say .bubble{font-size:14px;padding:8px 11px;border-width:2px}
/* 5 write */
.note{width:100%;max-width:260px;background:var(--surface);border:2px solid var(--blue);border-radius:6px 8px 7px 9px;padding:8px 12px 10px;
  background-image:repeating-linear-gradient(transparent 0 25px,var(--blue-tint) 25px 27px);background-position:0 6px}
.note small{display:block;font-size:12px;font-weight:700;color:var(--pink)}
.note p{font:700 15px/27px var(--display);color:var(--blue);margin:0}
/* 6 week */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;max-width:260px;text-align:center;font:700 13px var(--display);color:var(--blue)}
.week i{display:block;width:22px;height:22px;margin:6px auto 0;border-radius:50%;border:2px solid var(--blue)}
.week i.p{background:var(--pink);border-color:var(--pink)}.week i.b{background:var(--blue)}.week i.t{background:var(--blue-tint)}.week i.k{background:var(--pink-tint);border-color:var(--pink)}
.week b{grid-column:1/-1;font-weight:700;color:var(--pink);margin-top:6px}

/* try a card */
.table{position:relative;display:flex;justify-content:center;gap:clamp(10px,3vw,26px);padding:26px 0 34px;margin-top:10px}
.table::before{content:"";position:absolute;left:4%;right:4%;top:44%;bottom:6px;border:2.5px dashed var(--blue);border-radius:50%;opacity:.45}
.tcard{position:relative;width:clamp(92px,25vw,150px);aspect-ratio:2/3;padding:0;border:0;background:none;cursor:pointer;perspective:900px;transition:transform .25s}
.tcard:nth-child(1){transform:rotate(-5deg)}.tcard:nth-child(3){transform:rotate(5deg)}
.tcard:hover:not(:disabled){transform:translateY(-8px) rotate(-1deg)}
.tcard:disabled{cursor:default}
.tcard .in3{position:absolute;inset:0;transition:transform .7s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:2.5px solid var(--blue);border-radius:10px;background:var(--slip);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.tcard .front{transform:rotateY(180deg)}
.tcard.flipped .in3{transform:rotateY(180deg)}
.tcard.flipped{z-index:2;transform:translateY(-10px) scale(1.06)}
.tcard.dim{opacity:.4}
.reveal{max-width:640px;margin:0 auto;text-align:center}
.reveal[hidden]{display:none}
.reveal .say{justify-content:center;margin-bottom:14px}
.reveal .say .bubble{font-size:17px}
.reveal .q{font:700 clamp(22px,3.6vw,28px)/1.3 var(--display);color:var(--blue);margin:6px 0 10px}
.reveal .lab{font-weight:700;color:var(--pink);font-size:14px;margin:0}
.reveal .fine{margin:0 0 18px}

/* meet Miso */
.meet{display:grid;gap:34px;align-items:start}
@media(min-width:900px){.meet{grid-template-columns:.9fr 1.1fr;gap:56px}}
.fan{display:flex;justify-content:center;padding:18px 0 6px;margin-top:8px}
.fan img{width:min(104px,22vw);border:2.5px solid var(--blue);border-radius:9px;background:var(--slip);margin:0 -14px;box-shadow:3px 3px 0 var(--ghost)}
.fan img:nth-child(1){transform:rotate(-14deg) translateY(16px)}.fan img:nth-child(2){transform:rotate(-7deg) translateY(4px)}
.fan img:nth-child(3){position:relative;z-index:1}.fan img:nth-child(4){transform:rotate(7deg) translateY(4px)}.fan img:nth-child(5){transform:rotate(14deg) translateY(16px)}
.fan + .fine{text-align:center;font-weight:700}
.lines{list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media(min-width:560px){.lines{grid-template-columns:1fr 1fr}}
.lines li{display:flex;gap:10px;align-items:center}
.lines img{width:72px;height:72px;border-radius:50%;border:2.5px solid var(--blue);background:var(--slip);flex:none}
.lines .bubble{font-size:16px;padding:9px 13px}
.lines li:nth-child(odd) .bubble{transform:rotate(-1deg)}.lines li:nth-child(even) .bubble{transform:rotate(1deg)}

/* privacy */
.priv{display:grid;gap:34px;align-items:center}
@media(min-width:880px){.priv{grid-template-columns:.8fr 1.2fr;gap:56px}}
.priv figure{margin:0;justify-self:center;width:min(360px,100%)}
.priv figure .slip{transform:rotate(-1.5deg)}
.priv figcaption{font:700 15px/1.4 var(--display);color:var(--blue);text-align:center;margin-top:16px}
.facts{list-style:none;padding:0;margin:22px 0 22px;display:grid;gap:16px}
@media(min-width:640px){.facts{grid-template-columns:1fr 1fr}}
.facts li{border-left:4px solid var(--pink);padding:2px 0 2px 14px}
.facts h3{font-size:19px;margin-bottom:2px}
.facts p{margin:0;font-size:16px}
.more{font-weight:700;color:var(--blue)}

/* pricing */
.plans{display:grid;gap:22px;margin-top:22px}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr;align-items:start}}
.plan{background:var(--surface);border:2.5px solid var(--blue);border-radius:var(--cut);padding:22px 22px 24px}
.plan.pro-plan{border-color:var(--pink);box-shadow:7px 7px 0 var(--pink)}
.plan h3{font-size:28px}
.plan .big{font:700 34px/1 var(--display);color:var(--blue);margin:10px 0 4px}
.plan ul{padding:0;margin:14px 0 0;list-style:none}
.plan li{padding:7px 0 7px 26px;position:relative;border-top:1.5px dashed var(--blue-tint)}
.plan li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:3px solid var(--pink);border-bottom:3px solid var(--pink);transform:rotate(-45deg)}
.prices{display:grid;gap:8px;margin:12px 0 4px}
.prices div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 14px;border:2px solid var(--blue);border-radius:14px 16px 13px 17px;font-size:16px}
.prices div:first-child{border-color:var(--pink);background:var(--pink-tint)}
.prices b{font:700 24px/1 var(--display);color:var(--blue)}
.prices .tag{font:700 13px/1.2 var(--display);color:var(--pink)}

/* faq */
.faq details{max-width:780px}
details{border-bottom:2px dashed var(--blue);padding:16px 0}
summary{cursor:pointer;font:700 19px/1.35 var(--display);color:var(--blue);list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:700;color:var(--pink);font-size:24px;line-height:1}details[open] summary::after{content:"–"}
details p{margin:10px 0 0}

/* final */
.final{text-align:center;padding-bottom:84px}
.final img{width:min(240px,62vw);margin:0 auto 10px;border-radius:50%;border:2.5px solid var(--blue);box-shadow:5px 5px 0 var(--pink);background:var(--slip)}
.final h2{margin-inline:auto}

footer{border-top:2px solid var(--blue);padding:22px 0 44px;font-size:15px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
footer a{font-weight:700;color:var(--blue)}
footer span{opacity:.8}

/* legal pages */
.legal{width:min(760px,100% - 32px);margin-inline:auto;padding-bottom:30px}
.legal h1{font-size:clamp(34px,7vw,50px);margin:26px 0 6px}
.legal h2{font-size:23px;text-shadow:none;margin:34px 0 8px;max-width:none}
.legal .date{font-size:14px;opacity:.8;margin:0 0 20px}
.legal ul{padding-left:1.2em}.legal li{margin:6px 0}
.legal .card{background:var(--surface);border:2.5px solid var(--blue);border-radius:var(--cut);padding:16px 20px;margin:20px 0}
.legal a{color:var(--blue);font-weight:700}
.legal hr{border:0;border-top:2px dashed var(--blue);margin:60px 0 0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}