@font-face{font-family:"Luckiest Guy";src:url(/fonts/LuckiestGuy.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/fonts/Fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Gochi Hand";src:url(/fonts/GochiHand.woff2) format("woff2");font-weight:400;font-display:swap}

/* Layout: a torchlit first screen, then bright white pages with one idea per section. Colours are sampled from the Prezzy Hunt lettering. Headings carry the trail arrow from the R. */
:root{
  --plum:#D60190; --magenta:#E5097F; --coral:#F22B62; --orange:#FE710C; --teal:#07ADBE; --teal-deep:#0690A8; --dot:#F9C452;
  --night:#0D2630; --night-2:#123540; --ink:#16323C; --muted:#56707A; --bg:#FFFFFF; --soft:#F3FAFB; --warm:#FFF4EC; --line:#DCEBEE;
  --grad:linear-gradient(100deg,var(--plum) 0%,var(--coral) 45%,var(--orange) 100%);
  --display:"Luckiest Guy","Arial Black","Trebuchet MS",sans-serif;
  --body:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Gochi Hand","Marker Felt","Comic Sans MS",cursive;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 38'%3E%3Cg fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4c2 17 15 26 36 23'/%3E%3Cpath d='M32 17l10 10-11 8'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;padding-inline:16px;overflow-x:hidden;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body)}
.wrap{max-width:1140px;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:.01em;text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(2rem,5vw,3.4rem)}
h3{font-size:1.35rem;line-height:1.1}
h1::after,h2::after{content:"";display:inline-block;width:.8em;height:.6em;margin-left:.14em;vertical-align:-.02em;background:var(--arrow-c,var(--orange));
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.no-arrow::after{display:none}
p{margin:0}
a{color:inherit}
svg.i{width:1em;height:1em;flex:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:50;background:var(--dot);color:var(--night);padding:10px 14px;border-radius:10px;font-weight:700}
.eyebrow{font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hand{font-family:var(--hand)}
.lede{font-size:1.18rem;color:var(--muted);max-width:46ch}
.hint{font-size:.92rem;color:var(--muted)}
.motto{font-family:var(--hand);font-size:clamp(1.4rem,3vw,1.9rem);color:var(--coral);transform:rotate(-2deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1.05rem var(--body);padding:.85em 1.5em;border:0;border-radius:999px;background:var(--grad);color:#FFFFFF;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 22px rgba(229,9,127,.28);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 12px 28px rgba(229,9,127,.34)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.btn.sun{background:var(--dot);color:var(--night);box-shadow:0 8px 22px rgba(249,196,82,.3)}
.btn.small{padding:.55em 1.1em;font-size:.95rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-inline:-16px;padding:10px 16px}
.nav .wrap{display:flex;align-items:center;gap:18px}
.logo{display:block;text-decoration:none;flex:none}
.logo img{height:40px;width:auto;display:block}
.links{display:flex;gap:22px;font-weight:500;margin-left:auto;align-items:center}
.links a{text-decoration:none}
.links a:not(.btn):hover,.links a[aria-current="page"]{color:var(--coral)}
.menu-btn{display:none;margin-left:auto;font:600 .95rem var(--body);background:transparent;color:inherit;border:2px solid currentColor;border-radius:999px;padding:.4em 1em;cursor:pointer}
.nav.dark{position:absolute;left:0;right:0;margin:0;background:transparent;border:0;backdrop-filter:none;color:#FFFFFF}
.nav.dark .links a:not(.btn):hover{color:var(--dot)}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#FFFFFF;color:var(--ink);border-bottom:1px solid var(--line);padding:6px 16px 18px;margin:0;box-shadow:0 18px 30px rgba(13,38,48,.12)}
  .links.open{display:flex}
  .links a:not(.btn){padding:13px 4px;border-bottom:1px dashed var(--line);font-size:1.1rem}
  .links .btn{margin-top:14px}
  .logo img{height:34px}
}

/* sections */
section{padding-block:64px}
.center{text-align:center;justify-items:center}
.sec-head{display:grid;gap:12px;margin-bottom:34px;max-width:62ch}
.sec-head.center{margin-inline:auto}
.band{margin-inline:calc(50% - 50vw);padding-inline:16px}
.band>.wrap,.band>section{max-width:1140px;margin-inline:auto}
.band.soft{background:var(--soft)}
.band.warm{background:var(--warm)}

/* ---- torchlight hero ---- */
.torch{position:relative;margin-inline:calc(50% - 50vw);padding:120px 16px 90px;background:var(--night);color:#FFFFFF;overflow:hidden;--x:70%;--y:55%;touch-action:pan-y;isolation:isolate}
.torch::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 20% 0%,rgba(7,173,190,.18),transparent 55%),radial-gradient(ellipse at 90% 100%,rgba(229,9,127,.14),transparent 50%)}
.torch .beam{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle 190px at var(--x) var(--y),rgba(255,224,150,.30),rgba(255,224,150,.10) 55%,transparent 72%)}
.torch .wall{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle 200px at var(--x) var(--y),#000 35%,transparent 75%);mask-image:radial-gradient(circle 200px at var(--x) var(--y),#000 35%,transparent 75%)}
.torch .wall .clue{position:absolute;font:1.7rem/1.15 var(--hand);color:#FFE7A8;transform:rotate(-5deg);max-width:260px}
.torch .wall .doodle{position:absolute;color:rgba(255,231,168,.55);font:2.4rem var(--display)}
.torch .wall .trail{position:absolute;border-top:4px dotted rgba(249,196,82,.7);width:160px;transform:rotate(18deg)}
.torch .inner{position:relative;display:grid;gap:20px;max-width:1140px;margin:0 auto}
.torch .copy{display:grid;gap:18px;justify-items:start;max-width:880px}
.torch h1{font-size:clamp(1.7rem,7.2vw,4.2rem)}
.torch h1{color:#FFFFFF;--arrow-c:var(--dot)}
.torch .eyebrow{color:var(--dot)}
.torch .lede{color:#BFD8DF}
.torch .ctas{display:flex;gap:12px;flex-wrap:wrap}
.torch .btn.ghost{color:#FFFFFF;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.8)}
.torch .tip{font-size:.9rem;color:#86A9B3}
@media (max-width:760px){.torch{padding:96px 16px 150px}}

/* ---- big and bright ---- */
.bright{display:grid;gap:22px;justify-items:center;text-align:center;padding-block:80px 70px}
.bright h2{font-size:clamp(3rem,10vw,6.6rem);line-height:.95}
.bright h2 .grad{display:inline}
.bright .lede{margin-inline:auto}
.bubbles{display:flex;gap:18px 14px;flex-wrap:wrap;justify-content:center;margin-top:10px;max-width:900px}
.bub{width:96px;display:grid;gap:8px;justify-items:center;font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink)}
.bub span{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--c);box-shadow:0 8px 18px rgba(13,38,48,.14);transition:transform .2s}
.bub:hover span{transform:translateY(-4px) rotate(-6deg)}
.bub svg.i{width:40px;height:40px;color:#FFFFFF}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;gap:10px;align-content:start;position:relative}
.steps li::before{counter-increment:s;content:counter(s);font:400 3.4rem/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps li:not(:last-child)::after{content:"";position:absolute;top:22px;left:64px;right:-10px;border-top:4px dotted var(--teal);opacity:.6}
.steps p{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr}.steps li:not(:last-child)::after{display:none}}

/* ---- moments ---- */
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.moments .tag p{font:1.45rem/1.2 var(--hand);color:var(--ink)}
@media (max-width:760px){.moments{grid-template-columns:1fr}}

/* tags and cards */
.tag{position:relative;background:#FFFFFF;border-radius:18px;box-shadow:0 10px 28px rgba(13,38,48,.10);padding:30px 22px 22px}
.tag::before{content:"";position:absolute;top:12px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--soft);box-shadow:inset 0 0 0 3px var(--line)}
.moments .tag:nth-child(1){transform:rotate(-2deg)}.moments .tag:nth-child(3){transform:rotate(1.5deg)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.card{background:#FFFFFF;border-radius:22px;box-shadow:0 10px 28px rgba(13,38,48,.08);padding:24px;display:grid;gap:10px;align-content:start}
.card .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--c,var(--teal))}
.card .ic svg.i{width:28px;height:28px;color:#FFFFFF}
.card a.more{font-weight:600;color:var(--coral);text-decoration:none}
.card ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.card p{color:var(--muted)}

/* prices */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.prices .tag{display:grid;gap:8px;align-content:start;padding-top:36px}
.prices .best{background:var(--grad);color:#FFFFFF}
.prices .best .eyebrow{color:#FFFFFF}
.prices .amt{font:400 2.7rem/1 var(--display)}
.prices ul{margin:6px 0 0;padding-left:1.1em;font-size:.95rem;display:grid;gap:4px}
.flag{display:inline-block;font:600 .74rem var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--dot);color:var(--night);padding:.25em .6em;border-radius:6px}

/* faq */
.faq{display:grid;gap:12px;max-width:760px}
.faq details{border-radius:16px;background:#FFFFFF;box-shadow:0 6px 18px rgba(13,38,48,.07);padding:16px 20px}
.faq summary{font-weight:600;cursor:pointer}
.faq details p{margin-top:8px;color:var(--muted)}

/* inner page hero */
.phero{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;padding-block:48px 10px}
.phero .ic{width:88px;height:88px;border-radius:26px;display:grid;place-items:center;background:var(--c);transform:rotate(-6deg);box-shadow:0 12px 26px rgba(13,38,48,.18)}
.phero .ic svg.i{width:46px;height:46px;color:#FFFFFF}
.phero>div{display:grid;gap:12px;min-width:0}
@media (max-width:600px){.phero{grid-template-columns:1fr}}

/* route (how it works page) */
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;margin:0;padding:0;position:relative}
.route::before{content:"";position:absolute;left:8%;right:8%;top:30px;border-top:4px dotted var(--teal);opacity:.6}
.route li{position:relative;display:grid;gap:10px;justify-items:start}
.pin{width:60px;height:60px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--teal);display:grid;place-items:center;box-shadow:0 8px 16px rgba(13,38,48,.18)}
.pin span{transform:rotate(45deg);font:400 1.5rem var(--display);color:#FFFFFF}
.pin.end{background:var(--grad)}
.route p{color:var(--muted);font-size:.97rem}
@media (max-width:760px){.route{grid-template-columns:1fr}.route::before{left:29px;right:auto;top:10px;bottom:10px;border-top:0;border-left:4px dotted var(--teal)}
  .route li{grid-template-columns:60px 1fr;column-gap:16px;align-items:start}.route li>div{min-width:0}}

/* join band */
.join-band{margin-inline:calc(50% - 50vw);padding:70px 16px;background:var(--night);color:#FFFFFF}
.join-band h2{color:#FFFFFF;--arrow-c:var(--dot)}
.join-band .eyebrow{color:var(--dot)}
.join-band .lede,.join-band .perks{color:#BFD8DF}
.join{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;max-width:1140px;margin:0 auto}
@media (max-width:860px){.join{grid-template-columns:1fr}}
.join .perks{margin:0;padding-left:1.1em;display:grid;gap:8px}
.join form{background:#FFFFFF;color:var(--ink);border-radius:22px;padding:24px;display:grid;gap:14px}
.field{display:grid;gap:8px;min-width:0}
.field>label,.lab{font-weight:600}
input[type=text],input[type=email],input[type=date],select,textarea{font:500 1rem var(--body);padding:.8em .95em;border:2px solid var(--line);border-radius:14px;background:#FFFFFF;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--coral)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{font-weight:600}
.formmsg.ok{color:var(--teal-deep)}
.formmsg.err{color:var(--coral)}

/* legal */
.legal{max-width:760px;display:grid;gap:14px;padding-block:44px}
.legal h1{font-size:clamp(2.2rem,6vw,3.4rem)}
.legal h2{font-size:1.6rem;margin-top:14px}
.legal h2::after{display:none}
.legal ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.legal table{border-collapse:collapse;width:100%;font-size:.95rem}
.legal td,.legal th{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.tablewrap{overflow-x:auto}

/* footer */
footer{margin-inline:-16px;padding:40px 16px;background:var(--night-2);color:#BFD8DF}
footer .wrap{display:grid;gap:16px;font-size:.93rem}
footer .logo img{height:44px}
footer .motto{color:var(--dot)}
footer .fl{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:500;color:#FFFFFF}
footer .fl a{text-decoration:none}
footer .fl a:hover{color:var(--dot)}

/* ---------- builder ---------- */
.bmain{max-width:760px;margin:0 auto;padding-block:26px 130px}
.progress{list-style:none;margin:0 0 24px;padding:0;display:flex;align-items:center;justify-content:space-between;position:relative}
.progress::before{content:"";position:absolute;left:10px;right:10px;top:50%;border-top:4px dotted var(--line)}
.progress li{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 0 0 3px var(--line)}
.progress li.done{background:var(--teal);box-shadow:none}
.progress li.now{background:var(--coral);box-shadow:0 0 0 5px rgba(242,43,98,.2);transform:scale(1.25)}
.progress li.x{box-shadow:none;background:none;width:auto;height:auto;font:400 1.6rem/1 var(--display);color:var(--orange)}
.stepname{font-weight:600;color:var(--muted);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.qcard{padding:34px 22px 26px;display:grid;gap:22px}
.qcard h1{font-size:clamp(2rem,6vw,3rem)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 .98rem var(--body);padding:.55em 1.05em;border-radius:999px;border:2px solid var(--line);background:#FFFFFF;color:var(--ink);cursor:pointer;transition:transform .1s}
.chip:hover{transform:translateY(-2px);border-color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:#FFFFFF}
.chip.blocked{text-decoration:line-through;opacity:.45;cursor:not-allowed}
.chip.custom{border-style:dashed;background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.chip.ask{border-style:dashed;border-color:var(--orange)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.tile{display:grid;gap:8px;justify-items:center;text-align:center;padding:16px 8px;border:2px solid var(--line);border-radius:18px;background:#FFFFFF;color:var(--ink);font:600 .95rem var(--body);cursor:pointer;transition:transform .12s}
.tile:hover{border-color:var(--teal);transform:translateY(-2px)}
.tile svg.i{width:30px;height:30px;color:var(--teal-deep)}
.tile[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#FFFFFF;transform:rotate(-2deg)}
.tile[aria-pressed="true"] svg.i{color:#FFFFFF}
.agebig{display:grid;justify-items:center;gap:6px}
.agebig output{font:400 5rem/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.agebig input,input[type=range]{width:100%;accent-color:var(--coral);height:34px}
.count{font:600 .78rem var(--body);background:var(--soft);border-radius:999px;padding:.15em .6em;margin-left:6px;vertical-align:middle}
.addrow{display:flex;gap:8px}
.addrow input{flex:1;min-width:0}
.note{font-weight:600;color:var(--coral);font-size:.92rem}
.safety{border-radius:16px;background:var(--soft);padding:14px 16px;font-size:.93rem;display:grid;gap:4px}
.safety b{color:var(--teal-deep)}
.safety b.askb{color:var(--orange)}
.err{color:var(--coral);font-weight:600;font-size:.93rem}
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.bbar .in{max-width:760px;margin:0 auto;display:flex;justify-content:space-between;gap:12px}
.result{display:grid;gap:22px}
.bigclue{background:var(--night);color:#FFFFFF;padding:36px 22px 26px;transform:rotate(-1deg)}
.bigclue::before{background:var(--night-2);box-shadow:inset 0 0 0 3px rgba(255,255,255,.3)}
.bigclue .cn{font:400 1rem var(--display);color:var(--dot)}
.bigclue p.cl{font:clamp(1.5rem,4.5vw,2rem)/1.2 var(--hand);margin-top:6px;color:#FFE7A8}
.minimap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.minimap .st{font-weight:600;font-size:.9rem;background:var(--soft);border-radius:999px;padding:.3em .85em}
.minimap .dash{width:22px;border-top:4px dotted var(--coral)}
.minimap .xend{font:400 1.3rem var(--display);color:var(--orange);margin-left:6px}
.facts{display:flex;flex-wrap:wrap;gap:10px}
.facts span{font-weight:600;background:var(--warm);color:var(--ink);border-radius:12px;padding:.35em .85em}
.result form{display:grid;gap:12px}
@media (max-width:760px){
  .torch .wall .clue{left:8%!important;top:auto!important;bottom:52px;font-size:1.4rem;max-width:80%}
  .torch .wall .doodle,.torch .wall .trail{display:none}
}

/* hero headline: second line in the brand gradient */
.torch h1 .theirs{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.torch h1 .line1{white-space:nowrap}
.torch .wall .clue .cl-no{display:block;font:400 .8em var(--display);letter-spacing:.06em;color:var(--dot);margin-bottom:4px}
/* belief headline: capitals in gradient with a heavier outline */
.bright h2.believe{font-size:clamp(1.6rem,6.6vw,4.6rem);line-height:1.05}
.bright h2.believe strong{font-weight:400;text-transform:uppercase;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* phone: taller first screen so the words and buttons sit in the middle */
@media (max-width:760px){
  .torch{min-height:100svh;display:grid;align-content:center;padding:110px 16px 190px}
  .torch .wall .clue{bottom:70px}
}

/* quotes */
.quotes figure{margin:0;display:grid;gap:14px;align-content:space-between}
.quotes blockquote{margin:0;font:1.55rem/1.2 var(--hand);color:var(--ink)}
.quotes figcaption{font-size:.95rem;color:var(--muted)}
.quotes figcaption b{color:var(--coral);font-weight:600}
.center-text{text-align:center;margin-top:22px}

/* gradient text: give the glyph tops room so they are not clipped */
.grad,.torch h1 .theirs,.bright h2.believe strong{padding-block:.14em .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h1,h2{line-height:1.08}
.steps li::before{padding-top:.12em;line-height:1.05}
.agebig output{padding-top:.1em}
/* how it works band: brand teal */
.steps-band{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%);color:#FFFFFF}
.steps-band h2,.steps-band h3{color:#FFFFFF}
.steps-band h2{--arrow-c:var(--dot)}
.steps-band .eyebrow{color:var(--dot)}
.steps-band .steps p{color:#E3F6F9}
.steps-band .steps li::before{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--dot)}
.steps-band .steps li:not(:last-child)::after{border-top-color:rgba(255,255,255,.7);opacity:1}

.nowrap{white-space:nowrap}
.hero-lede{max-width:none;font-size:clamp(.92rem,4vw,1.18rem)}
.steps-title{font-size:clamp(1.3rem,5.7vw,3.2rem)}
/* code cracker card in the steps band */
.steps-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.steps-head .sec-head{margin-bottom:0}
.cracker{background:var(--night);color:#FFFFFF;padding:30px 20px 16px;transform:rotate(2.5deg);min-width:0;max-width:340px;box-shadow:0 14px 30px rgba(6,40,50,.35)}
.cracker::before{background:var(--teal-deep);box-shadow:none}
.cr-label{font:400 .95rem var(--display);color:var(--dot);letter-spacing:.06em}
.cr-code{font:600 1.15rem/1.35 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.04em;margin-top:6px;color:#FFE7A8;min-height:1.6em;word-break:break-word}
.cr-code.solved{font:400 1.5rem/1.3 var(--display);letter-spacing:.06em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:.1em}
.cr-key{font-size:.8rem;color:#86A9B3;margin-top:4px}
/* marching trail between the steps */
.steps-band .steps li:not(:last-child)::after{border-top:0;height:4px;top:22px;opacity:1;
  background:radial-gradient(circle,rgba(255,255,255,.85) 2px,transparent 2.5px) 0 50%/12px 4px repeat-x}
@media (prefers-reduced-motion:no-preference){.steps-band .steps li:not(:last-child)::after{animation:trail 1.2s linear infinite}}
@keyframes trail{to{background-position:12px 50%}}
.steps-title::after{display:none}
.arr{display:inline-block;width:.8em;height:.6em;margin-left:.14em;vertical-align:-.02em;background:var(--arrow-c,var(--orange));-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
/* moments heading and coloured quote tags */
.moments-title{font-size:clamp(1.5rem,6.2vw,3.4rem)}
.moments-title::after{display:none}
.quotes-band{background:var(--warm)}
.quotes .tag{color:#FFFFFF;box-shadow:0 16px 32px rgba(13,38,48,.18)}
.quotes .tag::before{background:var(--warm);box-shadow:none}
.quotes .tag:nth-child(1){background:linear-gradient(135deg,var(--plum),var(--coral))}
.quotes .tag:nth-child(2){background:linear-gradient(135deg,var(--coral),var(--orange))}
.quotes .tag:nth-child(3){background:linear-gradient(135deg,var(--teal),var(--teal-deep))}
.quotes blockquote{color:#FFFFFF;font-size:1.65rem}
.quotes figcaption{color:rgba(255,255,255,.88)}
.quotes figcaption b{color:var(--dot)}

/* ---- featured hunt: Halloween ---- */
.spooky{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 110%,rgba(254,113,12,.35),transparent 55%),radial-gradient(ellipse at 10% -10%,rgba(214,1,144,.25),transparent 50%),#1C1030;color:#FFFFFF;isolation:isolate}
.spooky .web{position:absolute;top:0;right:0;width:clamp(120px,22vw,230px);color:rgba(255,255,255,.22);z-index:-1}
.spooky .spider{position:absolute;top:0;right:clamp(60px,12vw,130px);width:34px;display:grid;justify-items:center;color:#0B0614;z-index:0}
.spooky .spider .thread{width:2px;height:80px;background:rgba(255,255,255,.35)}
.spooky .spider svg{width:34px;height:auto;color:#0B0614;filter:drop-shadow(0 0 6px rgba(254,113,12,.6))}
@media (prefers-reduced-motion:no-preference){.spooky .spider{animation:dangle 5s ease-in-out infinite;transform-origin:top center}}
@keyframes dangle{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(38px) rotate(-3deg)}}
.spooky .bat{position:absolute;width:46px;color:#0B0614;opacity:.85;z-index:0;filter:drop-shadow(0 0 4px rgba(249,196,82,.35))}
.spooky .b1{top:18%;left:-60px}.spooky .b2{top:62%;left:-60px;width:32px}
@media (prefers-reduced-motion:no-preference){.spooky .b1{animation:fly 14s linear infinite}.spooky .b2{animation:fly 19s linear 5s infinite}}
@media (prefers-reduced-motion:reduce){.spooky .b1{left:6%;top:8%}.spooky .b2{display:none}}
@keyframes fly{0%{transform:translate(0,0) scaleY(1)}10%{transform:translate(12vw,-20px) scaleY(.6)}20%{transform:translate(24vw,10px) scaleY(1)}30%{transform:translate(36vw,-14px) scaleY(.6)}40%{transform:translate(48vw,6px) scaleY(1)}50%{transform:translate(60vw,-18px) scaleY(.6)}60%{transform:translate(72vw,8px) scaleY(1)}70%{transform:translate(84vw,-10px) scaleY(.6)}80%,100%{transform:translate(110vw,0) scaleY(1)}}
.spooky-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
@media (max-width:860px){.spooky-in{grid-template-columns:1fr}}
.spooky-copy{display:grid;gap:18px;justify-items:start}
.spooky .eyebrow{color:var(--dot)}
.spooky-title{color:#FFFFFF;--arrow-c:var(--orange);font-size:clamp(2.1rem,6vw,3.6rem)}
.spooky .glow{color:var(--orange);text-shadow:0 0 18px rgba(254,113,12,.7),0 0 42px rgba(254,113,12,.35)}
.spooky .lede{color:#D8C9EA}
.pack{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pack li{display:flex;gap:12px;align-items:center;font-weight:500}
.pack svg.i{width:26px;height:26px;color:var(--orange);flex:none}
.spookyform{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px;display:grid;gap:12px;width:100%;max-width:480px}
.spookyform label,.spookyform .consent{color:#EDE4F7}
.spookyform .consent a{color:var(--dot)}
.spookyform .formmsg.ok{color:var(--dot)}
.riddles{display:grid;gap:16px;align-content:start}
.rid-head{font:1.35rem var(--hand);color:var(--dot);transform:rotate(-2deg)}
.rid{position:relative;display:grid;text-align:left;border:0;cursor:pointer;border-radius:18px;padding:22px 20px;min-height:104px;font:inherit;color:#FFFFFF;
  background:linear-gradient(135deg,#2B1745,#3A1B4F);box-shadow:0 12px 26px rgba(0,0,0,.35),inset 0 0 0 1.5px rgba(254,113,12,.35);transition:transform .25s}
.rid:nth-child(3){transform:rotate(1.5deg)}.rid:nth-child(4){transform:rotate(-1deg)}
.rid:hover{transform:translateY(-3px) rotate(0)}
.rid .q{font:1.3rem/1.25 var(--hand)}
.rid .a{display:none;font:400 1.6rem var(--display);color:var(--orange);text-shadow:0 0 14px rgba(254,113,12,.6);letter-spacing:.03em}
.rid[aria-pressed="true"]{background:linear-gradient(135deg,#3A1B4F,#5B1E4A)}
.rid[aria-pressed="true"] .q{display:none}
.rid[aria-pressed="true"] .a{display:block}
.rid::after{content:"Tap to reveal";position:absolute;right:16px;bottom:10px;font-size:.78rem;color:rgba(255,255,255,.55)}
.rid[aria-pressed="true"]::after{content:"Tap to hide"}

/* ---- reviews: the words are the hero, no cards ---- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;align-items:start}
@media (max-width:760px){.reviews{grid-template-columns:1fr;gap:36px}}
.review{margin:0;position:relative;display:grid;gap:12px;padding-top:34px}
.review::before{content:"\201C";position:absolute;top:-22px;left:-8px;font:400 7rem/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.28;padding-top:.1em;pointer-events:none}
.review .stars{display:flex;gap:3px}
.review .stars svg{width:22px;height:22px;fill:var(--orange)}
.review blockquote{margin:0;font:clamp(1.6rem,2.6vw,2rem)/1.18 var(--hand);color:var(--ink)}
.review:nth-child(2) blockquote{font-size:clamp(2.2rem,3.6vw,2.8rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:.08em}
.review figcaption{font-size:.98rem;color:var(--muted)}
.review figcaption b{color:var(--coral);font-weight:600}

/* ---- Halloween: button + dialog ---- */
.btn.big{font-size:1.15rem;padding:1em 1.8em}
.spooky-copy{gap:20px}
.spooky-in{align-items:center}
.spooky-dialog{border:0;border-radius:24px;padding:30px 24px 24px;max-width:440px;width:calc(100% - 32px);background:#1C1030;color:#FFFFFF;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.spooky-dialog::backdrop{background:rgba(12,6,20,.7);backdrop-filter:blur(3px)}
.spooky-dialog h2{color:#FFFFFF;font-size:2rem;margin:6px 0 4px}
.spooky-dialog .eyebrow{color:var(--dot)}
.spooky-dialog .hint{color:#CDBEE0;margin-bottom:14px}
.spooky-dialog .spookyform{max-width:none}
.dclose{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#FFFFFF;font:400 1rem var(--display);cursor:pointer}

/* ---- join band: brand gradient so it contrasts with the teal and purple bands ---- */
.join-band{background:var(--grad)}
.join-band .eyebrow{color:#FFFFFF;opacity:.9}
.join-band h2{--arrow-c:var(--dot)}
.join-band .lede,.join-band .perks{color:#FFF1EA}
.join form{box-shadow:0 24px 50px rgba(120,0,60,.3)}

/* ---- scroll cue + the trail that runs down the page ---- */
.torch .scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:grid;justify-items:center;font:1.25rem/1.15 var(--hand);color:var(--dot);text-decoration:none;text-align:center;z-index:2}
.torch .scroll-cue span:last-child{font-size:1.05rem;color:#FFE7A8}
@media (prefers-reduced-motion:no-preference){.torch .scroll-cue{animation:nudge 2.4s ease-in-out infinite}}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 6px}}
.trail-host{position:relative}
.site-trail{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:3;overflow:visible}
.site-trail #trail-path{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 15;opacity:.42}
.site-trail #trail-dot ellipse{fill:var(--orange)}
.site-trail #trail-dot ellipse.mid{fill:#FF8A2B}
.site-trail #trail-dot{filter:drop-shadow(0 0 5px rgba(254,113,12,.6))}
.site-trail #trail-x path{stroke:var(--orange);stroke-width:5;stroke-linecap:round;fill:none;opacity:.8}
@media (max-width:760px){.torch .scroll-cue{bottom:16px;font-size:1.1rem}.site-trail #trail-path{stroke-width:4;opacity:.35}}

/* hero spacing for the trail cue */
.torch{padding-bottom:140px}
.torch .scroll-cue{bottom:30px}
@media (max-width:760px){
  .torch{padding-bottom:250px}
  .torch .wall .clue{bottom:118px}
  .torch .scroll-cue{bottom:26px}
  .site-trail #trail-path{stroke-width:3.5}
}

/* one side margin for the whole site, wider on phones so the trail has its own lane */
:root{--gutter:16px}
@media (max-width:760px){:root{--gutter:26px}}
body{padding-inline:var(--gutter)}
.nav{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
.nav.dark{margin-inline:0}
.torch,.band,.join-band{padding-left:var(--gutter);padding-right:var(--gutter)}
footer{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
/* hero headline: three bigger lines on phones */
br.m-only{display:none}
@media (max-width:760px){
  br.m-only{display:inline}
  .torch h1{font-size:clamp(2rem,9.4vw,2.9rem)}
}