/* BROODE landing page.
   Brand pulled from broode.ie: their own two display faces, cream/brown/lilac palette.
   One call to action on the whole page: everything goes to the quiz. */
@font-face{font-family:'Oskon';src:url('/fonts/8342ZT-Bros-Oskon-90s.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Guthen';src:url('/fonts/6501Guthen-Jaqueline.woff2')format('woff2');font-weight:400;font-display:swap}

:root{
  --cream:#EBDDC6; --cream-2:#F5EEE3; --cream-3:#FAF6F0;
  --brown:#422E2E; --brown-2:#5C4444; --brown-soft:rgba(66,46,46,.72); --brown-faint:rgba(66,46,46,.42);
  --lilac:#C5B6E0; --lilac-deep:#6F5A9C; --lilac-wash:rgba(197,182,224,.22);
  --ink:#333333; --line:rgba(66,46,46,.14);
  --gm:24px;
  --disp:'Oskon',Georgia,'Times New Roman',serif;
  --script:'Guthen','Snell Roundhand',cursive;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--cream-3);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} img{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:400;letter-spacing:-.005em;line-height:1.04;color:var(--brown)}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gm)}
.narrow{max-width:760px}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.13)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(155,135,196,.55)}70%{box-shadow:0 0 0 16px rgba(155,135,196,0)}100%{box-shadow:0 0 0 0 rgba(155,135,196,0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(12px,-16px)}100%{transform:translate(0,0)}}
.rise{animation:rise .8s var(--ease) both;animation-delay:var(--d,0s)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv .st>*{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in .st>*{opacity:1;transform:none}
.rv.in .st>*:nth-child(2){transition-delay:.09s}.rv.in .st>*:nth-child(3){transition-delay:.18s}
.rv.in .st>*:nth-child(4){transition-delay:.27s}.rv.in .st>*:nth-child(5){transition-delay:.36s}.rv.in .st>*:nth-child(6){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,.rv .st>*{opacity:1;transform:none}html{scroll-behavior:auto}}

/* header: logo only. A landing page offers no exits. */
.top{position:absolute;top:0;left:0;right:0;z-index:20;padding:22px var(--gm);display:flex;align-items:center;justify-content:center}
.top img{height:52px;width:auto;display:block}
@media(max-width:600px){.top img{height:40px}}

/* hero */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;padding:120px 0 64px;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:66% 42%;animation:kb 22s ease-in-out infinite alternate}
.hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(48,32,32,.94) 0%,rgba(52,35,35,.88) 34%,rgba(60,41,41,.58) 62%,rgba(66,46,46,.22) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(42px,7.2vw,86px);color:var(--cream);max-width:15ch;text-wrap:balance}
.hero .sc{display:block;font-family:var(--script);font-size:clamp(40px,6.2vw,72px);color:#EFE7FA;line-height:1.25;margin:18px 0 0;max-width:22ch;text-shadow:0 2px 24px rgba(40,26,26,.5)}
.hero p.sub b{color:#fff;font-weight:600}
.hero p.sub{margin:28px 0 0;color:rgba(248,243,235,.94);font-size:clamp(16px,1.6vw,19px);max-width:44ch;line-height:1.6}
.hero .cta-wrap{margin-top:34px}

/* the one button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--lilac);color:var(--brown);
  border:none;padding:20px 40px;border-radius:14px;font-family:var(--body);font-size:17px;font-weight:600;letter-spacing:.01em;
  transition:transform .18s var(--ease),box-shadow .25s;animation:pulse 3s ease-in-out infinite}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(66,46,46,.28)}
.btn svg{width:19px;height:19px;transition:transform .2s} .btn:hover svg{transform:translateX(4px)}
.btn.solid{background:var(--brown);color:var(--cream);animation:none}
.btn.solid:hover{box-shadow:0 16px 40px rgba(66,46,46,.3)}
.under{margin-top:16px;font-size:14.5px;color:rgba(245,238,227,.78);display:flex;flex-wrap:wrap;gap:6px 20px}
.under.dark{color:var(--brown-soft)}
.under span::before{content:'✓';display:inline-block;width:19px;height:19px;line-height:19px;text-align:center;border-radius:50%;
  background:var(--lilac);color:var(--brown);font-size:11px;font-weight:700;margin-right:8px}

/* sections */
.sec{padding:96px 0}
.sec.cream{background:var(--cream-2)}
.sec.deep{background:var(--brown);color:var(--cream)}
.sec.deep h2,.sec.deep h3{color:var(--cream)}
.eye{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--lilac-deep)}
.eye::before{content:'';width:26px;height:2px;background:var(--lilac);border-radius:2px}
.sec.deep .eye{color:var(--lilac)}
h2.big{font-size:clamp(32px,5vw,58px);margin:16px 0 0;text-wrap:balance}
.scr{font-family:var(--script);color:var(--lilac-deep);font-size:clamp(36px,5.2vw,60px);line-height:1.18;display:block}
.sec.deep .scr{color:var(--lilac)}
.lede{font-size:19px;line-height:1.65;color:var(--brown-soft);max-width:56ch;margin-top:22px}
.sec.deep .lede{color:rgba(235,221,198,.82)}

/* the problem, as a soft list */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:820px){.pains{grid-template-columns:1fr}}
.pain{background:#fff;border-radius:20px;padding:30px 28px;box-shadow:0 12px 34px rgba(66,46,46,.07)}
.pain b{display:block;font-family:var(--disp);font-size:23px;color:var(--brown);margin-bottom:10px}
.pain p{font-size:15.5px;line-height:1.6;color:var(--brown-soft)}

/* the guide */
.guide{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:860px){.guide{grid-template-columns:1fr;gap:34px}}
.guide ul{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.guide li{display:flex;gap:14px;font-size:16.5px;line-height:1.5;color:var(--brown-soft)}
.guide li i{flex:0 0 26px;height:26px;border-radius:50%;background:var(--lilac);color:var(--brown);font-style:normal;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.mock{position:relative;justify-self:center;width:min(340px,86%);aspect-ratio:3/4.1;border-radius:8px 20px 20px 8px;overflow:hidden;
  background:linear-gradient(150deg,var(--cream) 0%,#fff 60%);box-shadow:0 34px 70px rgba(66,46,46,.26),inset 7px 0 0 rgba(66,46,46,.1);
  animation:float 7s ease-in-out infinite;transform:rotate(-2deg);padding:38px 32px;display:flex;flex-direction:column}
.mock .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--lilac-deep);font-weight:700}
.mock h4{font-family:var(--disp);font-size:34px;line-height:1.05;color:var(--brown);margin:14px 0 0;font-weight:400}
.mock .sq{font-family:var(--script);font-size:33px;color:var(--lilac-deep);margin-top:10px}
.mock .lines{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.mock .lines i{display:block;height:7px;border-radius:4px;background:rgba(66,46,46,.12)}
.mock .lines i:nth-child(2){width:82%}.mock .lines i:nth-child(3){width:64%}
.mock .badge{position:absolute;top:16px;right:-6px;background:var(--brown);color:var(--cream);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;padding:8px 14px;border-radius:6px}

/* video slot (placeholder while Amy's film is unshot) */
.vid{position:relative;border-radius:22px;overflow:hidden;background:var(--brown);aspect-ratio:16/9;box-shadow:0 26px 60px rgba(66,46,46,.22)}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.78}
.vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent}
.vid .play::before{content:'';position:absolute;width:88px;height:88px;border-radius:50%;background:var(--lilac);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.vid .play::after{content:'';position:relative;width:22px;height:26px;margin-left:6px;background:var(--brown);clip-path:polygon(0 0,100% 50%,0 100%)}
.vid .ph{position:absolute;top:16px;left:16px;background:var(--cream);color:var(--brown);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;padding:8px 13px;border-radius:999px}
.vid .cap{position:absolute;left:20px;bottom:18px;color:var(--cream);font-size:14px}

/* what's inside */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:rgba(235,221,198,.09);border:1px solid rgba(235,221,198,.18);border-radius:20px;padding:28px 26px;transition:transform .3s var(--ease),background .3s}
.card:hover{background:rgba(235,221,198,.15)}
.card .ic{width:46px;height:46px;border-radius:14px;background:var(--lilac);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card .ic svg{width:22px;height:22px;fill:none;stroke:var(--brown);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:22px;margin-bottom:9px}
.card p{font-size:15px;line-height:1.6;color:rgba(235,221,198,.72)}

/* proof */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.q{position:relative;background:#fff;border-radius:20px;padding:36px 28px 26px;box-shadow:0 12px 34px rgba(66,46,46,.07);display:flex;flex-direction:column;gap:16px}
.q::before{content:'“';position:absolute;top:2px;left:20px;font-family:var(--disp);font-size:76px;color:var(--lilac);line-height:1}
.q p{font-size:16.5px;line-height:1.55;color:var(--brown);position:relative}
.q cite{font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--brown-faint);margin-top:auto}
.q.todo{background:#fff;border:2px dashed rgba(66,46,46,.2);box-shadow:none;align-items:flex-start;justify-content:center;min-height:190px}
.q.todo::before{color:rgba(197,182,224,.5)}
.q.todo span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brown-faint);background:var(--cream);padding:8px 13px;border-radius:999px}

/* Amy */
.amy{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
@media(max-width:860px){.amy{grid-template-columns:1fr;gap:30px}}
.amy .pic{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 26px 60px rgba(66,46,46,.2)}
.amy .pic img{width:100%;display:block}
.amy .tag{position:absolute;left:16px;bottom:16px;background:var(--cream);color:var(--brown);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;padding:9px 14px;border-radius:999px}

/* closing */
.close{text-align:center}
.close h2{max-width:18ch;margin-left:auto;margin-right:auto}
.close .under{justify-content:center}

/* sticky mobile CTA */
#sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px var(--gm) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(250,246,240,0),rgba(250,246,240,.97) 34%);display:none;transform:translateY(120%);transition:transform .45s var(--ease)}
#sticky.on{transform:none}
#sticky .btn{width:100%;animation:none}
@media(max-width:760px){#sticky{display:block}}

footer{background:var(--brown);color:rgba(235,221,198,.7);padding:44px 0 110px;font-size:13.5px}
@media(min-width:761px){footer{padding-bottom:44px}}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer img{height:44px;width:auto;opacity:.9}

/* ===== quiz ===== */
.quiz{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:112px 0 70px;position:relative}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;z-index:0;pointer-events:none;animation:drift 16s ease-in-out infinite}
.blob.a{width:520px;height:520px;background:var(--lilac-wash);top:-140px;left:-160px}
.blob.b{width:420px;height:420px;background:rgba(235,221,198,.6);bottom:-120px;right:-120px;animation-delay:-8s}
.quiz .wrap{position:relative;z-index:1}
.bar{max-width:520px;margin:0 auto 34px;display:flex;align-items:center;gap:12px}
.bar .track{flex:1;height:6px;border-radius:4px;background:rgba(66,46,46,.12);overflow:hidden}
.bar .fill{height:100%;width:25%;border-radius:4px;background:var(--lilac-deep);transition:width .6s var(--ease)}
.bar em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--brown-faint);white-space:nowrap}
.step{display:none} .step.on{display:block;animation:rise .6s var(--ease) both}
.step h2{font-size:clamp(30px,4.6vw,52px);text-align:center;max-width:17ch;margin:0 auto;text-wrap:balance}
.step .hint{text-align:center;color:var(--brown-soft);margin:16px auto 0;max-width:44ch;font-size:16.5px}
.opts{display:flex;flex-direction:column;gap:13px;max-width:560px;margin:40px auto 0}
.opt{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:22px 26px;
  border:2px solid rgba(66,46,46,.14);border-radius:18px;background:#fff;color:var(--brown);font-size:18px;font-weight:500;
  transition:border-color .2s,background .2s,transform .18s var(--ease),box-shadow .25s}
.opt:hover{border-color:var(--lilac-deep);background:var(--lilac-wash);transform:translateY(-2px);box-shadow:0 14px 34px rgba(66,46,46,.1)}
.opt.picked{background:var(--lilac);border-color:var(--lilac-deep)}
.opt i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid rgba(66,46,46,.2);transition:background .2s,border-color .2s}
.opt:hover i,.opt.picked i{border-color:var(--brown);background:var(--brown)}
.back{display:block;margin:26px auto 0;background:none;border:none;color:var(--brown-faint);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.form{max-width:520px;margin:38px auto 0;background:#fff;border-radius:22px;padding:34px 30px;box-shadow:0 24px 60px rgba(66,46,46,.12);border-top:4px solid var(--lilac)}
.f{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.f label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--brown-faint)}
.f input{border:1.5px solid rgba(66,46,46,.16);border-radius:12px;padding:15px 16px;font:inherit;font-size:16px;color:var(--ink);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.f input:focus{border-color:var(--brown);box-shadow:0 0 0 4px var(--lilac-wash)}
.f input::placeholder{color:rgba(66,46,46,.3)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--brown-soft);margin-top:6px}
.consent input{flex:0 0 auto;width:22px;height:22px;margin-top:1px;accent-color:var(--lilac-deep)}
.err{display:none;margin-top:14px;padding:12px 15px;border-radius:12px;font-size:14.5px;background:#fdeaea;border:1px solid #eab8b8;color:#8c3232}
.err.on{display:block}
.form .btn{width:100%;margin-top:20px}
.note{font-size:13px;color:var(--brown-faint);margin-top:14px;text-align:center}

/* thank you */
.done{display:flex;align-items:center;text-align:center;padding:92px 0 26px;position:relative;overflow:hidden}
.done .tick{width:60px;height:60px;border-radius:50%;background:var(--lilac);margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.done .tick svg{width:28px;height:28px;fill:none;stroke:var(--brown);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60;animation:draw .8s var(--ease) .3s forwards}
.done h1{font-size:clamp(30px,4.2vw,46px);max-width:18ch;margin:0 auto}
.done .lede{margin:12px auto 0;text-align:center;font-size:16.5px;line-height:1.55;max-width:46ch}
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;text-align:left}
@media(max-width:820px){.next{grid-template-columns:1fr}}
.next div{background:#fff;border-radius:20px;padding:28px 26px;box-shadow:0 12px 34px rgba(66,46,46,.07)}
.next b{display:block;font-family:var(--disp);font-size:21px;color:var(--brown);margin-bottom:9px}
.next span{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--lilac);color:var(--brown);font-size:14px;font-weight:700;align-items:center;justify-content:center;margin-bottom:16px}
.next p{font-size:15px;line-height:1.6;color:var(--brown-soft)}
.pick{margin-top:44px;background:var(--cream-2);border-radius:22px;padding:32px 30px;text-align:left}
.pick .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--lilac-deep)}
.pick h3{font-size:clamp(24px,3vw,34px);margin:12px 0 10px}
.pick p{color:var(--brown-soft);font-size:16.5px;line-height:1.6}

/* ============================================================
   VIDEO HERO — the welcome film is the first thing on the page
   (added 10 Sep 2026, replaces the photo hero)
   ============================================================ */
.vhero{position:relative;padding:74px 0 70px;overflow:hidden;background:var(--brown);text-align:center}
.vhero .bg{position:absolute;inset:0;z-index:0}
.vhero .bg img{width:100%;height:100%;object-fit:cover;object-position:60% 38%;
  filter:blur(30px) saturate(.8);transform:scale(1.18);opacity:.5;animation:kb 26s ease-in-out infinite alternate}
.vhero .bg::after{content:'';position:absolute;inset:0;background:
  radial-gradient(120% 88% at 50% 2%, rgba(155,135,196,.36) 0%, rgba(66,46,46,0) 60%),
  linear-gradient(180deg, rgba(44,30,30,.84) 0%, rgba(52,36,36,.92) 44%, rgba(66,46,46,.97) 100%)}
.vhero .wrap{position:relative;z-index:2;max-width:900px}
.vhero .eye{color:var(--lilac)}
.vhero .eye::before{background:var(--lilac)}
.vhero h1{margin:13px auto 0;font-size:clamp(29px,4vw,48px);color:var(--cream);
  max-width:26ch;text-wrap:balance;line-height:1.07}
.vhero .sc{display:block;font-family:var(--script);font-size:clamp(30px,4.2vw,48px);color:#EFE7FA;
  line-height:1.2;margin:16px 0 0;text-shadow:0 2px 26px rgba(30,18,18,.55)}
.vhero .hsub{margin:10px auto 0;text-wrap:balance;color:rgba(248,243,235,.9);font-size:clamp(15px,1.5vw,17.5px);max-width:46ch;line-height:1.55}
.vhero .hsub b{color:#fff;font-weight:700}
.vhero .cta-wrap{margin-top:20px;display:flex;flex-direction:column;align-items:center}
.vhero .under{justify-content:center;color:rgba(245,238,227,.8)}

/* the player */
.player{position:relative;width:min(100%,800px,calc(48svh * 1.7993));margin:24px auto 0;
  aspect-ratio:1076/598;border-radius:22px;overflow:hidden;background:#1d1414;
  box-shadow:0 40px 90px rgba(18,10,10,.55), 0 0 0 1px rgba(235,221,198,.16), 0 0 0 11px rgba(197,182,224,.09)}
.player video{width:100%;height:100%;object-fit:cover;display:block;background:#1d1414}
.player .veil{position:absolute;inset:0;border:none;padding:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(26,16,16,.04) 0%,rgba(26,16,16,.46) 100%);
  display:flex;align-items:center;justify-content:center;transition:opacity .45s ease,visibility .45s}
.player .veil::before{content:'';position:absolute;width:76px;height:76px;border-radius:50%;
  background:var(--lilac);box-shadow:0 16px 46px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.player .veil::after{content:'';position:relative;width:20px;height:24px;margin-left:6px;
  background:var(--brown);clip-path:polygon(0 0,100% 50%,0 100%)}
.player .veil:hover::before{transform:scale(1.09)}
.player .ring{position:absolute;top:50%;left:50%;width:76px;height:76px;margin:-38px 0 0 -38px;
  border-radius:50%;border:2px solid rgba(197,182,224,.65);pointer-events:none;
  animation:pring 2.8s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes pring{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.player .snd{position:absolute;top:15px;right:15px;background:rgba(235,221,198,.95);color:var(--brown);
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:7px 13px;
  border-radius:999px;pointer-events:none;transition:opacity .35s}
.player .who{position:absolute;left:19px;bottom:16px;color:var(--cream);font-size:14px;
  text-shadow:0 1px 12px rgba(0,0,0,.7);pointer-events:none;transition:opacity .35s}
.player .len{position:absolute;right:15px;bottom:16px;background:rgba(20,12,12,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--cream);font-size:12.5px;
  padding:5px 11px;border-radius:999px;pointer-events:none;transition:opacity .35s}
.player.playing .veil{opacity:0;visibility:hidden}
.player.playing .ring{display:none}
.player.playing .snd,.player.playing .who,.player.playing .len{opacity:0}

@media (max-width:720px){
  .vhero{padding:92px 0 62px}
  .player{width:100%;margin-top:26px;border-radius:18px;box-shadow:0 26px 56px rgba(18,10,10,.5),0 0 0 1px rgba(235,221,198,.14)}
  .player .veil::before{width:64px;height:64px}
  .player .veil::after{width:17px;height:21px}
  .player .ring{width:64px;height:64px;margin:-32px 0 0 -32px}
  .player .snd{font-size:9.5px;padding:6px 10px;letter-spacing:.09em;top:12px;right:12px}
  .player .who{font-size:12.5px;left:14px;bottom:12px}
  .player .len{font-size:11.5px;right:12px;bottom:12px}
  .vhero .sc{margin-top:24px}
}
@media (prefers-reduced-motion: reduce){
  .vhero .bg img{animation:none}
  .player .ring{animation:none;opacity:.5}
}

/* ===== TWO GUIDES (added 10 Sep 2026 — Amy's VSL promises both) ===== */
.gcap{text-align:center;max-width:720px;margin:0 auto}
.gcap .lede{margin:20px auto 0;text-align:center}
.gcap .lede b{color:var(--brown);font-weight:700}
.twog{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:56px}
.twog .g{display:flex;flex-direction:column;align-items:center;text-align:center}
.twog .mock{width:min(268px,78%);margin:0 0 26px;aspect-ratio:3/3.62}
.twog .mock.alt{transform:rotate(2deg);animation-delay:-3.5s}
.twog .mock h4{font-size:30px}
.twog .mock .sq{font-size:27px}
.twog .who{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--lilac-deep);margin-bottom:13px}
.twog ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;
  text-align:left;max-width:360px}
.twog li{display:flex;gap:12px;font-size:15.5px;line-height:1.52;color:var(--brown-soft)}
.twog li::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:var(--lilac);margin-top:8px}
@media(max-width:860px){
  .twog{grid-template-columns:1fr;gap:50px;margin-top:44px}
  .twog .mock{width:min(240px,66%)}
}

/* ===== thank-you page: book a discovery call (Amy's Google Calendar schedule) ===== */
.book{padding:22px 0 64px;text-align:center}
.book .lede{margin-left:auto;margin-right:auto;text-align:center}
.cal{margin:16px auto 0;max-width:820px;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 26px 60px rgba(66,46,46,.14)}
.cal iframe{display:block;width:100%;height:640px;border:0}
@media(max-width:720px){.book{padding:64px 0 80px}.cal{border-radius:18px}.cal iframe{height:900px}}

.after{padding:72px 0 96px;text-align:center}
.after .pick{margin-top:0}
.book .bk{font-family:var(--disp);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:var(--brown);margin:0 auto;max-width:26ch;text-wrap:balance}
.book .bk em{font-style:normal;font-family:var(--script);font-size:1.25em;color:var(--lilac-deep);display:block;margin-top:4px}
.book .bl{margin:10px auto 0;font-size:15.5px;line-height:1.5;color:var(--brown-soft);max-width:46ch}