/* ELVT free guide page. Brand: Charcoal #1F1F1F, Lime #D6F25A (locked 2026-09-29). Fonts: Inter + Space Grotesk (self-hosted). */
@font-face{font-family:"Inter";src:url(assets/fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(assets/fonts/space-grotesk-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --charcoal:#1F1F1F; --charcoal-2:#262626; --lime:#D6F25A; --lime-soft:#F0FBB8;
  --cream:#F5F3EC; --text:#E8E6E1; --muted:#A3A8AF; --line:rgba(214,242,90,.22);
  --radius:.75rem; --wrap:42rem;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--charcoal);color:var(--text);font:400 1.0625rem/1.7 var(--sans)}
img,svg{display:block;max-width:100%}
a{color:var(--lime);text-underline-offset:.2em}
a:hover{color:var(--lime-soft)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--charcoal);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--cream);text-decoration:none;font:600 1rem/1 var(--display);letter-spacing:.14em}
.brand img{width:2rem;height:auto}
.top nav a{color:var(--muted);text-decoration:none;font-size:.9rem}
.top nav a:hover{color:var(--lime)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--cream);margin:0 0 .75rem}
h1,h2,h3{text-wrap:balance}
.faq summary,.more strong,.lead{text-wrap:pretty}
.grad{background-image:linear-gradient(90deg,var(--lime-soft) 0%,var(--lime) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--lime)}
h1{font-size:clamp(2.75rem,12vw,4.75rem);line-height:1}
h2{font-size:clamp(1.65rem,6vw,2.25rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1rem}
.eyebrow{font:600 .75rem/1.4 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin:0 0 .75rem}
.lead{font-size:1.15rem;color:var(--cream)}
.muted{color:var(--muted)}
.small{font-size:.9rem;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--lime);width:min(11.5rem,46%);margin:1.25rem 0 1.5rem}

/* sections */
section{padding:3.25rem 0;border-top:1px solid rgba(255,255,255,.06)}
section.hero{border-top:0;padding:2rem 0 3rem;position:relative;overflow-x:clip} /* the glow bleeds past the right edge on purpose; clip (not hidden) so phones never scroll sideways and the glow can still rise above the hero */

/* hero breath glow + wave */
.hero-art{position:absolute;inset:-4rem -30vw auto auto;width:28rem;height:28rem;pointer-events:none;z-index:-1}
.glow{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(214,242,90,.16) 0%,rgba(214,242,90,0) 66%);animation:breathe 11s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.88);opacity:.65}45%,55%{transform:scale(1.06);opacity:1}}
.wave{margin:2rem 0 0;height:56px;overflow:hidden;opacity:.55}
.wave svg{width:200%;height:56px;animation:drift 26s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* buttons */
.cta{display:flex;flex-direction:column;gap:.75rem;margin:1.75rem 0 .75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.5rem;padding:0 1.75rem;border-radius:var(--radius);font:700 1.05rem/1.2 var(--sans);text-decoration:none;cursor:pointer;border:0;transition:transform .6s ease,box-shadow .6s ease}
.btn-primary{color:var(--charcoal);background-color:var(--lime);background-image:linear-gradient(180deg,var(--lime-soft) 0%,rgba(214,242,90,.012) 100%)}
.btn-primary:hover{color:var(--charcoal);box-shadow:0 0 0 6px rgba(214,242,90,.14);transform:translateY(-1px)}
.btn-outline{color:#fff;background:transparent;border:1px solid #fff;font-weight:400}
.btn-outline:hover{color:var(--lime);border-color:var(--lime)}
.btn svg{width:1.15rem;height:1.15rem;flex:none}

/* cards + lists */
.card{border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02);padding:1.1rem 1.25rem;margin:1.25rem 0}
.card p:last-child{margin-bottom:0}
.dots{list-style:none;padding:0;margin:0 0 1.25rem}
.dots li{position:relative;padding-left:1.4rem;margin-bottom:.6rem}
.dots li::before{content:"";position:absolute;left:0;top:.68em;width:.5rem;height:.5rem;border-radius:50%;background:var(--lime)}
.pages{list-style:none;padding:0;margin:1.5rem 0 0;counter-reset:pg}
.pages li{display:grid;grid-template-columns:2.25rem 1fr;gap:.25rem .85rem;padding:1rem 0;border-top:1px solid rgba(255,255,255,.07)}
.pages li:first-child{border-top:0}
.pages .ic{width:2.25rem;height:2.25rem;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
.pages .ic svg{width:1.2rem;height:1.2rem}
.pages h3{margin:.3rem 0 .35rem}
.pages p{margin:0;color:var(--text)}
.steps{padding-left:1.4rem;margin:0 0 1rem}
.steps li{margin-bottom:.5rem;padding-left:.3rem}
.steps li::marker{color:var(--lime);font-family:var(--display);font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 1.25rem;padding:0;list-style:none}
.pills li{font:600 .85rem/1 var(--display);color:var(--lime);border:1px solid rgba(214,242,90,.45);background:rgba(214,242,90,.08);border-radius:999px;padding:.5rem .9rem}

/* try-it breath ring */
.try{display:grid;gap:1.5rem;align-items:center}
.ring-wrap{display:grid;place-items:center;padding:1rem 0}
.ring{width:9.5rem;height:9.5rem;border-radius:50%;border:1.5px solid var(--lime);display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(214,242,90,.22),rgba(214,242,90,0) 70%);animation:breathe 11s ease-in-out infinite}
.ring span{font:500 .85rem/1.3 var(--display);color:var(--muted);text-align:center;letter-spacing:.06em;position:relative}

/* note */
.note{border-left:2px solid var(--lime);padding:.25rem 0 .25rem 1rem;color:var(--text)}

/* about */
.about{display:grid;gap:1.25rem;align-items:start}
.tag{font:500 .95rem/1.4 var(--display);color:var(--lime);margin-bottom:1rem}

/* faq */
.faq details{border-top:1px solid rgba(255,255,255,.08);padding:.25rem 0}
.faq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.08)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;font:600 1.08rem/1.35 var(--display);color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.3rem;width:.55rem;height:.55rem;border-right:1.5px solid var(--lime);border-bottom:1.5px solid var(--lime);transform:rotate(45deg);transition:transform .5s ease}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{margin:0 0 1rem}

/* form */
.signup{display:grid;gap:.75rem;margin-top:1.25rem}
.signup label{font-size:.95rem;color:var(--text)}
.signup input[type=email]{width:100%;min-height:3.5rem;border-radius:var(--radius);border:1px solid #fff;background:transparent;color:#F5F5F5;font:400 1.05rem var(--sans);padding:0 1rem}
.signup input::placeholder{color:rgba(245,245,245,.55)}
.signup input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.form-msg{min-height:1.5rem;margin:.25rem 0 0;color:var(--lime)}

/* more */
.more{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.75rem}
.more a{display:block;text-decoration:none;color:var(--text);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:1rem 1.15rem;transition:border-color .6s ease}
.more a:hover{border-color:var(--lime);color:var(--text)}
.more strong{display:block;font:600 1.05rem/1.3 var(--display);color:var(--cream);margin-bottom:.2rem}
.more .price{color:var(--lime);font-weight:400}
.more span.d{color:var(--muted);font-size:.95rem}

footer{padding:2.5rem 0 3rem;border-top:1px solid rgba(255,255,255,.06);color:var(--muted);font-size:.9rem}
footer p{margin:0 0 .5rem}
footer a{color:var(--muted)}
footer a:hover{color:var(--lime)}

/* larger screens */
@media (min-width:44rem){
  body{font-size:1.09rem}
  .cta{flex-direction:row;align-items:center}
  .hero-art{inset:-6rem -12rem auto auto;width:34rem;height:34rem}
  section.hero{padding:3.5rem 0 4rem}
  .try{grid-template-columns:1fr 12rem}
  .about{grid-template-columns:7rem 1fr;gap:1.75rem}
  .more{grid-template-columns:1fr 1fr}
  .more li:last-child{grid-column:1 / -1}
  .signup{grid-template-columns:1fr auto;align-items:end}
  .signup label{grid-column:1 / -1}
}
@media (min-width:72rem){ :root{--wrap:46rem} }

/* MOTION START (generated by build.py; edit there) */
/* One shared breath: 4s in, 4s out. Only transform + opacity loop; the figure-8 draw is scroll-linked (no idle repaint). */
:root{--breath:8s}
.wave{transform-origin:50% 50%}
.hero .btn-primary{position:relative}
.hero .btn-primary::after{content:"";position:absolute;inset:-6px;border-radius:calc(var(--radius) + 6px);box-shadow:0 0 0 1px rgba(214,242,90,.3),0 0 26px 3px rgba(214,242,90,.26);opacity:0;pointer-events:none}
.pills li{position:relative;isolation:isolate}
.pills li::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:rgba(214,242,90,.18);box-shadow:0 0 18px 1px rgba(214,242,90,.32);opacity:0;z-index:-1}
.fig8{display:block;width:min(14rem,66%);height:auto;margin:2.25rem auto .25rem;overflow:visible;view-timeline-name:--f8}
.fig8 .track{stroke:#D6F25A;stroke-opacity:.14}
.fig8 .rope{stroke-dasharray:1;stroke-dashoffset:0}
.ring{display:grid;place-items:center}
.ring .lbl{grid-area:1/1}
.ring .lbl-in,.ring .lbl-out{opacity:0;font-size:.95rem;color:var(--cream)}
.ring::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(214,242,90,.35);opacity:0}
.ring::before{background:radial-gradient(circle,rgba(214,242,90,.3),rgba(214,242,90,0) 70%)}
@media (prefers-reduced-motion:no-preference){
  .glow{animation:breathe var(--breath) ease-in-out infinite}
  .wave{animation:wave-breathe var(--breath) ease-in-out infinite}
  .hero .btn-primary::after{animation:halo var(--breath) ease-in-out infinite}
  .pills li::before{animation:phase calc(var(--breath) * 2) ease-in-out infinite}
  .pills li:nth-child(2)::before{animation-delay:4s}
  .pills li:nth-child(3)::before{animation-delay:8s}
  .pills li:nth-child(4)::before{animation-delay:12s}
  .fig8 .spark{transform-box:fill-box;transform-origin:center;animation:spark var(--breath) ease-in-out infinite}
  @supports (animation-timeline:view()){
    .fig8 .rope{animation:f8-draw linear both;animation-timeline:--f8;animation-range:entry 10% cover 50%}
  }
  .ring::before{animation:ring-breathe var(--breath) ease-in-out infinite}
  .ring::after{animation:ring-halo var(--breath) ease-in-out infinite}
  .ring .lbl-static{opacity:0}
  .ring .lbl-in{animation:lbl-in var(--breath) ease-in-out infinite}
  .ring .lbl-out{animation:lbl-out var(--breath) ease-in-out infinite}
}
@keyframes wave-breathe{0%,100%{transform:scaleY(.45);opacity:.32}50%{transform:scaleY(1);opacity:.7}}
@keyframes halo{0%,100%{opacity:0;transform:scale(.97)}50%{opacity:.8;transform:scale(1)}}
@keyframes phase{0%{opacity:0;transform:scale(.96)}8%,22%{opacity:1;transform:scale(1.04)}31%,100%{opacity:0;transform:scale(.96)}}
@keyframes spark{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1.25);opacity:1}}
@keyframes f8-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ring-breathe{0%,100%{transform:scale(.5);opacity:.45}50%{transform:scale(1.18);opacity:1}}
@keyframes ring-halo{0%,100%{transform:scale(.94);opacity:0}50%{transform:scale(1.03);opacity:.9}}
@keyframes lbl-in{0%{opacity:0}6%,42%{opacity:1}50%,100%{opacity:0}}
@keyframes lbl-out{0%,50%{opacity:0}56%,92%{opacity:1}100%{opacity:0}}
/* MOTION END */

/* motion: slow, breath-like only, and off for anyone who asks */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.avatar{width:7rem;height:7rem;border-radius:50%;object-fit:cover;border:1.5px solid var(--lime)}
.h-small{font-size:1.2rem}