/* Swipe Right — bespoke series page.
   Art direction: the series' own flat retro poster world (periwinkle ground, hot-pink hands, striped
   blue sleeves, yellow type). The page is one day of scrolling: the feed at noon, dusk, a phone glowing
   at night, a pink dawn, then home to SMR's ink. Motion idea: the swipe — art enters left-to-right,
   the hero phone's feed scrolls as you scroll, the Part 2 phone turns sideways. */

@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

:root{
  --ink:#101111; --ink2:#1b1d1c; --line:#2a2d2c; --paper:#f4f4ee; --mute:#c9ccd1; --lime:#b6ff00;
  /* sampled from the series art */
  --peri:#6b85ee; --pink:#e554a5; --sleeve:#3d5db8; --yellow:#f6d10a;
  --navy:#1d2f8a; --deep:#0e1233; --night:#12152f;
  --gut:64px;
  --focus:var(--lime);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
main{overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}main{overflow-x:clip}}
a{color:inherit}
img{max-width:100%;display:block}
figure{margin:0}
blockquote{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--lime);color:var(--ink);padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}

/* film grain over the flat grounds, so CSS colour reads like the printed art */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- shared SMR header + footer (copied from catalog.css, unchanged in spirit) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 Manrope,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:transform .12s,background .15s,color .15s,box-shadow .12s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.green{background:var(--lime);color:var(--ink)}.btn.green:hover{background:var(--paper)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.top{height:80px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:5;background:var(--ink)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mute);transition:color .15s}
.nav a:hover{color:var(--paper)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--paper)}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}
.foot{background:var(--ink);padding-bottom:40px;position:relative}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:64px;align-items:start}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--mute);max-width:300px}
.fnav{display:flex;flex-direction:column;gap:4px}
.fnav:nth-of-type(1){grid-column:7/10}.fnav:nth-of-type(2){grid-column:10/13}
.fnav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mute)}
.fnav a:hover{color:var(--paper)}
.fline{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:48px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ---------- type voices ---------- */
.pix{font-family:Silkscreen,'Courier New',monospace;font-weight:400;text-transform:uppercase;letter-spacing:.02em;margin:0}
.disp,.hero-title,.big-quote p,.thesis p,.close-quote p,.get-title,.lesson-title{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;margin:0}
/* the accent: the art's yellow title treatment — yellow, navy outline, hard navy drop */
.acc{font-style:normal;color:var(--yellow);-webkit-text-stroke:.07em var(--navy);paint-order:stroke fill;text-shadow:.05em .06em 0 var(--navy)}
.part{font-size:15px;color:var(--deep);display:flex;align-items:center;gap:12px}
.part::before{content:"";width:28px;height:3px;background:currentColor}
.lesson-title{font-size:30px;line-height:1;letter-spacing:.01em;margin-top:12px}
.btn.buy{background:var(--lime);color:var(--ink);box-shadow:0 6px 0 var(--navy)}
.btn.buy:hover{background:var(--paper);box-shadow:0 8px 0 var(--navy)}
.btn.buy:active{box-shadow:0 2px 0 var(--navy)}

/* ================= 1 · HERO — the feed ================= */
.hero{--focus:var(--deep);position:relative;color:var(--deep);
  display:grid;grid-template-columns:var(--gut) minmax(0,1.18fr) minmax(0,1fr) var(--gut);
  grid-template-areas:"crumb crumb crumb ." ". title phone ." ". pix phone ." ". thesis phone ." ". lede phone ." ". buy phone ." "crowd crowd crowd crowd";
  grid-template-rows:auto auto auto auto auto 1fr auto;
  background:linear-gradient(180deg,var(--ink) 0,#1a2149 64px,#33449a 150px,#5a73dd 240px,var(--peri) 320px,var(--peri) 100%);
  overflow:hidden}
.hero-copy{display:contents}
.crumbs{grid-area:crumb;padding:10px 0 0 var(--gut)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mute)}
.crumbs li+li::before{content:'/';margin-right:10px;color:#7d8296}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--mute)}
.crumbs a:hover{color:var(--lime)}
.crumbs a:focus-visible{outline-color:var(--lime)}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--paper)}
.hero-title{grid-area:title;position:relative;z-index:3;font-size:clamp(92px,13.2vw,256px);line-height:.8;letter-spacing:-.005em;margin-top:.12em;
  color:var(--yellow);-webkit-text-stroke:.03em var(--navy);paint-order:stroke fill;text-shadow:.035em .045em 0 var(--navy)}
.hero-title span{display:block}
.swipe-arrow{display:inline-block !important;font-size:.5em;vertical-align:.32em;margin-left:.12em;-webkit-text-stroke:.06em var(--navy)}
.hero-pix{grid-area:pix;position:relative;z-index:3;margin-top:30px;font-size:clamp(12px,1.05vw,16px);color:var(--deep)}
.hero-pix span{color:var(--navy);font-weight:700}
.thesis{grid-area:thesis;position:relative;z-index:3;margin-top:44px;max-width:620px}
.thesis p{font-size:clamp(34px,3.5vw,54px);line-height:.94;letter-spacing:.005em}
.thesis .acc{white-space:nowrap}
.thesis footer{margin-top:14px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.lede{grid-area:lede;position:relative;z-index:3;margin:22px 0 0;max-width:470px;font-size:17px;line-height:1.65;font-weight:600}
.hero-buy{grid-area:buy;position:relative;z-index:3;margin-top:34px;padding-bottom:40px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.hero-meta{margin:0;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;max-width:300px;line-height:1.6}
.hero-phone{grid-area:title / phone / buy / phone;position:relative;z-index:2;align-self:start;justify-self:center;width:clamp(250px,25vw,390px);margin:6px 0 -9vw 2vw;transform:rotate(6deg)}
.crowd{grid-area:crowd;position:relative;z-index:1;width:100%;height:auto;margin-top:-1px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%)}

/* the phone object */
.phone{position:relative;background:#14162a;padding:11px;border-radius:44px;
  box-shadow:inset 0 0 0 2px #2b2f4d,inset 3px 0 0 #3a3f63,0 2px 0 #090a14,0 38px 60px -18px rgba(14,18,51,.65),0 90px 120px -40px rgba(14,18,51,.45)}
.phone::after{content:"";position:absolute;left:50%;top:20px;width:30%;height:22px;margin-left:-15%;border-radius:20px;background:#0a0b16;z-index:2}
.screen{position:relative;overflow:hidden;border-radius:34px;background:var(--peri);aspect-ratio:9/19}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 34%,transparent 35%)}
.feed-strip{will-change:transform}
.feed-strip img{width:100%;height:auto}
.feed-story{view-transition-name:cover-swipe-right}
.feed-post{border-top:6px solid #14162a}

/* ================= 2 · PART 1 — swipes in from the left ================= */
.l1{--focus:var(--deep);position:relative;color:var(--deep);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;
  padding:4vw 0 250px;
  background:linear-gradient(0deg,var(--night) 0,#2c1f5c 60px,#8a3f9c 130px,#d85aa6 175px,#9d74e0 225px,var(--peri) 280px,var(--peri) 100%)}
.l1-art{grid-column:1;grid-row:1;position:relative;z-index:1;width:calc(100% + 12vw);margin-left:-5vw;
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 97%),linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 62%,transparent 97%),linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%);mask-composite:intersect}
.l1-art img{width:100%;height:auto}
.l1-copy{grid-column:2;grid-row:1;position:relative;z-index:2;padding-left:0;max-width:600px}
.big-quote p{font-size:clamp(40px,4.4vw,70px);line-height:.92;letter-spacing:.005em;margin-top:28px}
.body{margin:26px 0 0;font-size:17px;line-height:1.65;font-weight:600;max-width:480px}
.refs{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-family:Silkscreen,monospace;font-size:13px;text-transform:uppercase}
.refs span{display:inline-flex;align-items:center;gap:8px}
.refs span::before{content:"";width:7px;height:7px;background:var(--yellow);box-shadow:1px 1px 0 var(--navy)}

/* ================= 3 · PART 2 — night, the phone turns sideways ================= */
.l2{position:relative;z-index:2;color:var(--paper);margin-top:-1px;padding:0 0 170px;
  background:
    radial-gradient(ellipse 46% 40% at 72% 30%,rgba(107,133,238,.28),transparent 70%),
    linear-gradient(180deg,var(--night) 0,var(--night) calc(100% - 240px),#24316f calc(100% - 170px),#8d4aa6 calc(100% - 80px),var(--pink) 100%)}
.l2-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;position:relative;top:-230px;margin-bottom:-230px}
.l2-copy{padding-top:250px}
.l2 .part{color:#b8c3ff}
.l2 .acc{-webkit-text-stroke:0;text-shadow:0 0 28px rgba(246,209,10,.35)}
.verse{margin-top:34px;padding-left:20px;border-left:3px solid var(--pink);max-width:440px}
.verse p{margin:0;font-size:18px;line-height:1.6;font-weight:600}
.verse footer{margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#b8c3ff}
.l2-phone{position:relative;justify-self:end;width:min(100%,780px);margin-right:-2vw}
.phone-wide{padding:12px;border-radius:46px;
  box-shadow:inset 0 0 0 2px #2b2f4d,inset 0 3px 0 #3a3f63,0 0 0 1px rgba(255,255,255,.04),0 40px 130px -10px rgba(107,133,238,.55),0 0 220px 30px rgba(229,84,165,.16),0 60px 80px -30px rgba(0,0,0,.6)}
.phone-wide::after{top:50%;left:20px;width:22px;height:26%;margin:-13% 0 0;transform:none}
.phone-wide .screen{aspect-ratio:16/9;border-radius:36px}
.phone-wide .screen img{width:100%;height:100%;object-fit:cover}
.ask{position:relative;z-index:2;margin:80px 0 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ask .pix{font-size:clamp(22px,3.1vw,48px);font-weight:700;color:var(--yellow);line-height:1.15;text-shadow:0 0 22px rgba(246,209,10,.45),0 0 2px rgba(246,209,10,.6)}
.ask-src{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#b8c3ff}

/* ================= 4 · PART 3 — dawn, the art rises ================= */
.l3{--focus:var(--deep);position:relative;color:var(--deep);overflow:hidden;margin-top:-1px;
  padding-bottom:var(--l3-tail);--l3-tail:300px;
  background:linear-gradient(180deg,var(--pink) 0,#ec6aa9 22%,#e86fb4 36%,#b47ad0 48%,var(--peri) 58%,var(--peri) 100%)}
/* the long, eased fall from the art's periwinkle into SMR ink: no slope break, so no visible edge */
.l3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--l3-tail) + 90px);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(107,133,238) 0.0%,rgb(104,130,232) 10.0%,rgb(98,121,215) 20.0%,rgb(87,108,190) 30.0%,rgb(75,92,160) 40.0%,rgb(62,75,128) 50.0%,rgb(48,58,95) 60.0%,rgb(36,42,65) 70.0%,rgb(25,29,40) 80.0%,rgb(19,20,23) 90.0%,rgb(16,17,17) 100.0%)}
.l3-copy{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:end;padding-top:20px;position:relative;z-index:2}
.l3-head .body{font-size:16px}
.cite{display:block;margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.dawn-verse p{margin:0;font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:clamp(40px,5vw,84px);line-height:1.02;letter-spacing:-.045em}
.dawn-verse .lead{display:block;font-size:.42em;letter-spacing:-.02em;margin-bottom:.35em}
.dawn-verse .acc{text-shadow:.04em .05em 0 var(--navy);-webkit-text-stroke:.045em var(--navy)}
.dawn-verse footer{margin-top:18px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.l3-art{position:relative;z-index:1;margin-top:-17vw;width:100%;aspect-ratio:1600/756;overflow:hidden;
  /* cropped at 84% of the slide so the small Swipe Right logo at its foot never shows */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 22%,#000 40%,rgba(0,0,0,1.000) 78.0%,rgba(0,0,0,0.926) 81.7%,rgba(0,0,0,0.741) 85.3%,rgba(0,0,0,0.500) 89.0%,rgba(0,0,0,0.259) 92.7%,rgba(0,0,0,0.074) 96.3%,rgba(0,0,0,0.000) 100.0%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 22%,#000 40%,rgba(0,0,0,1.000) 78.0%,rgba(0,0,0,0.926) 81.7%,rgba(0,0,0,0.741) 85.3%,rgba(0,0,0,0.500) 89.0%,rgba(0,0,0,0.259) 92.7%,rgba(0,0,0,0.074) 96.3%,rgba(0,0,0,0.000) 100.0%)}
.l3-art img{width:100%;height:100%;object-fit:cover;object-position:50% 0}


/* ================= motion (only when JS adds .motion and the user allows it) ================= */
.swipe-arrow{animation:nudge 3.2s cubic-bezier(.5,0,.2,1) infinite}
@keyframes nudge{0%,62%,100%{transform:translateX(0)}74%{transform:translateX(.28em)}84%{transform:translateX(0)}}
.motion [data-swipe]{transform:translateX(calc((1 - var(--p,1)) * -16vw))}
.motion [data-turn] .phone{transform:rotate(calc(-3deg - (1 - var(--p,1)) * 26deg)) translateY(calc((1 - var(--p,1)) * 80px))}
.motion [data-turn]{transform-origin:70% 60%}
.motion [data-rise]{transform:translateY(calc((1 - var(--p,1)) * 120px))}
.no-js [data-turn] .phone,.l2-phone .phone{transform:rotate(-3deg)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .motion [data-swipe],.motion [data-rise]{transform:none}
  .motion [data-turn] .phone{transform:rotate(-3deg)}
}

/* ================= wide ================= */
@media (min-width:1700px){
  .thesis{max-width:720px}.lede{font-size:18px;max-width:520px}
  .l1-copy{max-width:680px}
}

/* ================= tablet ================= */
@media (max-width:1180px){
  :root{--gut:40px}
  .nav{gap:22px}
  .l1{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .l2-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px}
}

/* ================= phone ================= */
@media (max-width:900px){
  :root{--gut:20px}
  .nav{display:none}
  .hero{grid-template-columns:var(--gut) minmax(0,1fr) minmax(0,.92fr) var(--gut);
    grid-template-areas:"crumb crumb crumb crumb" ". title title ." ". pix pix ." ". phone thesis ." ". lede lede ." ". buy buy ." "crowd crowd crowd crowd";
    grid-template-rows:auto auto auto auto auto auto auto;
    background:linear-gradient(180deg,var(--ink) 0,#1a2149 50px,#33449a 120px,#5a73dd 190px,var(--peri) 250px,var(--peri) 100%)}
  .crumbs{padding:0 var(--gut)}
  .hero-title{font-size:clamp(84px,30vw,250px);margin-top:.06em}
  .hero-title .w2{white-space:nowrap}
  .hero-pix{margin-top:22px;font-size:12px;line-height:1.5}
  .hero-phone{grid-area:phone;width:auto;margin:30px 4px 0 6px;align-self:start;justify-self:stretch;transform:rotate(-5deg)}
  .phone{padding:8px;border-radius:30px}
  .phone::after{top:14px;height:15px}
  .screen{border-radius:23px}
  .thesis{align-self:center;margin:30px 0 0 10px}
  .thesis p{font-size:clamp(28px,8.6vw,46px)}
  .thesis .acc{white-space:nowrap}
.thesis footer{font-size:10px;line-height:1.5}
  .lede{margin-top:30px;font-size:16px}
  .hero-buy{margin-top:26px;padding-bottom:34px}
  .hero-buy .btn{width:100%}
  .crowd{margin-top:-6px}

  .l1{display:block;padding:8px 0 220px;
    background:linear-gradient(0deg,var(--night) 0,#2c1f5c 50px,#8a3f9c 110px,#d85aa6 150px,#9d74e0 190px,var(--peri) 230px,var(--peri) 100%)}
  .l1-art{width:116vw;margin-left:-8vw;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .l1-copy{padding:0 var(--gut);margin-top:-4vw;max-width:none}
  .big-quote p{font-size:clamp(36px,11vw,64px)}
  .body{font-size:16px}
  .refs{font-size:11px;gap:8px 16px}

  .l2{padding-bottom:200px}
  .l2-grid{display:flex;flex-direction:column-reverse;gap:0;top:0;margin-bottom:0}
  .l2-copy{padding-top:44px}
  .l2-phone{width:108%;margin:-150px -10% 0 0;justify-self:auto;align-self:flex-end}
  .phone-wide{padding:8px;border-radius:30px}
  .phone-wide::after{left:12px;width:14px}
  .phone-wide .screen{border-radius:23px}
  .verse p{font-size:16px}
  .ask{margin-top:72px;align-items:flex-start;text-align:left}
  .ask .pix{font-size:clamp(22px,7.4vw,40px)}

  .l3-copy{display:block;padding-top:16px}
  .dawn-verse{margin-top:40px}
  .dawn-verse p{font-size:clamp(36px,11.4vw,66px)}
  .l3{--l3-tail:200px}
  .l3-art{width:112vw;margin-left:-6vw;margin-top:-14vw}

  .fgrid{display:block;padding-top:48px}.fnav{margin-top:24px}
}
@media (min-width:600px) and (max-width:900px){
  .hero{grid-template-columns:var(--gut) minmax(0,1fr) minmax(0,1.1fr) var(--gut)}
  .hero-phone{max-width:300px;justify-self:center;margin-left:0}
  .thesis p{font-size:clamp(40px,6vw,52px)}
  .l2-phone{width:96%;margin-right:-4%}
}
@media (max-width:420px){
  .thesis .acc{white-space:normal}
  .brand{gap:9px}.brand-mark{height:36px;width:36px}.brand-name{font-size:9.5px;letter-spacing:.13em}
  .top{gap:12px}.top .btn.sm{padding:10px 12px;font-size:10px;gap:8px}
}
@media (max-width:350px){
  .top .btn.sm span{display:none}.brand-name{font-size:8.5px}
  .hero-pix{font-size:11px}
  .thesis{margin-left:6px}
}

/* ================= 4½ · THE DECK (round 2): a swipeable stack of the series' own art =================
   Placement: after the dawn (Part 3), before the kit. The Part 3 art is a crowd of raised phones fading
   into ink; the stack rises out of that fade, as if one of those phones is now in your hand. You swipe
   through the cover, the three lessons and the graphics, and the stack ends on a match that leads to the buy. */
.deck{--lift:250px;position:relative;z-index:3;margin-top:calc(-1 * var(--lift));padding:0 0 130px;color:var(--paper);overflow-x:clip;
  background:linear-gradient(180deg,transparent 0,transparent var(--lift),var(--ink) var(--lift))}
.deck-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.deck-copy{padding-top:calc(var(--lift) * .6);max-width:520px}
.deck-eyebrow{font-size:14px;color:#b8c3ff;display:flex;align-items:center;gap:12px}
.deck-eyebrow::before{content:"";width:28px;height:3px;background:currentColor}
.deck-title{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;margin:16px 0 0;font-size:clamp(46px,4.8vw,80px);line-height:.9;letter-spacing:.005em}
.deck .acc{-webkit-text-stroke:0;text-shadow:none}
.deck-hint{margin:22px 0 0;max-width:420px;font-size:16px;line-height:1.65;font-weight:600;color:var(--mute)}

@media (hover:none) and (pointer:coarse),(max-width:600px){.hint-fine{display:none}}

.deck-play{display:flex;flex-direction:column;align-items:center;justify-self:center;width:100%}
.stack{--cw:400px;--rise:0;position:relative;width:var(--cw);max-width:100%;height:calc(var(--cw) * 1.22);margin-bottom:48px}
.card{--d:0;--dd:max(0, calc(var(--d) - var(--rise)));position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:26px;background:#14183a;color:var(--paper);
  box-shadow:0 34px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07);
  transform:translate3d(0,calc(var(--dd) * 17px),0) scale(calc(1 - var(--dd) * .05));transform-origin:50% 100%;
  transition:transform .42s cubic-bezier(.2,.9,.3,1.12),opacity .3s;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0b0d22;pointer-events:none;opacity:calc(var(--dd) * .32);transition:opacity .3s}
.card.is-top{cursor:grab}
.card.dragging{cursor:grabbing;transition:none}
/* each live card, its stamps and its dimmer get their own layer: a drag or fling only re-composites, never re-rasters
   (measured: 0-1 frames over 33 ms per four swipes at 4x CPU throttle, against 25-47 without) */
.card:not(.gone){will-change:transform}
.card:not(.gone) .stamp,.card:not(.gone)::after{will-change:opacity}
.stack.dragging .card{transition:none}
.card.deep{opacity:0}
.card.gone{visibility:hidden;opacity:0}
.card img{-webkit-user-drag:none;pointer-events:none}
.card-art{position:relative;flex:none;aspect-ratio:16/9;overflow:hidden;background:var(--peri)}
.card-art img{width:100%;height:100%;object-fit:cover}
.card-art-duo{display:flex;align-items:center;justify-content:center;gap:4%;padding:4.5% 6%}
.card-art-duo img{width:auto;height:auto;object-fit:contain;box-shadow:0 10px 22px -10px rgba(14,18,51,.75)}
.card-art-duo .duo-screen{width:62%}
.card-art-duo .duo-story{height:100%;border-radius:6px}
.card-info{flex:1;display:flex;flex-direction:column;padding:18px 24px 22px;min-height:0}
.card-kicker{font-size:12px;color:var(--pink);display:flex;align-items:center;gap:10px}
.card-kicker::before{content:"";width:20px;height:3px;background:currentColor}
.card-title{margin:10px 0 0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:34px;line-height:.94;letter-spacing:.005em;color:var(--yellow)}
.card-bio{margin:12px 0 0;font-size:16px;line-height:1.5;font-weight:600;color:#dfe3f5}
.card-tags{margin:auto 0 0;padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;font-family:Silkscreen,monospace;font-size:11px;text-transform:uppercase;color:#b8c3ff}
.card-tags span{display:inline-flex;align-items:center;gap:7px}
.card-tags span::before{content:"";width:6px;height:6px;background:var(--yellow)}

/* the stamps: the art's yellow and pink, with its hard navy drop */
.stamp{position:absolute;top:20px;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border:4px solid currentColor;border-radius:10px;
  font:700 24px/1 Silkscreen,"Courier New",monospace;text-transform:uppercase;background:rgba(14,18,51,.42);
  box-shadow:3px 3px 0 var(--navy),inset 2px 2px 0 rgba(29,47,138,.6);text-shadow:2px 2px 0 var(--navy);opacity:0;pointer-events:none;transition:opacity .18s}
.stamp svg{width:22px;height:22px;filter:drop-shadow(2px 2px 0 var(--navy))}
.stamp-yes{left:18px;color:var(--yellow);transform:rotate(-14deg)}
.stamp-no{right:18px;color:var(--pink);transform:rotate(14deg)}
.card.dragging .stamp{transition:none}

.deck-ctrl{display:flex;align-items:center;justify-content:center;gap:20px}
.dbtn{width:68px;height:68px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 16px 30px -12px rgba(0,0,0,.8);transition:transform .15s,box-shadow .15s,opacity .2s}
.dbtn svg{display:block}
.dbtn-no{background:#14183a;color:var(--pink)}
.dbtn-yes{background:var(--pink);color:#fff;box-shadow:0 5px 0 var(--navy),0 16px 30px -12px rgba(0,0,0,.8)}
.dbtn:hover{transform:translateY(-2px) scale(1.05)}
.dbtn:active{transform:translateY(1px) scale(.95)}
.dbtn[disabled]{opacity:.32;cursor:default;transform:none}
.dbtn-again{-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:0;background:none;color:var(--mute);cursor:pointer;
  font:800 11px/1 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.dbtn-again:hover{color:var(--paper)}
.deck-live{margin:14px 0 0;min-height:3em;max-width:420px;text-align:center;font-size:13px;line-height:1.5;font-weight:600;color:var(--mute)}

/* the match: the series' own periwinkle-to-pink sky */
.match{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 24px 24px;overflow:hidden;
  border-radius:26px;color:var(--deep);background:linear-gradient(180deg,var(--peri) 0,#8f78e0 52%,var(--pink) 100%);
  box-shadow:0 34px 60px -24px rgba(0,0,0,.8)}
.match[hidden]{display:none}
.match-kicker{font-size:13px}
.match-title{margin:12px 0 0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;line-height:.84}
.match-title:focus{outline:none}
.match-title:focus-visible{outline:3px solid var(--deep);outline-offset:6px}
.match-small{display:block;font-size:30px;letter-spacing:.02em}
.match-title .acc{display:block;font-size:96px;-webkit-text-stroke:.05em var(--navy);text-shadow:.04em .05em 0 var(--navy)}
.match-pair{position:relative;width:34%;margin:18px 0 0}
.match-pair img{width:100%;height:auto;border-radius:12px;transform:rotate(-5deg);box-shadow:0 18px 30px -12px rgba(14,18,51,.7),0 0 0 4px #fff}
.match-heart{position:absolute;right:-22%;bottom:-12%;width:42%;height:auto;color:var(--yellow);filter:drop-shadow(3px 3px 0 var(--navy));transform:rotate(10deg)}
.match-line{margin:20px 0 0;max-width:300px;font-size:15px;line-height:1.45;font-weight:800}
.match-buy{margin-top:14px;width:100%;max-width:300px}
.match .btn.buy{box-shadow:0 6px 0 var(--navy)}
.match .btn.buy:focus-visible{outline-color:var(--deep)}
.match.show{animation:match-in .5s cubic-bezier(.2,1.3,.4,1) both}
.match.show .match-heart{animation:beat 1.4s .5s ease-in-out 2}
@keyframes match-in{from{opacity:0;transform:scale(.86) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes beat{0%,100%{transform:rotate(10deg) scale(1)}15%{transform:rotate(10deg) scale(1.18)}30%{transform:rotate(10deg) scale(1)}45%{transform:rotate(10deg) scale(1.12)}}

.burst{position:absolute;inset:-40px;z-index:21;pointer-events:none}
.burst svg{position:absolute;left:50%;top:46%;width:18px;height:16px;color:var(--yellow);filter:drop-shadow(2px 2px 0 var(--navy));opacity:0;
  animation:fly 1.15s cubic-bezier(.15,.7,.3,1) forwards;animation-delay:var(--dl,0s)}
.burst svg.pk{color:var(--pink)}
@keyframes fly{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1)}}

/* one nudge when the stack first comes into view: it can be swiped */
.card.hint{animation:hint 1.3s cubic-bezier(.45,0,.3,1)}
@keyframes hint{0%,100%{transform:none}30%{transform:translate3d(34px,0,0) rotate(3.5deg)}62%{transform:translate3d(-20px,0,0) rotate(-2deg)}82%{transform:translate3d(6px,0,0) rotate(.6deg)}}
.card.hint .stamp-yes{animation:hint-stamp 1.3s}
@keyframes hint-stamp{0%,100%{opacity:0}30%{opacity:.55}50%{opacity:0}}
.card.deal{animation:deal .5s cubic-bezier(.2,1.1,.4,1) backwards;animation-delay:calc(var(--d) * 70ms)}
@keyframes deal{from{opacity:0;transform:translate3d(0,-60px,0) scale(.92)}}

.defs{position:absolute;width:0;height:0;overflow:hidden}
.no-js .deck-ctrl,.no-js .deck-live{display:none}


@media (max-width:1180px){
  .deck-grid{gap:36px}
  .stack{--cw:360px}
}
@media (max-width:900px){
  .deck{--lift:170px;padding-bottom:96px}
  .deck-grid{display:block}
  .deck-copy{max-width:none;padding-top:var(--lift)}
  .deck-title{font-size:clamp(40px,12vw,64px)}
  .deck-hint{font-size:15px;margin-top:16px}
  .deck-play{margin-top:34px}
  .stack{width:100%;max-width:380px;height:auto;aspect-ratio:1/1.27;margin-bottom:44px}
  .card{border-radius:22px}
  .card-title{font-size:30px}
  .card-bio{font-size:15px}
  .match{border-radius:22px}
  .match-title .acc{font-size:clamp(70px,24vw,96px)}
}
@media (max-width:360px){
  .stack{aspect-ratio:1/1.42}
  .card-info{padding:14px 18px 16px}
  .card-title{font-size:26px}
  .card-bio{font-size:14px;margin-top:9px}
  .stamp{font-size:19px;top:14px}
  .dbtn{width:60px;height:60px}
  .deck-ctrl{gap:10px}
  .match{padding:16px 18px 18px}
  .match-title{margin-top:8px}
  .match-title .acc{font-size:66px}
  .match-pair{width:30%;margin-top:12px}
  .match-line{margin-top:12px;font-size:14px}
  .match-small{font-size:24px}
  .match-buy{margin-top:10px}
}

/* ================= 5 · THE MATCH (round 3): the purchase is the match =================
   Back in the feed's own periwinkle. The series is a dating-app profile at poster scale: its photos are
   the three deliverables, its prompts are lines from the lessons, the heart is the buy. A giant pixel
   heart (the art's like icon) sits behind it, and the crowd from the hero art cheers in at the bottom. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.close{--focus:var(--deep);position:relative;z-index:4;color:var(--deep);margin-top:-1px;padding-top:110px;overflow:hidden;
  background:linear-gradient(180deg,var(--ink) 0,#151a35 60px,#1f2a63 130px,#33449a 210px,#5068cf 290px,var(--peri) 370px,var(--peri) calc(100% - 9vw),#3b4a8f calc(100% - 4.5vw),#1a1d2a calc(100% - 1.5vw),var(--ink) 100%)}
.close-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"quote card" "buy card";grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,96px);position:relative;z-index:2}
.close-copy{display:contents}
.close-quote{grid-area:quote;padding-top:190px}
.close-quote p{font-size:clamp(56px,7.5vw,124px);line-height:.86;letter-spacing:.002em}
.close-quote .ln{display:block;white-space:nowrap}
.close-quote footer{margin-top:20px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.close-buy{grid-area:buy;padding-top:52px;max-width:560px}
.get-title{font-size:30px;letter-spacing:.01em}
.price{margin:12px 0 0;display:flex;align-items:baseline;gap:14px}
.price strong{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:104px;line-height:.8;color:var(--yellow);-webkit-text-stroke:.05em var(--navy);paint-order:stroke fill;text-shadow:.04em .05em 0 var(--navy)}
.price span{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.inc{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;font-size:17px;font-weight:700}
.inc li{display:flex;gap:12px;align-items:baseline}
.inc li::before{content:"";flex:none;width:9px;height:9px;background:var(--yellow);box-shadow:2px 2px 0 var(--navy);transform:translateY(-1px)}
.note{margin:18px 0 0;font-size:13px;font-weight:600}
.facts{margin:30px 0 0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 34px}
.facts div{display:flex;flex-direction:column;gap:4px}
.facts dt{font-family:Silkscreen,monospace;font-size:10px;text-transform:uppercase}
.facts dd{margin:0;font-size:14px;font-weight:700}
.more{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:4px 28px}
.more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--deep);border-bottom:2px solid transparent}
.more a:hover{border-bottom-color:var(--deep)}

/* the profile */
.pf-wrap{grid-area:card;position:relative;align-self:start;justify-self:center;width:clamp(360px,36vw,540px);margin-top:10px}
.pf-wrap::before{content:"";position:absolute;z-index:-1;left:-24%;top:-7%;width:56%;aspect-ratio:7/6;transform:rotate(-12deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23e554a5' d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(12px 14px 0 var(--navy))}
.pf{position:relative;border-radius:30px;overflow:hidden;background:var(--deep);color:var(--paper);transform:rotate(-2.5deg);
  box-shadow:0 0 0 4px var(--navy),14px 16px 0 4px var(--navy),0 50px 90px -30px rgba(14,18,51,.7)}
.pf-photos{position:relative;aspect-ratio:4/3;background:var(--peri)}
.pf-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pf-track::-webkit-scrollbar{display:none}
.pf-track:focus-visible{outline:3px solid var(--yellow);outline-offset:-6px}
.pf-track.drag{scroll-snap-type:none;cursor:grabbing}
.pf-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.pf-slide img{-webkit-user-drag:none;pointer-events:none}
.pf-s-feed img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pf-s-screen{display:grid;place-items:center;background:var(--sleeve)}
.pf-tv{width:86%;padding:7px;border-radius:12px;background:#14162a;box-shadow:inset 0 0 0 2px #2b2f4d,8px 9px 0 var(--navy);transform:translateY(-4%)}
.pf-tv img{width:100%;height:auto;border-radius:6px}
.pf-s-page{display:grid;place-items:center;background:var(--pink)}
.pf-s-page img{width:84%;height:auto;transform:rotate(-2deg) translateY(4%);box-shadow:8px 9px 0 var(--navy)}
.pf-cap{position:absolute;left:14px;bottom:14px;padding:7px 10px 6px;font-size:12px;color:var(--yellow);background:var(--deep);border-radius:6px;box-shadow:3px 3px 0 var(--navy)}
.pf-bars{position:absolute;left:14px;right:14px;top:12px;display:flex;gap:6px;pointer-events:none}
.pf-bars i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.45);box-shadow:0 1px 2px rgba(14,18,51,.4);transition:background .2s}
.pf-bars i.on{background:#fff}
.pf-arrow{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(14,18,51,.62);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.22);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .2s,transform .15s}
.pf-arrow:hover{transform:scale(1.08)}
.pf-arrow[disabled]{opacity:0;pointer-events:none}
.pf-arrow:focus-visible{outline-color:var(--yellow);outline-offset:2px}
.pf-prev{left:12px}.pf-next{right:12px}
.pf-info{padding:20px 28px 64px}
.pf-name{margin:0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(40px,3.5vw,56px);line-height:.9;color:var(--yellow)}
.pf-name span{font-size:.6em;color:var(--paper);letter-spacing:.01em}
.pf-bio{margin-top:10px;font-size:11px;line-height:1.5;color:#b8c3ff}
.pf-prompts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.pf-prompts li{padding:13px 0 12px;border-top:2px solid rgba(184,195,255,.16);display:flex;flex-direction:column;gap:6px}
.pf-prompts .pix{font-size:11px;color:var(--pink)}
.pf-prompts q{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(21px,1.7vw,26px);line-height:1;letter-spacing:.005em;quotes:"\201C" "\201D"}
.pf-prompts cite{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#b8c3ff}

/* the actions: X is a playful not-now (it only wiggles); the heart is the buy */
.pf-act{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:22px;margin-top:-40px;transform:rotate(-2.5deg)}
.pf-no-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.pf-no{width:76px;height:76px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;background:var(--paper);color:var(--pink);
  box-shadow:0 0 0 4px var(--navy),0 6px 0 4px var(--navy);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .15s}
.pf-no svg{filter:drop-shadow(2px 2px 0 var(--navy))}
.pf-no:hover{transform:translateY(-2px) rotate(-6deg)}
.pf-no:focus-visible{outline-color:var(--deep)}
.pf-no-lbl{position:absolute;top:calc(100% + 14px);font-size:11px;white-space:nowrap;color:var(--deep)}
.pf-bubble{position:absolute;bottom:calc(100% + 16px);left:50%;padding:8px 12px 7px;font-size:13px;white-space:nowrap;color:var(--deep);background:var(--yellow);border-radius:8px;
  box-shadow:3px 3px 0 var(--navy),0 0 0 2px var(--navy);opacity:0;transform:translateX(-50%) translateY(6px) scale(.9);transition:opacity .2s,transform .25s cubic-bezier(.2,1.5,.4,1);pointer-events:none}
.pf-bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--navy)}
.pf-no-wrap.say .pf-bubble{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.btn.pf-yes{min-height:84px;border-radius:999px;padding:10px 30px 10px 12px;gap:16px;font-size:15px;justify-content:flex-start;box-shadow:0 0 0 4px var(--navy),0 7px 0 4px var(--navy)}
.btn.pf-yes:hover{box-shadow:0 0 0 4px var(--navy),0 9px 0 4px var(--navy)}
.btn.pf-yes:active{box-shadow:0 0 0 4px var(--navy),0 3px 0 4px var(--navy)}
.btn.pf-yes:focus-visible{outline-color:var(--deep);outline-offset:8px}
.pf-heart{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--pink);color:#fff}
.pf-heart svg{filter:drop-shadow(2px 2px 0 var(--navy))}

/* the crowd from the hero art, cheering in along the bottom edge (cut at the gaps between arms) */
.cheer{position:relative;z-index:1;height:calc(100vw * 308 / 1920);margin-top:clamp(0px,2vw,40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 52%,transparent 100%)}
.cb{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none}
.cb1{--i:0;clip-path:inset(0 86.8% 0 0)}
.cb2{--i:1;clip-path:inset(0 62.1% 0 13.2%)}
.cb3{--i:2;clip-path:inset(0 38.4% 0 37.9%)}
.cb4{--i:3;clip-path:inset(0 19.7% 0 61.6%)}
.cb5{--i:4;clip-path:inset(0 0 0 80.3%)}

/* motion: plays once when the section comes into view (JS adds .in); nothing scroll-linked, nothing pinned */
.motion .close:not(.in) .pf{opacity:0;transform:translateY(90px) rotate(7deg)}
.motion .close:not(.in) .pf-act{opacity:0;transform:translateY(40px) rotate(-2.5deg) scale(.9)}
.motion .close:not(.in) .pf-wrap::before{opacity:0;transform:rotate(-30deg) scale(.3)}
.motion .close:not(.cheer-in) .cb{transform:translateY(105%)}
.motion .close .pf{transition:opacity .5s,transform .9s cubic-bezier(.2,1.35,.4,1)}
.motion .close .pf-act{transition:opacity .4s .45s,transform .7s .45s cubic-bezier(.2,1.6,.4,1)}
.motion .close .pf-wrap::before{transition:opacity .5s .1s,transform 1s .1s cubic-bezier(.2,1.4,.4,1)}
.motion .close.cheer-in .cb{animation:cheer 1.9s cubic-bezier(.3,0,.3,1) both;animation-delay:calc(.1s + var(--i) * .11s)}
@keyframes cheer{0%{transform:translateY(105%)}34%{transform:translateY(-9%)}48%{transform:translateY(0)}62%{transform:translateY(-7%)}76%{transform:translateY(0)}88%{transform:translateY(-3%)}100%{transform:translateY(0)}}
.pf.nope{animation:nope .55s cubic-bezier(.36,.07,.19,.97)}
.pf-no.nope{animation:nope-btn .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes nope{0%,100%{transform:rotate(var(--tilt,-2.5deg))}20%{transform:translateX(-14px) rotate(calc(var(--tilt,-2.5deg) - 3deg))}40%{transform:translateX(11px) rotate(calc(var(--tilt,-2.5deg) + 3deg))}60%{transform:translateX(-7px) rotate(calc(var(--tilt,-2.5deg) - 1.5deg))}80%{transform:translateX(4px) rotate(var(--tilt,-2.5deg))}}
@keyframes nope-btn{0%,100%{transform:none}25%{transform:rotate(-16deg) scale(.94)}50%{transform:rotate(12deg)}75%{transform:rotate(-6deg)}}
.close.in .pf-heart{animation:pulse 1.2s 1.3s ease-in-out 2}
@keyframes pulse{0%,100%{transform:scale(1)}15%{transform:scale(1.16)}30%{transform:scale(1)}45%{transform:scale(1.1)}}

@media (min-width:1700px){
  .close-quote{padding-top:260px}
}
@media (max-width:1180px){
  .facts{grid-template-columns:repeat(2,auto)}
  .close-quote p{font-size:clamp(52px,7vw,84px)}
  .pf-wrap{width:clamp(340px,42vw,460px)}
}
/* phone: its own composition: the headline, then the card filling the screen, then the details */
@media (max-width:900px){
  .close{padding-top:120px;background:linear-gradient(180deg,var(--ink) 0,#151a35 40px,#1f2a63 90px,#33449a 140px,#5068cf 190px,var(--peri) 240px,var(--peri) calc(100% - 22vw),#3b4a8f calc(100% - 11vw),#1a1d2a calc(100% - 4vw),var(--ink) 100%)}
  .close-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"quote" "card" "buy";grid-template-rows:auto auto auto}
  .close-quote{padding-top:110px}
  .close-quote p{font-size:clamp(44px,13.4vw,80px)}
  .pf-wrap{width:100%;max-width:520px;margin-top:76px}
  .pf-wrap::before{width:30%;left:auto;right:-2%;top:-62px;transform:rotate(12deg)}
  .motion .close:not(.in) .pf-wrap::before{transform:rotate(30deg) scale(.3)}
  .pf{--tilt:-1.5deg;border-radius:24px;transform:rotate(-1.5deg)}
  .pf-act{transform:rotate(-1.5deg);gap:16px;margin-top:-38px}
  .motion .close:not(.in) .pf-act{transform:translateY(40px) rotate(-1.5deg) scale(.9)}
  .pf-info{padding:16px 20px 58px}
  .pf-name{font-size:clamp(30px,9.4vw,50px)}
  .pf-name span{white-space:nowrap}
  .pf-prompts q{font-size:clamp(20px,6vw,26px)}
  .pf-no{width:68px;height:68px}
  .btn.pf-yes{min-height:76px;font-size:13px;padding:8px 22px 8px 9px;gap:12px}
  .pf-heart{width:56px;height:56px}
  .close-buy{padding-top:70px;max-width:none}
  .price strong{font-size:88px}
  .facts{grid-template-columns:1fr 1fr;gap:18px 24px}
  .cheer{margin-top:56px;height:calc(100vw * 308 / 1920 * 1.9)}
  .cb{width:190%;left:-45%}
}
@media (max-width:380px){
  .pf-act{gap:10px}
  .pf-no{width:60px;height:60px}
  .btn.pf-yes{font-size:12px;padding-right:16px;gap:9px;min-height:70px}
  .pf-heart{width:50px;height:50px}
  .pf-info{padding:14px 16px 56px}
  .pf-cap{font-size:10px;left:10px;bottom:10px}
}
@media (max-width:340px){
  .btn.pf-yes{letter-spacing:.02em}
  .pf-yes-t{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .motion .close .pf,.motion .close .pf-act,.motion .close .pf-wrap::before,.motion .close .cb{opacity:1}
  .pf-track{scroll-behavior:auto}
}

/* likes floating up out of the crowd as the match lands (once) */
.likes{position:absolute;left:0;right:0;bottom:0;height:70%;z-index:1;pointer-events:none;overflow:hidden}
.lk{position:absolute;bottom:4%;width:42px;height:36px;color:var(--pink);filter:drop-shadow(3px 3px 0 var(--navy));opacity:0}
.lk:nth-child(3n){color:var(--yellow)}.lk:nth-child(4n){width:28px;height:24px}.lk:nth-child(5n){width:58px;height:50px}
.lk1{left:6%}.lk2{left:17%}.lk3{left:29%}.lk4{left:41%}.lk5{left:52%}.lk6{left:63%}.lk7{left:74%}.lk8{left:86%}.lk9{left:94%}
.close.cheer-in .lk{animation:like 2.6s cubic-bezier(.25,.6,.4,1) forwards;animation-delay:calc(.7s + var(--d,0s))}
.lk1{--d:.1s;--dx:20px}.lk2{--d:.5s;--dx:-24px}.lk3{--d:.2s;--dx:30px}.lk4{--d:.65s;--dx:-14px}.lk5{--d:.3s;--dx:22px}.lk6{--d:.8s;--dx:-30px}.lk7{--d:.15s;--dx:18px}.lk8{--d:.55s;--dx:-20px}.lk9{--d:.35s;--dx:12px}
@keyframes like{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1;transform:translate(0,-30px) scale(1)}100%{opacity:0;transform:translate(var(--dx),-62vh) rotate(14deg) scale(1)}}
@media (max-width:900px){.likes{height:45%}.lk{width:26px;height:22px}.lk:nth-child(5n){width:36px;height:31px}}