@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(/fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:500 600;font-display:swap;src:url(/fonts/figtree-600.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:500 700;font-display:swap;src:url(/fonts/bricolage-700.woff2) format("woff2")}
:root{
  --paper:#E7ECF0; --sheet:#F7F9FA; --ink:#17212C; --muted:#5B6875;
  --line:#C9D2DA; --wax:#8A2232; --wax-ink:#FFFFFF; --wax-soft:#F3E3E6; --ok:#2E6B4F; --warn:#9A5B12;
  --field:#FFFFFF;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101821; --sheet:#18222E; --ink:#E4EAF0; --muted:#93A1AF;
    --line:#2C3A49; --wax:#D86A7A; --wax-ink:#1A0B0F; --wax-soft:#2A1A21; --ok:#7CC4A0; --warn:#E3A55A;
    --field:#0F1720; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#101821; --sheet:#18222E; --ink:#E4EAF0; --muted:#93A1AF;
  --line:#2C3A49; --wax:#D86A7A; --wax-ink:#1A0B0F; --wax-soft:#2A1A21; --ok:#7CC4A0; --warn:#E3A55A;
  --field:#0F1720; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; background:var(--paper); color:var(--ink);
  font:400 1rem/1.55 "Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased}
.wrap{max-width:36rem; margin:0 auto; padding:1.5rem 1.25rem 3rem}
header{display:flex; align-items:center; gap:.6rem; margin-bottom:2.25rem}
.mark{width:1.6rem; height:1.6rem; border-radius:50%; background:var(--wax); display:grid; place-items:center}
.mark svg{width:.9rem; height:.9rem}
.word{font:700 1.35rem/1 "Bricolage Grotesque",Georgia,sans-serif; letter-spacing:-.02em}
h1{font:700 clamp(2.1rem,8vw,2.9rem)/1.03 "Bricolage Grotesque",Georgia,sans-serif; letter-spacing:-.035em; margin:0 0 .75rem}
h2{font:700 1.45rem/1.15 "Bricolage Grotesque",Georgia,sans-serif; letter-spacing:-.02em; margin:0 0 .6rem}
h3{font:600 1.02rem/1.3 "Figtree",system-ui,sans-serif; margin:0}
.lead{color:var(--muted); margin:0 0 1.5rem; max-width:31rem}
p{margin:0}

.tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--sheet); border:1px solid var(--line); border-radius:999px; margin-bottom:1rem}
.tab{font:600 .95rem/1 "Figtree",system-ui,sans-serif; border:0; background:transparent; color:var(--muted); padding:.75rem .5rem; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.4rem}
.tab[aria-selected="true"]{background:var(--wax); color:var(--wax-ink)}
.badge{font-size:.7rem; font-weight:600; padding:.15rem .45rem; border-radius:999px; background:var(--wax-soft); color:var(--wax)}
.tab[aria-selected="true"] .badge{background:var(--wax-ink); color:var(--wax)}

.letter{position:relative; background:var(--sheet); border:1px solid var(--line); border-radius:4px 4px 14px 14px; padding:1.5rem 1.25rem 1.25rem}
.letter::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:4px 4px 0 0;
  background:repeating-linear-gradient(90deg,var(--wax) 0 18px,transparent 18px 26px,var(--muted) 26px 44px,transparent 44px 52px); opacity:.55}
label{display:block; font-weight:600; font-size:.92rem; margin:0 0 .4rem}
.hint{font-size:.86rem; color:var(--muted); margin-top:.4rem}
textarea,input,select{width:100%; font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:8px; padding:.75rem .85rem}
textarea{min-height:9.5rem; resize:vertical; line-height:1.5}
textarea:focus,input:focus,select:focus,button:focus-visible,summary:focus-visible{outline:2px solid var(--wax); outline-offset:2px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-top:1.1rem}
@media (max-width:420px){.row{grid-template-columns:1fr}}
.count{float:right; font-weight:400; color:var(--muted); font-size:.85rem}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font:600 1rem/1 "Figtree",system-ui,sans-serif; cursor:pointer;
  border:0; border-radius:999px; padding:.95rem 1.4rem; margin-top:1.35rem; background:var(--wax); color:var(--wax-ink); width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btns{display:grid; gap:.6rem}
.btns .btn{margin-top:0}
.stack>*+*{margin-top:1rem}
.linkbox{font:500 .88rem/1.45 ui-monospace,"SF Mono",Menlo,monospace; word-break:break-all; background:var(--field); border:1px dashed var(--line); border-radius:8px; padding:.85rem}
.note{white-space:pre-wrap; word-break:break-word; background:var(--field); border:1px solid var(--line); border-radius:8px; padding:1rem; min-height:4rem}
.status{font-size:.92rem; padding:.7rem .85rem; border-radius:8px; border:1px solid var(--line)}
.status.ok{color:var(--ok); border-color:currentColor}
.status.warn{color:var(--warn); border-color:currentColor}

.seal-wrap{display:flex; justify-content:center; margin:.25rem 0 1.25rem}
.seal{position:relative; width:5.5rem; height:5.5rem}
.seal .half{position:absolute; inset:0; background:var(--wax); border-radius:50%; display:grid; place-items:center; transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .55s}
.seal .l{clip-path:polygon(0 0,52% 0,44% 38%,56% 60%,46% 100%,0 100%)}
.seal .r{clip-path:polygon(52% 0,100% 0,100% 100%,46% 100%,56% 60%,44% 38%)}
.seal svg{width:2.2rem; height:2.2rem}
.seal.broken .l{transform:translateX(-14px) rotate(-14deg); opacity:0}
.seal.broken .r{transform:translateX(14px) rotate(14deg); opacity:0}
@media (prefers-reduced-motion:reduce){.seal .half{transition:none}}

section.info{margin-top:3rem; border-top:1px solid var(--line); padding-top:1.75rem}
.steps{list-style:none; counter-reset:s; padding:0; margin:0; display:grid; gap:1.1rem}
.steps li{counter-increment:s; display:grid; grid-template-columns:2.2rem 1fr; gap:.85rem; align-items:start}
.steps li::before{content:counter(s); width:2.2rem; height:2.2rem; border-radius:50%; border:1.5px solid var(--wax); color:var(--wax);
  display:grid; place-items:center; font:700 1rem/1 "Bricolage Grotesque",sans-serif}
.steps p,.why p{color:var(--muted); font-size:.95rem; margin-top:.15rem}
.why{display:grid; gap:1.2rem; margin:0; padding:0; list-style:none}
.why li{padding-left:1.1rem; border-left:3px solid var(--wax)}

.plans{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
@media (max-width:480px){.plans{grid-template-columns:1fr}}
.plan{background:var(--sheet); border:1px solid var(--line); border-radius:12px; padding:1.25rem}
.plan.pro{border:2px solid var(--wax)}
.price{font:700 1.9rem/1 "Bricolage Grotesque",sans-serif; letter-spacing:-.03em; margin:.5rem 0 .2rem}
.price small{font:500 .9rem "Figtree",sans-serif; color:var(--muted); letter-spacing:0}
.plan ul{margin:.9rem 0 0; padding-left:1.1rem; font-size:.93rem; display:grid; gap:.35rem}
.plan .tag{display:inline-block; margin-top:1rem; font-size:.85rem; font-weight:600; color:var(--wax)}

details{border-bottom:1px solid var(--line); padding:.9rem 0}
summary{font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--wax); font-size:1.2rem; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted); font-size:.95rem; margin-top:.5rem}
footer{margin-top:2.5rem; font-size:.82rem; color:var(--muted); display:grid; gap:.4rem}
footer nav{display:flex; gap:1.2rem}
footer a{color:inherit}
a.btn{text-decoration:none}
.support-box h3{font:700 1.15rem/1.25 "Bricolage Grotesque",Georgia,sans-serif}
.support-box .btns{margin-top:1.1rem}
.nudge{font-size:.88rem; color:var(--muted); text-align:center}
.linkish{font:inherit; color:var(--wax); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.tech h3{margin-top:1.6rem}
.tech p,.tech li{color:var(--muted); font-size:.95rem}
.tech p{margin-top:.4rem}
.tech ol,.tech ul{padding-left:1.2rem; margin:.5rem 0 0; display:grid; gap:.45rem}
.tech dl{margin:.6rem 0 0; display:grid; gap:.7rem}
.tech dt{font-weight:600; font-size:.95rem}
.tech dd{margin:.1rem 0 0; color:var(--muted); font-size:.93rem}
code{font:500 .86em/1.4 ui-monospace,"SF Mono",Menlo,monospace; background:var(--field); border:1px solid var(--line); border-radius:4px; padding:.05em .3em; word-break:break-word}
.code-box{font:700 1.35rem/1 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.08em; text-align:center; padding:.9rem; border-radius:8px; background:var(--wax-soft); color:var(--wax)}
.back{margin-bottom:1.5rem}
.tech pre{margin:.75rem 0 0; overflow-x:auto; background:var(--field); border:1px solid var(--line); border-radius:8px; padding:1rem; font:500 .8rem/1.55 ui-monospace,"SF Mono",Menlo,monospace; color:var(--ink)}
.tech pre .c{color:var(--muted)}
.tech details{margin-top:.75rem}
.tech summary{font-size:.95rem}
[hidden]{display:none!important}
.hint.big{font-size:.95rem}
.hint.mb{margin-bottom:1.1rem}
.auto{width:auto!important}
.back.auto{margin-top:0}
h2.mt{margin-top:2rem}
.linkish.plain{color:inherit}