/* Bookhatch marketing site. Shared styles for every page.
   Type: Fredoka for headings, Nunito for body, UI and numbers (tabular). Palette: warm paper, cloth green, gold foil.
   Spacing scale (use only these): 4 8 12 16 24 32 48 64 96. One container: 1160px with a 16/24/32px gutter. */
:root{
  --bg:#F6F2E9; --surface:#FFFDF9; --sunk:#EFE9DD; --ink:#1B1A1F; --ink-2:#57524A; --rule:#E4DCCD;
  --yolk:#C99A3B; --yolk-soft:#F5EAD0; --teal:#1D4F47; --teal-soft:#E0EAE5; --mark:#B3413F;
  --on-teal:#FFFDF9;
  --display:"Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --max:1160px; --gut:16px; --r-s:10px; --r:16px; --r-l:24px;
  --sec:56px;
  --shadow:0 24px 50px -30px rgba(27,26,31,.4);
  color-scheme:light;
}
@media (min-width:600px){:root{--gut:24px;--sec:72px}}
@media (min-width:1024px){:root{--gut:32px;--sec:88px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);margin:0;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--teal);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);color:var(--ink);padding:8px 16px;border-radius:999px;z-index:30}
.skip:focus{left:16px}
.band{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.in{max-width:var(--max);margin:0 auto}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1,h2{font-weight:600;letter-spacing:-.018em;line-height:1.08}
h1{font-size:clamp(38px,5.4vw,66px)}
h2{font-size:clamp(30px,3.6vw,44px)}
h3{font-weight:500;font-size:20px;letter-spacing:-.005em;line-height:1.25}
h1 em,h2 em{font-style:normal;color:var(--teal);background:linear-gradient(transparent 72%,var(--yolk-soft) 72% 94%,transparent 94%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
p{margin:0}
.eyebrow{font:800 13px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 24px;min-height:48px;font:800 16px/1.2 var(--body);border:1.5px solid var(--ink);background:var(--ink);color:var(--surface);text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn.yolk{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink-2);filter:none}
.btn.small{padding:8px 16px;min-height:40px;font-size:15px}
.actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
@media (max-width:420px){.actions .btn{flex:1 1 100%}}

/* ---------- header */
header.top{position:sticky;top:0;z-index:20;background:rgba(246,242,233,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:var(--s5);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 26px/1 var(--display);letter-spacing:-.01em;text-decoration:none;color:var(--ink);flex:none}
.brand svg{width:26px;height:30px;flex:none}
nav.main{display:flex;gap:var(--s1);align-items:center;font-weight:700;font-size:16px;margin-right:auto}
nav.main > a,.dd > a{color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
nav.main > a:hover,.dd > a:hover,.dd:focus-within > a{color:var(--ink);background:var(--sunk)}
nav.main a[aria-current="page"]{color:var(--ink)}
.dd{position:relative}
.dd > a svg{width:12px;height:12px;transition:transform .15s}
.dd:hover > a svg,.dd:focus-within > a svg{transform:rotate(180deg)}
.ddm{position:absolute;left:-8px;top:100%;padding-top:10px;display:none;z-index:30}
.dd:hover .ddm,.dd:focus-within .ddm{display:block}
.ddm .panel{width:560px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s3);box-shadow:0 30px 60px -28px rgba(27,26,31,.45)}
.ddm a{display:flex;flex-direction:column;gap:2px;padding:var(--s3);border-radius:var(--r-s);text-decoration:none;color:var(--ink)}
.ddm a:hover{background:var(--bg)}
.ddm a b{font:500 17px/1.25 var(--display)}
.ddm a span{font-size:14px;color:var(--ink-2);font-weight:600;line-height:1.4}
.ddm a.all{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);border-radius:0 0 var(--r-s) var(--r-s);margin-top:var(--s1);font-weight:800;color:var(--teal)}
.acts{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.acts .login{color:var(--ink-2);font-weight:700;text-decoration:none;padding:8px 4px}
.acts .login:hover{color:var(--ink)}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;align-items:center;justify-content:center;padding:0}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;content:""}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mnav{border-top:1px solid var(--rule);background:var(--bg);max-height:calc(100vh - 72px);overflow-y:auto}
.mnav .in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);padding-block:var(--s5) var(--s6)}
.mnav h2{font:800 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.mnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mnav li a{display:block;padding:8px 0;color:var(--ink);text-decoration:none;font-weight:700}
.mnav .mcta{grid-column:1/-1;display:flex;gap:var(--s3)}
.mnav .mcta .btn{flex:1}
@media (max-width:1060px){.bar nav.main{display:none}.burger{display:inline-flex}}
@media (min-width:1061px){.mnav{display:none!important}}
@media (max-width:480px){.acts .login{display:none}.brand{font-size:23px}.bar{gap:var(--s3)}.mnav .in{grid-template-columns:minmax(0,1fr)}}

/* legacy header markup (pages not yet moved to the new header): keep it laid out */
header.top > .in:not(.bar){display:flex;align-items:center;justify-content:space-between;gap:12px 16px;min-height:72px;flex-wrap:wrap}
header.top > .in:not(.bar) nav.main{margin-right:0;gap:var(--s2)}
footer.site .legal{font-size:14px;color:var(--ink-2);margin-top:var(--s3);max-width:42ch}
@media (max-width:820px){nav.main .hide-s{display:none}}
@media (max-width:440px){nav.main .hide-xs{display:none}}
.card.media .svgthumb{position:relative;overflow:hidden;background:#fff}
.card.media .svgthumb svg{position:absolute;inset:var(--s3);width:calc(100% - 24px);height:calc(100% - 24px)}

/* ---------- landing hero */
.hero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s7);align-items:center;padding-block:var(--s7) var(--s8)}
@media (max-width:900px){.hero .in{grid-template-columns:minmax(0,1fr);gap:var(--s6);padding-block:var(--s6) var(--s7)}}
.rule{display:flex;align-items:center;gap:var(--s3)}
.rule::after{content:"";height:1px;flex:1;background:var(--rule)}
.hero h1{margin-top:var(--s4)}
.sub{font-size:19px;color:var(--ink-2);max-width:50ch;margin:var(--s5) 0}
.prompt{display:flex;gap:var(--s2);background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:8px 8px 8px 16px;align-items:center;box-shadow:0 1px 0 rgba(27,26,31,.04),0 18px 40px -20px rgba(27,26,31,.35)}
.prompt label{position:absolute;left:-9999px}
.prompt input{flex:1;min-width:0;border:0;background:transparent;font:600 16px var(--body);color:var(--ink);padding:12px 0}
.prompt input::placeholder{color:var(--ink-2);opacity:.85}
.prompt input:focus{outline:none}
.prompt:focus-within{border-color:var(--teal)}
@media (max-width:520px){.prompt{flex-direction:column;align-items:stretch;padding:12px}.prompt input{padding:8px}}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.chips button{border:1px solid var(--rule);background:var(--surface);border-radius:999px;padding:6px 12px;font:600 14px var(--body);color:var(--ink-2);cursor:pointer}
.chips button:hover{border-color:var(--ink-2);color:var(--ink)}
.trust{display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;margin-top:var(--s4);font-size:15px;font-weight:600;color:var(--ink-2)}
.trust span{display:inline-flex;gap:var(--s2);align-items:center}
.trust span::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--yolk)}
.stage{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:center}
.page{position:absolute;margin:0;background:#fff;border:1px solid var(--rule);border-radius:4px;padding:12px;box-shadow:0 18px 40px -16px rgba(27,26,31,.35);width:44%;aspect-ratio:8.5/11}
.page img{width:100%;height:100%;object-fit:cover;display:block}
.p1{right:1%;top:4%;transform:rotate(7deg)}
.p2{right:9%;top:27%;transform:rotate(-2.5deg)}
.book{position:absolute;left:5%;top:7%;width:52%;aspect-ratio:6/9;transform:perspective(1600px) rotateY(-16deg) rotateZ(-1deg);filter:drop-shadow(26px 34px 32px rgba(20,22,18,.34));z-index:2}
.cover{position:absolute;inset:0;border-radius:3px 10px 10px 3px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:13% 11% 11%;
  background:radial-gradient(120% 80% at 70% 20%,rgba(255,255,255,.10),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.035) 2px 4px),#1D4F47}
.cover::before{content:"";position:absolute;inset:5.5%;border:1.5px solid rgba(232,199,122,.75);border-radius:6px;pointer-events:none}
.cover::after{content:"";position:absolute;left:0;top:0;bottom:0;width:8%;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.12) 55%,rgba(0,0,0,.25))}
.foil{background:linear-gradient(100deg,#B98A2E 0%,#F3D58A 28%,#C99A3B 52%,#F7E3A6 72%,#B98A2E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover .kick{font:800 9.5px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;position:relative;text-align:center}
.cover .art{width:72%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1.5px rgba(232,199,122,.7)}
.cover .art img{width:100%;height:100%;object-fit:cover;filter:invert(1) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(.95);mix-blend-mode:screen}
.cover .ttl{font:600 clamp(24px,3.1vw,38px)/1.02 var(--display);letter-spacing:-.01em;text-align:center;position:relative}
.cover .au{font:800 9.5px var(--body);letter-spacing:.24em;text-transform:uppercase;position:relative}
.seal{position:absolute;z-index:3;right:3%;bottom:5%;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;text-align:center;transform:rotate(-12deg);
  background:radial-gradient(circle at 35% 30%,#F7E3A6,#C99A3B 60%,#9C7322);box-shadow:0 10px 24px -8px rgba(80,60,10,.6);color:#2A210E;font:800 12px/1.25 var(--body);letter-spacing:.08em;text-transform:uppercase}
.seal::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px dashed rgba(42,33,14,.45)}
.tag{position:absolute;z-index:3;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:8px 16px;font:600 14px var(--body);box-shadow:0 10px 24px -12px rgba(27,26,31,.35);max-width:92%}
.tag.t1{left:0;bottom:3%}
@media (max-width:480px){.seal{width:92px;height:92px;font-size:10.5px}.tag{font-size:13px}}
@media (prefers-reduced-motion:no-preference){.book{animation:lift 1.1s cubic-bezier(.2,.8,.2,1) both}.p1,.p2{animation:fade .9s .25s both}}
@keyframes lift{from{transform:perspective(1600px) rotateY(-4deg) translateY(18px)}to{transform:perspective(1600px) rotateY(-16deg) rotateZ(-1deg)}}
@keyframes fade{from{opacity:.4}to{opacity:1}}

/* ---------- sections and section heads */
section{padding-block:var(--sec)}
section.tight-top{padding-top:0}
.head{display:flex;flex-direction:column;gap:var(--s3);max-width:68ch;margin-bottom:var(--s6)}
.head p{color:var(--ink-2);font-size:18px}
.head.center{margin-inline:auto;text-align:center;align-items:center}
.head .eyebrow + h2{margin-top:0}
.alt{background:var(--surface);border-block:1px solid var(--rule)}
.sub-h{font:800 13px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:var(--s6) 0 var(--s4);display:flex;align-items:center;gap:var(--s3)}
.sub-h::after{content:"";height:1px;flex:1;background:var(--rule)}
.sub-h:first-child{margin-top:0}
.foot-link{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center}
.more-link{display:inline-flex;font-weight:800;text-decoration:none}
.more-link:hover{text-decoration:underline}

/* ---------- grids and cards: equal heights, CTAs pinned to the bottom */
.g2,.g3,.g4{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){.g2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.alt .card{background:var(--bg)}
.card p{color:var(--ink-2);font-size:16px}
.card .meta{font:800 12.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}
.card .more{margin-top:auto;padding-top:var(--s1);font-weight:800;font-size:15px;text-decoration:none}
.card .more:hover{text-decoration:underline}
.card .ico{width:44px;height:44px;flex:none}
.card.link{text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.card.link:hover{border-color:var(--teal);transform:translateY(-2px)}
.card.media{padding:0;overflow:hidden;gap:0}
.card.media .thumb{aspect-ratio:4/3;width:100%;height:auto;display:block;object-fit:cover;background:#fff;border-bottom:1px solid var(--rule)}
.card.media .body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.card ul.mini{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.card ul.mini li{background:var(--bg);border:1px solid var(--rule);border-radius:999px;padding:2px 10px;font-size:13.5px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.alt .card ul.mini li{background:var(--surface)}
.pill{display:inline-flex;align-self:flex-start;background:var(--teal-soft);color:var(--teal);font:800 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.pill.gold{background:var(--yolk-soft);color:#6B4F12}

/* ---------- steps */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);list-style:none;margin:0;padding:0;counter-reset:f}
.flow.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.flow,.flow.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow,.flow.three{grid-template-columns:minmax(0,1fr)}}
.flow li{border-top:1.5px solid var(--ink);padding-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.flow li::before{counter-increment:f;content:counter(f);font:600 20px/1 var(--display);color:#2A210E;background:var(--yolk);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:var(--s1)}
.flow p{color:var(--ink-2);font-size:16px}

/* ---------- gallery */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.gal.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1023px){.gal.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:719px){.gal,.gal.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}}
.tile{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.alt .tile{background:var(--bg)}
.tile img,.tile svg{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#fff;border-bottom:1px solid var(--rule)}
.tile.tall img{aspect-ratio:3/4}
.tile.svgtile svg{padding:var(--s3);object-fit:contain}
.tile figcaption{padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:2px;flex:1}
.tile figcaption b{font:500 16.5px/1.25 var(--display)}
.tile figcaption span{font-size:14px;color:var(--ink-2);line-height:1.4}

/* ---------- spec sheet and ticks */
.spec-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:center}
@media (max-width:900px){.spec-wrap{grid-template-columns:minmax(0,1fr);gap:var(--s6)}}
.spec-wrap h2{margin-top:var(--s3)}
.spec-wrap .intro{color:var(--ink-2);font-size:18px;margin-top:var(--s4)}
.spec{font:600 15px/1.4 var(--body);font-variant-numeric:tabular-nums;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:0 30px 60px -30px rgba(27,26,31,.4)}
.spec .r{display:flex;justify-content:space-between;gap:var(--s3);padding:12px var(--s4);border-bottom:1px solid var(--rule)}
.spec .r span:last-child{text-align:right}
.spec .r:last-child{border-bottom:0}
.spec .r span:first-child{color:var(--ink-2);font-weight:600}
.spec .r.h{background:var(--ink);color:var(--surface);font-weight:800}
.spec .r.h span:first-child{color:#E8C77A}
.spec .r.ok{background:var(--teal-soft);font-weight:800}
.ticks{list-style:none;margin:var(--s5) 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.ticks li{display:flex;gap:var(--s3)}
.ticks li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:var(--teal);color:var(--on-teal);font:800 13px var(--body);display:grid;place-items:center;margin-top:2px}

/* ---------- pricing */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);padding-top:var(--s3)}
@media (max-width:1023px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{border:1.5px solid var(--rule);border-radius:20px;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);position:relative}
.alt .plan{background:var(--bg)}
.plan.hot{border-color:var(--yolk);box-shadow:0 0 0 4px var(--yolk-soft),0 24px 50px -24px rgba(120,90,20,.45)}
.plan .badge{position:absolute;top:-13px;left:var(--s5);background:var(--yolk);color:#2A210E;font:800 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.plan .price{display:flex;align-items:baseline;gap:6px}
.plan .price b{font:800 46px/1 var(--body);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.plan ul{margin:0 0 var(--s2);padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2);font-size:16px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:10px}
.plan .btn{margin-top:auto}
.plan-note{margin-top:var(--s5);color:var(--ink-2);font-size:16px;text-align:center}
.costs,.tbl{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.alt .costs,.alt .tbl{background:var(--bg)}
.costs{margin-top:var(--s6)}
table{border-collapse:collapse;width:100%;font-size:16px}
.costs table{min-width:440px}
th,td{text-align:left;padding:12px var(--s4);border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font:800 12.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--sunk);vertical-align:bottom}
tbody th{font-weight:800}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.n{font-weight:700}
tr:last-child td,tr:last-child th{border-bottom:0}
tr.total td{font-weight:800;background:var(--teal-soft)}
caption{caption-side:bottom;text-align:left;padding:10px var(--s4);font-size:14px;color:var(--ink-2);border-top:1px solid var(--rule)}
.tbl table{min-width:560px}
.tbl.fit table{min-width:0}
.tbl td .yes{color:var(--teal);font-weight:800}
.tbl td .no{color:var(--ink-2)}
.compare td:nth-child(3){background:rgba(224,234,229,.45)}
.compare thead th:nth-child(3){background:var(--teal-soft);color:var(--teal)}
.topup{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:space-between;border:1.5px dashed var(--yolk);border-radius:var(--r);padding:var(--s4) var(--s5);background:var(--yolk-soft)}
.topup p{font-size:17px}
.topup b{font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.two .costs{margin-top:0}

/* ---------- FAQ */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s7);align-items:start}
.faq.one{grid-template-columns:minmax(0,1fr);max-width:820px}
@media (max-width:820px){.faq{grid-template-columns:minmax(0,1fr)}}
details{border-bottom:1px solid var(--rule);padding-block:var(--s4)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
summary::-webkit-details-marker{display:none}
summary h3{font-size:19px}
summary::after{content:"+";font:700 24px/1 var(--body);color:var(--ink-2);flex:none;width:24px;text-align:center}
details[open] summary::after{content:"−"}
details p{color:var(--ink-2);margin-top:var(--s3);max-width:64ch;font-size:16px}

/* ---------- prose blocks */
.what{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s6) var(--s7);align-items:start}
@media (max-width:820px){.what{grid-template-columns:minmax(0,1fr)}}
.what h2{margin-top:var(--s3)}
.what p{color:var(--ink-2);font-size:18px}
.what p + p{margin-top:var(--s4)}
.closing{background:radial-gradient(120% 90% at 80% 0%,rgba(255,255,255,.08),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,rgba(0,0,0,.03) 2px 4px),#1D4F47;color:#F6F2E9;border-radius:28px;padding:var(--s8) var(--s6);box-shadow:inset 0 0 0 1.5px rgba(232,199,122,.55),inset 0 0 0 10px #1D4F47,inset 0 0 0 11.5px rgba(232,199,122,.35);display:flex;flex-direction:column;align-items:center;gap:var(--s4);text-align:center}
.closing h2{color:#F3D58A}
.closing p{color:#F6F2E9;opacity:.9;max-width:52ch;font-size:18px}
.closing .btn{background:linear-gradient(100deg,#C99A3B,#F3D58A 50%,#C99A3B);border:0;color:#2A210E;margin-top:var(--s2)}
@media (max-width:480px){.closing{padding:var(--s7) var(--s5);border-radius:22px}.closing .btn{white-space:normal;text-align:center}}
.ideas{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.ideas li{background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;color:var(--ink)}
.alt .ideas li{background:var(--bg)}
.note-box{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--yolk);border-radius:12px;padding:var(--s4) var(--s5);color:var(--ink-2);font-size:16px}
.alt .note-box{background:var(--bg)}
.note-box b{color:var(--ink)}
.sources-list{font-size:14px;color:var(--ink-2);margin-top:var(--s5)}
.sources-list a{color:inherit}

/* ---------- sub-page hero */
.crumbs{font-size:14px;font-weight:700;color:var(--ink-2);display:flex;gap:var(--s2);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:var(--s2);color:#B9AE9A}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.phero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s7);align-items:center;padding-block:var(--s6) var(--s8)}
.phero.solo .in{grid-template-columns:minmax(0,1fr);padding-bottom:var(--s7)}
.phero.solo .in > div{max-width:780px}
@media (max-width:900px){.phero .in{grid-template-columns:minmax(0,1fr);gap:var(--s6);padding-bottom:var(--s7)}}
.phero h1{margin-top:var(--s4);font-size:clamp(36px,4.8vw,58px)}
.phero .sub{margin-bottom:var(--s5)}
.phero.solo .sub{margin-bottom:0}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0;padding:0;list-style:none}
.facts li{background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.jump{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.jump a{background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;text-decoration:none;color:var(--ink)}
.jump a:hover{border-color:var(--teal);color:var(--teal)}

/* sub-page visuals */
.sheets{position:relative;aspect-ratio:5/4;max-width:560px;width:100%;justify-self:center}
.sheets .page{width:46%}
.sheets .s1{left:4%;top:8%;transform:rotate(-5deg)}
.sheets .s2{left:28%;top:3%;transform:rotate(2deg);z-index:2}
.sheets .s3{right:2%;top:12%;transform:rotate(7deg);z-index:3}
.sheets .page.svgpage{padding:14px}
.sheets .page.svgpage svg{width:100%;height:100%;display:block}
.sheets .tag{left:2%;bottom:2%}
.spread{display:grid;grid-template-columns:1fr 1fr;max-width:560px;width:100%;justify-self:center;border-radius:6px;box-shadow:0 30px 60px -26px rgba(27,26,31,.45);transform:rotate(-1.2deg);background:#fff}
.spread > div{aspect-ratio:1/1;position:relative;overflow:hidden}
.spread .txt{background:#FFFBF2;color:#2B2A33;padding:12% 11%;display:flex;flex-direction:column;justify-content:center;gap:12px;border-right:1px solid #EADFCB;box-shadow:inset -18px 0 24px -20px rgba(0,0,0,.25)}
.spread .txt b{font:600 clamp(16px,2.2vw,22px)/1.15 var(--display);color:#1D4F47}
.spread .txt p{font:600 clamp(12px,1.55vw,16px)/1.55 var(--body)}
.spread svg{width:100%;height:100%;display:block}
.bookpage{background:#FBF6EA;color:#2B2A33;max-width:400px;width:100%;justify-self:center;aspect-ratio:6/9;padding:12% 11% 10%;border-radius:3px;box-shadow:0 30px 60px -26px rgba(27,26,31,.45);display:flex;flex-direction:column;gap:12px;font-family:Georgia,"Times New Roman",serif;position:relative}
.bookpage .run{font:700 10px var(--body);letter-spacing:.18em;text-transform:uppercase;color:#8C8475;text-align:center}
.bookpage .ch{font:500 13px var(--body);letter-spacing:.2em;text-transform:uppercase;color:#8C8475;text-align:center;margin-top:10%}
.bookpage .cht{font:600 clamp(20px,2.6vw,26px)/1.15 var(--display);text-align:center;color:#1D4F47;margin-bottom:6%}
.bookpage p{font-size:clamp(12.5px,1.45vw,14.5px);line-height:1.6}
.bookpage p+p{text-indent:1.4em}
.bookpage p:first-of-type::first-letter{font:600 3.1em/.8 var(--display);float:left;margin:.08em .08em 0 0;color:#1D4F47}
.bookpage .folio{margin-top:auto;text-align:center;font:600 11px var(--body);color:#8C8475}
.novel-vis{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s4);align-items:center;max-width:560px;width:100%;justify-self:center}
@media (max-width:480px){.novel-vis{grid-template-columns:minmax(0,1fr)}.bookpage{max-width:300px;aspect-ratio:auto;min-height:380px}.bookpage p{font-size:14px}}
.outline{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s4);box-shadow:0 18px 40px -24px rgba(27,26,31,.35);font-size:15px}
.outline .eyebrow{font-size:11.5px}
.outline ol{margin:10px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-weight:700;font-variant-numeric:tabular-nums}
.outline ol li::marker{color:var(--yolk);font-weight:800}
.outline .rest{margin-top:var(--s2);color:var(--ink-2);font-size:14px}

.breakdown{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:start}
@media (max-width:900px){.breakdown{grid-template-columns:minmax(0,1fr);gap:var(--s6)}}
.breakdown h2{margin-top:var(--s3)}
.breakdown .costs{margin-top:0}
.breakdown .costs table{min-width:0}
.breakdown .copy{margin-top:var(--s4)}
.breakdown p{color:var(--ink-2);font-size:18px}
.breakdown p+p{margin-top:var(--s4)}

/* ---------- articles (guides) */
.art-head{padding-block:var(--s6) var(--s7);border-bottom:1px solid var(--rule)}
.art-head .in > div{max-width:820px}
.art-head h1{font-size:clamp(34px,4.4vw,54px);margin-top:var(--s4)}
.art-head .sub{margin:var(--s4) 0 0;max-width:62ch}
.byline{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s5);font-size:14px;font-weight:700;color:var(--ink-2)}
.byline span+span::before{content:"·";margin-right:var(--s4);color:#B9AE9A}
.article{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s7);align-items:start;padding-block:var(--s7) var(--s8)}
@media (max-width:1023px){.article{grid-template-columns:minmax(0,1fr);gap:var(--s6)}.article aside{order:-1}}
.article aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--s4)}
@media (max-width:1023px){.article aside{position:static}}
.toc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s4) var(--s5)}
.toc h2{font:800 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--teal);text-decoration:underline}
.side-cta{background:var(--teal);color:var(--on-teal);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.side-cta b{font:600 20px/1.2 var(--display);color:#F3D58A}
.side-cta p{font-size:15px;opacity:.92}
.side-cta .btn{background:linear-gradient(100deg,#C99A3B,#F3D58A 50%,#C99A3B);border:0;color:#2A210E;align-self:flex-start}
@media (max-width:1023px){.side-cta{display:none}}
.prose{max-width:72ch;min-width:0}
.prose > * + *{margin-top:var(--s4)}
.prose h2{font-size:clamp(25px,2.6vw,31px);font-weight:600;letter-spacing:-.012em;margin-top:var(--s7);scroll-margin-top:96px}
.prose h3{font-size:21px;margin-top:var(--s6)}
.prose h2 + *,.prose h3 + *{margin-top:var(--s3)}
.prose p,.prose li{font-size:17.5px;line-height:1.7}
.prose ul,.prose ol{padding-left:24px;display:flex;flex-direction:column;gap:var(--s2)}
.prose .tbl,.prose .callout,.prose .note-box,.prose .checklist{margin-top:var(--s5)}
.prose .tbl + p,.prose .callout + *,.prose .checklist + *{margin-top:var(--s5)}
.prose .tbl td,.prose .tbl th{font-size:15.5px}
.callout{background:var(--teal-soft);border-radius:var(--r);padding:var(--s5)}
.callout b.lbl{display:block;font:800 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--s2)}
.callout p{font-size:17.5px}
.callout ul{margin-top:var(--s3)}
.checklist{list-style:none;padding:0!important;display:flex;flex-direction:column;gap:var(--s3)!important}
.checklist li{display:flex;gap:var(--s3);background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:var(--s3) var(--s4)}
.checklist li::before{content:"";flex:none;width:20px;height:20px;border:2px solid var(--teal);border-radius:6px;margin-top:4px}
.prose .faq-mini{margin-top:var(--s3)}
.prose .sources-list{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule)}
.prose .sources-list ul{padding-left:20px;margin-top:var(--s2);gap:var(--s1)}
.prose .sources-list li{font-size:14px;line-height:1.5}

/* ---------- legal and plain pages */
.legal-page{max-width:72ch;padding-block:var(--s6) var(--s8)}
.legal-page h1{font-size:clamp(34px,4.4vw,52px);margin:var(--s4) 0 var(--s2)}
.legal-page .updated{color:var(--ink-2);font-size:15px;font-weight:700;margin-bottom:var(--s6)}
.legal-page .lead{font-size:19px;color:var(--ink-2);margin-bottom:var(--s3)}
.legal-page h2{font-size:clamp(23px,2.4vw,28px);font-weight:600;margin:var(--s6) 0 var(--s3);letter-spacing:-.01em}
.legal-page p,.legal-page li{color:var(--ink);font-size:17px}
.legal-page p+p{margin-top:var(--s3)}
.legal-page ul{padding-left:22px;margin:var(--s3) 0;display:flex;flex-direction:column;gap:var(--s2)}
.legal-page .note{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--yolk);border-radius:12px;padding:var(--s4) var(--s5);margin-top:var(--s6)}
.notfound{min-height:62vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s4);padding-block:var(--s7) var(--s8)}
.notfound > *{max-width:640px}
.notfound .egg{width:84px;height:96px}

/* ---------- footer */
footer.site{border-top:1px solid var(--rule);background:var(--surface)}
footer.site .in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5);padding-block:var(--s7) var(--s6)}
@media (max-width:1060px){footer.site .in{grid-template-columns:repeat(3,minmax(0,1fr))}footer.site .in > div:first-child{grid-column:1/-1}}
@media (max-width:599px){footer.site .in{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer.site h2{font:800 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s3)}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);font-size:15.5px}
footer.site a{color:var(--ink);text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .brand{font-size:24px}
footer.site .fb p{font-size:15px;color:var(--ink-2);margin-top:var(--s3);max-width:40ch}
footer.site .base a{color:inherit}
footer.site .base{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:var(--s5);font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- motion: reveal on scroll (only with JS and no reduced-motion preference) */
.motion .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.motion .rv.on{opacity:1;transform:none}
.tile{transition:transform .2s,box-shadow .2s,border-color .2s}
a.tile:hover,.tile.lift:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(27,26,31,.45)}
a.tile{text-decoration:none;color:var(--ink)}

/* ---------- hero demo: idea types in, plan, cover, pages and files appear */
.demo{position:relative;width:100%;max-width:560px;justify-self:center;background:var(--surface);border:1px solid var(--rule);border-radius:20px;box-shadow:0 40px 80px -40px rgba(27,26,31,.5),0 2px 0 rgba(27,26,31,.03);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.d-top{display:flex;align-items:center;gap:var(--s3);font-size:13.5px;font-weight:700;color:var(--ink-2)}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--rule)}
.d-top b{color:var(--ink)}
.d-prompt{display:flex;align-items:center;gap:var(--s2);background:var(--bg);border:1px solid var(--rule);border-radius:12px;padding:10px var(--s3);min-height:46px;font-weight:700;font-size:15px}
.d-lbl{font:800 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--surface);background:var(--teal);border-radius:6px;padding:4px 7px;flex:none}
.typed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.caret{width:2px;height:18px;background:var(--teal);flex:none;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.d-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s3)}
.d-plan{background:var(--bg);border:1px solid var(--rule);border-radius:12px;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);transition:opacity .4s}
.d-planhead{font-size:11px}
.d-plan ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.d-plan li{transition:opacity .35s,transform .35s}
.d-plan li::marker{color:var(--yolk)}
.d-cover{aspect-ratio:3/4;border-radius:4px 10px 10px 4px;overflow:hidden;position:relative;box-shadow:12px 16px 26px -14px rgba(20,22,18,.5);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.d-cover.full img{width:100%;height:100%;object-fit:cover;display:block}
.d-cover.framed{background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.035) 2px 4px),#1D4F47;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14% 10% 12%;text-align:center}
.d-cover.framed::before{content:"";position:absolute;inset:5%;border:1.5px solid rgba(232,199,122,.7);border-radius:5px}
.d-cover.framed .k{font:800 8px/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#E8C77A;position:relative}
.d-cover.framed .a{width:74%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1.5px rgba(232,199,122,.7);background:#fff}
.d-cover.framed .a img{width:100%;height:100%;object-fit:cover;display:block}
.d-cover.framed .t{font:600 clamp(15px,2vw,21px)/1.05 var(--display);color:#F3D58A;position:relative}
.d-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.d-page{aspect-ratio:1/1;background:#fff;border:1px solid var(--rule);border-radius:8px;overflow:hidden;transition:opacity .45s,transform .45s}
.d-page img{width:100%;height:100%;object-fit:cover;display:block}
.d-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:var(--s3)}
.d-files{display:flex;gap:var(--s2);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.d-files li{font-size:12.5px;font-weight:800;border:1px solid var(--rule);border-radius:999px;padding:4px 10px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;transition:background .3s,color .3s,border-color .3s}
.d-files li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rule);transition:background .3s}
.d-files li.on{background:var(--teal-soft);border-color:transparent;color:var(--teal)}
.d-files li.on::before{background:var(--teal)}
.d-prog{display:flex;align-items:center;gap:var(--s2);font-size:12.5px;font-weight:800;color:var(--ink-2);min-width:150px;flex:1;justify-content:flex-end}
.d-bar{width:90px;height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;flex:none}
.d-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),#3C8A7C);transition:width .4s}
/* hidden states while the demo runs */
.demo:not(.s-plan):not(.show-all) .d-plan{opacity:.35}
.demo:not(.show-all) .d-plan li:not(.on){opacity:0;transform:translateX(-6px)}
.demo:not(.s-cover):not(.show-all) .d-cover{opacity:0;transform:translateY(10px) scale(.96)}
.demo:not(.show-all) .d-page:not(.on){opacity:0;transform:translateY(8px)}
@media (max-width:480px){.demo{padding:var(--s3)}.d-plan ol{font-size:13px}.d-prog{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}

/* ---------- tables stack into labelled rows on phones */
@media (max-width:599px){
  .costs table{min-width:0}
  .tbl:not(.keep) table{min-width:0!important}
  .tbl:not(.keep) thead{position:absolute;left:-9999px}
  .tbl:not(.keep) tbody tr{display:block;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule)}
  .tbl:not(.keep) tbody tr:last-child{border-bottom:0}
  .tbl:not(.keep) tbody th{display:block;border:0;padding:0 0 var(--s2);font-size:16px}
  .tbl:not(.keep) tbody td{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:var(--s3);border:0;padding:4px 0;text-align:left;white-space:normal;background:none!important;font-size:15.5px}
  .tbl:not(.keep) tbody td::before{content:attr(data-label);font:800 12px/1.5 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);padding-top:2px}
  .tbl:not(.keep) caption{border-top:1px solid var(--rule)}
}
.toc ol{list-style:none;padding-left:0}
.prose summary h3{margin-top:0;font-size:19px}
.prose details{margin-top:0}
.prose details p{margin-top:var(--s3)}
.byline span+span::before{content:none}
.byline{gap:var(--s1) var(--s5)}