/* TrueNorth EA: ported from reference/site/index.html. Base reset (first inline <style>). */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: editorial bands that alternate paper / basalt / cedar / sage; narrow text columns, bold color "cards" carry the fun, one hand-drawn moment up top. */
:root{
  --paper:#faf7f2; --mist:#e9ece4; --sage:#a7b29a; --slate:#46525a; --ink-soft:#2e363b;
  --cedar:#6b3a28; --basalt:#1e2021; --berry:#ee6f7c; --berry-deep:#c24452;
  --display:var(--gh-font-heading, "Cedarwood", Georgia, "Times New Roman", serif);
  --sans:var(--gh-font-body, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);
  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:96px;
  --r-sm:4px; --r-md:12px; --r-pill:999px;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
@font-face{font-family:"Cedarwood";src:url("../fonts/Cedarwood-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cedarwood";src:url("../fonts/Cedarwood-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cedarwood";src:url("../fonts/Cedarwood-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--basalt);font-family:var(--sans);font-size:18px;line-height:30px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
p{margin:0}
a{color:var(--cedar)}
:focus-visible{outline:3px solid var(--berry-deep);outline-offset:3px;border-radius:4px}

.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.band{padding-block:var(--s5)}
@media (max-width:720px){.band{padding-block:56px}}

/* type */
.label{font-family:var(--sans);font-weight:600;font-size:13px;line-height:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.h-display,.h1,.h2{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0}
.h-display{font-size:clamp(46px,7.2vw,84px);line-height:1.22;letter-spacing:-.01em;color:var(--cedar)}
.h1{font-size:clamp(34px,4.4vw,52px);line-height:1.26;color:var(--cedar)}
.h2{font-size:clamp(24px,2.6vw,30px);line-height:1.3;color:var(--cedar)}
em.acc{font-style:italic;font-weight:400}
.h3{font-family:var(--sans);font-weight:600;font-size:20px;line-height:28px;margin:0}
.lede{font-size:20px;line-height:32px}
.prose{display:grid;gap:var(--s2);max-width:62ch}
.small{font-size:14px;line-height:22px}
.on-dark .label{color:var(--sage)}
.on-dark .h1,.on-dark .h2{color:var(--paper)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--sans);text-decoration:none;padding:17px 28px;border-radius:var(--r-pill);background:var(--berry);color:var(--basalt);border:0;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--berry-deep);color:var(--paper);transform:translateY(-2px)}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-sm{padding:12px 20px;font-size:15px}
.btn-ghost{background:transparent;color:var(--cedar);box-shadow:inset 0 0 0 1.5px var(--cedar)}
.btn-ghost:hover{background:var(--cedar);color:var(--paper)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--mist)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-block:14px}
.logo{display:block;width:clamp(160px,18vw,200px);flex:none}
.logo svg{display:block;width:100%;height:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a.link{color:var(--basalt);text-decoration:none;font-weight:600;font-size:15px}
.nav a.link:hover{color:var(--cedar);text-decoration:underline;text-underline-offset:4px}
@media (max-width:820px){.nav a.link{display:none}}

/* hero */
.hero{padding-block:56px var(--s5)}
.hero-top{display:grid;justify-items:center;text-align:center;gap:14px;margin-bottom:40px}
.hero-top .h-display{max-width:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s4);align-items:center}
.hero-copy{display:grid;gap:22px;min-width:0}
.hero-copy .h-display{margin-top:-4px}
.hero-visual{display:grid;gap:20px;min-width:0}
.hero-visual .week{justify-self:end;margin-right:-8px}
.hero-mark{width:150px;height:auto;display:block;margin-bottom:-6px}
.hero-mark path.ridge,.hero-mark path.snow{stroke:var(--slate)}
.hero-mark path.star{fill:var(--berry-deep)}
.berry-word{color:var(--berry)}
.hero .lede{color:var(--basalt);max-width:58ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) 22px;margin-top:6px}
.hero-cta .note{font-size:14px;line-height:22px;color:var(--slate)}

.photo{position:relative;aspect-ratio:5/4;max-width:100%;border-radius:var(--r-md);overflow:hidden;background:var(--mist)}
.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.photo-band{display:block;width:100%;height:clamp(260px,40vw,560px);object-fit:cover;object-position:55% 0%;max-width:100%}
@media (max-width:600px){.photo-band{object-position:58% 30%}}
.sketch g.ln{fill:none;stroke:var(--slate);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sketch .soft{stroke:var(--sage)}
.sketch .specs{stroke:var(--basalt);stroke-width:2.8}
.js .sketch.anim.go .draw{animation:draw 1s cubic-bezier(.5,.1,.3,1) var(--d,0s) forwards}
.js .sketch.anim.go .pop{animation:pop .45s var(--d,0s) cubic-bezier(.3,1.6,.5,1) forwards}
.js .sketch.anim.go .steam{animation:steam 2.8s ease-in-out 4.4s infinite}
.js .sketch.anim.go .steam.s2{animation-delay:5.8s}
.js .sketch.anim.go .giggle{animation:giggle 2.6s ease-in-out 4s infinite}
.js .sketch.anim.go .laugh{animation:pop .4s var(--d,0s) forwards, laugh 1.3s ease-in-out 4.4s infinite}
.js .sketch.anim .laugh{opacity:0}
.giggle{transform-box:view-box;transform-origin:150px 152px}
@keyframes giggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-2.5deg)}40%{transform:rotate(1.5deg)}60%{transform:rotate(-1.5deg)}}
@keyframes laugh{0%,100%{opacity:1;transform:none}50%{opacity:.35;transform:translateX(2px)}}
.week{position:relative;justify-self:center;width:min(380px,100%);background:var(--sage);color:var(--basalt);border-radius:var(--r-md);padding:24px 24px 20px;transform:rotate(-1.5deg)}
.week .label{color:var(--basalt);opacity:.8}
.week h2{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.3;margin:4px 0 14px;color:var(--basalt)}
.week ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.week li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:16px;line-height:24px}
.week li b{font-weight:600}
.tick{width:22px;height:22px;border-radius:6px;background:var(--paper);display:grid;place-items:center;margin-top:0}
.tick svg{width:14px;height:14px}
.tick path{fill:none;stroke:var(--cedar);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.week li.waiting{margin-top:6px;padding-top:12px;border-top:1.5px dashed rgba(30,32,33,.35)}
.week li.waiting .tick{background:var(--berry)}
.week li.waiting .dot{width:8px;height:8px;border-radius:50%;background:var(--basalt)}
.sig{display:block;margin-top:14px;font-family:var(--display);font-style:italic;font-size:24px;line-height:1.3;color:var(--cedar)}
@media (max-width:920px){
  .hero-grid{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}
  .hero-visual .week{justify-self:center;margin-right:0}
}

/* problem */
.problem{background:var(--basalt);color:var(--paper)}
.problem.band{padding-top:56px}
.problem-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s4);align-items:start}
.problem-head{position:sticky;top:110px;display:grid;gap:18px}
.problem .prose p{color:#e6e2da}
.thoughts{position:relative;height:184px;margin-bottom:var(--s3);overflow:hidden}
.thoughts span{position:absolute;white-space:nowrap;font-size:15px;line-height:20px;padding:11px 18px;border-radius:22px 22px 22px 18px;border:1.5px solid rgba(250,247,242,.45);background:rgba(250,247,242,.06);color:var(--paper);opacity:0;animation:thought 18s ease-in-out infinite}
.thoughts span::before,.thoughts span::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(250,247,242,.45);background:rgba(250,247,242,.06)}
.thoughts span::before{left:20px;bottom:-14px;width:11px;height:11px}
.thoughts span::after{left:11px;bottom:-24px;width:7px;height:7px}
.thoughts span.hot{background:var(--berry);color:var(--basalt);border-color:var(--berry)}
.thoughts span.hot::before,.thoughts span.hot::after{background:var(--berry);border-color:var(--berry)}
@keyframes thought{0%{opacity:0;transform:translateY(8px)}5%,15%{opacity:1;transform:none}21%,100%{opacity:0;transform:translateY(-8px)}}
@media (max-width:720px){.thoughts{height:250px}.thoughts span{font-size:14px;white-space:normal;max-width:min(260px,80%)}.thoughts span:nth-child(1){left:0%!important;right:auto!important;top:4%!important}.thoughts span:nth-child(2){left:18%!important;right:auto!important;top:40%!important}.thoughts span:nth-child(3){left:0%!important;right:auto!important;top:62%!important}.thoughts span:nth-child(4){left:16%!important;right:auto!important;top:2%!important}.thoughts span:nth-child(5){left:2%!important;right:auto!important;top:36%!important}.thoughts span:nth-child(6){left:40%!important;right:auto!important;top:64%!important}.thoughts span:nth-child(7){left:14%!important;right:auto!important;top:8%!important}.thoughts span:nth-child(8){left:6%!important;right:auto!important;top:58%!important}}
.pull{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.8vw,34px);line-height:1.32;color:var(--paper);padding:18px 0;max-width:22ch}
.pull em{font-style:italic;font-weight:400;color:var(--berry)}
.problem .turn{color:var(--paper)!important;font-weight:600}
@media (max-width:900px){.problem-grid{grid-template-columns:1fr}.problem-head{position:static}}

/* what you get */
.get-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:end;margin-bottom:var(--s4)}
.get-head .h1{font-size:clamp(40px,5.4vw,68px)}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.facts span{font-size:14px;line-height:20px;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);background:var(--mist);color:var(--basalt)}
.facts span.b{background:var(--berry)}
.intro-list{font-weight:600;color:var(--cedar);margin:var(--s3) 0 var(--s2)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{border-radius:var(--r-md);padding:26px 26px 28px;display:grid;align-content:start;gap:10px;background:transparent;border:2px solid var(--basalt);color:var(--basalt);position:relative;transition:transform .25s}
.card:hover{transform:translateY(-3px)}
.card .ico{width:44px;height:44px;display:block}
.card .h3{font-size:19px;line-height:27px}
.card p{font-size:17px;line-height:28px}
.card img{width:44px;height:44px}
.card.t-berry{border-color:var(--cedar);background:rgba(107,58,40,.13)}
.card.t-sage{border-color:var(--sage);background:rgba(167,178,154,.22)}
.card.t-cedar{border-color:rgba(107,58,40,.55);background:rgba(107,58,40,.07)}
.needle{transform-box:view-box;transform-origin:32px 32px;animation:sense 5s ease-in-out infinite}
@keyframes sense{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}32%{transform:rotate(11deg)}48%{transform:rotate(-6deg)}62%{transform:rotate(3deg)}75%{transform:rotate(0)}}
.card p{color:var(--ink-soft)}
.sail{position:relative;height:50px;margin-bottom:2px}
.wavewrap{position:absolute;left:0;right:0;bottom:0;height:8px;overflow:hidden}
.sail .boat{position:absolute;left:18px;bottom:5px;width:50px;height:44px;overflow:visible}
.sail .waves{position:absolute;left:0;bottom:0;width:600px;height:8px;max-width:none;animation:waves 14s linear infinite}
.beacon{animation:beacon 3.2s ease-in-out infinite}
.halo{transform-box:fill-box;transform-origin:center;opacity:0;animation:halo 3.2s ease-out infinite}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.get-head{grid-template-columns:1fr;gap:var(--s3)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* proof */
.proof{background:var(--cedar);color:var(--paper)}
.proof-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s4);align-items:center}
.proof .prose p{color:#f1e9e2}
.badge{background:var(--paper);color:var(--basalt);border-radius:var(--r-md);overflow:hidden;max-width:360px;width:100%;transform:rotate(-3deg);justify-self:center;position:relative}
.badge::before{content:"";position:absolute;top:12px;left:50%;width:46px;height:8px;margin-left:-23px;border-radius:8px;background:var(--cedar);opacity:.25}
.badge-top{background:var(--berry);padding:34px 24px 16px;text-align:center}
.badge-top .hello{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.25;color:var(--basalt)}
.badge-top .sub{font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.badge-body{padding:22px 26px 26px;display:grid;gap:14px;text-align:center}
.badge-name{font-family:var(--display);font-style:italic;font-size:56px;line-height:1.25;color:var(--cedar)}
.badge-rows{display:grid;gap:8px;text-align:left;border-top:1.5px dashed var(--sage);padding-top:16px}
.badge-rows div{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:20px}
.badge-rows dt{color:var(--slate);margin:0}
.badge-rows dd{margin:0;font-weight:600;text-align:right}
.badge-rows dl{margin:0}
.proof .mark-rev{width:84px;height:auto;margin-bottom:6px}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr}.badge{max-width:320px}}

/* steps (new copy) */
.steps{background:var(--mist)}
.steps .step p{color:var(--ink-soft)}
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:var(--s3);counter-reset:s}
.step{border-top:2px solid var(--basalt);padding-top:24px;display:grid;gap:10px;align-content:start}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--berry);color:var(--basalt);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:24px;line-height:1}
.step p{font-size:17px;line-height:28px;color:var(--ink-soft)}
@media (max-width:820px){.steps-grid{grid-template-columns:1fr}}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--s4);align-items:start}
.faq-head{display:grid;gap:18px;position:sticky;top:110px}
.faq-head .cup{width:72px;height:72px;display:block}
.qs{display:grid;gap:12px}
.qs{gap:0!important;border-top:2px solid var(--basalt)}
details{border-bottom:1.5px solid var(--sage)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px 0;font-weight:600;font-size:18px;line-height:26px;color:var(--basalt)}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:32px;height:32px;border-radius:50%;background:var(--mist);display:grid;place-items:center;transition:transform .25s,background .2s}
details[open] summary .pm{transform:rotate(45deg);background:var(--berry)}
summary .pm svg{width:14px;height:14px}
summary .pm path{stroke:var(--basalt);stroke-width:2.4;stroke-linecap:round}
details .a{padding:0 0 24px;max-width:62ch;color:var(--ink-soft)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-head{position:static}}

/* guarantee */
.guarantee{background:var(--sage)}
.guarantee .h1{color:var(--basalt);max-width:20ch}
.guarantee .label{color:var(--basalt)}
.g-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:var(--s3) 0}
.g-card{border-top:2px solid var(--basalt);padding-top:22px;display:grid;gap:12px;align-content:start}
.g-card img,.g-card .gico{width:52px;height:52px;display:block}
.g-card p{font-size:17px;line-height:28px}
.free{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;border:2px solid var(--basalt);border-radius:var(--r-md);padding:24px 28px;background:rgba(250,247,242,.35)}
.free p{max-width:56ch;font-size:18px;line-height:28px}
.free b{font-weight:600}
@media (max-width:900px){.g-grid{grid-template-columns:1fr}}

/* close */
.close{text-align:left}
.close-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.close .h-display{font-size:clamp(44px,6vw,76px)}
.circled{position:relative;display:inline-block;white-space:nowrap;font-weight:600}
.circled svg{position:absolute;left:-12%;top:-38%;width:124%;height:176%;overflow:visible;pointer-events:none}
.circled path{fill:none;stroke:var(--berry);stroke-width:3;stroke-linecap:round}
.start{margin-top:var(--s4);border-radius:var(--r-md);border:2px solid var(--cedar);padding:var(--s3);display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.start .after{max-width:62ch}
#start{scroll-margin-top:96px}
.form-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
.form-wrap.open{grid-template-rows:1fr}
.form-inner{overflow:hidden;min-height:0}
.form-inner > .form-body{max-width:720px;padding-top:var(--s3);margin-top:var(--s3);border-top:1.5px dashed var(--sage)}
.form-toggle .ico-x{display:none}
.form-toggle[aria-expanded="true"] .ico-x{display:block}
.form-toggle[aria-expanded="true"] .ico-arrow{display:none}
@media (prefers-reduced-motion:reduce){.form-wrap{transition:none}}
.start .after{display:grid;gap:12px}
.slot{border:2px dashed var(--sage);border-radius:var(--r-md);min-height:220px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--slate);background:var(--paper)}
.slot b{display:block;color:var(--basalt);font-weight:600}
@media (max-width:900px){.close-grid,.start{grid-template-columns:1fr}}

/* footer */
footer{background:var(--basalt);color:var(--paper)}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;padding-block:44px}
footer .logo{width:190px}
footer p{color:#cfcac2;font-size:14px;line-height:22px}
.fdoodles{display:flex;gap:14px}
.fdoodles img{width:34px;height:34px}

/* hand-drawn motion */
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.js .anim .draw{stroke-dashoffset:1}
.js .anim.go .draw{animation:draw 1.4s cubic-bezier(.6,.1,.3,1) forwards}
.js .anim.go .d2{animation-delay:.9s;animation-duration:.6s}
.js .anim .pop{opacity:0;transform:scale(.3);transform-origin:center;transform-box:fill-box}
.js .anim.go .pop{animation:pop .5s 1.25s cubic-bezier(.3,1.6,.5,1) forwards}
.js .week li{opacity:1}
.js .week.anim li{opacity:0;transform:translateX(-8px)}
.js .week.anim.go li{animation:inl .45s ease-out forwards}
.js .week.anim.go li:nth-child(1){animation-delay:1.0s}
.js .week.anim.go li:nth-child(2){animation-delay:1.25s}
.js .week.anim.go li:nth-child(3){animation-delay:1.5s}
.js .week.anim.go li:nth-child(4){animation-delay:1.75s}
.js .week.anim .tick path{stroke-dasharray:1;stroke-dashoffset:1}
.js .week.anim.go li:nth-child(1) .tick path{animation:draw .35s 1.25s forwards}
.js .week.anim.go li:nth-child(2) .tick path{animation:draw .35s 1.5s forwards}
.js .week.anim.go li:nth-child(3) .tick path{animation:draw .35s 1.75s forwards}
.js .circled.anim.go .draw{animation-duration:1.1s}
.doodle{display:inline-block}
.js .doodle.anim > *{opacity:0;transform:translateY(6px) scale(.94)}
.js .doodle.anim.go > *{animation:settle .9s cubic-bezier(.3,1.4,.5,1) forwards}
.doodle:hover > *{animation:nudge .6s ease-in-out}
.js .anim.go .drop{animation:fall 1.8s ease-in infinite}
.js .anim.go .drop:nth-of-type(2){animation-delay:.6s}
.js .anim.go .drop:nth-of-type(3){animation-delay:1.2s}
.js .anim.go .drop.b{animation-delay:.9s}
.js .anim.go .steam{animation:steam 2.8s ease-in-out infinite}
.js .anim.go .steam.s2{animation-delay:1.4s}
.drop,.steam{transform-box:fill-box;transform-origin:center}
@keyframes settle{0%{opacity:0;transform:translateY(6px) scale(.94)}70%{opacity:1;transform:translateY(-1px) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes nudge{30%{transform:rotate(-6deg)}65%{transform:rotate(4deg)}}
@keyframes waves{to{transform:translateX(-300px)}}
@keyframes beacon{0%,100%{fill:#C24452}45%,55%{fill:#EE6F7C}75%{fill:#8f3a43}}
@keyframes halo{0%,35%{opacity:0;transform:scale(.6)}50%{opacity:.55;transform:scale(1.4)}80%,100%{opacity:0;transform:scale(2.4)}}
@keyframes fall{0%{opacity:0;transform:translateY(-5px)}25%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
@keyframes steam{0%{opacity:.2;transform:translateY(3px)}40%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes inl{to{opacity:1;transform:none}}
.star-twinkle{animation:tw 3.2s 2.4s ease-in-out infinite}
@keyframes tw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(12deg)}}
@media (prefers-reduced-motion:reduce){
  .thoughts{height:auto;display:flex;flex-wrap:wrap;gap:30px 14px;padding-bottom:24px}.thoughts span{position:relative;left:auto!important;top:auto!important}
  html{scroll-behavior:auto}
  .js .anim .draw,.js .week.anim .tick path{stroke-dashoffset:0!important;animation:none!important}
  .js .anim .pop,.js .week.anim li,.js .doodle.anim > *,.sail .waves,.beacon,.needle,.thoughts span,.halo,.drop,.steam,.giggle,.laugh,.doodle > *{opacity:1!important;transform:none!important;animation:none!important}
  .star-twinkle{animation:none}
  .card:hover,.btn:hover{transform:none}
}
@media (max-width:520px){
  .top .wrap{padding-block:10px}
  .top .logo{width:150px}
  .nav .btn-sm{padding:10px 16px;font-size:14px;white-space:nowrap}
  .badge{transform:rotate(-1.5deg)}
  .start{padding:22px 20px}
  .free{padding:22px 20px}
  .card{padding:22px 22px 24px}
}
@media (max-width:360px){.thoughts span{font-size:13px;padding:10px 14px}.nav .btn-sm{padding:9px 13px;font-size:13px}.top .logo{width:132px}}

/* ==========================================================================
   Ghost additions (not in the reference page): blog, posts, pages, errors and
   Koenig editor cards. Built only from the tokens above. No shadows, no dark mode.
   ========================================================================== */

/* blog list */
.blog-head{padding-bottom:var(--s3)}
.blog-head-inner,.error-inner{display:grid;gap:14px;justify-items:start}
.blog-head-inner > *,.error-inner > *{max-width:760px}
.blog-head .lede,.error-page .lede{max-width:58ch;color:var(--basalt)}
.blog-doodle{width:72px;height:72px;display:block;margin-bottom:4px}
.blog-list{padding-bottom:var(--s5)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}}
.post-card .post-card-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block;margin-bottom:6px}
.post-card .label{color:var(--slate)}
.post-card-title{font-size:20px;line-height:28px}
.post-card-title a{color:var(--basalt);text-decoration:none}
.post-card-title a::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.post-card:hover .post-card-title a{color:var(--cedar);text-decoration:underline;text-underline-offset:4px}
.post-card .post-card-excerpt{font-size:17px;line-height:28px}
.post-card .post-card-meta{font-size:14px;line-height:22px;color:var(--slate);margin-top:4px}
.blog-empty{display:grid;gap:12px;justify-items:start;max-width:62ch;border:2px dashed var(--sage);border-radius:var(--r-md);padding:var(--s3)}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s4)}
.pagination .page-number{color:var(--slate)}

/* post and page layout: a 65ch text column that wide and full-width cards can break out of */
.canvas{
  --main:min(65ch, calc(100% - var(--gutter-l) - var(--gutter-r)));
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter-l),1fr)
    [wide-start] minmax(0,160px)
    [main-start] var(--main) [main-end]
    minmax(0,160px) [wide-end]
    minmax(var(--gutter-r),1fr) [full-end];
}
.canvas > *{grid-column:main-start/main-end;min-width:0}
.article-main{padding-block:56px var(--s5)}
.article-head{row-gap:14px;margin-bottom:var(--s3)}
.article-head .label a{color:inherit;text-decoration:none}
.article-head .label a:hover{color:var(--cedar);text-decoration:underline;text-underline-offset:3px}
.article-title{line-height:1.26}
.article-excerpt{color:var(--basalt)}
.article-meta{font-size:15px;line-height:22px;color:var(--slate)}
.article-image{margin:0 0 var(--s3)}
.article-image > *{grid-column:wide-start/wide-end}
.article-image img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.article-foot{margin-top:var(--s4)}
.article-image figcaption,.gh-content figcaption{margin-top:10px;font-size:14px;line-height:22px;color:var(--slate);text-align:center}

/* post content: Hanken Grotesk 18/30, cedar underlined links */
.gh-content{font-size:18px;line-height:30px;color:var(--basalt)}
.gh-content > * + *{margin-top:24px}
.gh-content > :is(h2,h3,h4) + *{margin-top:12px}
.gh-content a{color:var(--cedar);text-decoration:underline;text-underline-offset:3px}
.gh-content a:hover{color:var(--berry-deep)}
.gh-content > h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,30px);line-height:1.3;color:var(--cedar);margin-top:56px}
.gh-content > h3{font-family:var(--sans);font-weight:600;font-size:20px;line-height:28px;margin-top:40px}
.gh-content > h4{font-family:var(--sans);font-weight:600;font-size:18px;line-height:28px;margin-top:32px}
.gh-content :is(ul,ol){padding-left:1.3em;margin-bottom:0}
.gh-content li + li{margin-top:8px}
.gh-content li::marker{color:var(--cedar)}
.gh-content strong{font-weight:600}
.gh-content hr{border:0;border-top:1.5px dashed var(--sage);margin-block:48px}
.gh-content blockquote:not([class]){margin-inline:0;padding-left:22px;border-left:3px solid var(--sage);font-style:italic}
.gh-content blockquote.kg-blockquote-alt{margin-inline:0;font-family:var(--display);font-style:italic;font-size:clamp(24px,2.6vw,30px);line-height:1.32;color:var(--cedar);text-align:center;padding-block:8px}
.gh-content code{font-size:.88em;background:var(--mist);border-radius:var(--r-sm);padding:2px 6px}
.gh-content pre{background:var(--basalt);color:var(--paper);border-radius:var(--r-md);padding:20px 22px;overflow-x:auto;font-size:15px;line-height:24px}
.gh-content pre code{background:none;padding:0;font-size:inherit}
.gh-content table{border-collapse:collapse;width:100%;font-size:16px;line-height:24px;display:block;overflow-x:auto}
.gh-content th,.gh-content td{text-align:left;padding:10px 12px;border-bottom:1.5px solid var(--sage)}
.gh-content th{font-weight:600;border-bottom:2px solid var(--basalt)}
.gh-content img{height:auto}
.gh-content > img,.gh-content > iframe{max-width:100%}

/* Koenig: card widths */
.gh-content .kg-width-wide{grid-column:wide-start/wide-end}
.gh-content .kg-width-full{grid-column:full-start/full-end}
.kg-image-card{margin-inline:0}
.kg-image-card img,.kg-image{display:block;margin-inline:auto;border-radius:var(--r-md)}
.kg-width-full img{width:100%;border-radius:0}
.kg-width-full figcaption{padding-inline:var(--gutter-l) var(--gutter-r)}
.kg-embed-card{display:flex;flex-direction:column;align-items:center;margin-inline:0}
.kg-embed-card iframe{max-width:100%;border-radius:var(--r-md)}

/* Koenig: gallery */
.kg-gallery-card{margin-inline:0}
.kg-gallery-container{display:flex;flex-direction:column;gap:12px}
.kg-gallery-row{display:flex;flex-direction:row;justify-content:center;gap:12px}
.kg-gallery-image img{display:block;margin:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}

/* Koenig: bookmark */
.kg-bookmark-card{margin-inline:0}
.kg-bookmark-card a.kg-bookmark-container{border:2px solid var(--basalt);border-radius:var(--r-md);box-shadow:none;background:transparent;color:var(--basalt);text-decoration:none;overflow:hidden}
.kg-bookmark-card a.kg-bookmark-container:hover{border-color:var(--cedar)}
.kg-bookmark-title{font-family:var(--sans);font-weight:600;font-size:18px;line-height:26px;color:var(--basalt)}
.kg-bookmark-description{font-size:15px;line-height:22px;color:var(--ink-soft)}
.kg-bookmark-metadata{font-size:14px;color:var(--slate)}
.kg-bookmark-thumbnail img{border-radius:0}

/* Koenig: callout, mapped onto brand colors */
.kg-callout-card{border-radius:var(--r-md);padding:22px 26px;background:var(--mist);color:var(--basalt)}
.kg-callout-card.kg-callout-card-grey,.kg-callout-card.kg-callout-card-white,.kg-callout-card.kg-callout-card-blue,.kg-callout-card.kg-callout-card-purple{background:var(--mist)}
.kg-callout-card.kg-callout-card-green,.kg-callout-card.kg-callout-card-yellow{background:rgba(167,178,154,.32)}
.kg-callout-card.kg-callout-card-red,.kg-callout-card.kg-callout-card-pink{background:rgba(107,58,40,.10)}
.kg-callout-card.kg-callout-card-accent{background:var(--cedar);color:var(--paper)}
.kg-callout-card.kg-callout-card-accent a{color:var(--paper)}
.kg-callout-text{font-size:18px;line-height:30px}

/* Koenig: buttons (salmonberry pills, basalt text) */
.kg-button-card{margin-inline:0}
.kg-button-card a.kg-btn,.kg-product-card a.kg-product-card-button,.kg-header-card a.kg-header-card-button,.kg-file-card a.kg-file-card-container{font-family:var(--sans)}
.kg-button-card a.kg-btn,.kg-button-card a.kg-btn-accent,.kg-product-card a.kg-product-card-button,.kg-header-card a.kg-header-card-button{display:inline-flex;align-items:center;font:600 16px/1 var(--sans);padding:17px 28px;height:auto;border-radius:var(--r-pill);background:var(--berry);color:var(--basalt);text-decoration:none;border:0;transition:background .2s,color .2s,transform .2s}
.kg-button-card a.kg-btn:hover,.kg-button-card a.kg-btn-accent:hover,.kg-product-card a.kg-product-card-button:hover,.kg-header-card a.kg-header-card-button:hover{background:var(--berry-deep);color:var(--paper);opacity:1;transform:translateY(-2px)}

/* Koenig: toggle (matches the homepage FAQ) */
.kg-toggle-card{border:0;border-top:2px solid var(--basalt);border-bottom:1.5px solid var(--sage);border-radius:0;padding:4px 0;background:transparent;box-shadow:none}
.kg-toggle-card + .kg-toggle-card{border-top:0;margin-top:0}
.kg-toggle-heading-text{font-family:var(--sans);font-weight:600;font-size:18px;line-height:26px;color:var(--basalt)}
.kg-toggle-card-icon{color:var(--basalt)}
.kg-toggle-content{color:var(--ink-soft)}

/* Koenig: header, product, file, audio, video */
.kg-header-card{border-radius:var(--r-md)}
.kg-header-card h2.kg-header-card-header{font-family:var(--display);font-weight:700;line-height:1.26}
.kg-product-card-container{border:2px solid var(--basalt);border-radius:var(--r-md);box-shadow:none;background:transparent}
.kg-product-card-title{font-family:var(--sans);font-weight:600}
.kg-file-card-container{border:2px solid var(--basalt);border-radius:var(--r-md);color:var(--basalt)}
.kg-audio-card{border:2px solid var(--basalt);border-radius:var(--r-md);box-shadow:none}
.kg-video-card video,.kg-video-card .kg-video-container{border-radius:var(--r-md)}

/* footer links (Ghost secondary navigation) */
footer .fnav{flex-basis:100%;border-top:1px solid rgba(250,247,242,.15);padding-top:20px}
.fnav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.fnav-list a{color:var(--paper);font-size:14px;line-height:22px;text-underline-offset:3px}
.fnav-list a:hover{color:var(--berry)}

/* long legal pages: anchored sections clear the sticky header */
.gh-content [id]{scroll-margin-top:96px}
.gh-content ul.toc{list-style:none;padding-left:0}
.gh-content .small{font-size:14px;line-height:22px;color:var(--slate)}

/* errors */
.error-page{min-height:60vh}
.error-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:10px}

@media (prefers-reduced-motion:reduce){
  .post-card:hover,.kg-button-card a.kg-btn:hover{transform:none}
}