/* ===========================================================
   Hey Date — landing page
   Layout cloned 1:1 from lassie.ai · Brand = Hey Date
   Warm cream canvas · refined serif display · floating-card
   collages · #FFCFDD as the only color (lassie's green → blush)
   =========================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:"Geist"; src:url("assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Geist"; src:url("assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Geist"; src:url("assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Geist"; src:url("assets/fonts/Geist-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Lastik"; src:url("assets/fonts/Lastik-Display.woff2") format("woff2"), url("assets/fonts/Lastik-Display.otf") format("opentype"); font-weight:400; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --ink:#1A1A1A; --ink-2:#6E6E73; --ink-3:#A5A5AC;
  --line:#E9E7E2; --surface-2:#F1F0EC;
  --cream:#F9F8F5; --cream-2:#F1F0EC; --white:#FFFFFF;
  --blush:#FFCFDD; --blush-wash:#FFF4F7; --rose-ink:#C2476A;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;
  --shadow-1:0 1px 3px rgba(40,38,32,.06);
  --shadow-2:0 10px 30px rgba(40,38,32,.10);
  --shadow-3:0 24px 60px rgba(40,38,32,.14);
  --pad:24px; --maxw:1180px; --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Lastik","Geist",ui-serif,Georgia,serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ---------- Type helpers ---------- */
.display{ font-family:var(--serif); font-weight:400; letter-spacing:-.015em; line-height:1.04; }
.overline{ font-size:11px; line-height:14px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.02em; color:var(--ink-2); padding:7px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:rgba(255,255,255,.6);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--blush); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  transition:transform .18s var(--ease), background .2s, opacity .2s, box-shadow .2s, border-color .2s;
}
.btn:active{ transform:scale(.96); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ opacity:.9; box-shadow:var(--shadow-2); }
.btn-white{ background:var(--white); color:var(--ink); border:1px solid var(--line); }
.btn-white:hover{ box-shadow:var(--shadow-2); }
.btn-sm{ height:38px; padding:0 16px; font-size:13.5px; }

/* ===========================================================
   NAV — floating centered pill (lassie)
   =========================================================== */
.nav{ position:fixed; top:18px; left:0; right:0; z-index:100; display:flex; justify-content:center; pointer-events:none; }
.nav-pill{
  pointer-events:auto; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-1);
  padding:7px 8px 7px 16px;
}
.nav-pill .brand{ display:inline-flex; align-items:center; gap:8px; padding-right:8px; }
.nav-pill .brand .mark{ width:24px; height:24px; color:var(--ink); }
.nav-pill .brand .mark svg{ width:100%; height:100%; }
.nav-pill .brand .word{ font-family:var(--serif); font-size:17px; letter-spacing:-.01em; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--ink-2); padding:8px 12px; border-radius:var(--r-pill); transition:color .2s,background .2s; }
.nav-links a:hover{ color:var(--ink); background:var(--cream); }
.nav-pill .btn{ margin-left:4px; }

/* ===========================================================
   HERO — centered serif + scattered card collage
   =========================================================== */
.hero{ position:relative; padding:clamp(120px,15vw,168px) 0 clamp(40px,6vw,72px); text-align:center; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(720px 380px at 50% -6%, rgba(255,207,221,.22), transparent 62%);
  pointer-events:none;
}
.hero-inner{ position:relative; }
.hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,7.4vw,86px); line-height:1.02; letter-spacing:-.025em; margin:20px auto 0; max-width:15ch; }
.hero h1 .soft{ color:var(--rose-ink); }
.hero .sub{ margin:20px auto 0; max-width:42ch; font-size:clamp(16px,2vw,19px); line-height:1.5; color:var(--ink-2); }
.hero-actions{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-note{ margin-top:14px; font-size:13px; color:var(--ink-3); }

/* collage */
.collage{ position:relative; margin:clamp(40px,6vw,72px) auto 0; max-width:1080px; min-height:380px; }
.collage .stage{ position:relative; display:flex; gap:18px; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
.float-photo{ border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--shadow-2); border:1px solid var(--line); background:var(--surface-2); }
.float-photo img{ width:100%; height:100%; object-fit:cover; }
.invite{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:16px; text-align:left; box-shadow:var(--shadow-3); width:266px;
}
.invite .who{ display:flex; align-items:center; gap:10px; }
.invite .who .pfp{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--surface-2); }
.invite .who .name{ font-size:14.5px; font-weight:600; }
.invite .who .meta{ font-size:12px; color:var(--ink-3); }
.invite .plan{ margin-top:13px; padding:12px 13px; border-radius:var(--r-md); background:var(--cream); font-size:13.5px; }
.invite .plan .row{ display:flex; align-items:center; gap:8px; color:var(--ink-2); }
.invite .plan .row+.row{ margin-top:6px; }
.invite .plan .row .ic{ width:14px; height:14px; color:var(--ink-3); flex:0 0 auto; }
.invite .plan .where{ color:var(--ink); font-weight:600; }
.invite .trio{ margin-top:13px; display:flex; gap:7px; }
.invite .trio .yes{ flex:1; height:36px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.invite .trio .resc{ height:36px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:600; display:flex; align-items:center; }
.invite .trio .no{ height:36px; padding:0 10px; color:var(--ink-3); font-size:13px; font-weight:600; display:flex; align-items:center; }
.invite.accepted .plan{ background:var(--blush-wash); }
.invite .stamp{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--rose-ink); }

/* desktop scatter */
@media (min-width:1000px){
  .collage .stage{ display:block; height:420px; }
  .collage .stage > *{ position:absolute; }
  .c1{ left:0;   top:40px;  width:230px; height:300px; transform:rotate(-5deg); }   /* photo */
  .c2{ left:232px; top:0;            transform:rotate(-2deg); }                       /* invite */
  .c3{ left:50%;  top:150px; transform:translateX(-50%) rotate(1deg); z-index:3; }    /* invite accepted */
  .c4{ right:232px; top:6px;          transform:rotate(2deg); }                        /* invite */
  .c5{ right:0;  top:40px;  width:230px; height:300px; transform:rotate(5deg); }      /* photo */
}

/* ===========================================================
   SECTION scaffold
   =========================================================== */
section{ padding:clamp(72px,10vw,128px) 0; }
.sec-head{ max-width:760px; }
.sec-head.center{ margin:0 auto; text-align:center; }
.sec-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,5vw,58px); line-height:1.05; letter-spacing:-.025em; margin-top:14px; }
.sec-head p{ margin-top:16px; font-size:17px; line-height:1.55; color:var(--ink-2); }

/* ---------- Trusted / testimonial (dot-map) ---------- */
.trusted{ text-align:center; position:relative; }
.trusted h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.2vw,46px); line-height:1.08; letter-spacing:-.02em; }
.map{ position:relative; margin:36px auto 0; max-width:860px; }
.map .dots{ width:100%; opacity:.85; }
.quote-card{
  position:relative; margin:-90px auto 0; max-width:560px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-2xl); box-shadow:var(--shadow-3);
  display:flex; gap:0; overflow:hidden; text-align:left; z-index:2;
}
.quote-card .q-photo{ width:190px; flex:0 0 auto; background:var(--surface-2); }
.quote-card .q-photo img{ width:100%; height:100%; object-fit:cover; }
.quote-card .q-body{ padding:26px 26px; display:flex; flex-direction:column; justify-content:center; }
.quote-card .q-body blockquote{ font-family:var(--serif); font-size:21px; line-height:1.32; letter-spacing:-.01em; }
.quote-card .q-body .by{ margin-top:16px; font-size:13.5px; color:var(--ink-3); font-weight:500; }
.watch{ display:inline-flex; align-items:center; gap:9px; margin:34px auto 0; padding:8px 8px 8px 16px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-1); font-size:13.5px; font-weight:600; }
.watch .play{ width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; }
.watch .play svg{ width:13px; height:13px; }

/* ---------- Features: 3 cards ---------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
.fcard{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-2xl); padding:28px; transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
.fcard:hover{ box-shadow:var(--shadow-2); transform:translateY(-3px); }
.fcard .ficon{ width:46px; height:46px; border-radius:var(--r-md); background:var(--cream); color:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.fcard .ficon.blush{ background:var(--blush-wash); color:var(--rose-ink); }
.fcard .ficon svg{ width:23px; height:23px; }
.fcard h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
.fcard p{ margin-top:9px; font-size:15px; line-height:1.55; color:var(--ink-2); }

/* ---------- Big stat collage (lassie 98%) ---------- */
.statwrap{ position:relative; text-align:center; }
.statwrap .bignum{ font-family:var(--serif); font-weight:400; font-size:clamp(64px,13vw,168px); line-height:.92; letter-spacing:-.03em; }
.statwrap .bignum em{ font-style:normal; color:var(--rose-ink); }
.statwrap .bigcap{ font-family:var(--serif); font-size:clamp(24px,3.6vw,40px); line-height:1.15; letter-spacing:-.02em; margin-top:6px; }
.scatter{ position:relative; max-width:1080px; margin:0 auto; min-height:auto; }
.scatter .float-photo, .scatter .mini{ margin:14px auto; }
.mini{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:14px 16px; text-align:left; max-width:300px; font-size:13px; }
.mini .mhead{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; }
.mini .mhead .mk{ width:18px; height:18px; border-radius:5px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; }
.mini .mhead .mk svg{ width:11px; height:11px; }
.mini .mrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; color:var(--ink-2); }
.mini .mrow .tick{ color:var(--rose-ink); display:inline-flex; align-items:center; gap:6px; }
.mini .mrow .amt{ font-weight:600; color:var(--ink); }
@media (min-width:1000px){
  .statwrap{ min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .scatter{ position:absolute; inset:0; min-height:520px; }
  .scatter > *{ position:absolute; margin:0; }
  .s1{ left:0;    top:30px;  width:200px; height:230px; transform:rotate(-4deg); }
  .s2{ left:40px; bottom:20px; }
  .s3{ right:0;   top:18px;  width:190px; height:250px; transform:rotate(4deg); }
  .s4{ right:20px; bottom:24px; transform:rotate(-1deg); }
}

/* ---------- Image + floating overlay (lassie "paperwork") ---------- */
.showcase{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
.showcase .copy h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,44px); line-height:1.08; letter-spacing:-.02em; }
.showcase .copy p{ margin-top:16px; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:38ch; }
.showcase .copy .btn{ margin-top:24px; }
.frame{ position:relative; border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--shadow-3); border:1px solid var(--line); aspect-ratio:16/11; background:var(--surface-2); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame .glass{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(82%,420px); background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:16px 18px; text-align:left;
}
.frame .glass .ghead{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.frame .glass .ghead .gk{ width:18px; height:18px; border-radius:5px; background:var(--blush); display:flex; align-items:center; justify-content:center; color:var(--rose-ink); }
.frame .glass .ghead .gk svg{ width:11px; height:11px; }
.frame .glass .grow{ display:flex; align-items:center; gap:9px; margin-top:11px; padding:9px 10px; border-radius:var(--r-sm); background:var(--cream); font-size:12.5px; color:var(--ink-2); }
.frame .glass .grow .gt{ width:15px; height:15px; color:var(--rose-ink); flex:0 0 auto; }

/* ---------- How it works: 3 cols ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:56px; }
.step{ position:relative; }
.step .sicon{ width:54px; height:54px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--white); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.step .sicon svg{ width:26px; height:26px; }
.step .snum{ position:absolute; top:6px; right:0; font-size:13px; font-weight:600; color:var(--ink-3); }
.step h3{ margin-top:18px; font-size:20px; font-weight:600; letter-spacing:-.01em; }
.step p{ margin-top:9px; font-size:15px; line-height:1.55; color:var(--ink-2); }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin:48px auto 0; }
.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; }
.qa summary::-webkit-details-marker{ display:none; }
.qa button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; text-align:left; font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.qa .sign{ width:22px; height:22px; flex:0 0 auto; color:var(--ink-3); transition:transform .3s var(--ease), color .2s; }
.qa[open] .sign{ transform:rotate(45deg); color:var(--ink); }
.qa .ans{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.qa .ans p{ padding:0 4px 26px; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:64ch; }

/* ---------- Closing CTA ---------- */
.closer{ text-align:center; }
.closer h2{ font-family:var(--serif); font-weight:400; font-size:clamp(36px,6.5vw,76px); line-height:1.02; letter-spacing:-.025em; }
.closer h2 .soft{ color:var(--rose-ink); }
.closer p{ margin:18px auto 0; max-width:42ch; font-size:18px; color:var(--ink-2); }
.closer .hero-actions{ margin-top:28px; }

/* ---------- Footer ---------- */
.foot{ background:var(--cream-2); border-top:1px solid var(--line); padding:56px 0 40px; }
.foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot .brand{ display:inline-flex; align-items:center; gap:9px; }
.foot .brand .mark{ width:26px; height:26px; color:var(--ink); }
.foot .brand .word{ font-family:var(--serif); font-size:19px; }
.foot .tagline{ margin-top:14px; font-size:14px; color:var(--ink-2); max-width:30ch; line-height:1.5; }
.foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.foot-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
.foot-col a{ display:block; margin-top:12px; font-size:14.5px; color:var(--ink-2); transition:color .2s; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); }
.foot-bottom .socials{ display:flex; gap:16px; }
.foot-bottom .socials a{ color:var(--ink-3); transition:color .2s; }
.foot-bottom .socials a:hover{ color:var(--ink); }
.foot-bottom .socials svg{ width:19px; height:19px; }

/* ---------- Reveal (only hides when JS is active; visible by default) ---------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .features{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .showcase{ grid-template-columns:1fr; gap:28px; }
  .float-photo{ width:min(260px,80%); height:220px; }
  .quote-card{ flex-direction:column; }
  .quote-card .q-photo{ width:100%; height:200px; }
  .quote-card{ margin-top:-60px; }
}
@media (max-width:600px){
  :root{ --pad:18px; }
  .nav-links{ display:none; }
  .nav-pill{ padding:7px 8px 7px 14px; }
  .invite{ width:min(300px,86vw); }
}
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===========================================================
   v3 — image hero, scroll-inset, nav collapse, signup
   (appended; overrides earlier hero rules)
   =========================================================== */

/* nav: collapse wordmark on scroll */
.nav-pill .word{
  display:inline-block; max-width:120px; opacity:1; overflow:hidden; white-space:nowrap;
  transition:max-width .38s var(--ease), opacity .26s var(--ease), margin .38s var(--ease);
}
.nav.scrolled .nav-pill .word{ max-width:0; opacity:0; margin-left:-6px; }
.nav-pill{ transition:box-shadow .3s var(--ease), background .3s var(--ease), padding .3s var(--ease); }
.nav.scrolled .nav-pill{ box-shadow:var(--shadow-2); background:rgba(255,255,255,.92); }
.nav.scrolled .nav-pill .brand{ padding-right:2px; }

/* HERO — full-bleed image that insets as you scroll */
.hero{
  position:relative; padding:0; background:var(--cream);
  text-align:left; /* reset old centering */
}
.hero::before{ display:none; }                 /* kill old pink glow */
.hero-frame{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  /* inset driven by JS lerp: --s (scale) + --r (radius). transform-only = GPU, zero reflow */
  border-radius:var(--r,0px); transform:scale(var(--s,1)) translateZ(0); transform-origin:50% 50%;
  background:var(--surface-2); box-shadow:var(--shadow-2);
  will-change:transform, border-radius; backface-visibility:hidden;
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,26,26,.42) 0%, rgba(26,26,26,.18) 34%, rgba(26,26,26,.30) 64%, rgba(26,26,26,.62) 100%);
}
.hero-content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:96px 24px 132px; }
.hero-titlegroup{ max-width:880px; }
.hero-title{
  font-family:var(--serif); font-weight:400; color:#fff;
  font-size:clamp(38px,7vw,82px); line-height:1.04; letter-spacing:-.025em;
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}
.hero-title em{ font-style:italic; }
.hero-sub{ margin-top:18px; color:rgba(255,255,255,.86); font-size:clamp(15px,1.8vw,18px); font-weight:500; }
.status-chip{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  padding:8px 15px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#fff; font-size:13px; font-weight:600; letter-spacing:-.01em;
}
.status-chip svg{ width:14px; height:14px; color:var(--blush); }

/* signup pill (lassie inline form) */
.signup{
  display:inline-flex; align-items:center; gap:6px; position:relative;
  background:#fff; border-radius:var(--r-pill); padding:6px 6px 6px 8px;
  box-shadow:var(--shadow-3); border:1px solid rgba(255,255,255,.5);
}
.signup input[type=email]{
  border:none; outline:none; background:transparent; font-family:inherit;
  font-size:15px; color:var(--ink); padding:0 12px; height:46px; width:clamp(150px,38vw,236px);
}
.signup input[type=email]::placeholder{ color:var(--ink-3); }
.signup .btn{ height:46px; flex:0 0 auto; }
.signup-msg{
  position:absolute; left:0; right:0; top:calc(100% + 10px); text-align:center;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.92);
  opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s;
}
.signup-msg.show{ opacity:1; transform:none; }
.signup-msg.err{ color:#FFD7E1; }
.signup.done input, .signup.done .btn{ display:none; }
.signup.done::after{
  content:"You're on the list ❤"; padding:0 18px; height:46px; display:flex; align-items:center;
  font-size:15px; font-weight:600; color:var(--rose-ink);
}
.hero-signup{ position:absolute; bottom:clamp(28px,6vh,56px); left:50%; transform:translateX(-50%); }
/* glass signup over the hero image (lassie) */
.signup.hero-signup{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 10px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.signup.hero-signup input[type=email]{ color:#fff; }
.signup.hero-signup input[type=email]::placeholder{ color:rgba(255,255,255,.72); }
.signup.hero-signup .btn{ background:#fff; color:var(--ink); }
.signup.hero-signup .btn:hover{ background:#fff; opacity:.92; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.signup.hero-signup.done::after{ color:#fff; }

/* bottom waitlist (on cream) */
.signup-lg{ margin:26px auto 0; background:#fff; border:1px solid var(--line); }
.signup-lg .signup-msg{ color:var(--ink-2); }
.signup-lg .signup-msg.err{ color:var(--rose-ink); }
.signup-fine{ margin-top:34px; font-size:13px; color:var(--ink-3); }

@media (max-width:600px){
  .hero-content{ padding:90px 18px 120px; }
  .signup input[type=email]{ width:42vw; }
  .hero-signup{ width:min(92vw,420px); }
  .hero-signup .signup{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .hero-frame{ transform:none !important; }
}

/* ===========================================================
   v4 — intro (icon + animated headline) + 3 scroll cards
   =========================================================== */

/* ---- INTRO ---- */
.intro{ text-align:center; padding:clamp(96px,15vw,168px) 0 clamp(16px,4vw,40px); }
.intro-mark{ position:relative; width:60px; height:60px; margin:0 auto; }
.intro-mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.intro-mark .im-app{ opacity:0; transform:scale(.7) rotate(-12deg); border-radius:15px; }
.intro-mark .im-star, .intro-mark .im-app{ transition:opacity .5s var(--ease), transform .6s var(--ease); }
/* swap brand star -> app icon once scrolled past */
.intro.passed .im-star{ opacity:0; transform:scale(1.18) rotate(10deg); }
.intro.passed .im-app{ opacity:1; transform:none; }
.intro h2{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,6.2vw,70px); line-height:1.06; letter-spacing:-.025em; margin-top:28px; }
.intro h2 em{ font-style:italic; }
.intro .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.intro .line > span{ display:inline-block; }

/* start animation (gated on .js so content shows without JS) */
.js .intro .intro-mark{ opacity:0; transform:scale(.55) rotate(-14deg); }
.js .intro .line > span{ transform:translateY(115%); }
.intro .intro-mark{ transition:opacity .7s var(--ease), transform .95s var(--ease); }
.intro .line > span{ transition:transform .9s var(--ease); }
.intro.in .intro-mark{ opacity:1; transform:none; }
.intro.in .line:nth-child(1) > span{ transform:none; transition-delay:.14s; }
.intro.in .line:nth-child(2) > span{ transform:none; transition-delay:.26s; }

/* ---- SCROLL CARDS (lassie "keeps you in the loop" treatment) ---- */
.scards{ display:flex; flex-direction:column; gap:clamp(80px,12vw,168px); padding:clamp(40px,7vw,84px) 0 clamp(96px,14vw,176px); }
.scard{ display:grid; grid-template-columns:1.68fr 1fr; gap:clamp(36px,6vw,96px); align-items:center; }
.scard.rev .scard-copy{ order:2; }
.scard.rev .scard-media{ order:1; }
.scard-copy{ max-width:250px; }
.scard-copy h3{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.2vw,25px); line-height:1.18; letter-spacing:-.01em; }
.scard-copy p{ margin-top:13px; font-size:13.5px; line-height:1.62; color:var(--ink-2); }

/* big image slab with a raised drop-shadow base */
.scard-media{ position:relative; aspect-ratio:1.6/1; }
.scard-media::after{               /* soft raised base shadow under the card */
  content:""; position:absolute; left:8%; right:8%; bottom:-16px; height:54px;
  background:rgba(40,38,32,.30); filter:blur(26px); border-radius:50%; z-index:0;
}
.scard-img{
  position:absolute; inset:0; border-radius:26px; overflow:hidden; z-index:1;
  box-shadow:0 34px 70px rgba(40,38,32,.20), 0 4px 12px rgba(40,38,32,.10);
}
.scard-img img{
  position:absolute; left:0; top:-9%; width:100%; height:118%;   /* extra height = parallax room */
  object-fit:cover; will-change:transform;
}
/* overlay card — upper-centre, header + checklist (matches lassie) */
.scard-overlay{
  position:absolute; left:50%; top:21%; transform:translate(-50%,0); z-index:2;
  width:min(60%,344px); background:#fff; border-radius:14px;
  box-shadow:0 20px 44px rgba(40,38,32,.22); padding:14px 15px; text-align:left;
}
.ov-top{ display:flex; align-items:flex-start; gap:10px; }
.ov-top .ov-mark{ width:20px; height:20px; color:var(--ink); flex:0 0 auto; margin-top:1px; }
.ov-top .ov-mark svg{ width:100%; height:100%; }
.ov-title{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.32; }
.ov-sub{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.ov-list{ margin-top:12px; border-top:1px solid var(--line); padding-top:11px; display:flex; flex-direction:column; gap:10px; }
.ov-li{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--ink-2); }
.ov-li .ov-dot{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.ov-li .ov-dot.done{ background:var(--blush); border-color:var(--blush); color:var(--rose-ink); }
.ov-li .ov-dot svg{ width:8px; height:8px; }
.ov-li .ov-meta{ margin-left:auto; color:var(--ink-3); font-size:10.5px; font-weight:500; }

/* card reveal (smooth, staggered) — gated on .js */
.js .scard-img{ opacity:0; transform:translateY(42px) scale(.965); }
.js .scard-copy{ opacity:0; transform:translateY(24px); }
.js .scard-overlay{ opacity:0; transform:translate(-50%,12px); }
.scard-img{ transition:opacity .85s var(--ease), transform .95s var(--ease); }
.scard-copy{ transition:opacity .75s var(--ease) .12s, transform .75s var(--ease) .12s; }
.scard-overlay{ transition:opacity .7s var(--ease) .4s, transform .85s var(--ease) .4s; }
.scard.in .scard-img{ opacity:1; transform:none; }
.scard.in .scard-copy{ opacity:1; transform:none; }
.scard.in .scard-overlay{ opacity:1; transform:translate(-50%,0); }

@media (max-width:860px){
  .scard{ grid-template-columns:1fr; gap:26px; }
  .scard.rev .scard-copy, .scard.rev .scard-media{ order:0; }
  .scard-media{ order:-1; }
  .scard-copy{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .js .intro .intro-mark, .js .intro .line>span,
  .js .scard-media, .js .scard-copy, .js .scard-overlay{ opacity:1 !important; transform:none !important; }
  .scard-media img{ transform:none !important; }
}