/* =========================================================
   Eight Shot — landing page
   Built from Figma "Landing page" (node 1:180, 1440 desktop).
   Desktop content lives in a 1350px column; the page
   background extends full-bleed behind it.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* colour */
  --c-page:        #F9F3ED;
  --c-ink:         #000000;
  --c-ink-soft:    #24231D;
  --c-white:       #FFFFFF;

  --c-card-film:   #FCF9F7;   /* "shoot like real film" hero card */
  --c-card-step:   #FCF8F6;   /* the three film cards            */
  --c-card-booth:  #F3EDEF;   /* photo booth panel               */
  --c-card-collage:#F0F1EC;   /* collage panel                   */
  --c-card-drops:  #F2F0EB;   /* limited edition panel           */
  --c-card-quote:  #F8F5F3;   /* testimonial cards               */
  --c-cta:         #A299BF;   /* app install panel               */

  --c-eyebrow-plum: #9562A8;
  --c-eyebrow-plum-lg: #B465A8;
  --c-eyebrow-green:#219777;
  --c-accent-red:  #E2544F;

  /* layout */
  --shell:         1350px;
  --shell-pad:     20px;

  /* radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  18px;
  --r-xl:  20px;
  --r-2xl: 24px;

  /* elevation */
  --sh-card:   0 3px 2px rgba(0,0,0,.10);
  --sh-quote:  0 2px 2px rgba(0,0,0,.10);
  --sh-panel:  0 2px 2px rgba(0,0,0,.10);
  --sh-lift:   0 18px 34px -18px rgba(36,35,29,.34);
  --sh-btn:    0 10px 22px -10px rgba(0,0,0,.55);

  /* motion */
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --e-pop:  cubic-bezier(.34,1.4,.64,1);
  --e-emerge: cubic-bezier(.16,.84,.32,1);
  --t-fast: 140ms;
  --t-med:  240ms;
  --t-slow: 620ms;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"]{
  --c-page:        #16141A;
  --c-ink:         #F5F1EA;
  --c-ink-soft:    #96908A;
  --c-white:       #FFFFFF;

  --c-card-film:   #201D22;
  --c-card-step:   #1F1C21;
  --c-card-booth:  #241E23;
  --c-card-collage:#1D211D;
  --c-card-drops:  #201E1A;
  --c-card-quote:  #1E1B1F;
  --c-cta:         #443C60;

  --sh-card:   0 3px 2px rgba(0,0,0,.35);
  --sh-quote:  0 2px 2px rgba(0,0,0,.35);
  --sh-panel:  0 2px 2px rgba(0,0,0,.35);
  --sh-lift:   0 18px 34px -18px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-page);
  color:var(--c-ink);
  font-family:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color var(--t-med) var(--e-soft), color var(--t-med) var(--e-soft);
}
img,svg{ display:block; max-width:100%; height:auto; }
h1,h2,h3,p,figure,blockquote,ul{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-ink); color:var(--c-page); padding:12px 18px;
  border-radius:0 0 var(--r-sm) 0; font-size:14px; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--c-accent-red);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Layout shell (the 1350 column) ---------- */
.shell{
  width:100%;
  max-width:calc(var(--shell) + (var(--shell-pad) * 2));
  margin-inline:auto;
  padding-inline:var(--shell-pad);
}

/* ---------- Shared type ---------- */
.eyebrow{
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.35;
}
.eyebrow--plum { color:var(--c-eyebrow-plum); }
.eyebrow--green{ color:var(--c-eyebrow-green); }

.h-section{                       /* 37px in Figma */
  font-weight:600;
  font-size:clamp(27px, 2.74vw, 37px);
  line-height:1.16;
  letter-spacing:-.01em;
}
.h-feature{                       /* 31px */
  font-weight:600;
  font-size:clamp(24px, 2.3vw, 31px);
  line-height:1.22;
  letter-spacing:-.01em;
}
.h-card{                          /* 23px */
  font-weight:700;
  font-size:clamp(20px, 1.7vw, 23px);
  line-height:1.26;
}
.h-cta{                           /* 35px */
  font-weight:600;
  font-size:clamp(26px, 2.6vw, 35px);
  line-height:1.37;
  color:var(--c-white);
}
.body-muted{
  font-weight:500;
  font-size:16px;
  line-height:26px;
  color:var(--c-ink);
  opacity:.5;
}
.body-muted--sm{ font-size:15px; }

/* =========================================================
   BUTTONS + INTERACTIVE STATES
   ========================================================= */
.btn{
  --btn-bg:var(--c-ink);
  --btn-fg:var(--c-page);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  font-size:15px;
  line-height:26px;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:0;
  border-radius:var(--r-sm);
  padding:8px 18px;
  cursor:pointer;
  isolation:isolate;
  transition:
    transform var(--t-fast) var(--e-out),
    box-shadow var(--t-med) var(--e-out),
    background-color var(--t-med) var(--e-soft);
}
.btn::after{                        /* sheen that wipes across on hover */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  z-index:-1;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 45%, transparent 70%);
  background-size:220% 100%;
  background-position:130% 0;
  transition:background-position 620ms var(--e-out);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-btn);
}
.btn:hover::after{ background-position:-30% 0; }
.btn:active{
  transform:translateY(0) scale(.975);
  box-shadow:0 3px 8px -4px rgba(0,0,0,.5);
  transition-duration:60ms;
}
.btn--sm{ padding:8px 18px; }

/* App Store badge as a button */
.badge-btn{
  display:inline-block;
  border-radius:var(--r-md);
  transform-origin:center;
  transition:
    transform var(--t-med) var(--e-pop),
    filter var(--t-med) var(--e-out);
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));
}
.badge-btn img{ width:212px; }
/* hero badge swaps to the white Apple mark in dark mode, for contrast
   against the (now dark) hero background */
.badge-btn__img--light{ display:none; }
[data-theme="dark"] .badge-btn--themed .badge-btn__img--dark{ display:none; }
[data-theme="dark"] .badge-btn--themed .badge-btn__img--light{ display:block; }
.badge-btn:hover{
  transform:translateY(-3px) scale(1.025);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.28));
}
.badge-btn:active{
  transform:translateY(0) scale(.98);
  transition-duration:70ms;
}
.badge-btn--light:hover{ filter:drop-shadow(0 14px 24px rgba(41,32,72,.45)); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  padding:39px 0 24px;
  background:transparent;
  transition:
    background-color var(--t-med) var(--e-soft),
    box-shadow var(--t-med) var(--e-soft),
    padding var(--t-med) var(--e-soft);
}
/* on scroll the bar goes solid (page-colour); the pre-scroll padding is kept */
.site-header.is-stuck{
  background:var(--c-page);
  box-shadow:0 1px 0 rgba(36,35,29,.08), 0 12px 24px -20px rgba(36,35,29,.5);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-inline:52px;                 /* nav column is 1246 inside 1350 */
}
.nav__logo svg{ width:214px; height:auto; }
.nav__logo{
  transition:transform var(--t-med) var(--e-pop);
}
.nav__logo:hover{ transform:scale(1.03); }
.nav__logo:active{ transform:scale(.99); }

/* Cooked Apps home + light/dark toggle — fixed corner pills, matching
   the placement used on /, /lumo/ and /grindsize/ */
.iconbtn{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 20px);
  /* above .site-header (z-index:100) — unlike lumo/grindsize, this page
     has a full-width sticky header whose (transparent) box would
     otherwise sit on top of these buttons and swallow their clicks */
  z-index:110;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  cursor:pointer;
  background:color-mix(in srgb, var(--c-page) 50%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
  border-radius:50%;
  color:var(--c-ink);
  text-decoration:none;
  transition:.3s var(--e-soft);
}
.iconbtn:hover{ border-color:var(--c-accent-red); color:var(--c-accent-red); }
.iconbtn svg{ width:16px; height:16px; }
.homebtn{ left:24px; }
.homebtn svg{ fill:currentColor; stroke:none; }
.themebtn{ right:24px; }
.themebtn:hover{ transform:rotate(18deg); }
.themebtn svg{
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
[data-theme="dark"] .themebtn .moon{ display:none; }
[data-theme="light"] .themebtn .sun{ display:none; }

.nav__menu{
  display:flex;
  align-items:center;
  gap:40px;
}
.nav__link{
  position:relative;
  font-weight:600;
  font-size:15px;
  line-height:26px;
  color:var(--c-ink-soft);
  padding-block:2px;
  transition:color var(--t-med) var(--e-soft);
}
.nav__link::after{                     /* underline grows from the left */
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  height:2px; width:100%;
  background:var(--c-accent-red);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-med) var(--e-out);
}
.nav__link:hover{ color:var(--c-ink); }
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--c-ink); }
.nav__link:active{ transform:translateY(1px); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ margin-top:-65px; }
.hero__inner{
  position:relative;
  min-height:879px;
}
.hero__copy{
  position:relative;
  z-index:3;
  width:525px;
  max-width:100%;
  padding-left:50px;
  padding-top:219px;
}
.hero__title{
  font-weight:600;
  font-size:clamp(38px, 4.3vw, 58px);
  line-height:1.28;
  letter-spacing:-.018em;
  color:var(--c-ink);
}
.hero__underlined{ position:relative; display:inline-block; }
.hero__underline{
  position:absolute;
  left:-0.07em;
  bottom:-0.104em;
  width:2.655em;
  max-width:none;
  pointer-events:none;
  /* draw-on */
  clip-path:inset(0 100% 0 0);
  animation:draw-underline 720ms 620ms var(--e-out) forwards;
}
@keyframes draw-underline{ to{ clip-path:inset(0 0 0 0); } }

.hero__lede{
  margin-top:24px;
  width:368px;
  max-width:100%;
  font-weight:600;
  font-size:20px;
  line-height:34px;
  color:var(--c-ink);
  opacity:.5;
}
.hero__copy .badge-btn{ margin-top:47px; }

/* --- the polaroid + phone composition --- */
.hero__graphic{
  position:absolute;
  right:0;
  top:0;
  width:65.556%;              /* 885 of the 1350 column */
  aspect-ratio:930 / 879;
  z-index:1;
}
.hero__shot,
.hero__phone{
  position:absolute;
  max-width:none;
  will-change:transform;
}
/* positions are % of the 930×879 art board, offset for the baked-in shadow */
.hero__shot--1{ left:10.538%; top:15.358%; width:27.204%; z-index:1; }
.hero__shot--2{ left: 3.656%; top:54.949%; width:34.552%; z-index:1; }
.hero__shot--3{ left:67.634%; top:18.203%; width:28.280%; z-index:1; }
.hero__shot--4{ left:64.946%; top:55.176%; width:30.932%; z-index:1; }
.hero__phone  { left:28.817%; top:11.718%; width:50.968%; z-index:2; }

/* Entrance: the phone slides up first, then each polaroid slides out from
   behind it. Each shot starts translated onto the phone's centre (--tx/--ty
   are expressed as a share of that shot's own box, so they hold at any scale)
   and is hidden behind the phone until it moves. */
.hero__phone{ opacity:0; animation:phone-in 760ms 80ms var(--e-out) forwards; }
.hero__shot { opacity:0; animation:shot-emerge 980ms var(--e-emerge) forwards; }

.hero__shot--1{ --tx: 110.9%; --ty:  76.9%; --r0:-4deg; animation-delay: 620ms; }
.hero__shot--3{ --tx: -97.1%; --ty:  63.9%; --r0: 4deg; animation-delay: 760ms; }
.hero__shot--2{ --tx:  96.6%; --ty: -47.7%; --r0:-3deg; animation-delay: 900ms; }
.hero__shot--4{ --tx: -84.4%; --ty: -48.1%; --r0: 3deg; animation-delay:1040ms; }

@keyframes phone-in{
  from{ opacity:0; transform:translateY(72px) scale(.96); }
  to  { opacity:1; transform:translateY(0)    scale(1);   }
}
@keyframes shot-emerge{
  0%  { opacity:1; transform:translate(var(--tx), var(--ty)) scale(.82) rotate(var(--r0)); }
  100%{ opacity:1; transform:translate(0,0)                  scale(1)   rotate(0deg);      }
}

/* Idle float is driven by the Web Animations API (see main.js) once the
   entrance settles. It animates `transform`, so the hover uses the standalone
   `scale` property instead — the two compose rather than fight. */
.hero__shot{
  transition:
    scale var(--t-med) var(--e-out),
    filter var(--t-med) var(--e-out);
}
.hero__shot:hover{
  scale:1.045;
  z-index:4;
  filter:drop-shadow(0 18px 26px rgba(36,35,29,.24));
}

/* =========================================================
   SHOOT LIKE REAL FILM
   ========================================================= */
.film{ padding-top:20px; position:relative; z-index:2; }

.film__hero{
  position:relative;
  display:grid;
  grid-template-columns:323px 336px 241px;
  justify-content:space-between;
  align-items:start;
  min-height:486px;
  padding:31px 129px 0 33px;
  background:var(--c-card-film);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  overflow:hidden;
}
.film__heroGraphic{ align-self:end; }
.film__heroGraphic img{
  /* the asset is trimmed to the phone (241x455); Figma sits it 80px into the
     323px slot, flush to the card's bottom edge */
  width:74.61%;
  max-width:none;
  margin-left:24.77%;
  /* nudged up 2px without growing the card, matching the Figma render */
  position:relative;
  bottom:2px;
}
.film__heroCopy{
  padding-top:48px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.film__heroCopy .body-muted{ max-width:336px; }

.film__list{
  padding-top:47px;
  display:flex;
  flex-direction:column;
  gap:31px;
}
.film__list li{
  display:flex;
  align-items:center;
  gap:20px;
  font-weight:500;
  font-size:16px;
  line-height:1.35;
  color:var(--c-ink);
  transition:transform var(--t-med) var(--e-out);
}
.film__list li img{
  flex:0 0 auto;
  width:24px; height:24px;
  object-fit:contain;
  transition:transform var(--t-med) var(--e-pop);
}
.film__list li:hover{ transform:translateX(4px); }
.film__list li:hover img{ transform:scale(1.16) rotate(-6deg); }

/* --- three cards --- */
.film__cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:19px;
  margin-top:20px;
}
.film__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:60px;
  padding:63px 38px 64px;
  background:var(--c-card-step);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  overflow:hidden;
  transition:
    transform var(--t-med) var(--e-out),
    box-shadow var(--t-med) var(--e-out);
}
.film__card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-card), var(--sh-lift);
}
.film__cardInfo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  text-align:center;
}
.film__cardIcon{
  height:38px;
  width:auto;
  object-fit:contain;
  transition:transform 420ms var(--e-pop);
}
.film__card:hover .film__cardIcon{ transform:translateY(-3px) scale(1.08); }
.film__cardInfo .h-card + .body-muted{ margin-top:-19px; }
.film__cardInfo .body-muted{ max-width:360px; }

.film__cardPhone{
  width:422px;
  max-width:none;
  /* the export carries the drop shadow; pull it out of the layout box
     (blur ~45px, offset +17.9px vertically → 28.7 top / 61.8 bottom) */
  margin:-28.7px -47.75px -61.77px;
  transition:transform 520ms var(--e-out);
}
.film__card:hover .film__cardPhone{ transform:translateY(-10px); }

/* =========================================================
   FEATURE PANELS + TESTIMONIALS
   ========================================================= */
/* sits under .film so the photo-booth strip's overhang tucks behind it */
.features{ padding-top:20px; position:relative; z-index:1; }

.panel{
  position:relative;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-panel);
  transition:
    transform var(--t-med) var(--e-out),
    box-shadow var(--t-med) var(--e-out);
}
.panel:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-panel), var(--sh-lift);
}
.panel__copy{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.panel__copy .eyebrow + .h-feature{ margin-top:-8px; }

.features__row1{
  display:grid;
  grid-template-columns:647fr 690fr;
  gap:13px;
  align-items:stretch;
}

/* photo booth */
.panel--booth{
  background:var(--c-card-booth);
  min-height:341px;
  padding:44px 37px;
  display:flex;
  align-items:center;
}
.panel--booth .panel__copy{ width:234px; }
.panel__strip{
  position:absolute;
  left:398.6px;
  top:-37px;
  width:145.75px;
  max-width:none;
  transform-origin:50% 12%;
  transition:transform 520ms var(--e-out);
}
.panel--booth:hover .panel__strip{ transform:rotate(-3.2deg) translateY(6px); }

/* collage */
.panel--collage{
  background:var(--c-card-collage);
  min-height:341px;
  padding:0 47px;
  display:flex;
  align-items:center;
  gap:62px;
  overflow:hidden;
}
.panel--collage .panel__copy{ width:236px; flex:0 0 auto; gap:18px; }
.panel__collage{
  width:314.33px;
  max-width:none;
  margin-inline:-14px;
  transition:transform 560ms var(--e-out);
}
.panel--collage:hover .panel__collage{ transform:scale(1.045) rotate(1.2deg); }

/* limited edition drops */
.panel--drops{
  background:var(--c-card-drops);
  min-height:414px;
  margin-top:18px;
  padding:48px 51.67px 48px 35px;
  display:flex;
  align-items:flex-start;
  gap:0;
}
.panel--drops .panel__copy{ width:290px; flex:0 0 auto; gap:24px; }
.panel--drops .body-muted{ width:233px; }

.drops{
  position:relative;
  flex:1 1 auto;
  height:318px;
  min-width:0;
}
.drops__item{
  position:absolute;
  max-width:none;
  transform-origin:50% 60%;
  transition:transform 460ms var(--e-out), filter 460ms var(--e-out);
}
/* % of the 973.33 × 318 graphic band */
.drops__item--1{ left:-1.336%; top:10px; width:33.288%; z-index:1; }
.drops__item--2{ left:32.980%; top:0;    width:33.493%; z-index:3; }
.drops__item--3{ left:67.294%; top:10px; width:33.459%; z-index:2; }
.drops__item:hover{ transform:translateY(-10px) scale(1.035); z-index:5; }

/* testimonials */
.testimonials{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:38px;
  margin-top:18px;
}
.quote{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:21px;
  min-height:223px;
  padding:41px 20px;
  text-align:center;
  background:var(--c-card-quote);
  border-radius:var(--r-md);
  box-shadow:var(--sh-quote);
  transition:
    transform var(--t-med) var(--e-out),
    box-shadow var(--t-med) var(--e-out),
    background-color var(--t-med) var(--e-soft);
}
.quote:hover{
  transform:translateY(-5px);
  background:#fbf9f8;
  box-shadow:var(--sh-quote), var(--sh-lift);
}
.quote__stars{
  width:235px;
  transition:transform 420ms var(--e-pop);
}
.quote:hover .quote__stars{ transform:scale(1.05); }
.quote blockquote,
.quote figcaption{
  font-weight:600;
  font-size:18px;
  line-height:26px;
  color:var(--c-ink);
}

/* =========================================================
   APP INSTALL CTA
   ========================================================= */
.cta{ padding-top:82px; padding-bottom:26px; }

.cta__panel{
  position:relative;
  width:83.556%;                 /* 1128 of 1350 */
  margin-left:10.148%;           /* 137 of 1350 */
  min-height:381px;
  background:var(--c-cta);
  border-radius:var(--r-2xl);
  transition:box-shadow var(--t-med) var(--e-out);
}
.cta__panel:hover{ box-shadow:0 30px 60px -34px rgba(58,48,96,.75); }

/* polaroid + its strip of tape travel together */
.cta__shot{
  position:absolute;
  left:-4.521%;
  top:-19px;
  width:33.215%;
  z-index:2;
  transform-origin:50% 20%;
  transition:transform 620ms var(--e-out);
}
.cta__panel:hover .cta__shot{ transform:rotate(-2deg) translateY(-6px); }

.cta__polaroid{
  display:block;
  width:100%;
  max-width:none;
}
.cta__tape{
  position:absolute;
  left:18.68%;                    /* of the polaroid */
  top:6.91%;
  width:34.14%;
  aspect-ratio:200 / 100;
  background:rgba(255,255,255,.26);
  border-radius:4px;
  z-index:1;
  pointer-events:none;
  /* the polaroid photo has an ~-12deg tilt baked into the art; match it
     so the tape reads as sitting flush on the print */
  transform:rotate(-11.97deg);
}

.cta__copy{
  position:absolute;
  left:32.979%;
  top:56px;
  width:412px;
  max-width:38%;
  z-index:2;
}
.cta__underlined{ position:relative; display:inline-block; }
.cta__underline{
  position:absolute;
  left:2.771em; bottom:calc(-0.114em - 5px);
  width:3.657em;
  max-width:none;
  pointer-events:none;
  /* draw-on, triggered once the panel scrolls into view */
  clip-path:inset(0 100% 0 0);
}
.cta__panel.is-in .cta__underline{
  animation:draw-underline 720ms 200ms var(--e-out) forwards;
}
.cta__lede{
  margin-top:11px;
  font-weight:500;
  font-size:16px;
  line-height:26px;
  color:var(--c-white);
  opacity:.8;
}
.cta__copy .badge-btn{ margin-top:24px; }

/* QR block */
.cta__qr{
  position:absolute;
  left:62.943%;
  top:58px;
  width:28.343%;
  aspect-ratio:319.71 / 289.11;
  z-index:2;
}
.cta__qr img{ max-width:none; }
.cta__scanText{
  position:absolute;
  left:3.05%;
  top:77.02%;
  width:29.72%;
}
.cta__arrow{
  position:absolute;
  left:14.72%;
  top:38.24%;
  width:15.01%;
}
.cta__qrCard{
  position:absolute;
  left:38.08%;
  top:6.33%;
  width:61.92%;
  aspect-ratio:197.97 / 208.26;
  background:var(--c-white);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  transition:transform 420ms var(--e-pop), box-shadow 420ms var(--e-out);
}
.cta__qrCard img{ width:69.54%; }
.cta__panel:hover .cta__qrCard{
  transform:translateY(-4px) rotate(1.4deg);
  box-shadow:0 18px 30px -18px rgba(43,33,80,.7);
}
.cta__qrTape{
  position:absolute;
  left:56.61%;
  top:0;
  width:34.01%;
  aspect-ratio:108.74 / 51.08;
  background:rgba(255,255,255,.32);
  border-radius:3px;
  z-index:2;
  pointer-events:none;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding-block:20px 40px; }
.footer{
  display:flex;
  align-items:center;
  gap:178px;
  padding-inline:62px;              /* footer column is 1224.6 inside 1350 */
}
.footer__logo svg{ width:177px; height:auto; }
.footer__logo{ transition:transform var(--t-med) var(--e-pop); }
.footer__logo:hover{ transform:scale(1.03); }

.footer__meta{
  display:flex;
  align-items:center;
  gap:101px;
  opacity:.5;
  transition:opacity var(--t-med) var(--e-soft);
}
.footer__meta:hover{ opacity:.72; }

.footer__copy{
  font-weight:700;
  font-size:12px;
  line-height:20px;
  white-space:nowrap;
}
.footer__links{
  display:flex;
  align-items:center;
  gap:79px;
}
.footer__links a{
  position:relative;
  font-weight:700;
  font-size:12px;
  line-height:34px;
  white-space:nowrap;
}
.footer__links a::after{
  content:"";
  position:absolute;
  left:0; bottom:6px;
  width:100%; height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-med) var(--e-out);
}
.footer__links a:hover::after,
.footer__links a:focus-visible::after{ transform:scaleX(1); }

.footer__social{
  display:flex;
  align-items:center;
  gap:35px;
}
.footer__social a{
  display:block;
  transition:transform var(--t-med) var(--e-pop), opacity var(--t-med) var(--e-soft);
}
.footer__social a:hover{ transform:translateY(-3px) scale(1.14); }
.footer__social a:active{ transform:translateY(0) scale(.96); }
.footer__social img{ width:17px; height:17px; }

/* =========================================================
   DARK THEME — icon glyphs
   The small line-icons (film features, film-card icons, star
   rating) are single-colour black art with a transparent canvas;
   inverting them is the simplest way to flip them to a light ink
   that reads on the now-dark cards.
   ========================================================= */
[data-theme="dark"] .film__list li img,
[data-theme="dark"] .film__cardIcon,
[data-theme="dark"] .quote__stars,
[data-theme="dark"] .footer__social img{
  filter:invert(1);
}

/* the testimonial card's hover swap needs a dark-theme equivalent
   of its light "brighten" tint */
[data-theme="dark"] .quote:hover{
  background:color-mix(in srgb, var(--c-card-quote) 100%, #fff 8%);
}

/* =========================================================
   SPECS + FAQ
   Plain, on-page-background text (no card) — the ink token
   already inverts correctly here with no extra dark-mode rules.
   ========================================================= */
.faq{ padding-block:64px 48px; max-width:56rem; }
.specs{
  display:flex;
  flex-wrap:wrap;
  gap:32px 48px;
  margin-bottom:56px;
  padding-bottom:40px;
  border-bottom:1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
}
.spec-item{ font-weight:500; font-size:15px; color:var(--c-ink); opacity:.7; }
.spec-item span{
  display:block;
  font-weight:700;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.55;
  margin-bottom:4px;
}
.faq h2{ margin-bottom:24px; }
.faq details{
  border-bottom:1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
  padding:20px 0;
}
.faq summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:600;
  font-size:16px;
  color:var(--c-ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+';
  flex:none;
  font-weight:400;
  font-size:20px;
  color:var(--c-ink);
  opacity:.4;
}
.faq details[open] summary::after{ content:'\2212'; }
.faq p{
  margin-top:12px;
  max-width:62ch;
  font-weight:500;
  font-size:15px;
  line-height:1.65;
  color:var(--c-ink);
  opacity:.6;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity var(--t-slow) var(--e-out),
    transform var(--t-slow) var(--e-out);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
.no-js .reveal{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE — desktop / laptop / tablet
   (mobile refinement is a follow-up pass)
   ========================================================= */

/* laptop: the 1350 column becomes fluid */
@media (max-width:1390px){
  .nav{ padding-inline:24px; }
  .footer{ padding-inline:24px; gap:clamp(32px, 6vw, 178px); }
  .footer__meta{ gap:clamp(28px, 5vw, 101px); }
  .footer__links{ gap:clamp(24px, 4.4vw, 79px); }

  .hero__inner{ min-height:0; aspect-ratio:1350 / 879; }
  .hero__copy{
    position:absolute;
    left:0; top:0;
    width:37%;                    /* stay clear of the polaroid on the left of the graphic */
    padding-left:3.7%;
    padding-top:20.4%;
  }
  .hero__lede{ width:100%; }
  /* keep the headline on three lines as the column narrows */
  .hero__title{ font-size:3.95vw; }

  .film__hero{
    grid-template-columns:26.5% 30% 21%;
    padding-inline:2.6% 9.5%;
  }

  .film__cardPhone{ width:118%; margin-inline:-9%; }
  .film__cardInfo .body-muted{ max-width:100%; }

  .panel--booth{ padding-inline:5.7%; }
  .panel--booth .panel__copy{ width:37%; }
  .panel__strip{ left:63.5%; width:22.6%; }

  .panel--collage{ padding-inline:6.8%; gap:5.5%; }
  .panel--collage .panel__copy{ width:36%; }
  .panel__collage{ width:46%; margin-inline:-2%; }

  .panel--drops{ padding-left:2.6%; }
  .panel--drops .panel__copy{ width:22%; }
  .panel--drops .body-muted{ width:100%; }
  .drops{ height:auto; aspect-ratio:973 / 318; }

  .cta__copy{ max-width:none; width:37%; }
}

/* small laptop */
@media (max-width:1180px){
  .nav__menu{ gap:26px; }
  .hero__lede{ font-size:17px; line-height:28px; margin-top:18px; }
  .hero__copy .badge-btn{ margin-top:32px; }
  .badge-btn img{ width:178px; }
  .film__list{ gap:22px; }
  .film__list li{ font-size:15px; gap:14px; }
  .film__card{ padding:44px 26px 46px; gap:40px; }
  .quote{ padding:34px 20px; gap:16px; }
  .quote blockquote,.quote figcaption{ font-size:16px; }
  .testimonials{ gap:22px; }
}

/* tablet */
@media (max-width:1024px){
  .film__hero{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "copy list"
      "graphic graphic";
    justify-content:stretch;
    gap:40px;
    padding:44px 40px 0;
    min-height:0;
  }
  .film__heroCopy{ grid-area:copy; padding-top:0; }
  .film__list{ grid-area:list; padding-top:0; }
  .film__heroGraphic{ grid-area:graphic; justify-self:center; margin-top:24px; }
  .film__heroGraphic img{ width:241px; margin-inline:auto; }

  .film__cards{ grid-template-columns:1fr; gap:18px; }
  .film__cardPhone{ width:422px; max-width:none; margin-inline:-48px; }

  .features__row1{ grid-template-columns:1fr; }
  .panel--booth{ padding:40px 32px; }
  .panel--booth .panel__copy{ width:60%; }
  .panel__strip{ left:auto; right:6%; top:-28px; width:132px; }
  .panel--collage{ padding:40px 32px; gap:24px; }
  .panel--collage .panel__copy{ width:50%; }
  .panel__collage{ width:44%; margin:0; }

  .panel--drops{ flex-direction:column; padding:40px 32px; gap:28px; }
  .panel--drops .panel__copy{ width:100%; }
  .drops{ width:100%; }

  .testimonials{ grid-template-columns:1fr; gap:16px; }
  .quote{ min-height:0; }

  .cta__panel{ width:100%; }
}

/* =========================================================
   MOBILE  (<= 720px)
   Title bar keeps the logo only; every heading and body block
   centres; the CTA stacks polaroid → copy → App Store button.
   ========================================================= */
@media (max-width:720px){

  :root{ --shell-pad:24px; }

  /* --- title bar: logo only --- */
  .site-header{ padding:18px 0 14px; }
  .site-header.is-stuck{ padding:10px 0; }
  .nav{ padding-inline:0; justify-content:center; }
  .iconbtn{ width:32px; height:32px; }
  .nav__menu{ display:none; }
  .nav__logo svg{ width:178px; }

  /* --- hero --- */
  .hero{ margin-top:0; }
  .hero__inner{ aspect-ratio:auto; min-height:0; }
  .hero__copy{
    position:static;
    width:100%;
    padding:8px 0 0;
    text-align:center;
  }
  .hero__title{ font-size:clamp(30px, 8.4vw, 42px); line-height:1.24; }
  .hero__lede{
    width:100%;
    max-width:34ch;
    margin:18px auto 0;
    font-size:16px;
    line-height:28px;
  }
  .hero__copy .badge-btn{ margin-top:28px; }
  /* Hero graphic on mobile: the phone stands upright and centred and carries
     the view; the polaroids fan out behind it with only a sliver of each
     showing. The export has a -8.38deg tilt baked in (it is rotated in the
     Figma comp), so the phone is counter-rotated to sit straight. */
  /* full-bleed so the phone is sized against the viewport, not the column */
  .hero__graphic{
    position:relative;      /* stays the containing block for the shots */
    width:calc(100% + var(--shell-pad) * 2);
    margin:34px calc(var(--shell-pad) * -1) 0;
    aspect-ratio:1 / 2.04;
  }
  /* the phone carries the frame — its body fills ~87% of the viewport */
  .hero__phone{
    left:-12.15%;
    top:0;
    width:124.3%;
    rotate:-8.38deg;
    z-index:2;
  }
  /* each shot shows roughly a 30px sliver past the phone; --tx/--ty are
     re-pointed at the phone's centre for this layout so they still emerge
     from behind it */
  /* each shot keeps its desktop size relative to the phone (0.534 / 0.678 /
     0.555 / 0.607 of the phone image), so the composition reads the same;
     they simply tuck further behind it, leaving roughly a 30px sliver */
  .hero__shot{ z-index:1; }
  /* they run out past the column edge so the viewport trims them to a sliver,
     and they stay inside the phone's height rather than poking past it */
  .hero__shot--1{ left: -6.00%; top: 8%; width:66.35%; rotate:-6deg; --tx: 34.4%; --ty: 66.5%; }
  .hero__shot--3{ left: 37.02%; top: 7%; width:68.98%; rotate: 5deg; --tx:-31.2%; --ty: 65.1%; }
  .hero__shot--2{ left: -6.00%; top:48%; width:84.27%; rotate: 5deg; --tx: 16.5%; --ty:-45.5%; }
  .hero__shot--4{ left: 30.57%; top:51%; width:75.43%; rotate:-4deg; --tx:-24.2%; --ty:-52.5%; }

  /* --- headings and body copy centre throughout --- */
  .film__heroCopy,
  .panel__copy{ align-items:center; text-align:center; }
  .panel__copy .body-muted br{ display:none; }
  .h-cta br,
  .cta__lede br{ display:none; }

  /* --- shoot like real film --- */
  .film__hero{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "list" "graphic";
    gap:32px;
    padding:40px 24px 0;
  }
  .film__heroCopy .body-muted{ max-width:36ch; }
  .film__list{
    align-items:flex-start;
    width:max-content;
    max-width:100%;
    margin-inline:auto;
    gap:20px;
  }
  .film__heroGraphic{ margin-top:0; }
  .film__heroGraphic img{ width:100%; max-width:241px; margin-inline:auto; }

  .film__card{ padding:44px 24px 40px; gap:36px; }
  .film__cardPhone{ width:100%; max-width:320px; margin:-7% -11.3% -15.5%; }

  /* --- feature panels --- */
  .panel--booth,
  .panel--collage{
    flex-direction:column;
    padding:36px 24px;
    gap:24px;
    min-height:0;
  }
  .panel--booth .panel__copy,
  .panel--collage .panel__copy{ width:100%; }
  .panel__strip{
    position:static;
    width:132px;
    margin-inline:auto;
  }
  .panel--booth{ overflow:hidden; }
  .panel__collage{ width:100%; max-width:300px; margin:0 auto; }

  .panel--drops{ padding:36px 24px; gap:24px; min-height:0; overflow:hidden; }
  .panel--drops .body-muted{ width:100%; max-width:36ch; }
  /* let the pack trio use the panel's full width, not the padded box */
  .drops{ width:calc(100% + 48px); margin-inline:-24px; }

  .quote{ padding:32px 20px; }

  /* --- app install: polaroid → copy → button --- */
  .cta{ padding:54px 0 24px; }
  .cta__panel{
    width:100%;
    margin-left:0;
    min-height:0;
    padding:0 24px 40px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .cta__shot{
    position:relative;
    left:auto;
    top:auto;
    width:82%;
    max-width:290px;
    margin:-34px 0 10px;
  }
  .cta__copy{
    position:static;
    width:100%;
    max-width:none;
    text-align:center;
  }
  .cta__lede{ max-width:32ch; margin-inline:auto; }
  .cta__qr{ display:none; }

  /* --- footer --- */
  .site-footer{ padding-block:12px 36px; }
  .footer{
    flex-direction:column;
    gap:22px;
    padding-inline:0;
    text-align:center;
  }
  .footer__meta{ flex-direction:column; gap:16px; }
  .footer__copy{ white-space:normal; }
  .footer__links{ gap:22px; flex-wrap:wrap; justify-content:center; }
}

/* --- small phones --- */
@media (max-width:420px){
  :root{ --shell-pad:18px; }
  .film__hero{ padding-inline:18px; }
  .film__card{ padding-inline:18px; }
  .panel--booth,
  .panel--collage,
  .panel--drops{ padding-inline:18px; }
  .drops{ width:calc(100% + 36px); margin-inline:-18px; }
  .footer__links{ gap:16px; }
}

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__shot,.hero__phone{ opacity:1; }
  .hero__underline{ clip-path:none; }
  .cta__underline{ clip-path:none; }
}