/* talehive.app. S1 prototype + S2 (how-it-works, legal, 404). Tokens: docs/웹사이트-디자인-명세.md 2.1-2.4 (same values as the share web reader). */
@font-face{font-family:Nunito;src:url(/assets/fonts/nunito-var.d11a94cc.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"TH Serif";src:url(/assets/fonts/lora-var.a99eac42.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"TH Serif Italic";src:url(/assets/fonts/lora-italic.58d06e54.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"TH Script";src:url(/assets/fonts/parisienne.1e3f8737.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --cream:#FFF8F0;--peach:#FFF3E0;--paper:#FBF6EA;--paper-border:#E6D9BC;--gold:#C9A45C;
  --ink:#3F3A33;--ink-strong:#2A2420;--muted:#6F675D;--faint:#766D62;
  --cta-start:#FF9F0A;--cta-end:#FF6B4A;--cta-shadow:rgba(255,107,74,.25);
  --accent:#F9A825;--honey:#FDCB6E;--link:#A65400;
  --ui:ui-rounded,"SF Pro Rounded",Nunito,system-ui,sans-serif;
  --serif:Georgia,"TH Serif",serif;
  --sh-1:0 2px 4px rgba(63,58,51,.05);--sh-2:0 4px 8px rgba(63,58,51,.10);--sh-3:0 8px 16px rgba(63,58,51,.15);
  --sh-cover:0 14px 36px rgba(63,58,51,.22);
  --gut:20px;--sec:56px;
  color-scheme:light;
}
@media(min-width:600px){:root{--gut:32px}}
@media(min-width:1024px){:root{--gut:40px;--sec:96px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 4px var(--cream);border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink-strong);color:#fff;padding:10px 16px;border-radius:10px;z-index:20;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:640px;margin:0 auto}
.sec{padding:var(--sec) 0}
.peach{background:var(--peach)}
.center{text-align:center}
.mt16{margin-top:16px}.mt24{margin-top:24px}.mt28{margin-top:28px}.pb-sec{padding-bottom:var(--sec)}

/* type */
.display{font:800 clamp(2.125rem,1.2rem + 3.2vw,3.5rem)/1.15 var(--ui);letter-spacing:-.01em;color:var(--ink-strong)}
h2,.h2{font:800 clamp(1.75rem,1.3rem + 1.9vw,2.5rem)/1.2 var(--ui);color:var(--ink-strong)}
h3,.h3{font:700 clamp(1.375rem,1.3rem + .4vw,1.5rem)/1.3 var(--ui);color:var(--ink-strong)}
.lead{font-size:clamp(1.1875rem,1.1rem + .3vw,1.25rem);line-height:1.55;color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:15px;line-height:1.5}
.cap{font-size:13px;line-height:1.4;font-weight:600;color:var(--faint)}
.eyebrow{font:800 13px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin-bottom:12px}
.sec-head{margin-bottom:32px}
.sec-head p{margin-top:12px;color:var(--muted);font-size:19px}
@media(min-width:1024px){.sec-head{margin-bottom:48px}}

/* header */
.hdr{position:sticky;top:0;z-index:10;background:rgba(255,248,240,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--paper-border)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-strong);font:800 20px/1 var(--ui);min-height:44px}
.brand img{width:32px;height:32px;border-radius:8px}
.nav{display:none;gap:28px}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;padding:10px 2px}
.nav a:hover,.nav a[aria-current]{color:var(--link)}
@media(min-width:1024px){.nav{display:flex}}
.hdr .btn-sm{margin-left:auto}
@media(min-width:1024px){.hdr .btn-sm{margin-left:0}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;border-radius:14px;border:0;font:800 17px/1 var(--ui);color:var(--ink-strong);text-decoration:none;background:linear-gradient(135deg,var(--cta-start),var(--cta-end));box-shadow:0 6px 18px var(--cta-shadow);transition:filter .15s,box-shadow .15s,transform .15s;position:relative;overflow:hidden;cursor:pointer}
.btn:hover{filter:brightness(1.04);box-shadow:0 8px 22px rgba(255,107,74,.38);text-decoration:none}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:12px;box-shadow:0 4px 12px var(--cta-shadow)}
.btn-2{background:transparent;box-shadow:none;border:1.5px solid rgba(63,58,51,.2);color:var(--ink);font-weight:700;min-height:48px;padding:0 24px}
.btn-2:hover{filter:none;box-shadow:none;background:rgba(63,58,51,.04);border-color:rgba(63,58,51,.4)}
.btn.shine::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;background:rgba(255,255,255,.55);transform:skewX(-20deg) translateX(-150%);animation:shine .9s ease 1.2s 1 both}
@keyframes shine{to{transform:skewX(-20deg) translateX(700%)}}
@media(prefers-reduced-motion:reduce){.btn.shine::after{display:none}}
.badge{display:inline-block;line-height:0;border-radius:8px}
.badge img{height:48px;width:auto}
.cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-row .free{font-weight:700;color:var(--ink);font-size:16px}
.cta-row.c{align-items:center}

/* chip */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--peach);border:1px solid var(--paper-border);border-radius:12px;padding:6px 14px;font-size:14px;font-weight:700;color:var(--ink)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.peach .chip{background:var(--cream)}

/* hero */
.hero{padding:20px 0 var(--sec);overflow:hidden}
.hero .wrap{display:grid;gap:18px;grid-template-areas:"t" "b" "c";justify-items:start}
.hero-t{grid-area:t}.hero-t .lead{margin-top:12px;max-width:30ch}
.hero-b{grid-area:b;width:100%;display:flex;justify-content:center}
.hero-c{grid-area:c}
.hero-c .more{display:inline-block;margin-top:16px;font-weight:800;font-size:17px;min-height:44px;padding-top:8px}
@media(min-width:1024px){
  .hero{padding:72px 0 var(--sec)}
  .hero .wrap{grid-template-columns:1fr 1fr;grid-template-areas:"t b" "c b";gap:20px 48px;align-items:center}
  .hero-t{align-self:end}.hero-c{align-self:start}
  .hero-t .lead{max-width:34ch}
}
.hero-books{--lv:140px;position:relative;width:300px;max-width:100%;height:250px}
.hero-books::before{content:"";position:absolute;inset:6% -8% -4% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(253,203,110,.55),rgba(253,203,110,0));z-index:0}
.cover{position:absolute;left:0;top:0;width:160px;aspect-ratio:2/3;border-radius:4px 14px 14px 4px;overflow:hidden;box-shadow:var(--sh-cover);background:var(--paper);z-index:1}
.cover img{width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(90deg,rgba(63,58,51,.18),rgba(63,58,51,0))}
.leaves{position:absolute;right:0;bottom:0;width:var(--lv);height:var(--lv);perspective:900px;z-index:2;transform:rotate(3deg)}
.leaf{position:absolute;inset:0;border-radius:4px 12px 12px 4px;background:var(--paper);border:1px solid var(--paper-border);padding:5px;box-shadow:var(--sh-3);transform-origin:left center;transition:transform .6s ease-out,opacity .6s ease-out;backface-visibility:hidden}
.leaf img{width:100%;height:100%;object-fit:cover;border-radius:2px 8px 8px 2px}
.leaf.gone{transform:rotateY(-105deg);opacity:0}
.leaf:nth-child(1){z-index:3}.leaf:nth-child(2){z-index:2}.leaf:nth-child(3){z-index:1}
.pause{position:absolute;right:4px;bottom:calc(var(--lv) + 14px);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--paper-border);background:var(--cream);color:var(--ink);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-1)}
.js .pause{display:flex}.pause svg{width:18px;height:18px}
.pause .p2{display:none}.pause[aria-pressed=true] .p1{display:none}.pause[aria-pressed=true] .p2{display:block}
@media(min-width:600px){.hero-books{--lv:220px;width:420px;height:380px}.cover{width:250px}}
@media(min-width:1024px){.hero-books{--lv:270px;width:520px;height:470px}.cover{width:300px}.leaves{right:10px}.pause{right:14px}}
@media(prefers-reduced-motion:reduce){.leaf{transition:none}.pause{display:none!important}}

/* phone frame */
.phone{position:relative;width:var(--pw,180px);flex:none;border:8px solid #1D1B19;border-radius:34px;background:#1D1B19;overflow:hidden;box-shadow:var(--sh-3)}
.phone img{width:100%;height:auto;border-radius:24px}
.phone.sm{--pw:190px;--ph:250px}
.phone.peek{height:var(--ph,250px);border-bottom:0;border-radius:34px 34px 0 0;box-shadow:var(--sh-2)}
.phone.peek img{height:100%;object-fit:cover;object-position:top;border-radius:24px 24px 0 0}
.phone.peek img[src*=screen-reader]{object-position:50% 46%}

/* photos to pages */
.p2p{display:grid;gap:32px;align-items:center}
@media(min-width:1024px){.p2p{grid-template-columns:1.1fr .9fr;gap:48px}}
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px var(--gut) 20px;margin:0 calc(var(--gut) * -1);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.polaroid{flex:none;width:132px;background:#fff;padding:6px 6px 18px;box-shadow:var(--sh-2);border-radius:2px;scroll-snap-align:center;transform:rotate(-3deg)}
.polaroid:nth-child(even){transform:rotate(2.5deg)}
.polaroid:nth-child(3n){transform:rotate(-1deg)}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover}
@media(min-width:1024px){
  .strip{display:grid;grid-template-columns:repeat(5,1fr);gap:18px 14px;overflow:visible;margin:0;padding:12px 8px 20px}
  .polaroid{width:auto}
}
.pair{display:grid;gap:20px}
.pair figure{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;background:var(--paper);border:1px solid var(--paper-border);border-radius:16px;padding:12px}
.pair .polaroid{width:110px;transform:rotate(-3deg)}
.pair .pg{position:relative;max-width:240px}
.pair .pg img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;box-shadow:var(--sh-1)}
.pair figcaption{grid-column:1/-1;font-size:15px;color:var(--muted);font-weight:600}
@media(min-width:600px){.pair figure{grid-template-columns:150px 1fr;gap:20px}.pair .polaroid{width:150px}}
@media(min-width:1024px){.pair figure{grid-template-columns:116px 170px 1fr;gap:16px;padding:14px}.pair .polaroid{width:116px}.pair .pg{max-width:none}.pair figcaption{grid-column:auto}}
.arrow-down{display:flex;justify-content:center;color:var(--link)}
.arrow-down svg{width:28px;height:28px}
@media(min-width:1024px){.arrow-down{display:none}}

/* steps */
.steps{display:grid;gap:20px}
@media(min-width:1024px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}}
.step{background:var(--paper);border:1px solid var(--paper-border);border-radius:16px;padding:28px 24px 0;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.num{width:40px;height:40px;border-radius:50%;background:var(--honey);color:var(--ink-strong);font:800 19px/40px var(--ui);text-align:center;margin-bottom:14px}
.step p{margin:6px 0 24px;color:var(--muted)}
.step .phone{margin-top:auto}
.more{font-weight:800}

/* features */
.feats{display:grid;gap:20px}
@media(min-width:1024px){.feats{grid-template-columns:1fr 1fr;gap:28px}}
.feat{background:var(--cream);border:1px solid var(--paper-border);border-radius:16px;padding:24px 0 0 24px;display:flex;gap:16px;align-items:stretch;overflow:hidden;transition:transform .15s,box-shadow .15s}
.feat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.feat>div:first-child{flex:1;padding:4px 0 24px;min-width:0}
.feat p{margin-top:6px;color:var(--muted);font-size:16px;line-height:1.5}
.feat .phone{align-self:flex-end;margin-right:20px;--pw:150px;--ph:260px}
@media(prefers-reduced-motion:reduce){.feat:hover{transform:none}}
@media(max-width:380px){.feat{flex-direction:column;padding:24px 24px 0}.feat .phone{align-self:center;margin-right:0}}

/* sample banner */
.banner{display:grid;gap:28px;align-items:center;justify-items:center;text-align:center}
.banner .cover{position:relative;width:200px}
.banner .txt{display:grid;gap:14px;justify-items:center}
@media(min-width:1024px){.banner{grid-template-columns:auto 1fr;gap:64px;text-align:left;justify-items:start}.banner .txt{justify-items:start}.banner .cover{width:240px}}

/* pricing */
.cards{display:grid;gap:20px}
@media(min-width:768px){.cards{grid-template-columns:1fr 1fr;gap:28px}}
.price{background:var(--paper);border:1px solid var(--paper-border);border-radius:16px;padding:32px}
.price .k{font:800 13px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--link)}
.price .big{font:800 clamp(1.875rem,1.5rem + 2vw,3rem)/1.1 var(--ui);color:var(--ink-strong);margin:10px 0 8px}
.price p{color:var(--muted)}
.price.hot{background:linear-gradient(180deg,#fff8e8,var(--paper));border-color:var(--gold)}
.after-cards{margin-top:20px}
.after-cards a{font-weight:800}
.tbl-wrap{overflow-x:auto;border:1px solid var(--paper-border);border-radius:16px;background:var(--paper)}
table{width:100%;border-collapse:collapse}
caption{text-align:left;padding:20px 24px 4px;font:800 22px/1.3 var(--ui);color:var(--ink-strong)}
th,td{padding:14px 12px;text-align:left;border-top:1px solid var(--paper-border);font-size:15px}
th:first-child,td:first-child{padding-left:20px}th:last-child,td:last-child{padding-right:20px}
@media(min-width:600px){th,td{padding:16px 24px;font-size:17px}}
thead th{font:800 12px/1.4 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-top:0}
td:first-child{font-weight:800;color:var(--ink-strong)}
td .b{display:inline-block;margin-left:8px;background:var(--honey);color:var(--ink-strong);font:800 12px/1 var(--ui);padding:4px 8px;border-radius:8px}
.tbl-note{margin-top:16px;color:var(--muted)}

/* FAQ */
.faq{border-top:1px solid var(--paper-border)}
.faq details{border-bottom:1px solid var(--paper-border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;min-height:56px;font:800 18px/1.35 var(--ui);color:var(--ink-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:24px;height:24px;background:currentColor;-webkit-mask:url(/assets/icons/plus.edd59733.svg) center/20px no-repeat;mask:url(/assets/icons/plus.edd59733.svg) center/20px no-repeat;transition:transform .15s}
.faq details[open] summary::after{-webkit-mask-image:url(/assets/icons/minus.fa9a00d1.svg);mask-image:url(/assets/icons/minus.fa9a00d1.svg)}
.faq details p{padding:0 40px 20px 0;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* final cta */
.final{background:linear-gradient(180deg,var(--cream),var(--peach));text-align:center}
.final .stack{position:relative;height:190px;width:260px;margin:0 auto 32px}
.final .stack>*{position:absolute;border-radius:6px;box-shadow:var(--sh-3);overflow:hidden;background:#fff}
.final .stack img{width:100%;height:100%;object-fit:cover}
.final .s1{left:0;top:30px;width:128px;height:128px;border:5px solid #fff;transform:rotate(-8deg)}
.final .s2{right:0;top:30px;width:128px;height:128px;border:5px solid #fff;transform:rotate(7deg)}
.final .s3{left:50%;top:0;width:120px;height:180px;margin-left:-60px;border-radius:3px 10px 10px 3px;transform:rotate(-1deg);z-index:2}

/* footer */
.ftr{background:var(--peach);padding:48px 0 40px;border-top:1px solid var(--paper-border)}
.ftr nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin:20px 0}
.ftr nav a{color:var(--ink);font-weight:700;text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.ftr nav a:hover{color:var(--link);text-decoration:underline}
.ftr .small{color:var(--muted)}
.ftr .brand{margin-bottom:4px}

/* scroll reveal (JS adds .js) */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .28s ease-out,transform .28s ease-out}
.js .rv.in{opacity:1;transform:none}

/* ---- /sample ---- */
.s-head{padding:40px 0 24px;text-align:center}
.s-head h1{font:700 clamp(1.625rem,1.3rem + 1.4vw,2rem)/1.25 var(--serif);color:var(--ink-strong);margin:14px 0 8px}
.s-head .meta{color:var(--muted);font-size:17px}
.reader{margin:0 auto;max-width:1040px}
.rpage{margin:0 0 28px}
.rpage .art{border-radius:16px 16px 0 0;overflow:hidden;background:var(--paper-border)}
.rpage .art img{width:100%;aspect-ratio:1;object-fit:cover}
.rpage .txt{background:var(--paper);border:1px solid var(--paper-border);border-top:0;border-radius:0 0 16px 16px;padding:24px 22px 28px;font:400 18px/1.65 var(--serif);color:var(--ink)}
.rpage .pn{display:block;margin-top:14px;font:600 13px/1 var(--ui);color:var(--faint)}
.rpage.cov{text-align:center}
.rpage.cov .art{background:none;border-radius:0;display:flex;justify-content:center;overflow:visible}
.rpage.cov .cover{position:relative;width:min(280px,80%)}
.rpage.cov .btn{margin-top:24px}
.rpage.let .letter{margin:0 auto}
.letter{background:var(--paper);border:1px solid var(--paper-border);border-radius:16px;padding:64px 28px;text-align:center;position:relative;max-width:560px;width:100%}
.letter::before,.letter::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:0 auto}
.letter::before{margin-bottom:28px}.letter::after{margin-top:28px}
.letter .to,.letter .from{font:400 26px/1.3 "TH Script","Snell Roundhand",cursive;color:var(--ink)}
.letter .body{font:italic 400 16px/1.8 "TH Serif Italic","TH Serif",Georgia,serif;margin:18px 0}
.letter .from{font-size:28px}
.ctl{display:none}
.rm-photos{margin-top:56px}
.end{margin-top:48px;background:var(--paper);border:1px solid var(--paper-border);border-radius:24px;padding:40px 24px;text-align:center}
.end h2{margin-bottom:8px}
.end .cta-row{margin-top:24px}

@media(min-width:1024px){
  .reader.on .rpage{display:none;margin:0}
  .reader.on .rpage.cur{display:grid;grid-template-columns:1fr 1fr;min-height:520px;align-items:stretch;outline:0}
  .reader.on .rpage.cur .art{border-radius:20px 0 0 20px}
  .reader.on .rpage.cur .art img{height:100%;aspect-ratio:auto}
  .reader.on .rpage.cur .txt{border:1px solid var(--paper-border);border-left:0;border-radius:0 20px 20px 0;display:flex;flex-direction:column;justify-content:center;padding:48px 52px;font-size:20px;position:relative;box-shadow:inset 24px 0 24px -24px rgba(63,58,51,.18)}
  .reader.on .rpage.cov.cur,.reader.on .rpage.let.cur{display:flex;justify-content:center;align-items:center;background:var(--paper);border:1px solid var(--paper-border);border-radius:20px;padding:48px}
  .reader.on .rpage.cov .art{background:none}
  .reader.on .rpage.cov .cover{width:260px}
  .reader.on .rpage.cov.cur{flex-direction:column;gap:8px}
  .reader.on .rpage.cov .btn{display:none}
  .reader.on .ctl{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px}
  .ctl button{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(63,58,51,.25);background:var(--cream);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .ctl button:hover:not(:disabled){background:var(--peach)}
  .ctl button:disabled{opacity:.35;cursor:default}
  .ctl svg{width:22px;height:22px}
  .ctl .prog{min-width:200px;text-align:center;font-weight:800;font-size:15px}
  .ctl .bar{height:4px;border-radius:2px;background:var(--paper-border);margin-top:8px;overflow:hidden}
  .ctl .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cta-start),var(--cta-end));transition:width .4s}
  .rpage.cur.slide{animation:slide .4s ease-out}
  @keyframes slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
}
@media(min-width:1024px) and (prefers-reduced-motion:reduce){.rpage.cur.slide{animation:none}.ctl .bar i{transition:none}}
@media(min-width:768px) and (max-width:1023px){.rpage{display:grid;grid-template-columns:1fr 1fr;margin-bottom:24px}.rpage .art{border-radius:16px 0 0 16px}.rpage .art img{height:100%;aspect-ratio:auto}.rpage .txt{border:1px solid var(--paper-border);border-left:0;border-radius:0 16px 16px 0;display:flex;flex-direction:column;justify-content:center;font-size:19px}.rpage.cov,.rpage.let{display:block}}

/* ---- /pricing ---- */
.p-head{padding:48px 0 32px}
.p-head h1{font:800 clamp(2.125rem,1.2rem + 3.2vw,3.5rem)/1.15 var(--ui);color:var(--ink-strong)}
.p-head p{margin-top:12px;color:var(--muted);font-size:19px}
.p-block{margin-top:48px}

/* ---- /how-it-works ---- */
.hw-head{padding:32px 0 var(--sec)}
.hw-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hw-head .lead{margin-top:12px;color:var(--muted)}
.hw-head .cover{position:relative;flex:none;width:110px}
@media(min-width:600px){.hw-head .cover{width:150px}}
@media(min-width:1024px){.hw-head{padding-top:64px}.hw-head .cover{width:190px}}
.hw-row{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.hw-row>*{min-width:0}
.hw-row+.hw-row{margin-top:var(--sec)}
.hw-t .num{margin-bottom:14px}
.hw-t p{margin-top:10px;font-size:19px;color:var(--muted);max-width:30em}
.hw-v{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:center}
.hw-v.two{gap:20px}
.hw-v .strip{width:calc(100% + var(--gut) * 2);flex:none}
.hw-v .phone{--pw:190px}
@media(min-width:1024px){
  .hw-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
  .hw-row.rev .hw-t{order:2}
  .hw-v .strip{display:grid;grid-template-columns:repeat(3,1fr);width:auto;flex:1 1 300px;max-width:400px;padding:12px 8px 20px;margin:0}
  .hw-v .phone{--pw:220px}
}
.safe{display:flex;gap:24px;align-items:flex-start;background:var(--paper);border:1px solid var(--paper-border);border-radius:24px;padding:32px 24px;max-width:760px;margin:0 auto}
.safe .ico{flex:none;width:56px;height:56px;border-radius:50%;background:var(--honey);color:var(--ink-strong);display:flex;align-items:center;justify-content:center}
.safe .ico svg{width:28px;height:28px}
.safe h2{margin-bottom:10px}
.safe .lead{color:var(--ink)}
@media(max-width:599px){.safe{flex-direction:column;gap:16px}}

/* ---- legal pages (text copied from the server) ---- */
.legal{padding-top:40px;padding-bottom:var(--sec)}
.legal h1{font:800 clamp(2rem,1.4rem + 2vw,2.75rem)/1.15 var(--ui);color:var(--ink-strong)}
.legal .updated{font-size:13px;line-height:1.4;font-weight:600;color:var(--faint);margin:10px 0 32px}
.legal h2{font:800 22px/1.3 var(--ui);color:var(--ink-strong);margin:36px 0 10px}
.legal p{margin:0 0 12px}
.legal ul{list-style:disc;padding-left:22px;margin:0 0 16px}
.legal li{margin-bottom:6px}
.legal strong{font-weight:800;color:var(--ink-strong)}

/* ---- 404 ---- */
.nf{padding:48px 0 var(--sec);text-align:center}
.nf .cover{position:relative;width:150px;margin:0 auto 32px;transform:rotate(-6deg);opacity:.85}
.nf h1{font:800 clamp(2.125rem,1.2rem + 3.2vw,3.25rem)/1.15 var(--ui);color:var(--ink-strong)}
.nf .lead{margin-top:12px}
.nf-act{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:28px}
.nf-act .more{padding:10px 0}