/*
 * MixMix landing — popcorn.space's design system, copied to spec.
 *
 * Popcorn's own faces are commercial (Untitled Serif by Klim, Messina Sans by
 * Luzi Type), so this uses Fraunces + Figtree — chosen from a seven-way render
 * test as the pairing that keeps popcorn's editorial structure while reading
 * warmer, closer to the MixMix mark. Fraunces' opsz axis is pinned to 72 for
 * display-grade contrast at 88px; it would otherwise track its font-size.
 * The scale, tracking and greyscale below are popcorn's exact computed values.
 *
 * Type scale (popcorn, verbatim):
 *   h1   88px / 88px    / -2.2px  (-0.025em) / 400
 *   h2   58px / 58px    / -1.45px (-0.025em) / 400
 *   h3   32px / 42.67px / -0.8px  (-0.025em) / 400
 *   sub  20px / 27.5px  / -0.7px  (-0.035em) / 500
 *   ui   16px / 24px    / -0.4px  (-0.025em) / 600
 * Greyscale (popcorn, verbatim — their lab() values converted to sRGB):
 *   page #F7F7F7 · ink #393737 · secondary #6C6B6B
 * Button: 46px tall, 14px/32px padding, pill radius, ink fill, white label.
 *
 * MixMix deviations, on purpose: the lilac card tint (popcorn's is blue-grey)
 * and the logo. Everything else is theirs.
 */

:root {
  --ink: #393737;          /* popcorn lab(23.2716 .9018 .3261) */
  --grey: #6C6B6B;         /* popcorn lab(45.4675 .3867 .1388) */
  --grey-light: #A0A0A0;
  --ground: #F7F7F7;       /* popcorn lab(97.2276 0 0) */
  --white: #fff;
  --tint: #E9E6F1;         /* MixMix lilac where popcorn uses blue-grey */
  --tint-deep: #E1DDEE;
  --sky: #EDEAF6;
  --purple: #7C4FE0;
  --line: rgba(57,55,55,.11);
  --footer-ink: #151515;   /* popcorn rgb(21,21,21) */
  /* Popcorn's shadows, verbatim: cool-blue tint (not neutral black), low alpha,
     large negative spread so the penumbra stays tight. Ours were rgba(23,19,30,.4)
     at 80px blur — 2.5x the alpha, which is what made devices look pasted on. */
  --shadow-lift: 0 12px 30px -20px rgba(15,30,60,.16), 0 30px 64px -44px rgba(15,30,60,.14);
  --shadow-device: 0 10px 28px -16px rgba(0,0,0,.25), 0 34px 70px -46px rgba(15,30,60,.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--footer-ink);   /* what shows behind the rounded plate corners */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* `clip`, never `hidden` — hidden turns body into a scroll container and the
     footer's position: sticky stops working with no other symptom. */
  overflow-x: clip;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 720px; margin: 0 auto; padding: 0 28px; }
section { padding: 130px 0; position: relative; }

/* ---------- type ---------- */

.serif, h1, h2, h3, .brand, .faq summary, .readout .g, .kpi .n {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; }
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.75rem, 6.8vw, 88px);   /* 88px at popcorn's width */
  line-height: 1; letter-spacing: -0.025em;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 4.5vw, 58px);
  line-height: 1; letter-spacing: -0.025em;
}
h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 32px);
  line-height: 1.3333; letter-spacing: -0.025em;
}
.sub { font-size: 20px; line-height: 27.5px; letter-spacing: -0.035em; font-weight: 500; color: var(--grey); }
.fine { font-size: 14px; line-height: 21px; letter-spacing: -0.025em; color: var(--grey-light); }
.center { text-align: center; }
.stack { display: grid; gap: 20px; justify-items: center; }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 14px 32px; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--ink); color: var(--white);
  font-family: var(--sans); font-size: 16px; line-height: 24px;
  font-weight: 600; letter-spacing: -0.025em;
  transition: opacity .15s ease;
}
.btn:hover { opacity: .82; }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.badge {
  display: inline-flex; align-items: center; height: 45px; padding: 0 22px;
  border-radius: 999px; border: 1.5px solid transparent;
  /* popcorn's badge ring: a soft conic gradient showing through a transparent border */
  background: linear-gradient(var(--white), var(--white)) padding-box,
              conic-gradient(from 225deg, #F4E4C8, #E1DDEE, #D6E4F4, #EDEAF6, #F4E4C8) border-box;
  font-size: 16px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink);
}
/* popcorn's text link: label + small filled circle-chevron */
.tlink { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.025em; }
.tlink .chev {
  width: 17px; height: 17px; border-radius: 50%; background: var(--ink);
  display: grid; place-items: center; color: var(--white); font-size: 9px; line-height: 1;
}

/* ---------- nav ---------- */

/* Popcorn's header is <header class="relative z-50 w-full"> — position: relative,
   not sticky and not fixed, so it simply scrolls away. Its inner row is
   max-w-7xl (1280px) with 20px/24px padding, giving 86px total height. The links
   are 16px/600 at -0.4px in grey, each with 8px/16px padding and a pill radius
   so the hit area is 36px tall; they sit 4px apart, the padding doing the
   visual spacing. */
.nav { position: relative; z-index: 50; width: 100%; }
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; gap: 12px;
}
.brand {
  display: flex; align-items: center; gap: 9px; padding: 8px;
  border-radius: 8px;
  font-family: var(--serif); font-size: 26px; letter-spacing: -0.025em;
}
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 8px 16px; border-radius: 999px;
  font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--grey);
}
.nav-links a:hover { background: rgba(57,55,55,.06); color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-login {
  padding: 8px 16px; border-radius: 999px;
  font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--grey);
}
.nav-login:hover { background: rgba(57,55,55,.06); color: var(--ink); }

/* nowrap is the actual bug fix: at 390px "Log in" broke to "Log / in" and
   "Contact us" to "Contact / us", which is what made the header look mangled. */
.nav-links a, .nav-login, .nav .btn, .brand { white-space: nowrap; }

/* Mobile menu, to popcorn's mobile header: they drop the wordmark and both
   controls, leaving a 52px mark and a 40x40 white button at 8px radius with a
   1px #F0EFEF border. Hidden above 700px. */
.nav-toggle { display: none; }
.nav-menu { display: none; }

@media (max-width: 700px) {
  .nav-inner { padding: 16px 28px; gap: 0; }   /* 16 + 44 mark + 16 = popcorn's 76px */
  .brand-word { display: none; }
  .brand { padding: 0; }
  .brand img { width: 44px; height: 44px; border-radius: 12px; }
  .nav-right { display: none; }

  .nav-toggle {
    display: grid; place-items: center;
    margin-left: auto; width: 40px; height: 40px; padding: 0;
    border: 1px solid #F0EFEF; border-radius: 8px;
    background: var(--white); color: var(--ink); cursor: pointer;
  }
  .nav-toggle { position: relative; }
  .nav-toggle::after { content: ""; position: absolute; inset: -2px; }
  .nav-toggle svg { width: 20px; height: 20px; display: block; }

  /* Popcorn's mobile menu is a full-screen overlay on the page background, not a
     dropdown: fixed inset-0 z-50, its own 52px mark and close button, primary
     links centred at 40px in the display serif on a ~77px pitch, then a hairline
     rule broken by the logo mark, then 22px secondary links, then the CTA.
     Measured at 390px: links y 111/193/264/341, rule y 437 (two 114x1 lines at
     rgba(0,0,0,.1)), sub-links y 472/510, CTA 106x44 at y 571. */
  .nav-menu {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column;
    background: var(--ground);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-menu[hidden] { display: none; }

  .nav-menu-head {
    flex: none; display: flex; align-items: center;
    padding: 16px 28px;
  }
  .nav-menu-mark img { width: 44px; height: 44px; border-radius: 12px; }
  .nav-close {
    margin-left: auto; position: relative;
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    border: 1px solid #F0EFEF; border-radius: 8px;
    background: var(--white); color: var(--ink); cursor: pointer;
  }
  .nav-close::after { content: ""; position: absolute; inset: -2px; }
  .nav-close svg { width: 20px; height: 20px; display: block; }

  .nav-menu-body {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 34px 28px 40px;
  }
  .nav-menu-link {
    display: flex; align-items: center; min-height: 48px;
    font-family: var(--serif); font-variation-settings: "opsz" 72; font-weight: 400;
    font-size: 40px; line-height: 1.22; letter-spacing: -0.025em;
    color: var(--grey);
  }
  .nav-menu-link + .nav-menu-link { margin-top: 28px; }
  .nav-menu-link:active { color: var(--ink); }

  /* two hairlines with the mark in the gap — theirs are 114x1 either side */
  .nav-menu-rule {
    display: flex; align-items: center; gap: 14px;
    width: 100%; max-width: 300px; margin: 44px 0 34px;
  }
  .nav-menu-rule::before, .nav-menu-rule::after {
    content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.1);
  }
  .nav-menu-rule img { width: 26px; height: 26px; border-radius: 8px; opacity: .3; filter: grayscale(1); }

  .nav-menu-sub { display: flex; flex-direction: column; align-items: center; }
  .nav-menu-sub a {
    display: flex; align-items: center; min-height: 44px;
    font-family: var(--serif); font-variation-settings: "opsz" 72; font-weight: 400;
    font-size: 22px; line-height: 1.27; letter-spacing: -0.025em;
    color: var(--grey);
  }
  .nav-menu-cta { margin-top: 30px; height: 44px; padding: 12px 28px; font-size: 15px; }

}

/* ---------- hero ---------- */

.hero { padding: 64px 0 0; }   /* popcorn: 64 desktop, 32 mobile */
.hero h1 { margin: 0; }        /* .stack's 20px gap alone = popcorn's badge->h1 */
.hero .sub { margin-top: 24px; max-width: 580px; }
.hero .btn { margin-top: 30px; }

/* the soft glow + device group under the hero copy */
.showcase {
  position: relative; margin-top: 64px; padding-bottom: 26px;
  display: flex; justify-content: center; align-items: flex-start;
}
.glow {
  position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
  width: 760px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124,79,224,.20), rgba(108,149,255,.13) 55%, transparent);
  filter: blur(46px); pointer-events: none;
}
.device-group { position: relative; display: flex; align-items: flex-start; justify-content: center; }
.device-group .tablet { transform: rotate(-3.5deg); transform-origin: bottom right; }
.device-group .phone { transform: rotate(3deg); transform-origin: bottom left; margin-top: 44px; }

/* ---------- devices ----------
 * Popcorn's mockups are pre-rendered image assets (phone-1-384.avif, 304x618,
 * with drop-shadow-2xl) — they have no CSS frames at all. We can't use their
 * art, so this draws hardware in CSS instead. What makes it read as a real
 * device rather than a rounded rectangle:
 *   - a thin bezel (was 8px, ~3% of width; real phones are ~1%) with
 *     CONCENTRIC radii, i.e. outer = inner + bezel, so the corners nest
 *   - a brushed-metal body: a diagonal gradient through four stops rather than
 *     one flat fill, plus an inset hairline highlight along the top-left edge
 *   - a Dynamic Island on the phone, a bezel camera dot on the tablet
 *   - side buttons: volume pair on the left, power on the right, drawn with
 *     pseudo-elements and stacked via box-shadow copies
 *   - an inset shadow where the screen meets the bezel, so the glass sits under
 *     the frame instead of on top of it
 * ------------------------------------------------------------------------- */

.phone, .tablet {
  position: relative;
  flex: none;
  /* titanium-ish body: light top-left edge, dark face, light bottom-right edge */
  background: linear-gradient(148deg, #5C5C60 0%, #2E2E31 14%, #1C1C1E 52%, #232326 82%, #4A4A4F 100%);
  box-shadow:
    var(--shadow-device),
    inset 0 1px 0 rgba(255,255,255,.22),      /* top edge catch-light */
    inset 1px 0 0 rgba(255,255,255,.10),
    inset -1px 0 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.08);
}
.phone .screen, .tablet .screen {
  position: relative;
  background: var(--white);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);   /* glass sits under the frame */
}

/* --- phone: iPhone 15 proportions --- */
.phone { width: 260px; padding: 6px; border-radius: 44px; }
.phone .screen {
  border-radius: 38px;            /* 44 outer - 6 bezel = concentric */
  aspect-ratio: 9 / 19.5;         /* 390x844 */
}
/* Dynamic Island */
.phone .screen::before {
  content: ""; position: absolute; z-index: 3;
  top: 9px; left: 50%; transform: translateX(-50%);
  width: 27%; height: 19px; border-radius: 999px;
  background: #0B0B0C;
}
.phone .screen-pad { padding-top: 34px; }   /* clear the island */
/* volume pair, left edge */
.phone::before {
  content: ""; position: absolute; z-index: -1;
  left: -2px; top: 20%; width: 3px; height: 34px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, #55555A, #2B2B2E);
  box-shadow: 0 44px 0 0 #3C3C40;           /* second volume button */
}
/* power, right edge */
.phone::after {
  content: ""; position: absolute; z-index: -1;
  right: -2px; top: 27%; width: 3px; height: 52px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(270deg, #55555A, #2B2B2E);
}

/* --- tablet: iPad 11" proportions --- */
.tablet { width: 400px; padding: 9px; border-radius: 28px; }
.tablet .screen {
  border-radius: 19px;            /* 28 outer - 9 bezel */
  aspect-ratio: 3 / 4.2;          /* 834x1194 */
}
/* front camera, in the bezel rather than the screen */
.tablet::after {
  content: ""; position: absolute; z-index: 2;
  top: 3px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #0B0B0C; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
/* volume pair on the top edge, power on the right — as on a landscape-camera iPad */
.tablet::before {
  content: ""; position: absolute; z-index: -1;
  right: -2px; top: 12%; width: 3px; height: 30px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(270deg, #55555A, #2B2B2E);
  box-shadow: 0 40px 0 0 #3C3C40;
}

.screen-label {
  font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey);   /* #6C6B6B on white = 5.0:1; --grey-light failed at 2.6:1 */
}
.screen-pad { padding: 16px; display: grid; gap: 9px; align-content: start; height: 100%; }

.row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: rgba(23,19,30,.045);
  font-size: 13px; font-weight: 500;
}
.row .right { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.row.solid { background: var(--ink); color: var(--white); }
.swatch { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.readout { border-radius: 16px; background: var(--ink); color: var(--white); padding: 16px; text-align: center; }
.readout .g { font-family: var(--serif); font-size: 40px; line-height: 1; letter-spacing: -0.025em; }
.readout .u { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.58); margin-top: 5px; }
.kpi-row { display: flex; gap: 22px; }
.kpi .n { font-family: var(--serif); font-size: 27px; line-height: 1; letter-spacing: -0.025em; }
.kpi .k { font-size: 12px; color: var(--grey); margin-top: 4px; }
.mini-bars { display: grid; gap: 7px; }
.mini-bar { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 8px; }
.mini-bar .track { display: block; height: 7px; border-radius: 4px; background: rgba(23,19,30,.08); }
.mini-bar .track i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.mini-bar .v { font-size: 12px; color: var(--grey); text-align: right; }

/* ---------- three-up (icon chip + serif label, no card) ---------- */

/* Big three-up cards. Popcorn's exact geometry, measured off the live card:
   395x456 at a 1232px content width, 18px radius, 54/24/48 padding, 24px grid
   gap, and a 200x200 white tile at 14px radius holding the artefact. Their
   gradient is blue-grey (229,235,242 -> 241,244,248 at 70%); ours is the same
   two steps rotated onto the MixMix lilac. */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tcard {
  border-radius: 18px;
  padding: 54px 24px 48px;
  background: linear-gradient(rgba(233,230,241,.7), rgba(245,244,249,.7));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tile {
  width: 200px; height: 200px; flex: none;
  border-radius: 14px; background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.tcard h3 { margin-top: 48px; }
.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 776px; margin: 0 auto; }
.tcard .sub { margin-top: 12px; max-width: 268px; }

/* tile innards — small enough to read as an artefact, not a screenshot */
.tile-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tile-k { font-size: 15px; font-weight: 600; letter-spacing: -0.025em; }
.tile-n { font-family: var(--serif); font-size: 46px; line-height: 1; letter-spacing: -0.03em; }
.tile-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; background: #F0EFEF;
  font-size: 13px; font-weight: 500; letter-spacing: -0.02em; color: var(--grey);
}
.tile-list { display: grid; gap: 8px; width: 152px; }
.tile-row { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.tile-row .right { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--grey); }
.tile-row .swatch { width: 18px; height: 18px; border-radius: 6px; }

/* the payoff row inside the why band — three outcomes, no invented figures */
.payoff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.payoff h3 { font-size: 24px; line-height: 1.25; margin-bottom: 10px; }
.payoff .sub { font-size: 17px; line-height: 25px; }

/* 4-up "fits how you work" row */
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.quad h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 8px; }
.quad p { font-size: 16px; color: var(--grey); letter-spacing: -0.02em; }
.quad .chip { width: 40px; height: 40px; margin-bottom: 20px; }
.quad .chip svg { width: 21px; height: 21px; }

/* numbered steps */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 46px 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid var(--line); }
.steps .step:last-child { border-bottom: 1px solid var(--line); }
.step .num { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--grey-light); font-variation-settings: "opsz" 72; }
.step h3 { font-family: var(--serif); font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-variation-settings: "opsz" 72; }
.step p { font-size: 18px; color: var(--grey); letter-spacing: -0.025em; margin-top: 6px; }

.threeup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.threeup .item { display: grid; justify-items: center; gap: 22px; text-align: center; }
.chip {
  width: 58px; height: 58px; border-radius: 50%; background: rgba(23,19,30,.055);
  display: grid; place-items: center;
}
.chip svg { width: 25px; height: 25px; stroke: var(--ink); stroke-width: 1.4; fill: none; }
.threeup h3 { font-size: clamp(1.5rem, 2.5vw, 32px); }

/* ---------- product cards (tinted, device bleeds off the bottom) ---------- */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 70px; }
.pcard {
  background: var(--tint); border-radius: 32px; padding: 40px 26px;
  overflow: hidden;
  display: grid; gap: 12px; justify-items: center; text-align: center;
  align-content: start;
}
.pcard .sub { font-size: 18px; }

/* the assistant card's thread, inside the same tablet frame as the other two */
.chat-in, .chat-out {
  max-width: 88%; padding: 10px 13px; border-radius: 14px;
  font-size: 13px; line-height: 18px; font-weight: 500;
}
.chat-in { background: rgba(23,19,30,.045); border-bottom-left-radius: 5px; }
.chat-out {
  margin-left: auto; background: var(--ink); color: var(--white);
  border-bottom-right-radius: 5px;
}
/* .pcard is a grid with justify-items: center, so children shrink to max-content —
   which let this sentence size to one unwrapped line and overflow on a 360px phone. */
.pcard > * { max-width: 100%; }
.pcard-device { width: min(340px, 100%); }
.pcard .bleed { width: 100%; margin-top: 40px; display: flex; justify-content: center; align-items: flex-start; }
.pcard .bleed .phone, .pcard .bleed .tablet { box-shadow: var(--shadow-lift); }

/* ---------- tinted band (manifesto) ---------- */

.band { background: linear-gradient(180deg, var(--sky) 0%, #F1EFF7 62%, var(--ground) 100%); overflow: hidden; }
.band .cloud {
  position: absolute; border-radius: 50%; background: var(--white);
  filter: blur(52px); opacity: .55; pointer-events: none;
}
.band .c1 { width: 420px; height: 120px; left: -100px; top: 20%; }
.band .c2 { width: 320px; height: 100px; right: -80px; top: 40%; }
.band .c3 { width: 560px; height: 130px; left: 24%; bottom: -70px; opacity: .45; }
.band .inner { position: relative; z-index: 1; }

/* ---------- real screenshots in the CSS phone frames ---------- */
.phone .screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shots { gap: 0; }
.shots .phone { width: 290px; }
.shots .tilt-l { transform: rotate(-5deg); margin-top: 36px; z-index: 1; }
.shots .tilt-r { transform: rotate(4deg); margin-left: -30px; z-index: 2; }

/* ---------- perks: popcorn's icon row under the hero ---------- */
.perks-sec { padding: 72px 0 24px; }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 920px; margin: 0 auto; }
.perk { display: grid; justify-items: center; gap: 22px; text-align: center; }
.perk .chip { width: 62px; height: 62px; background: linear-gradient(180deg, #F1F0F4, #E7E6EC); }
.perk .chip svg { width: 26px; height: 26px; }
.perk h3 { font-size: clamp(1.35rem, 2.1vw, 28px); line-height: 1.12; }

/* ---------- closing card: steps · phone · price ---------- */
.closing { padding: 40px 0 150px; }
.close-card {
  position: relative; display: grid; grid-template-columns: 1fr 250px 1fr; align-items: center;
  min-height: 330px;
}
.close-steps, .close-price { border-radius: 28px; padding: 40px 44px; align-self: stretch; margin: 30px 0; }
.close-steps {
  background: linear-gradient(135deg, var(--sky) 0%, #F1EFF7 50%, #F6E9DA 100%);
  margin-right: -90px; padding-right: 130px; position: relative;
}
.close-price {
  background: var(--footer-ink); color: var(--white); text-align: right;
  margin-left: -90px; padding-left: 130px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px;
}
.close-card h2 { font-size: clamp(2rem, 3.2vw, 40px); line-height: 1.05; }
.close-steps ol { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.close-steps li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; letter-spacing: -0.025em; }
.close-steps li span {
  width: 28px; height: 28px; border-radius: 50%; background: var(--white); flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--grey);
}
.sticker {
  position: absolute; left: 22px; bottom: -16px; transform: rotate(-4deg);
  background: var(--white); border-radius: 999px; padding: 6px 14px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.02em; box-shadow: var(--shadow-lift);
}
.close-from { font-size: 18px; color: rgba(255,255,255,.62); }
.close-from strong { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -0.03em; color: var(--white); margin: 0 4px; vertical-align: -6px; }
.close-mail { font-size: 14px; color: rgba(255,255,255,.45); }
.btn-light { background: var(--white); color: var(--ink); margin-top: 6px; }
.close-phone { position: relative; z-index: 2; display: flex; justify-content: center; }
.close-phone .phone { width: 250px; transform: rotate(-6deg); }

@media (max-width: 900px) {
  .perks { grid-template-columns: 1fr; gap: 44px; }
  .close-card { grid-template-columns: 1fr; }
  .close-steps, .close-price { margin: 0; padding: 36px 28px; }
  .close-price { align-items: flex-start; text-align: left; margin-top: 16px; }
  .close-phone { display: none; }
  .sticker { left: auto; right: 22px; }
}
@media (max-width: 700px) {
  /* two screenshots side by side are unreadable at this width — show the scale alone */
  .device-group.shots .tilt-r { display: none; }
  .device-group.shots .tilt-l { transform: rotate(-3deg); }
  .hero .sub br { display: none; }
}

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.plan {
  border-radius: 18px; padding: 32px 18px 30px;
  background: linear-gradient(rgba(233,230,241,.7), rgba(245,244,249,.7));
  display: grid; gap: 10px; justify-items: center; text-align: center;
}
.plan-pick { background: var(--ink); color: var(--white); }
.plan-pick .plan-who, .plan-pick .plan-per { color: rgba(255,255,255,.62); }
.plan-name { font-size: 16px; font-weight: 600; letter-spacing: -0.025em; }
.plan-n { font-family: var(--serif); font-size: 46px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-per { font-family: var(--sans); font-size: 15px; letter-spacing: -0.02em; color: var(--grey); margin-left: 2px; }
.plan-who { font-size: 15px; color: var(--grey); letter-spacing: -0.02em; }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr 1fr; } }

/* ---------- faq ---------- */

/* Measured off popcorn: a 608px column of white cards at 12px gap, each 14px
   radius with 22px/26px padding and no border or shadow — the hairline-separated
   list we had before was our own invention. The question row is a two-track grid
   (1fr + a 19px icon, 16px apart) set in the display serif at 22/33 with
   -0.025em; the answer is 16/24 sans below it. Their chevron is a 19px svg whose
   path rotates 180deg over 200ms on open. */
.faq { max-width: 608px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--white);
  border-radius: 14px;
  padding: 22px 26px;
}
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 19px; column-gap: 16px;
  align-items: start;
  font-family: var(--serif); font-variation-settings: "opsz" 72; font-weight: 400;
  font-size: 22px; line-height: 33px; letter-spacing: -0.025em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq-chev { width: 19px; height: 19px; margin-top: 7px; }
.faq-chev path { transform-origin: 9.5px 9.5px; transition: transform .2s var(--ease); }
.faq details[open] .faq-chev path { transform: rotate(180deg); }
.faq details p {
  margin-top: 10px;
  font-family: var(--sans); font-size: 16px; line-height: 24px;
  letter-spacing: normal; color: #0A0A0A;   /* popcorn lab(2.75381 0 0) */
}

/* ---------- footer ---------- */

/* ---------------------------------------------------------------------------
 * Footer reveal — popcorn.space's, measured off the live site.
 *
 * Their structure, verbatim:
 *   body                        flex column, overflow-x: clip
 *   div.site-footer-clip        z-index 10, page bg, radius 0 0 48px 48px, overflow clip
 *   div.-mt-[calc(100lvh+24rem)]  negative margin pulls the footer wrapper up
 *   footer.sticky.bottom-0.z-0  565px tall, gradient #1E1E1E -> #151515
 *     + a 112px block of #1E1E1E above the footer, so the wedge of background
 *       visible at each rounded corner is dark rather than page-coloured
 *     + a 128px noise tile at opacity .55, mix-blend-mode: overlay
 *     + the wordmark at 29cqw (container-query width), weight 600,
 *       letter-spacing -0.052em, line-height 0.8, margin-bottom -0.27em
 *
 * One MixMix deviation: the wordmark is set in the serif, matching our own nav
 * brand mark; popcorn's is in their sans.
 * ------------------------------------------------------------------------- */

.page {
  position: relative;
  z-index: 10;
  background: var(--ground);
  border-radius: 0 0 48px 48px;
  overflow: clip;
  flex: 1 0 auto;
}

.foot-wrap {
  margin-top: calc(-100lvh - 24rem);
  /* No padding here. Padding on the containing block does NOT act as sticky
     travel room — the footer stays inert with it on either side. Popcorn uses a
     spacer *child* before the footer, and that does work: the sticky element
     can then be pulled up through the spacer's height (its containing block is
     taller than it), which is what produces the pin. The negative margin above
     cancels the spacer, so the document gets no taller. */
}

.foot-spacer { display: block; height: calc(100lvh + 24rem); }

footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  width: 100%;
  color: var(--white);
}
/* fills the strip above the footer so the rounded corners reveal dark, not page */
.foot-fill {
  pointer-events: none; position: absolute; left: 0; right: 0;
  top: -112px; height: 112px; background: #1E1E1E;
}
.foot-inner {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 565px;
  display: flex; flex-direction: column;
  background: linear-gradient(#1E1E1E 0%, var(--footer-ink) 100%);
}
/* self-contained noise: feTurbulence in a data URI, so there's no image asset */
.grain {
  pointer-events: none; position: absolute; inset: 0; z-index: 1;
  opacity: .55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  background-repeat: repeat;
}
.foot-hairline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--footer-ink); z-index: 20; }

.foot-top {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px;
  padding-top: 96px;
  display: grid; grid-template-columns: 0.75fr repeat(3, minmax(0, 1fr));
  align-items: start; gap: 32px;
}
.foot-mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--white);
}
.foot-mark img { width: 26px; height: 26px; }
.foot-cols { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-cols h3 {
  font-size: 16px; line-height: 24px; font-weight: 600;
  letter-spacing: -0.025em; color: var(--white); margin-bottom: 8px;
}
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { font-size: 18px; line-height: 28px; letter-spacing: -0.025em; }
.foot-cols a { color: rgba(255,255,255,.55); font-weight: 500; }
.foot-cols a:hover { color: var(--white); }

/* the wordmark: sized in cqw so it always spans the container, and pulled below
   its own box so the footer's overflow crops the baseline */
.foot-bottom {
  container-type: inline-size; width: 100%;
  max-width: 1280px; margin: auto auto 0; padding: 0 24px;
  position: relative; z-index: 2;
}
.wordmark {
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: 35.4cqw;   /* = popcorn's 1.053 ink-to-container ratio for this string in this face */
  line-height: .8;
  letter-spacing: -0.052em;
  /* The glyph run is 5.3% wider than its box, and popcorn splits that overflow
     evenly (measured 32px left, 33px right) — their -0.09em left margin is what
     centres it, not an optical tweak. text-align: center does NOT work here:
     it only distributes *remaining* space, and an overflowing unbreakable line
     has none, so the line stays flush to the inline start.
     Half the overflow = 0.053/2 x container, and container = font-size/0.354,
     so the offset is a scale-invariant 0.0749em. */
  margin-left: -0.0749em;
  /* Popcorn hides 39% of the letter height below the footer edge — the crop is
     meant to be deep. -0.02em (only 19%) was far too timid. */
  margin-bottom: -0.266em;
  color: var(--white);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Every device had a hard pixel width, so all three overflowed their container
 * on a phone: a 325px tablet inside a 254px card, and a 548px hero pair inside
 * a 390px viewport (centred, so it bled off BOTH edges and cut the left of the
 * screen). body's overflow-x: clip hid the scrollbar and therefore the symptom.
 * Devices are fluid from here down, and the fixed widths above are treated as
 * maximums.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
  section { padding: 90px 0; }
  .threeup, .cards, .trio { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .quad { grid-template-columns: 1fr 1fr; }
  .payoff { grid-template-columns: 1fr; gap: 32px; }
  .nav-links { display: none; }

  .phone { width: min(260px, 100%); }
  .tablet { width: min(340px, 100%); }
  .glow { width: min(760px, 130vw); }
}

@media (max-width: 700px) {
  .wrap, .narrow { padding: 0 20px; }
  .hero { padding-top: 32px; }   /* popcorn halves the hero's top padding on mobile */
  /* Two devices side by side can't be legible at this width — 180px each. Show
     the phone alone; the product cards below still carry a tablet. */
  .device-group .tablet { display: none; }
  .device-group .phone { margin-left: 0; margin-top: 0; width: min(260px, 68vw); }
  .showcase { margin-top: 48px; }

  .pcard { padding: 36px 20px; border-radius: 28px; }
  .tcard { padding: 40px 20px 36px; }
  .tile { width: min(200px, 100%); }
  /* .foot-top is a 4-track grid on desktop with the mark in track 1; on a phone
     that left track was still eating a quarter of the width and pushing the
     links right. Stack it instead. */
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .foot-cols { grid-column: 1; grid-template-columns: 1fr; gap: 22px; }
  .faq details { padding: 18px 20px; }
  .faq summary { font-size: 19px; line-height: 28px; }

}

/* Touch targets, keyed to the input device rather than a breakpoint: the nav
   wordmark (26px), the arrow links (24px), the FAQ rows (33px) and the footer
   links (22px) were all under the 44px minimum. */
/* the desktop brand row is 42px; on a touch device wide enough to still show it
   (iPad portrait), pad it to 44. Phones show a 44px mark and need nothing. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) {
  .brand { padding: 9px 0; }
}

@media (hover: none) and (pointer: coarse) {
  .tlink { min-height: 44px; }
  .faq summary { min-height: 44px; align-items: center; }
  .foot-cols li { line-height: 44px; }
  .foot-cols li a { display: block; }
  .foot-mark { padding: 4px; box-sizing: content-box; }
}


/* ---------------------------------------------------------------------------
 * Motion. The biggest single difference from popcorn was that we had none:
 * they run 4 keyframe loops and 10 distinct transitions, all on the same
 * ease-out-quint (0.22, 1, 0.36, 1) at 0.3-0.7s with staggered delays, and
 * 47 elements carrying a transform. Below is that vocabulary, not more.
 * Everything sits inside prefers-reduced-motion: no-preference, so with motion
 * reduced the page renders fully static with nothing stuck at opacity 0.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    translate: 0 20px;
    transition: opacity .6s var(--ease), translate .6s var(--ease);
  }
  [data-reveal].in { opacity: 1; translate: 0 0; }

  /* children of a revealed group arrive one after another — popcorn's 0.3s feel */
  [data-stagger] > * {
    opacity: 0;
    translate: 0 16px;
    transition: opacity .5s var(--ease), translate .5s var(--ease);
  }
  [data-stagger].in > * { opacity: 1; translate: 0 0; }
  [data-stagger].in > *:nth-child(2) { transition-delay: .08s; }
  [data-stagger].in > *:nth-child(3) { transition-delay: .16s; }
  [data-stagger].in > *:nth-child(4) { transition-delay: .24s; }
  [data-stagger].in > *:nth-child(5) { transition-delay: .32s; }


  /* a light crosses the badge every few seconds — popcorn's cta-badge-shine */
  @keyframes sheen { 0%, 62% { left: -60%; } 84%, 100% { left: 130%; } }
  .badge { position: relative; overflow: hidden; }
  .badge::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(124,79,224,.16), transparent);
    animation: sheen 5.5s ease-in-out infinite;
  }

  /* interactive feedback, on their curve instead of a linear fade */
  .btn { transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(0,0,0,.42); }
  .btn:active { transform: scale(.97); transition-duration: .1s; }
  /* popcorn moves the artwork inside a card on hover, not the card itself */
  .tile, .plan { transition: transform .45s var(--ease); }
  .tcard:hover .tile { transform: translateY(-6px) scale(1.03); }
  .plan:hover { transform: translateY(-4px); }

  /* hero arrives on load, text first, then the devices rise out of the glow —
     popcorn's reveal-on-load + portal-materialise */
  @keyframes rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
  @keyframes materialise { from { opacity: 0; translate: 0 24px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
  .hero .stack > * { animation: rise .7s var(--ease) both; }
  .hero .stack > :nth-child(2) { animation-delay: .06s; }
  .hero .stack > :nth-child(3) { animation-delay: .12s; }
  .hero .stack > :nth-child(4) { animation-delay: .18s; }
  .hero .device-group { animation: materialise 1s var(--ease) .3s both; }
  .faq summary, .nav-links a, .tlink { transition: color .2s var(--ease); }
  .tlink .chev { transition: transform .3s var(--ease); }
  .tlink:hover .chev { transform: translateX(3px); }
}