*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{-webkit-text-size-adjust:100%;padding-top:env(safe-area-inset-top,0px)}
img{max-width:100%}
[hidden]{display:none!important}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Layout: one page that is itself a sales funnel. Content in a left column; a 3D funnel on the right fills with
   marker yellow as you scroll, and the # mascot rides down it from "you saw a video" to "send the form". */
@font-face{font-family:"MM";font-weight:400;font-display:swap;src:url("../fonts/BricolageGrotesque-400.woff2") format("woff2")}
@font-face{font-family:"MM";font-weight:600;font-display:swap;src:url("../fonts/BricolageGrotesque-600.woff2") format("woff2")}
@font-face{font-family:"MM";font-weight:800;font-display:swap;src:url("../fonts/BricolageGrotesque-800.woff2") format("woff2")}
@font-face{font-family:"MM";font-weight:400;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF;src:url("../fonts/GeologicaGreek-300-as-400.woff2") format("woff2")}
@font-face{font-family:"MM";font-weight:600;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF;src:url("../fonts/GeologicaGreek-500-as-600.woff2") format("woff2")}
@font-face{font-family:"MM";font-weight:800;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF;src:url("../fonts/GeologicaGreek-700-as-800.woff2") format("woff2")}
:root{
  --ground:#FFFFFF; --ink:#111111; --brand:#1E56D9; --muted:#5A6275; --hair:#E3E6EE; --marker:#FFC93C; --on-brand:#FFFFFF;
  --card:#FFFFFF; --soft:#F4F6FB; --field:#FFFFFF; --ok:#1E7D4F;
  color-scheme:light;
  --font:"MM","Bricolage Grotesque",system-ui,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;overflow-x:hidden}
#stage{position:fixed;inset:0;z-index:0;pointer-events:none}
#stage canvas{display:block;width:100%;height:100%}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.col{max-width:620px}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.mk{background:linear-gradient(transparent 14%,var(--marker) 14%,var(--marker) 90%,transparent 90%);color:#111;padding:0 .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ground)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:14px}
.logo{display:block;height:44px;width:auto;max-width:62vw}
nav{display:flex;align-items:center;gap:var(--s4);font-weight:600;font-size:15px}
nav a{text-decoration:none;color:var(--muted);padding-block:12px}
nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;font:800 16px/1 var(--font);padding:15px 22px;border-radius:999px;border:2px solid var(--brand);background:var(--brand);color:var(--on-brand);text-decoration:none;cursor:pointer;transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color 150ms ease,color 150ms ease}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}.card:hover{transform:translateY(-4px);border-color:var(--brand)}}
.btn:active{transform:scale(.97);box-shadow:none;transition-duration:100ms}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.small{padding:12px 18px;font-size:14px;min-height:40px}
@media (max-width:760px){nav a:not(.btn){display:none}.logo{height:34px}}
@media (max-width:380px){.hide-xs{display:none}}
@media (max-width:440px){.logo{height:28px}header .btn.small{padding:9px 12px;font-size:13px}header .wrap{padding-block:12px}}

/* hero */
.m2d{width:96px;height:96px;display:block;margin-bottom:12px}
.has3d .m2d{display:none}
/* hero entrance: type the eyebrow, rise the headline, wipe the marker, then the copy and buttons */
.js .hero h1 .w{display:inline-block;animation:rise .6s var(--ease-out) both;animation-delay:var(--d)}
.js .hero .in{animation:rise .6s var(--ease-out) both;animation-delay:var(--d)}
@keyframes rise{from{transform:translateY(.45em);opacity:0}to{transform:none;opacity:1}}
.js .mk-wipe{background-size:0% 100%;background-repeat:no-repeat;animation:wipe .45s var(--ease-in-out) .85s forwards}
@keyframes wipe{to{background-size:100% 100%}}
.js .hero h1 .b .w{animation:rise .6s var(--ease-out) both,pop .5s ease 1.35s;animation-delay:var(--d),1.35s}
@keyframes pop{40%{transform:translateY(-.06em) rotate(-3deg)}}
.js .hero .cta .btn:first-child{animation:nudge 3.2s ease-in-out 3s 2}
@keyframes nudge{0%,88%,100%{transform:none}92%{transform:translateY(-3px)}96%{transform:translateY(1px)}}
@media (prefers-reduced-motion:reduce){.js .hero h1 .w,.js .hero .in{animation:fadeonly .4s ease both}.js .hero .cta .btn{animation:none}.js .mk-wipe{animation:none;background-size:100% 100%}}
.hero{padding-block:clamp(56px,12vh,120px) var(--s6)}
.eyebrow{font-weight:600;font-size:15px;color:var(--muted);letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.cursor{display:inline-block;width:.55em;height:1em;background:var(--brand);vertical-align:-.12em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
h1{font-weight:800;font-size:clamp(40px,6.4vw,76px);line-height:.98;letter-spacing:-.02em;margin:18px 0 22px;text-wrap:balance}
h1 .b{color:var(--brand)}
.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:34em;margin:0 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* sections */
section{padding-block:var(--s6)}
h2{font-weight:800;font-size:clamp(32px,4.4vw,52px);line-height:1.02;letter-spacing:-.015em;margin:8px 0 16px;text-wrap:balance}
.tag{font:800 13px/1 var(--font);letter-spacing:.08em;color:var(--brand)}
.sub{color:var(--muted);max-width:36em;margin:0 0 var(--s5)}

/* steps (a real sequence: the funnel) */
.steps{display:grid;gap:14px;counter-reset:st;list-style:none;padding:0;margin:0}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--hair)}
.steps li:last-child{border-bottom:1px solid var(--hair)}
.steps li::before{counter-increment:st;content:counter(st);font:800 22px/52px var(--font);text-align:center;width:52px;height:52px;border-radius:50%;background:var(--soft);color:var(--brand)}
.steps b{display:block;font-size:20px;font-weight:800}
.steps span{color:var(--muted)}

/* price cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1000px}
@media (max-width:860px){.cards{grid-template-columns:1fr;max-width:620px}}
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;border:1.5px solid var(--hair);border-radius:20px;background:var(--card);transition:transform 250ms var(--ease-out),border-color 150ms ease,opacity 600ms var(--ease-out)}
.card.hot{border-color:var(--brand);border-width:2px}
.badge{position:absolute;top:-12px;left:22px;font:800 12px/1 var(--font);letter-spacing:.06em;background:var(--marker);color:#111;padding:7px 10px;border-radius:999px}
.card h3{margin:0;font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.price strong{font-weight:800;font-size:48px;line-height:1;letter-spacing:-.02em}
.price small{color:var(--muted);font-size:14px;font-weight:600}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1}
.card li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:16px}
.card li::before{content:"";width:14px;height:14px;margin-top:5px;border-radius:4px;background:var(--brand);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.card .btn{justify-content:center;width:100%}
.note{font-size:14px;color:var(--muted);margin-top:18px;max-width:46em}

/* ready for more */
.rfm h2 .b{color:var(--brand)}
.vids{font-weight:800;font-size:15px;color:var(--brand);display:flex;gap:6px;align-items:center}
.vids i{display:inline-block;width:12px;height:20px;border-radius:3px;background:var(--brand)}

/* form */
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px}
.f{display:grid;gap:7px;min-width:0}
.f.full{grid-column:1/-1}
@media (max-width:640px){form{grid-template-columns:1fr}}
label{font-weight:600;font-size:14px}
input,select,textarea{font:400 16px/1.4 var(--font);color:var(--ink);background:var(--field);border:1.5px solid var(--hair);border-radius:12px;padding:13px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
textarea{min-height:110px;resize:vertical}
.chk{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;color:var(--muted)}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand)}
.err{font-size:13px;color:#C62D2D;min-height:0}
.done{grid-column:1/-1;padding:22px;border-radius:16px;background:var(--soft);border:1.5px solid var(--brand)}
.done b{font-size:20px}
.preview-note{font-size:13px;color:var(--muted)}

/* two independent paths */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px}
@media (max-width:700px){.paths{grid-template-columns:1fr}}
.path{display:flex;flex-direction:column;gap:8px;padding:24px;border:1.5px solid var(--hair);border-radius:20px;background:var(--card);text-decoration:none;color:inherit;transition:transform 250ms var(--ease-out),border-color 150ms ease,opacity .6s var(--ease-out)}
.path.hot{border:2px solid var(--brand)}
.path b{font-size:22px;line-height:1.15;font-weight:800}
.pdesc{color:var(--muted)}
.pfrom{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.pnote{margin:18px 0 0;font-weight:600;display:inline-block}
.pnote::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--marker);margin-right:10px;vertical-align:.05em}
@media (hover:hover) and (pointer:fine){.path:hover{transform:translateY(-4px);border-color:var(--brand)}}
/* social proof */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1000px}
@media (max-width:860px){.cases{grid-template-columns:1fr;max-width:620px}}
.case{display:flex;flex-direction:column;gap:14px;padding:24px;border:1.5px solid var(--hair);border-radius:20px;background:var(--card)}
.chead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px}
.chead h3{margin:0;font-weight:800;font-size:20px}
.chead span{font-size:14px;color:var(--muted)}
.big{display:grid;gap:4px;padding:16px 18px;border-radius:14px;background:var(--soft)}
.big strong{font-weight:800;font-size:clamp(36px,4.4vw,48px);line-height:1;letter-spacing:-.02em;color:var(--brand);font-variant-numeric:tabular-nums}
.big span{font-weight:600;font-size:15px}
.crow{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px}
.crow li{display:grid;grid-template-columns:14px 1fr;gap:8px}
.crow li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--marker)}
.cq{margin:0;padding:0 0 0 14px;border-left:3px solid var(--marker)}
.cq p{margin:0;font-size:15px}
.cq cite{display:block;margin-top:4px;font-style:normal;font-size:13px;color:var(--muted)}
.clink{margin-top:auto;font-weight:600;font-size:14px;color:var(--brand);text-decoration:none;padding-block:6px}
.clink:hover{text-decoration:underline}
/* articles */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1000px}
@media (max-width:860px){.posts{grid-template-columns:1fr;max-width:620px}}
.post{display:flex;flex-direction:column;border:1.5px solid var(--hair);border-radius:20px;overflow:hidden;background:var(--card);text-decoration:none;color:inherit;transition:transform 250ms var(--ease-out),border-color 150ms ease}
.post img,.post .ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;max-width:100%}
.post .ph{background:var(--soft);display:grid;place-items:center;font:800 44px/1 var(--font);color:var(--hair)}
.pbody{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.ptag{font:800 12px/1 var(--font);letter-spacing:.06em;color:var(--brand)}
.post h3{margin:0;font-weight:800;font-size:19px;line-height:1.2;text-wrap:balance}
.more{font-weight:600;font-size:15px;color:var(--brand)}
.post.soon{background:var(--soft)}
.post.soon h3{color:var(--muted)}
.post.soon .ptag{color:var(--muted)}
@media (hover:hover) and (pointer:fine){a.post:hover{transform:translateY(-4px);border-color:var(--brand)}}
/* faq */
.faq{display:grid;border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:800;font-size:18px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:14px;height:14px;border-right:3px solid var(--brand);border-bottom:3px solid var(--brand);transform:translateY(-3px) rotate(45deg);transition:transform 200ms var(--ease-out)}
.qa[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.ans{color:var(--muted);padding:0 0 18px;max-width:40em}
.ans p{margin:0}
.qa[open] .ans{animation:ansin 250ms var(--ease-out)}
@keyframes ansin{from{opacity:0;transform:translateY(-6px)}}
/* article view */
.article .acol{max-width:680px;padding-block:40px 24px}
.back{display:inline-block;font-weight:600;font-size:15px;color:var(--muted);text-decoration:none;padding-block:10px;margin-bottom:14px}
.back:hover{color:var(--ink)}
.article h1{font-size:clamp(34px,5vw,56px)}
.ameta{color:var(--muted);font-size:14px;margin:-6px 0 24px}
.video{position:relative;margin:0 0 28px;max-width:340px;border-radius:20px;overflow:hidden;border:1.5px solid var(--hair)}
.video img{display:block;width:100%;height:auto}
.video figcaption{position:absolute;inset:auto 0 0 0;display:flex;gap:10px;align-items:center;padding:12px 14px;background:rgba(17,17,17,.82);color:#fff;font-size:13px;line-height:1.35}
.play{flex:none;width:30px;height:30px;border-radius:50%;background:var(--marker);clip-path:none;position:relative}
.play::after{content:"";position:absolute;left:11px;top:8px;border-left:11px solid #111;border-top:7px solid transparent;border-bottom:7px solid transparent}
.intro{font-size:20px;line-height:1.5}
.article h2{font-size:clamp(24px,3vw,32px);margin:36px 0 10px}
.article p{max-width:38em}
.take{padding-left:1.2em;display:grid;gap:10px}
.acta{margin:36px 0 18px;padding:24px;border-radius:20px;background:var(--soft);border:2px solid var(--brand);display:grid;gap:8px;justify-items:start}
.acta b{font-size:22px}
.acta p{margin:0 0 6px;color:var(--muted)}
.src{font-size:13px;color:var(--muted)}
.src a{color:var(--muted)}
section,.article{scroll-margin-top:96px}
@media (max-width:860px){.is-article #stage{display:none}}
footer{position:relative;z-index:1;border-top:1px solid var(--hair);margin-top:var(--s6)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px;font-size:14px;color:var(--muted)}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair);padding-block:10px}
footer a:hover{color:var(--ink)}

/* reveal: visible at rest, slides in when JS marks it */
.rv{transition:transform .7s var(--ease-out),opacity .7s var(--ease-out)}
/* cards and steps inside a revealed section arrive one after another (60 ms apart) */
.js .rv.wait .card,.js .rv.wait .path,.js .rv.wait .post,.js .rv.wait .case,.js .rv.wait .steps li{transform:translateY(24px);opacity:.001}
.rv .steps li{transition:transform .6s var(--ease-out),opacity .6s var(--ease-out)}
.rv .case{transition:transform .6s var(--ease-out),opacity .6s var(--ease-out)}
.rv .post{transition:transform .6s var(--ease-out),opacity .6s var(--ease-out),border-color 150ms ease}
.rv.revealing .card,.rv.revealing .path,.rv.revealing .post,.rv.revealing .case,.rv.revealing .steps li{transition-delay:calc(var(--i,0) * 60ms + 120ms)}
.cards .card:nth-child(2),.paths .path:nth-child(2),.posts .post:nth-child(2),.cases .case:nth-child(2),.steps li:nth-child(2){--i:1}.cards .card:nth-child(3),.posts .post:nth-child(3),.cases .case:nth-child(3),.cases .case:nth-child(4),.steps li:nth-child(3){--i:2}
/* the video bars count up when a package card arrives */
.vids i{transform-origin:50% 100%;transition:transform 300ms var(--ease-out),opacity 300ms var(--ease-out)}
.js .rv.wait .vids i{transform:scaleY(.3);opacity:0}
.rv.revealing .vids i{transition-delay:calc(var(--i,0) * 60ms + var(--j,0) * 45ms + 450ms)}
.vids i:nth-child(2){--j:1}.vids i:nth-child(3){--j:2}.vids i:nth-child(4){--j:3}.vids i:nth-child(5){--j:4}.vids i:nth-child(6){--j:5}
/* a package picked from a card: the select it filled lights up once, so the jump makes sense */
@keyframes picked{0%{box-shadow:0 0 0 0 var(--marker)}35%{box-shadow:0 0 0 6px var(--marker)}100%{box-shadow:0 0 0 0 transparent}}
select.picked{animation:picked 900ms var(--ease-out)}
.err:not(:empty){animation:errin 200ms var(--ease-out)}
@keyframes errin{from{opacity:0;transform:translateY(-4px)}}
.done{animation:donein 450ms var(--ease-out)}
@keyframes donein{from{opacity:0;transform:translateY(10px) scale(.98)}}
.js .rv.wait{transform:translateY(28px);opacity:.001}

@media (prefers-reduced-motion:reduce){.rv,.rv .card,.rv .steps li,.vids i{transition:opacity .3s ease}.js .rv.wait,.js .rv.wait .card,.js .rv.wait .steps li,.js .rv.wait .vids i{transform:none}.btn,.card{transition:background-color .15s ease,border-color .15s ease}.btn:active{transform:none}.done,.err:not(:empty){animation:fadeonly .3s ease}select.picked{animation:none;outline:3px solid var(--marker)}.cursor{animation:none}html{scroll-behavior:auto}}
@keyframes fadeonly{from{opacity:0}}