/* ELVY · application funnel for creators already on OF (/), thank-you (/thank-you/), privacy (/privacy/).
   v3 (20 Oct 2026): ELVY's identity (ink #090A11, purple #724EF1, cream #F1EBDE, marker yellow #EAD900, their
   black-and-white footage and founders photo, their brush heart, their Permanent Marker accents, their FAQ index
   and magazine footer) set in Poppins: 700 with tight tracking for headlines, 400/500 for text. The serif display
   font was dropped on request (it reads as a template font); sentence case instead of all caps.
   Short page: hero + form, FAQ, the founders, join us. No emoji, no glows, no glass, no mockups. */

@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Permanent Marker";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/permanent-marker-400.woff2) format("woff2")}

:root{
  --ink:#090A11;--ink-2:#13141D;
  --purple:#724EF1;--purple-2:#6240E0;
  --cream:#F1EBDE;--paper:#15131D;
  --yellow:#EAD900;
  --text:#FAFAFA;--soft:rgba(250,250,250,.84);--muted:rgba(250,250,250,.68);--dim:rgba(250,250,250,.52);
  --line:rgba(250,250,250,.14);--line-2:rgba(250,250,250,.24);
  --pline:rgba(21,19,29,.85);--pline-2:rgba(21,19,29,.16);--pmuted:rgba(21,19,29,.68);
  --display:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --marker:"Permanent Marker","Comic Sans MS",cursive;
  --r:24px;--r-s:16px;--pill:9999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
::selection{background:var(--yellow);color:var(--ink)}
.skip{position:absolute;top:-100px;left:1rem;z-index:999;padding:.75rem 1rem;background:var(--yellow);color:var(--ink);font-weight:600;border-radius:var(--pill)}
.skip:focus{top:1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem}
.nw{white-space:nowrap}
.of{display:inline-block;width:.86em;height:.86em;vertical-align:-.1em;margin:0 .08em 0 .1em;fill:currentColor}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.03em}
.y{color:var(--yellow)}
.pu{color:var(--purple)}
/* their handwritten accent: Permanent Marker in yellow, slightly rotated */
.mk{font-family:var(--marker);font-weight:400;color:var(--yellow);display:inline-block;transform:rotate(-3deg);line-height:1.1;margin:0;letter-spacing:0}
.mk.p{color:var(--purple)}
/* their tiny tracked labels ("FAQ"): used sparingly */
.lbl{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1rem}
.doodle{position:absolute;pointer-events:none;user-select:none}

/* buttons: their yellow pill (join page); no glow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.7rem;font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.3;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;text-align:center;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-y:hover{background:#F3E31A}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* header: over the hero on the landing (like their nav), solid elsewhere */
.top{position:relative;z-index:5;border-bottom:1px solid var(--line)}
.top.over{position:absolute;inset:0 0 auto;border-bottom:0}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:78px}
.logo{display:block;width:96px}
.logo img{width:100%;height:auto}
.top .btn{padding:.6rem 1.3rem;font-size:.95rem}

/* HERO: their full-bleed B&W footage, darkened; copy left, the application card right */
.hero{position:relative;overflow:hidden;padding:calc(78px + clamp(2rem,5vw,4rem)) 0 clamp(3.5rem,7vw,6rem)}
.hero-bg{position:absolute;inset:0;z-index:0;background:#000}
.hero-bg video,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,10,17,.9) 0%,rgba(9,10,17,.55) 52%,rgba(9,10,17,.3) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(9,10,17,0) 28%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,450px);column-gap:clamp(2rem,6vw,6rem);align-items:center}
.hero .mk{font-size:clamp(1.25rem,2.1vw,1.65rem);margin-bottom:1.1rem}
.hero h1{font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1.06;margin:0 0 1.4rem;max-width:16ch}
.hero h1 .l{display:block}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;color:var(--soft);margin:0;max-width:34ch}
.facts{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.6rem}
.facts li{display:flex;align-items:center;gap:.75rem;font-size:1.05rem;font-weight:500;color:#fff}
.facts img{width:30px;height:auto;flex:none}
.hero .scroll{margin-top:2.5rem;font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* the application card: their cream paper + their heart poking out of the corner */
.apply{position:relative;background:var(--cream);color:var(--paper);border-radius:var(--r);padding:2rem 2rem 1.75rem;scroll-margin-top:1.25rem}
.apply .doodle{width:78px;right:-26px;top:-30px;transform:rotate(14deg)}
.apply-t{font-size:clamp(1.55rem,2.2vw,1.85rem);line-height:1.15;margin:0 0 .35rem}
.apply-s{color:var(--pmuted);font-size:.95rem;line-height:1.5;margin:0 0 1.4rem}

/* sections */
.sec{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0}
.sec-purple{background:var(--purple)}
.sec-cream{background:var(--cream);color:var(--paper)}
.h2{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.06;margin:0 0 1.25rem}
.ticks::before,.ticks::after{content:"";position:absolute;width:14px;height:14px;border:solid var(--pline);pointer-events:none}
.ticks::before{top:24px;left:24px;border-width:1px 0 0 1px}
.ticks::after{bottom:24px;right:24px;border-width:0 1px 1px 0}

/* the people behind ELVY: their purple block, their founders photo, their marker line */
.ppl{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}
.ppl figure{margin:0;position:relative}
.ppl figure img{border-radius:var(--r);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.ppl figure .mk{position:absolute;right:-1.25rem;bottom:-1.4rem;font-size:clamp(1.7rem,3vw,2.4rem);transform:rotate(-12deg);line-height:1;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 rgba(9,10,17,.25)}
.ppl .h2{max-width:14ch}
.ppl p{margin:0 0 1rem;color:var(--soft);font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.65;max-width:44ch}
.ppl p b{color:#fff}
.ppl p.strong{color:#fff;font-weight:600;margin-top:1.5rem}

/* FAQ: their cream index as a dropdown list; the answer opens under its question everywhere */
.faqx{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.faqx-l .big{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.1;letter-spacing:-.03em;margin:0;color:var(--paper)}
.faqx-l .mk{display:block;width:max-content;font-size:4rem;color:var(--purple);transform:rotate(-8deg);margin:1.4rem 0 .6rem}
.faqx-l .ans{margin:0;font-style:italic;color:var(--paper);max-width:34ch;line-height:1.65}
.idx-h{display:flex;justify-content:space-between;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding-bottom:.9rem;border-bottom:1px solid var(--pline)}
.idx details{border-bottom:1px solid var(--pline)}
.idx summary{list-style:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:baseline;gap:.5rem;padding:1.3rem 0;color:var(--paper)}
.idx summary::-webkit-details-marker{display:none}
.idx .n{font-size:.8rem;font-weight:500;letter-spacing:.06em}
.idx .q{font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:500;line-height:1.35;letter-spacing:-.01em}
.idx summary::after{content:"+";font-size:1.4rem;font-weight:400;line-height:1;transition:transform .3s var(--ease)}
.idx details[open] summary::after{transform:rotate(45deg)}
.idx details[open] .q{color:var(--purple)}
.idx .a{padding:0 2rem 1.3rem 3.1rem;color:var(--pmuted);line-height:1.65}
.idx .a p{margin:0}
.idx details[open] .a{animation:faqIn .3s cubic-bezier(.22,1,.36,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.idx details[open] .a{animation:none}}
.more{display:inline-block;margin-top:1.75rem;font-size:1.5rem}

/* join us: their closing ("Join us. We can't wait to meet you!") */
.join{background:var(--ink);padding:clamp(5rem,10vw,8rem) 0;text-align:center}
.join .mk{font-size:clamp(1.4rem,2.3vw,1.8rem);margin-bottom:1rem}
.join .h2{margin:0 auto .9rem}
.join p.sub{color:var(--soft);font-size:clamp(1.02rem,1.5vw,1.15rem);margin:0 auto 2.25rem;max-width:36ch}

/* footer: their magazine line (small caps), then the legal lines */
.foot{background:var(--ink);border-top:1px solid var(--line);padding:2.25rem 0 2rem}
.mag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.mag a:hover{color:#fff}
.mag .r{text-align:right}
.legal{border-top:1px solid var(--line);margin-top:1.75rem;padding-top:1.4rem;color:var(--dim);font-size:.8rem;line-height:1.65}
.legal p{margin:0;max-width:84ch}
.legal p+p{margin-top:.4rem}

/* 🔴 A fact ELVY still has to confirm. Yellow on purpose: it may not go live. */
.todo{background:#ffe066;color:#111;padding:0 .3em;border-radius:3px;font-weight:500;font-style:normal}

/* THANK-YOU: step 1 watch their 90-second video (VSL), step 2 pick a time */
/* centred page (20 Oct 2026): headline, then the video, then the calendar, one column in the middle */
.ty{padding:clamp(3rem,6vw,4.5rem) 0 clamp(3.5rem,7vw,5.5rem);text-align:center}
.ty .hello{font-size:clamp(1.3rem,2.1vw,1.65rem);margin-bottom:.9rem}
.ty h1{font-size:clamp(2.5rem,5vw,4.2rem);line-height:1.05;margin:0 auto 1.1rem;max-width:16ch}
.ty .lead{max-width:44ch;margin:0 auto 3rem}
.flow{display:flex;flex-direction:column;align-items:center;gap:clamp(2.75rem,5vw,3.5rem);max-width:760px;margin:0 auto}
.flow>div{width:100%}
.flow .vsl-col{max-width:340px}
.flow .wait{text-align:left}
.flow .stepmk{font-size:clamp(1.3rem,2vw,1.6rem);margin:0 0 1rem}
/* their join-page video card: vertical, rounded, purple play button, "tap to watch (90s)" */
.vsl{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:9/16;border:1px solid var(--line)}
.vsl video{width:100%;height:100%;object-fit:cover}
.vsl .play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border:0;padding:0;background:linear-gradient(0deg,rgba(9,10,17,.55),rgba(9,10,17,.15));color:#fff;cursor:pointer;font:inherit}
.vsl .play .c{width:84px;height:84px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease)}
.vsl .play:hover .c{transform:scale(1.06)}
.vsl .play .c svg{width:30px;height:30px;fill:var(--yellow);margin-left:5px}
.vsl .play .t{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:rgba(9,10,17,.72);padding:.45rem .85rem;border-radius:9999px}
.vsl.on .play{display:none}
/* /book/: the calendar first (js/cal.js), then 4 short videos in the same card as the thank-you VSL */
.bk{padding:clamp(2.5rem,5vw,3.75rem) 0 clamp(3rem,6vw,4.5rem);text-align:center}
.bk .hello{font-size:clamp(1.3rem,2.1vw,1.65rem);margin-bottom:.9rem}
.bk h1{font-size:clamp(2.3rem,4.6vw,3.8rem);line-height:1.05;margin:0 auto 1rem;max-width:18ch}
.bk .lead{max-width:46ch;margin:0 auto 1rem}
.bk-jump{margin:0 0 2rem;font-size:.95rem}
.bk-jump a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.bk-cal{max-width:1000px;margin:0 auto;background:#fff;color:var(--paper);border-radius:var(--r);min-height:640px;overflow:auto;text-align:left}
.bk-note{margin:1.1rem 0 0;font-size:.9rem}
.bk-note a{text-decoration:underline;text-underline-offset:3px}
.vids{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.vids h3{display:flex;gap:.65rem;align-items:baseline;font-size:1.05rem;font-weight:600;line-height:1.35;letter-spacing:-.01em;margin:1rem 0 0;color:var(--paper)}
.vids h3 .n{flex:none;font-size:.8rem;font-weight:500;letter-spacing:.06em;color:var(--purple)}
.vsl.ph{background:var(--ink-2)}
.vsl.ph .play{cursor:default}
.bk-up{margin:2.75rem 0 0;text-align:center}
.cal-wait{min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;text-align:center;padding:2rem}
.cal-wait p{margin:0;max-width:46ch}
.wait{position:relative;background:var(--cream);color:var(--paper);border-radius:var(--r);padding:2rem 2rem 2.2rem}
.wait h2{font-size:clamp(1.6rem,2.6vw,2rem);line-height:1.1;margin:0 0 .7rem}
.wait p{margin:0;line-height:1.65;color:var(--pmuted)}
.wait .doodle{width:70px;right:-20px;top:-26px;transform:rotate(12deg)}
.btn-ink{background:var(--paper);color:var(--cream)}
.btn-ink:hover{background:#000}
.wait .wa{margin-top:1.3rem}
.ty .lead a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
[hidden]{display:none!important}
/* what happens next: their index rows */
.steps4{list-style:none;margin:2.25rem auto 0;padding:0;border-top:1px solid var(--pline);max-width:760px;text-align:left}
.next-sec{text-align:center}
.steps4 li{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:baseline;gap:.4rem 1rem;padding:1.3rem 0;border-bottom:1px solid var(--pline)}
.steps4 .n{font-size:.8rem;font-weight:500;letter-spacing:.06em}
.steps4 h3{font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:0;color:var(--paper)}
.steps4 p{grid-column:2;margin:.15rem 0 0;color:var(--pmuted)}
.steps4 .when{grid-column:3;grid-row:1;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pmuted);white-space:nowrap}
.steps4 li.done h3,.steps4 li.done .when{color:var(--purple)}

/* legal pages */
.doc{padding:clamp(3rem,7vw,5rem) 0 4.5rem}
.doc .wrap{max-width:820px}
.doc h1{font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.08;margin:0 0 .7rem}
.doc .eff{color:var(--muted);font-size:.95rem;margin:0 0 2.5rem}
.doc h2{font-size:1.3rem;line-height:1.3;letter-spacing:-.01em;margin:2.5rem 0 .8rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.doc p,.doc li{color:var(--soft);line-height:1.75}
.doc ul{padding-left:1.2rem}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc b{color:#fff}

/* scroll reveal (JS-gated: without JS everything shows) */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:1020px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);row-gap:2.25rem}
  .hero .scroll{display:none}
  .apply{max-width:600px}
  .ppl{grid-template-columns:minmax(0,1fr)}
  .ppl figure{max-width:440px}
  .faqx{grid-template-columns:minmax(0,1fr)}
  .faqx-l .mk{display:none}
  .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .wrap{padding:0 1rem}
  .bk-cal{min-height:560px}
  .vids{gap:1.75rem 1rem}
  .vids h3{font-size:.95rem;margin-top:.8rem}
  .vids .vsl .play .c{width:64px;height:64px}
  .vids .vsl .play .t{font-size:.62rem;letter-spacing:.12em}
  .top .wrap{height:62px}
  .logo{width:78px}
  .top .btn{padding:.5rem 1.05rem;font-size:.9rem}
  .hero{padding-top:calc(62px + 1.5rem)}
  .hero-bg{bottom:auto;height:min(100%,560px)}
  .hero .mk{margin-bottom:.6rem}
  .hero h1{font-size:clamp(2.1rem,9.6vw,2.8rem);margin-bottom:.8rem}
  .lead{font-size:1rem}
  .apply{padding:1.4rem 1.1rem 1.3rem}
  .apply .doodle{width:58px;right:-8px;top:-24px}
  .apply-t{font-size:1.45rem}
  .apply-s{margin-bottom:1.1rem}
  .ppl figure .mk{right:-.25rem}
  .idx summary{grid-template-columns:2.1rem minmax(0,1fr) auto;padding:1.1rem 0}
  .idx .a{padding:0 0 1.2rem 2.6rem}
  .join .btn{width:100%}
  .wait{padding:1.6rem 1.25rem 1.8rem}
  .wait .doodle{width:56px;right:-6px}
  .flow .vsl-col{max-width:300px}
  .steps4 li{grid-template-columns:2.1rem minmax(0,1fr)}
  .steps4 .when{grid-column:2;grid-row:auto}
  .mag{flex-direction:column;align-items:flex-start}
  .mag .r{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}