html{scroll-behavior:smooth}
body{margin:0;background:#f6f3ec;color:#1c1b18;font-family:Outfit,system-ui,sans-serif}
a{color:#3e5c4b}a:hover{color:#2c4436}
details summary{list-style:none;cursor:pointer}details summary::-webkit-details-marker{display:none}
details[open] .faq-a{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes stamp{0%,55%{opacity:0;transform:scale(1.25) rotate(-8deg)}68%,100%{opacity:1;transform:scale(1) rotate(-6deg)}}
@keyframes mA{0%,2%{opacity:0;transform:translateY(12px)}7%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes mDots{0%,10%{opacity:0}15%,30%{opacity:1}35%,100%{opacity:0}}
@keyframes mB{0%,33%{opacity:0;transform:translateY(12px)}39%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes mC{0%,52%{opacity:0;transform:translateY(12px)}58%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes dotPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes glow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.15)}}
@keyframes draw{0%{stroke-dashoffset:1}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes caret{0%,45%{opacity:1}55%,100%{opacity:0}}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 24px rgba(62,92,75,.28)}50%{box-shadow:0 10px 36px rgba(62,92,75,.46)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
details[open] .faq-plus{transform:rotate(45deg)}
details[open] .faq-body{animation:fadeUp .35s ease both}

/* hover states lifted from style-hover attributes */
.h1:hover{color:#1c1b18}
.h2:hover{background:#2c4436;transform:translateY(-2px)}
.h3:hover{background:#3e5c4b;color:#f6f3ec}
.h4:hover{background:#a8c2b3;color:#1d2721;transform:translateY(-2px)}
.h5:hover{transform:rotate(-4deg) translateY(-6px)}
.h6:hover{transform:rotate(3deg) translateY(-6px)}
.h7:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(28,27,24,.12)}
.h8:hover{background:#2c4436;color:#f6f3ec;transform:translateY(-2px)}
.h9:hover{border-color:#3e5c4b;color:#3e5c4b}
.h10:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,27,24,.1)}
.h11:hover{background:#0f0f0d;transform:translateY(-2px)}

/* ---- scroll reveals (hidden state applied by JS so content survives no-JS) ---- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* looping artifact animations are paused inline in the markup and resumed by app.js */

/* ---- responsive behaviours the design calls out ---- */
@media (max-width:599px){[data-navlink]{display:none}}
@media (max-width:979px){
  #jsvg{display:none}
  [data-jmid]{margin-top:0 !important}
}

/* ---- application pills: real radios, styled as the design's pills ---- */
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.045)}100%{transform:scale(1)}}
.pill{display:inline-flex}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{
  display:inline-block;padding:12px 18px;border-radius:99px;font-size:0.9375rem;
  cursor:pointer;user-select:none;transition:all .2s;
  border:1px solid rgba(28,27,24,.18);background:#fff;color:#1c1b18;
}
.pill span:hover{border-color:#3e5c4b}
.pill input:checked + span{border-color:#3e5c4b;background:#3e5c4b;color:#f6f3ec;animation:pop .25s ease}
.pill input:focus-visible + span{outline:2px solid #3e5c4b;outline-offset:3px}

/* ---- multi-step: only applied when JS is present, so no-JS gets one long form ---- */
.js .step{display:none}
.js .step.is-active{display:block;animation:fadeUp .5s ease both}

/* ---- forms: 16px minimum prevents iOS focus zoom ---- */
input,textarea,select,button{font-family:inherit;font-size:1rem}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #3e5c4b;outline-offset:3px}

/* ---- reduced motion: kill reveals, loops and ken burns ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
}

/* hover states from the pass-2 pages */
.j1:hover{background:#3e5c4b;color:#f6f3ec}
.j2:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,27,24,.1)}
.j3:hover{background:#a8c2b3;color:#1d2721;transform:translateY(-2px)}
.j4:hover{background:#a8c2b3;color:#1d2721}

/* .lift — card hover used by the (not-yet-live) pricing band partial. Harmless
   if unused; keeps the partial self-contained so it renders correctly the
   moment it's pasted into a page. See /partials/pricing-band.html. */
.lift{transition:transform .3s,box-shadow .3s}
.lift:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,27,24,.1)}

/* hover states from the Postlaunch homepage */
.p1:hover{background:#3e5c4b;color:#f6f3ec}
.p2:hover{background:#2c4436;color:#f6f3ec;transform:translateY(-2px)}
.p3:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,27,24,.1)}
.p4:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(29,39,33,.4);color:#f0ede3}
.p5:hover{color:#a8c2b3}
.p6:hover{color:#2c4436}
.p7:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(28,27,24,.12);color:#1c1b18}
.p8:hover{background:#a8c2b3;color:#1d2721;transform:translateY(-2px)}

/* hover states from the Maya story page */
.s1:hover{background:#3e5c4b;color:#f6f3ec}
.s2:hover{background:#a8c2b3;color:#1d2721;transform:translateY(-2px)}