/* 20MG recruitment site: apply page (/) + thank-you page (/thank-you/).

   Separate from 20mg.co on purpose (Levente 2026-10-02): this site recruits alt / goth /
   emo / cosplay girls, 18+, mostly in the US, so it is built in their visual language,
   not in 20mg.co's corporate one. Only 20MG's facts and policies are reused.

   Direction (Levente's Desktop folder "20mg.co website ideas": scrapbook pages, taped
   paper, die-cut stickers, iMessage bubbles), pushed dark: the back page of a black
   sketchbook at 2 a.m.

   THE SYSTEM (v11, 2026-10-05, from the coherence audit; Levente: "apply every single one").
   Both pages are built from these pieces only. Add to them; never fork a look-alike.
     colour    ink #0D0B0C ground · coal #18141A alternate ground · coal-2 cards ·
               bone #EFE7DA paper · pink #F2A7C3 THE accent (buttons, display lines, tape) ·
               cherry #D7193C (hard shadow, stickers) · berry #A3123F (the accent ON paper) ·
               mist / mist-2 secondary text. One outside colour: the iMessage blue bubble.
     type      Grenze Gotisch: section titles + the two display lines (hero, final call),
                 lowercase, ending in a period.
               Hanken Grotesk: 16 body · 18 intros · 20/700 card titles (steps, FAQ, form
                 questions, cards) · 28/600 the hero's short lines. Weights 400 / 600 / 700.
               Courier Prime: 12.5 labels · 14 captions · 16 buttons; always lowercase,
                 letter-spacing .02em (--mono-ls).
               The hero bubble alone uses the phone's system font (it IS an iMessage).
     shapes    radius 6px for UI (buttons, cards, form, options, label box), 12px for photos;
               paper (form, receipts, notes, polaroids, link cards) keeps square corners.
               One hard shadow (cherry offset: buttons, the form); one soft shadow (--soft)
               for everything lifted; --soft-f is the same shadow for clipped / masked paper.
     sections  one header (.sec-head): centred title + optional one-line intro, 56px above
               the content. Content grounds alternate coal / ink (js/site.js keeps it right
               when an optional section appears); the form and the final call sit on
               fishnet (.net) = "act here".
     stickers  one die-cut set (cherry, bow, black heart, chrome star, bolt), 1-2 per
               section, opposite corners, one of them wobbling.
     tilt      stickers ±10-14deg · tape ±3-8deg · side photos ±8deg · paper ±0.6-2deg. */

:root{
  --ink:#0D0B0C;
  --coal:#18141A;
  --coal-2:#221D24;
  --bone:#EFE7DA;
  --on-bone:#1C1719;
  --on-bone-2:#6B6067;
  --pink:#F2A7C3;
  --pink-2:#F7C6D8;
  --cherry:#D7193C;
  --berry:#A3123F;
  --mist:#B3A9B8;
  --mist-2:#857B8B;
  --line:rgba(239,231,218,.14);
  --line-2:rgba(239,231,218,.35);
  --goth:'Grenze Gotisch','UnifrakturMaguntia',Georgia,serif;
  --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'Courier Prime','Courier New',ui-monospace,monospace;
  --mono-ls:.02em;
  --rad:6px;
  --rad-photo:12px;
  --soft:0 24px 44px -20px rgba(0,0,0,.85);
  --soft-f:drop-shadow(0 16px 22px rgba(0,0,0,.55));
  --ease:cubic-bezier(.22,1,.36,1);
  --die:drop-shadow(1.6px 0 0 #EFE7DA) drop-shadow(-1.6px 0 0 #EFE7DA) drop-shadow(0 1.6px 0 #EFE7DA) drop-shadow(0 -1.6px 0 #EFE7DA) drop-shadow(3px 5px 0 rgba(0,0,0,.45));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink);overflow-x:clip}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* film grain over everything, very light */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px dashed var(--pink);outline-offset:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:20px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── type ───────────────────────────────────────────────────────────── */
.goth{font-family:var(--goth);font-weight:700;line-height:.92;letter-spacing:.005em;font-variant-numeric:lining-nums}
.h2{font-size:clamp(54px,7.4vw,96px)}
.lead{color:var(--mist);font-size:18px;line-height:1.6;max-width:34em}
.lead b{color:var(--bone);font-weight:600}

/* ── buttons: ONE primary (a pink patch, stitched edge, cherry offset) and ONE quiet
   outline. .btn-sm = the same button, smaller (top bar, the form's OK). ────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:15px 22px 14px 24px;background:var(--pink);color:var(--ink);border:2px solid var(--ink);border-radius:var(--rad);font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:var(--mono-ls);text-decoration:none;cursor:pointer;outline:1.5px dashed rgba(13,11,12,.4);outline-offset:-7px;box-shadow:5px 5px 0 var(--cherry);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .2s}
.btn svg{width:18px;height:18px;flex-shrink:0;transition:transform .2s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cherry);background:var(--pink-2)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--cherry)}
.btn:focus-visible{outline:2px dashed var(--ink);outline-offset:-7px;box-shadow:5px 5px 0 var(--cherry),0 0 0 4px var(--bone)}
.btn-sm{min-height:42px;gap:10px;padding:9px 14px 8px 16px;font-size:14px;box-shadow:3px 3px 0 var(--cherry);outline-offset:-5px}
.btn-sm svg{width:16px;height:16px}
.btn-sm:hover{box-shadow:5px 5px 0 var(--cherry)}
.btn-quiet{background:transparent;color:var(--bone);border:1.5px solid var(--line-2);outline:0;box-shadow:none}
.btn-quiet:hover{background:rgba(239,231,218,.07);border-color:var(--bone);box-shadow:none;transform:none}
.btn-quiet:active{transform:none;box-shadow:none}
.btn-quiet:focus-visible{outline:2px dashed var(--pink);outline-offset:3px;box-shadow:none}

/* ── stickers: die-cut white edge, slight tilt, a slow wobble ───────── */
.stk{position:absolute;display:block;width:var(--s,48px);height:var(--s,48px);filter:var(--die);transform:rotate(var(--r,0deg));pointer-events:none;z-index:3}
.stk svg{width:100%;height:100%;display:block}
.wob{animation:wob 7s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(var(--r,0deg))}50%{transform:rotate(calc(var(--r,0deg) + 7deg)) translateY(-4px)}}

/* tape: a translucent strip with torn ends */
.tape{position:absolute;width:92px;height:26px;background:rgba(239,231,218,.55);left:50%;top:-13px;transform:translateX(-50%) rotate(-3deg);clip-path:polygon(3% 0,97% 0,100% 18%,96% 36%,100% 58%,96% 78%,100% 100%,3% 100%,0 80%,4% 60%,0 40%,4% 20%);z-index:4}
.tape.pink{background:rgba(242,167,195,.78)}

/* ── top bar ────────────────────────────────────────────────────────── */
.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.logo{font-family:var(--goth);font-weight:800;font-size:38px;line-height:1;color:var(--bone);text-decoration:none;letter-spacing:.01em;font-variant-numeric:lining-nums}

/* ── hero (both pages): boxed label, short line, the blackletter display line, one
   paragraph; the apply page adds a button and a fan of three photo prints rising from
   the bottom edge, the thank-you page a taped note. ─────────────────────────────── */
.hero{position:relative;overflow:hidden;isolation:isolate;--rise:0}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 55% at 50% 45%,rgba(242,167,195,.09),transparent 70%)}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;max-width:1440px;margin:0 auto;padding:clamp(64px,9vh,104px) 20px 0}
.hero-c{position:relative;z-index:2;width:100%;max-width:720px;min-width:0;text-align:center}
.hero-label{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 9px;border:1px solid var(--line);border-radius:var(--rad);background:rgba(239,231,218,.04);font-family:var(--mono);font-size:14px;letter-spacing:var(--mono-ls);color:var(--mist)}
.hero-label b{color:var(--bone);font-weight:700}
.lab-ic{display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;color:var(--bone)}
.lab-ic svg{width:18px;height:18px}
.hero-c .h1{margin-top:30px}
.h1 .a{display:block;font-family:var(--sans);font-weight:600;font-size:clamp(20px,2vw,28px);line-height:1.25;letter-spacing:-.02em;color:var(--bone)}
.h1 .b{display:block;font-family:var(--goth);font-weight:700;font-variant-numeric:lining-nums;font-size:clamp(64px,8.6vw,124px);line-height:.95;margin:10px 0 12px;white-space:nowrap;color:var(--pink);text-shadow:.028em .028em 0 var(--berry)}
.sub{max-width:30em;margin:24px auto 0;color:var(--mist);font-size:18px;line-height:1.55}
.sub b{color:var(--bone);font-weight:600}
.hero-c .btn{margin-top:36px}

/* the fan: --cw = the middle print's width, everything else derives from it. js/site.js
   sets --rise (0 at the top, 1 once the hero is ~half scrolled): the prints lift, the
   sides a touch more and straightening slightly; on load they ease in once. */
.fan{--cw:clamp(210px,22vw,290px);--sw:calc(var(--cw) * .82);position:relative;width:min(820px,100%);height:calc(var(--cw) * 1.25 - 24px);margin-top:clamp(44px,6vh,64px)}
.print{position:absolute;margin:0;border-radius:var(--rad-photo);background:var(--coal-2);border:4px solid var(--bone);box-shadow:var(--soft);transition:opacity .9s var(--ease)}
.print img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--rad-photo) - 4px)}
.print .tape{top:-16px}
.p-c{left:50%;bottom:-34px;width:var(--cw);aspect-ratio:4/5;z-index:3;transform:translateX(-50%) translateY(calc(var(--rise) * -46px))}
.p-l,.p-r{left:50%;bottom:-70px;width:var(--sw);aspect-ratio:4/5;z-index:2}
.p-l{transform:translateX(-122%) translateY(calc(var(--rise) * -70px)) rotate(calc(-8deg + var(--rise) * 3deg))}
.p-r{transform:translateX(22%) translateY(calc(var(--rise) * -70px)) rotate(calc(8deg - var(--rise) * 3deg))}
/* the bubble is an iMessage: its blue, its shape and the phone's own font, on purpose */
.bub{position:absolute;left:calc(50% + var(--cw) / 2 - 56px);top:18px;z-index:4;width:max-content;max-width:220px;padding:10px 14px;border-radius:18px;border-bottom-left-radius:6px;background:#0A84FF;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Hanken Grotesk',sans-serif;font-size:15px;line-height:1.33;box-shadow:var(--soft);transform:rotate(2deg);translate:0 calc(var(--rise) * -46px)}
.fan.pre .print{opacity:0}
.fan.pre .p-c{transform:translateX(-50%) translateY(60px)}
.fan.pre .p-l{transform:translateX(-122%) translateY(90px) rotate(-12deg)}
.fan.pre .p-r{transform:translateX(22%) translateY(90px) rotate(12deg)}
.fan.pre .bub{opacity:0;translate:0 24px}
.fan.intro .print{transition:transform 1.1s var(--ease),opacity .9s var(--ease)}
.fan.intro .p-l{transition-delay:.12s}.fan.intro .p-r{transition-delay:.2s}
.fan.intro .bub{transition:translate .8s var(--ease) .55s,opacity .6s var(--ease) .55s}

/* hero stickers: the same .stk, anchored to the text block's / fan's centre (--x, clamped
   to the screen) and top (--y) so they stay in the empty space at every width */
.hero-c .stk,.fan .stk{left:calc(50% + clamp(-46vw, var(--x), 46vw));top:var(--y);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2)}
.hs-a{--s:56px;--r:-12deg;--x:400px;--y:4%}
.hs-b{--s:50px;--r:12deg;--x:-470px;--y:30%}
.hero-c .hs-b{--x:-430px;--y:80%}

/* thank-you: no photos, so the stage closes like a section; the note is taped paper */
.hero-ty .stage{padding-bottom:110px}
.note-wrap{position:relative;max-width:380px;margin:48px auto 0;filter:var(--soft-f);transform:rotate(-1.5deg);text-align:left}
.note{background:var(--bone);color:var(--on-bone);font-family:var(--mono);font-size:16px;letter-spacing:var(--mono-ls);line-height:1.5;padding:28px 22px 32px;clip-path:polygon(0 0,100% 0,100% 92%,94% 96%,88% 92%,81% 97%,74% 93%,66% 98%,58% 93%,50% 97%,42% 92%,34% 97%,26% 93%,18% 98%,10% 93%,4% 97%,0 92%)}
.note b{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--berry)}

/* ── sections: one header, alternating grounds, fishnet where you act ─ */
section.blk{position:relative;padding-block:110px}
section.blk.alt{background:var(--coal)}
.net{background-color:var(--ink);background-image:repeating-linear-gradient(45deg,rgba(239,231,218,.055) 0 1px,transparent 1px 24px),repeating-linear-gradient(-45deg,rgba(239,231,218,.055) 0 1px,transparent 1px 24px);overflow:hidden}
.sec-head{max-width:760px;margin:0 auto 56px;text-align:center}
.sec-head .lead{margin:18px auto 0}
.goth,.lead,.sub{text-wrap:balance}
[data-optional][hidden]{display:none}

/* ── apply: the form on paper ───────────────────────────────────────── */
.form-card{position:relative;max-width:700px;margin:0 auto}
.form-card .tape{top:-12px}
.form-card .tape.l{left:12%;transform:rotate(-8deg)}
.form-card .tape.r{left:auto;right:6%;transform:rotate(7deg)}
.form-safe{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:30px;font-family:var(--mono);font-size:14px;letter-spacing:var(--mono-ls);color:var(--mist)}
.form-safe svg{width:16px;height:16px;color:var(--pink)}
.apply .stk{z-index:5}

/* ── results: the Infloww screenshot, taped, with two receipt stubs ─── */
.proof{position:relative;max-width:1000px;margin:0 auto;background:var(--bone);padding:12px 12px 0;transform:rotate(-.6deg);box-shadow:var(--soft)}
.proof img{display:block;width:100%;height:auto}
.proof figcaption{font-family:var(--mono);font-size:14px;letter-spacing:var(--mono-ls);color:var(--on-bone-2);padding:12px 230px 14px;text-align:center}
.proof .tape.l{left:8%;transform:rotate(-6deg)}
.proof .tape.r{left:auto;right:7%;transform:rotate(5deg)}
.stub{position:absolute;background:var(--bone);color:var(--on-bone);font-family:var(--mono);padding:14px 16px 20px;width:220px;filter:var(--soft-f);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.stub b{display:block;font-family:var(--sans);font-weight:700;font-size:34px;line-height:1;letter-spacing:-.03em}
.stub span{display:block;margin-top:6px;font-size:14px;letter-spacing:var(--mono-ls);line-height:1.4}
.st1{left:-34px;bottom:-40px;transform:rotate(-4deg)}
.st2{right:-30px;bottom:-30px;transform:rotate(3.5deg)}

/* ── steps: coal cards with a washi label ───────────────────────────── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding-top:16px}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;margin-inline:auto}
.step{position:relative;background:var(--coal-2);border:1px solid var(--line);border-radius:var(--rad);padding:38px 18px 24px;transform:rotate(var(--r,0deg));box-shadow:var(--soft);transition:transform .3s var(--ease)}
.step:hover{transform:rotate(0) translateY(-4px)}
.step:nth-child(1){--r:-1.6deg}
.step:nth-child(2){--r:1.2deg}
.step:nth-child(3){--r:-.8deg}
.step:nth-child(4){--r:1.6deg}
.step:nth-child(5){--r:-1.2deg}
.step .lbl{position:absolute;top:-15px;left:50%;transform:translateX(-50%) rotate(-3deg);background:rgba(242,167,195,.86);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:var(--mono-ls);padding:6px 13px 5px;white-space:nowrap;clip-path:polygon(3% 0,97% 0,100% 25%,97% 50%,100% 75%,97% 100%,3% 100%,0 75%,3% 50%,0 25%)}
.step .ico{display:block;width:30px;height:30px;margin-bottom:14px;color:var(--pink)}
.step h3{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.25;color:var(--bone)}
.step p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--mist)}

/* ── creator clips (polaroids) and video slots (photo prints): hidden while empty ─ */
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:900px;margin:0 auto}
.vid{background:var(--bone);padding:10px 10px 0;transform:rotate(var(--r,0deg));box-shadow:var(--soft)}
.vid:nth-child(1){--r:-2deg}.vid:nth-child(2){--r:1.5deg}.vid:nth-child(3){--r:-1deg}
.vid .frame{position:relative;aspect-ratio:9/16;background:var(--coal);overflow:hidden}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid figcaption{font-family:var(--mono);font-size:14px;letter-spacing:var(--mono-ls);color:var(--on-bone);text-align:center;padding:12px 4px 14px}
.play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.play span{width:60px;height:60px;border-radius:50%;background:var(--pink);position:relative}
.play span::after{content:"";position:absolute;left:24px;top:19px;border-left:17px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent}
.vid.playing .play{opacity:0;pointer-events:none}
.vmain{max-width:820px;margin:0 auto}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:980px;margin:34px auto 0}
.vgrid figcaption{margin-top:12px;font-family:var(--mono);font-size:14px;letter-spacing:var(--mono-ls);color:var(--mist);text-align:center}
.vslot{position:relative;aspect-ratio:16/9;background:var(--coal-2);border:4px solid var(--bone);border-radius:var(--rad-photo);box-shadow:var(--soft);overflow:hidden}
.vslot img,.vslot iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}

/* ── link cards: taped paper ────────────────────────────────────────── */
.hw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding-top:12px}
.hw-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:34px 22px 22px;background:var(--bone);color:var(--on-bone);text-decoration:none;box-shadow:var(--soft);transform:rotate(var(--r,0deg));transition:transform .3s var(--ease)}
.hw-card:nth-child(1){--r:-1.5deg}.hw-card:nth-child(2){--r:1deg}.hw-card:nth-child(3){--r:-.8deg}
.hw-card:hover{transform:rotate(0) translateY(-4px)}
.hw-card b{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.25}
.hw-card>span:not(.tape){font-size:16px;line-height:1.5;color:var(--on-bone-2)}
.hw-card i{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;font-style:normal;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:var(--mono-ls);color:var(--berry)}
.hw-card i svg{width:14px;height:14px}

/* ── FAQ: one centred list ──────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto;border-top:1px dashed var(--line)}
.faq-item{border-bottom:1px dashed var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;background:none;border:0;color:var(--bone);font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.3;text-align:left;cursor:pointer}
.faq-q:hover{color:var(--pink)}
.faq-q i{position:relative;flex-shrink:0;width:30px;height:30px;border-radius:var(--rad);border:2px solid var(--pink);color:var(--pink);font-size:0;transition:background-color .3s,color .3s}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;transition:transform .3s var(--ease)}
.faq-q i::after{transform:rotate(90deg)}
.faq-item.open .faq-q i{background:var(--pink);color:var(--ink)}
.faq-item.open .faq-q i::before{transform:rotate(45deg)}
.faq-item.open .faq-q i::after{transform:rotate(135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 50px 24px 0;color:var(--mist);font-size:16px;line-height:1.6}
.faq-a b{color:var(--bone);font-weight:600}

/* ── final call (both pages): the second display line, on fishnet ──── */
.final{text-align:center;isolation:isolate}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 50% 60%,rgba(242,167,195,.13),transparent 70%)}
.final .goth{font-size:clamp(64px,10vw,140px);color:var(--pink);text-shadow:.028em .028em 0 var(--berry)}
.final .lead{margin:24px auto 0;max-width:30em}
.final .btn{margin-top:38px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px;font-family:var(--mono);font-size:14px;letter-spacing:var(--mono-ls);color:var(--mist)}
.chips span{display:inline-flex;align-items:center;gap:7px}
.chips svg{width:15px;height:15px;color:var(--pink)}
.ask{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 22px;margin-top:38px}
.ask .btn{margin-top:0}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{background:var(--coal);border-top:1px solid var(--line);padding-block:56px 40px}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:32px}
.foot .logo{font-size:56px}
.foot p{margin-top:12px;color:var(--mist-2);font-size:16px;max-width:26em}
.foot h4{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:var(--mono-ls);color:var(--pink);margin-bottom:12px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:16px;color:var(--mist)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--pink)}
.legal{margin-top:44px;padding-top:20px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:var(--mono-ls);color:var(--mist-2);line-height:1.6}

/* ── phone sticky button ────────────────────────────────────────────── */
.sticky{display:none}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (min-width:601px) and (max-width:1180px){.hs-a{--x:40vw}.hs-b{--x:-42vw}}
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .steps .step:last-child{grid-column:1 / -1;max-width:50%;justify-self:center}
}
@media (max-width:980px){
  .stage{padding-top:44px}
  .stub{position:relative;left:auto;right:auto;bottom:auto;width:auto;display:inline-block;margin:16px 8px 0 0;transform:none;filter:none}
  .proof{padding-bottom:16px}
  .proof figcaption{padding:12px 4px 4px;text-align:left}
}
@media (max-width:900px){
  .steps-3{grid-template-columns:1fr;max-width:420px;gap:34px}
  .steps-3 .step:last-child{max-width:none}
  .vgrid,.hw{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1 / -1}
}
@media (max-width:760px){
  section.blk{padding-block:84px}
  .sec-head{margin-bottom:40px}
  .hero-ty .stage{padding-bottom:84px}
  .logo{font-size:34px}
  .vids{display:flex;overflow-x:auto;gap:22px;padding:10px 20px 30px;margin:0 -20px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .vids::-webkit-scrollbar{display:none}
  .vid{flex:0 0 62vw;max-width:250px;scroll-snap-align:center}
  .sticky{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:80;transform:translateY(150%);transition:transform .35s var(--ease)}
  .sticky.on{transform:none}
  .sticky .btn{width:100%}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr;gap:34px;max-width:420px;margin-inline:auto}
  .steps .step:last-child{grid-column:auto;max-width:none}
  .final .btn{width:100%}
  .foot{grid-template-columns:1fr}
  .faq-a p{padding-right:0}
  .h1 .b{font-size:calc(19vw - 10px)}
  .fan{--cw:min(48vw,190px);margin-top:100px}
  .print{border-width:3px}
  .print img{border-radius:calc(var(--rad-photo) - 3px)}
  .print .tape{width:66px;height:20px;top:-12px}
  .p-l{transform:translateX(-116%) translateY(calc(var(--rise) * -56px)) rotate(calc(-8deg + var(--rise) * 3deg))}
  .p-r{transform:translateX(16%) translateY(calc(var(--rise) * -56px)) rotate(calc(8deg - var(--rise) * 3deg))}
  .fan.pre .p-l{transform:translateX(-116%) translateY(80px) rotate(-12deg)}
  .fan.pre .p-r{transform:translateX(16%) translateY(80px) rotate(12deg)}
  .bub{left:50%;right:auto;top:-74px;max-width:250px;font-size:13.5px;transform:translateX(-30%) rotate(-2deg);translate:none}
  .hs-a{--s:34px;--x:122px;--y:62px}
  .fan .hs-b{--s:38px;--x:-134px;--y:-46px}
  .hero-c .hs-b{display:none}
  .note-wrap{margin-top:40px}
  /* the final call's two stickers move to clear corners (inline positions are for desktop) */
  .final > .stk{--s:40px!important}
  .final > .stk:nth-of-type(1){top:22px!important;bottom:auto!important}
  .final > .stk:nth-of-type(2){bottom:20px!important;top:auto!important}
}
@media (max-width:420px){
  .hero-label{font-size:12.5px;gap:7px;padding:6px 11px 6px 7px}
  .lab-ic{width:18px;height:18px}
  .lab-ic svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){.fan .print,.fan .bub{transition:none!important}}