/* SEENCAM landing — ink / paper / ember, set in heavy display caps over Geist. */
@font-face{font-family:"Inter Display";src:url(assets/fonts/Inter-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(assets/fonts/InterTight-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(assets/fonts/InterTight-500.woff2) format("woff2");font-weight:500;font-display:swap}
@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:"Geist Mono";src:url(assets/fonts/GeistMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#0B120E; --ink-2:#141C17; --ink-3:#1E2822;
  --paper:#F4F2EF; --paper-2:#E9E5DF; --paper-3:#DCD6CE;
  --ember:#EC662D; --ember-deep:#C94C17; --ember-wash:#F8D9C8;
  /* mint: the app's selection colour (Palette.selection) and the roller's housing */
  --mint:#98BFB7; --mint-shade:#6B8F87; --mint-deep:#3F6B62; --mint-wash:#DDEAE6;
  --fg-soft:rgba(244,242,239,.72); --fg-faint:rgba(244,242,239,.42);
  --ink-soft:rgba(11,18,14,.70);
  --ease:cubic-bezier(.22,1,.36,1);
  --r-lg:40px; --r-md:24px;
  --gutter:clamp(16px,4vw,56px);
  --display:"Inter Display","Inter Tight",system-ui,sans-serif;
  --body:Geist,"Inter Tight",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
/* clip, not hidden, on both: nothing wider than the screen can pan sideways (iOS Safari
   ignores body-only hidden for touch panning), and clip makes no scroll container, so the
   sticky phone in "How a roll works" keeps sticking */
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:12px}
::selection{background:var(--mint);color:var(--ink)}

.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.ink{background:var(--ink);color:var(--paper)}
.paper{background:var(--paper);color:var(--ink)}
.ember-bg{background:var(--ember);color:var(--ink)}
.mint-bg{background:var(--mint);color:var(--ink)}
.mint{color:var(--mint);font-style:normal}
.hl{background:linear-gradient(transparent 12%,var(--mint) 12%,var(--mint) 98%,transparent 98%);color:var(--ink);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ember{color:var(--ember);font-style:normal}
.ember-bg .ember{color:var(--paper)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* display type: heavy, tight, all caps */
.display{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.86;margin:0}
.h2{font-size:clamp(44px,7.4vw,112px);max-width:14ch}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:40ch;margin:24px 0 0}
.ink .lede{color:var(--fg-soft)}
.paper .lede,.ember-bg .lede{color:var(--ink-soft)}
.line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.line>span{display:inline-block;will-change:transform}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;
  border-radius:999px;border:0;font-family:var(--body);font-weight:600;font-size:17px;text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease),background-color .25s,color .25s,box-shadow .35s var(--ease);white-space:nowrap}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0) scale(.97)}
.pill svg{width:20px;height:20px;flex:none;fill:currentColor}
.pill-sm{min-height:44px;padding:0 18px;font-size:15px}
.pill-sm svg{width:17px;height:17px}
.pill-ember{background:var(--ember);color:var(--ink)}
.pill-ember:hover{background:#F27A45;box-shadow:0 12px 32px -12px rgba(236,102,45,.7)}
.pill-ink{background:var(--ink);color:var(--paper)}
.pill-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.pill-ghost:hover{background:rgba(152,191,183,.16);color:var(--mint)}
.pill-mint{background:var(--mint);color:var(--ink)}
.pill-mint:hover{background:#ABCDC6;box-shadow:0 12px 32px -12px rgba(152,191,183,.7)}
.pill-block{width:100%}

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:12px var(--gutter) auto;z-index:50;display:flex;align-items:center;gap:24px;
  height:64px;padding:0 10px 0 24px;border-radius:999px;color:var(--paper);
  background:rgba(11,18,14,.55);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(244,242,239,.10);transition:transform .5s var(--ease),background-color .3s}
.nav.is-hidden{transform:translateY(calc(-100% - 28px))}
.wordmark{display:inline-flex;align-items:baseline;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:21px;letter-spacing:-.005em;text-decoration:none}
.wordmark .dot{width:.46em;height:.46em;margin-left:.12em;fill:var(--ember);flex:none;transform:translateY(.02em)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:10px 14px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;color:var(--fg-soft);transition:color .2s,background-color .2s}
.nav-links a:hover{color:var(--mint);background:rgba(152,191,183,.1)}
@media (max-width:860px){.nav-links{display:none}.nav .pill{margin-left:auto}}

/* ── phone mockup: webp 923x2000, screen (57,141) 810x1718, radius 104 ── */
.phone{position:relative;width:var(--pw);aspect-ratio:923/2000;flex:none}
.phone .shell{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.phone .screen{position:absolute;left:6.1755%;top:7.05%;width:87.757%;height:85.9%;border-radius:12.84% / 6.054%;overflow:hidden;background:#000}
.phone .screen video{width:100%;height:100%;object-fit:cover}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:120px 0 80px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.hero-media [data-kind="video"]:not([src]){display:none}
.hero-media [data-kind="video"][src]~.hero-still{display:none}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(11,18,14,.96) 0%,rgba(11,18,14,.86) 38%,rgba(11,18,14,.45) 70%,rgba(11,18,14,.7) 100%),
  linear-gradient(0deg,rgba(11,18,14,1) 0%,rgba(11,18,14,0) 30%)}
.hero-grid{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:8px 16px 8px 12px;border-radius:999px;
  background:rgba(244,242,239,.08);box-shadow:inset 0 0 0 1px rgba(244,242,239,.14);font-size:14px;font-weight:500;color:var(--fg-soft)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(236,102,45,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(236,102,45,0)}100%{box-shadow:0 0 0 0 rgba(236,102,45,0)}}
.hero-title{font-size:clamp(50px,7.4vw,128px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.proof{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:28px 0 0}
.proof li{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 9px;border-radius:999px;
  background:rgba(11,18,14,.62);box-shadow:inset 0 0 0 1px rgba(152,191,183,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:14px;font-weight:500;line-height:1;color:var(--paper);white-space:nowrap}
.proof li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230B120E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

.hero-stage{position:relative;display:flex;justify-content:center;align-items:center}
.device{position:relative;height:min(88vh,860px);aspect-ratio:1080/2340;translate:-120px 0;will-change:transform}
.hero-reel{position:absolute;inset:0;pointer-events:none}
.device.is-flat .hero-reel{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 1%,#000 6.5%,#000 93.5%,transparent 99%),linear-gradient(180deg,transparent 1%,#000 6.5%,#000 93.5%,transparent 99%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 1%,#000 6.5%,#000 93.5%,transparent 99%),linear-gradient(180deg,transparent 1%,#000 6.5%,#000 93.5%,transparent 99%);mask-composite:intersect}
/* in the film the phone sits at 26.1%-92.7% of the frame both ways (centre 59.4%, not 50%),
   so at 130% this puts it at 6.7%-93.3% of the box */
.hero-reel video{position:absolute;left:-27.2%;top:-27.2%;width:130%;height:130%;max-width:none;object-fit:cover}
.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.links path{fill:none;stroke:rgba(244,242,239,.3);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .3s}
.links path.is-live{stroke:var(--ember);stroke-dasharray:6 5;animation:flow .7s linear infinite}
.links path.is-done{stroke:var(--mint)}
@keyframes flow{to{stroke-dashoffset:-11}}
.link-dot{position:absolute;left:93%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(244,242,239,.45);transition:background-color .3s,box-shadow .3s}
.link-dot.is-live{background:var(--ember);box-shadow:0 0 0 0 rgba(236,102,45,.6);animation:pulse 1.4s infinite}
.link-dot.is-done{background:var(--mint)}

.chip{position:absolute;left:103%;translate:0 -50%;display:flex;align-items:center;gap:12px;min-height:56px;padding:9px 18px 9px 9px;border:0;border-radius:999px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:15px;line-height:1.1;text-align:left;cursor:pointer;white-space:nowrap;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.6);--s:1;--live:1;scale:calc(var(--s) * var(--live));transform-origin:left center;
  transition:opacity .35s,scale .45s var(--ease),box-shadow .35s}
.chip small{display:block;font-size:12px;color:var(--ink-soft);font-weight:500}
.chip b{font-weight:700;font-variant-numeric:tabular-nums}
.chip-seal{top:20%}.chip-guests{top:57%}.chip-cam{top:84.7%}
@media (min-width:961px) and (max-width:1360px){.device{translate:-150px 0;height:min(82vh,760px)}.chip{--s:.86}.hero .lede{max-width:32ch}}
.hero-copy{position:relative;z-index:2}
.chip.is-idle{opacity:.6}
.chip.is-live{--live:1.07;box-shadow:0 0 0 3px var(--ember),0 24px 48px -14px rgba(0,0,0,.7)}
.chip:hover{opacity:1}
.chip:focus-visible{outline:3px solid var(--mint);outline-offset:4px;border-radius:999px}
.chip .ring{width:38px;height:38px;flex:none;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--paper-3);stroke-width:4}
.ring-fg{fill:none;stroke:var(--ember);stroke-width:4;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:30;transition:stroke .3s}
.chip .tick{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:rotate(90deg);transform-origin:18px 18px}
.chip-seal.is-done .ring-fg{stroke:var(--mint);stroke-dashoffset:0}
.chip-seal.is-done .tick{opacity:1}
.chip-seal.is-done{box-shadow:0 0 0 3px var(--mint),0 24px 48px -14px rgba(0,0,0,.7)}
.chip-guests small{display:inline;font-size:15px;color:var(--ink);font-weight:500}
.faces{display:flex;align-items:center}
.faces img{width:0;max-width:none;height:34px;border-radius:50%;object-fit:cover;border:0 solid var(--paper);margin-left:0;opacity:0;scale:.3;
  transition:width .35s var(--ease),margin .35s var(--ease),opacity .25s,scale .45s cubic-bezier(.34,1.56,.64,1),border-width .2s}
.faces img.in{width:34px;border-width:2px;margin-left:-10px;opacity:1;scale:1}
.faces img.in:first-child{margin-left:0}
.chip-cam{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(152,191,183,.35),0 20px 40px -14px rgba(0,0,0,.6)}
.chip-cam small{color:var(--mint)}
.chip-cam b{font-family:var(--mono);font-weight:500;letter-spacing:.1em;font-size:14px}
.chip-cam.is-live{box-shadow:0 0 0 3px var(--mint),0 24px 48px -14px rgba(0,0,0,.7)}
.chip-cam .swatch{position:relative;width:38px;height:38px;flex:none;border-radius:50%;background:var(--sw,conic-gradient(#d8d29a,#2f4a42,#e8b45a,#d8d29a));box-shadow:0 0 0 2px var(--mint);transition:background .2s}
.chip-cam .swatch svg{position:absolute;inset:-5px;width:48px;height:48px;transform:rotate(-90deg);opacity:0;transition:opacity .2s}
.chip-cam.is-rec .swatch svg{opacity:1}
.chip-cam.is-rec .swatch{box-shadow:0 0 0 2px rgba(236,102,45,.3)}

.scroll-cue{position:absolute;left:50%;bottom:26px;z-index:2;width:28px;height:44px;margin-left:-14px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--fg-faint)}
.scroll-cue span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:4px;background:var(--paper);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

@media (max-width:960px){
  .hero{padding-top:110px}
  .hero-grid{grid-template-columns:1fr}
  .hero-stage{padding:28px 0 40px}
  /* on a phone the chips sit in a column under the device instead of beside it */
  .device{height:min(70vh,600px);translate:0 0;margin-bottom:206px}
  .chip{left:50%;translate:-50% 0;transform-origin:center top}
  .chip-seal{top:calc(100% + 8px)}.chip-guests{top:calc(100% + 74px)}.chip-cam{top:calc(100% + 140px)}
  .links,.link-dot{display:none}
  .proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof li{flex-direction:column;justify-content:center;height:auto;min-height:64px;padding:10px 6px;border-radius:18px;white-space:normal;text-align:center;font-size:12.5px;line-height:1.2;gap:6px}
  .scroll-cue{display:none}
}

/* ── marquee ───────────────────────────────────────────────────────────── */
.bands{position:relative;z-index:3;overflow:hidden;padding:32px 0;margin:-32px 0}
.marquee{overflow:hidden;padding:30px 0;position:relative;z-index:2}
.ember-bg.marquee{transform:rotate(-1.6deg);margin:0 -2%;z-index:3}
.marquee-rev{transform:rotate(1.4deg);margin:-26px -2% 0;padding:22px 0;z-index:2}
.marquee-rev .marquee-track{animation-direction:reverse;animation-duration:46s}
.marquee-rev .marquee-row span{font-size:clamp(28px,4vw,56px)}
.marquee-rev .marquee-row svg{width:clamp(24px,3vw,42px);height:clamp(24px,3vw,42px);fill:var(--ink)}
#marquee{background:var(--ember)}
.marquee-track{display:flex;width:max-content;animation:marq 38s linear infinite;will-change:transform}
.marquee-row{display:flex;align-items:center;gap:36px;padding-right:36px}
.marquee-row span{font-family:var(--display);font-weight:900;font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.marquee-row svg{width:clamp(34px,4.4vw,64px);height:clamp(34px,4.4vw,64px);fill:var(--ink);flex:none;animation:spin 12s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── how it works ──────────────────────────────────────────────────────── */
.how{padding:140px 0 60px;position:relative;margin-top:-30px}
.how-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;margin-top:40px}
.how-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.how-phone-wrap{position:relative}
.how-halo{position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--ember-wash);transition:background-color .6s}
.how-phone{height:min(94vh,980px);width:auto;--pw:auto}
.how-phone .shell{opacity:0;transition:opacity .6s var(--ease)}
.how-phone .shell.is-on{opacity:1}
.how-dots{display:flex;gap:8px}
.how-dots i{width:8px;height:8px;border-radius:999px;background:var(--paper-3);transition:width .5s var(--ease),background-color .3s}
.how-dots i.is-on{width:28px;background:var(--mint-deep)}

/* QR lock-on: (235-22, 1205-22) → 499 x 497 px of 923 x 2000 */
.qr-lock{position:absolute;left:23.077%;top:59.15%;width:54.063%;height:24.85%;opacity:0;transform:scale(1.3);pointer-events:none}
.qr-lock i{position:absolute;width:17%;height:17%;border:0 solid var(--ember);border-width:0}
.qr-lock i:nth-child(1){left:0;top:0;border-left-width:5px;border-top-width:5px;border-top-left-radius:10px}
.qr-lock i:nth-child(2){right:0;top:0;border-right-width:5px;border-top-width:5px;border-top-right-radius:10px}
.qr-lock i:nth-child(3){left:0;bottom:0;border-left-width:5px;border-bottom-width:5px;border-bottom-left-radius:10px}
.qr-lock i:nth-child(4){right:0;bottom:0;border-right-width:5px;border-bottom-width:5px;border-bottom-right-radius:10px}
.qr-lock.is-on{animation:lock 1.1s var(--ease) forwards}
@keyframes lock{0%{opacity:0;transform:scale(1.35)}40%{opacity:1}100%{opacity:1;transform:scale(1)}}

/* developing tiles: YOU (88,1303) 369x505, MJ (475,1303) 365x505, radius 40 */
.dev-tile{position:absolute;top:65.15%;height:25.25%;overflow:hidden;opacity:0;pointer-events:none}
.dev-you{left:9.534%;width:39.978%;border-radius:10.84% / 7.92%}
.dev-mj{left:51.463%;width:39.545%;border-radius:10.96% / 7.92%}
.dev-tile img{width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.35) saturate(.4);transform:scale(1.15)}
.how-phone.show-dev .dev-tile{opacity:1;transition:opacity .4s}
.how-phone.show-dev .dev-tile img{filter:none;transform:scale(1);transition:filter 2.6s var(--ease),transform 2.6s var(--ease)}
.how-phone.show-dev .dev-mj img{transition-delay:.35s}

.join-burst{position:absolute;inset:0;pointer-events:none}
.join-burst img{position:absolute;left:50%;top:40%;width:13%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:3px solid var(--paper);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5);opacity:0;transform:translate(-50%,-50%) scale(.2)}

.how-steps{list-style:none;margin:0;padding:0}
.how-step{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;opacity:.22;transition:opacity .5s var(--ease)}
.how-step.is-on{opacity:1}
.step-tag{align-self:flex-start;padding:6px 14px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;letter-spacing:.02em}
.how-step h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,5vw,76px);line-height:.9;letter-spacing:-.02em;margin:20px 0 0}
.how-step p{font-size:clamp(17px,1.5vw,21px);color:var(--ink-soft);max-width:36ch;margin:20px 0 0}
/* Narrow windows: the phone takes the whole height and stays put, and each step's text
   rides over its top edge on a card — the QR code and the sealed tiles sit low on the
   screen, so they stay in view. */
@media (max-width:860px){
  .how-grid{display:grid;grid-template-columns:1fr;gap:0}
  .how-sticky,.how-steps{grid-area:1/1}
  .how-sticky{position:sticky;top:0;height:100vh;height:100svh;z-index:1;justify-content:flex-end;padding-bottom:10px}
  .how-phone{height:min(calc(100svh - 96px),calc((100vw - 32px) * 2.1668))}
  .how-halo{width:100%}
  .how-dots{display:none}
  .how-steps{position:relative;z-index:2}
  .how-step{min-height:100vh;min-height:100svh;justify-content:flex-start;padding-top:18px;opacity:1}
  .how-step>*{position:relative}
  .how-step{--card:rgba(244,242,239,.94)}
  .how-step .step-tag{margin-left:14px}
  .how-step h3{font-size:clamp(30px,8vw,40px);margin:0;padding:14px 18px 0;background:var(--card);border-radius:22px 22px 0 0;margin-top:10px}
  .how-step p{margin:0;padding:10px 18px 18px;background:var(--card);border-radius:0 0 22px 22px;box-shadow:0 18px 30px -18px rgba(11,18,14,.35);font-size:16px}
}

/* ── cameras ───────────────────────────────────────────────────────────── */
.cams{padding:140px 0 120px;overflow:hidden}
.cams-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
.cams-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:40px;margin-top:70px}
.cams-name{grid-column:1/-1;grid-row:1;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
.cams-name span{font-family:var(--display);font-weight:900;font-size:clamp(80px,17vw,260px);letter-spacing:-.04em;line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(152,191,183,.28)}
.cams-photo{grid-column:2;grid-row:1;position:relative;z-index:1;margin:0;width:min(420px,68vw);aspect-ratio:1290/1911;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-3);box-shadow:0 50px 80px -30px rgba(0,0,0,.8)}
.cams-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.cams-photo img.is-on{opacity:1}
.cams-photo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:18px 22px;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);color:var(--paper)}
.roller{grid-column:3;grid-row:1;justify-self:start;position:relative;z-index:1;width:74px;height:300px;border-radius:999px;cursor:ns-resize;touch-action:none;
  background:rgba(152,191,183,.22);box-shadow:inset 0 0 0 1.5px rgba(152,191,183,.45);padding:10px}
.roller-body{width:100%;height:100%;border-radius:999px;overflow:hidden;position:relative;
  background:linear-gradient(90deg,var(--mint-shade),var(--mint) 45%,var(--mint-shade))}
.roller-ridges{position:absolute;inset:-40px 0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 3px,rgba(255,255,255,.14) 3px 5px,transparent 5px 14px)}
.roller-body::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,14,.75),transparent 30%,transparent 70%,rgba(11,18,14,.75))}
.roller-hint{position:absolute;left:100%;top:50%;margin:-18px 0 0 14px;width:36px;height:36px;border-radius:50%;background:var(--ember);display:grid;place-items:center;animation:nudge 2.4s var(--ease) infinite}
.roller-hint svg{width:20px;height:20px;fill:var(--ink)}
@keyframes nudge{0%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(8px)}}
.roller:focus-visible{outline-offset:6px;border-radius:999px}
.cams-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:56px}
.cam-chip{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--ink-3);color:var(--fg-soft);cursor:pointer;
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;box-shadow:inset 0 0 0 1.5px rgba(244,242,239,.12);transition:background-color .25s,color .25s,transform .3s var(--ease)}
.cam-chip:hover{color:var(--paper);transform:translateY(-2px)}
.cam-chip[aria-pressed="true"]{background:var(--mint);color:var(--ink);box-shadow:none}
@media (max-width:860px){
  .cams-head{grid-template-columns:1fr;gap:0}
  .cams-stage{grid-template-columns:1fr auto;gap:18px;justify-items:center}
  .cams-photo{grid-column:1}.roller{grid-column:2;width:56px;height:220px}.roller-hint{display:none}
}

/* ── original too ──────────────────────────────────────────────────────── */
.orig{padding:140px 0}
.orig-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.save-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:36px}
.save-chip{padding:10px 16px;border-radius:14px;background:var(--ink);color:var(--ember);font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.save-chip.is-plain{color:var(--mint)}
.plus{font-weight:700;color:var(--ink-soft)}
.save-btn{display:inline-flex;align-items:center;gap:8px;margin-left:6px;padding:10px 18px;border-radius:14px;background:var(--ember);color:var(--ink);font-weight:700;font-size:15px}
.save-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.compare{position:relative;aspect-ratio:1290/1911;max-height:80vh;justify-self:center;width:100%;max-width:520px;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(11,18,14,.6);--pos:55%;user-select:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-top{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-label{position:absolute;top:18px;padding:8px 12px;border-radius:10px;background:rgba(11,18,14,.72);backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--paper)}
.compare-label.l{left:18px;color:var(--ember)}.compare-label.r{right:18px;color:var(--mint)}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--paper);pointer-events:none}
.compare-handle span{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--paper);display:grid;place-items:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.compare-handle svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:has(input:focus-visible) .compare-handle span{outline:3px solid var(--ember);outline-offset:3px}
@media (max-width:860px){.orig-grid{grid-template-columns:1fr;gap:40px}}

/* ── find me ───────────────────────────────────────────────────────────── */
.find{padding:140px 0}
.find-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
.find-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,2fr);gap:56px;align-items:center;margin-top:72px}
.find-selfie{display:flex;flex-direction:column;align-items:center;gap:26px}
.scan-ring{position:relative;width:min(280px,64vw);aspect-ratio:1}
.scan-ring svg{position:absolute;inset:0;width:100%;height:100%}
.scan-ring svg rect{fill:rgba(152,191,183,.28);transition:fill .2s}
.scan-ring svg rect.lit{fill:var(--ember)}
.scan-ring img{position:absolute;inset:17%;width:66%;height:66%;border-radius:50%;object-fit:cover}
.find-count{display:flex;align-items:baseline;gap:12px}
.find-count b{font-family:var(--display);font-weight:900;font-size:88px;line-height:.8;color:var(--ember);font-variant-numeric:tabular-nums}
.find-count span{font-size:18px;color:var(--fg-soft)}
.mosaic{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(110px,13vw,190px);gap:12px}
.tile{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--ink-3);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tile.t-tall{grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--ember);transition:box-shadow .4s var(--ease)}
.tile.is-dim{opacity:.22;transform:scale(.97)}
.tile.is-you::after{box-shadow:inset 0 0 0 4px var(--ember)}
.tile.is-you::before{content:"YOU";position:absolute;z-index:1;top:12px;right:12px;padding:5px 10px;border-radius:8px;background:var(--ember);color:var(--ink);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em}
.scan-beam{position:absolute;top:-4%;bottom:-4%;left:0;width:3px;background:var(--mint);box-shadow:0 0 24px 6px rgba(152,191,183,.6);opacity:0;pointer-events:none}
@media (max-width:860px){.find-head{grid-template-columns:1fr;gap:0}.find-grid{grid-template-columns:1fr}.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}}

/* ── clip ──────────────────────────────────────────────────────────────── */
.clip{padding:140px 0}
.clip-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.clip-copy .h2{font-size:clamp(44px,6.2vw,92px)}
.clip-cam{display:flex;flex-direction:column;align-items:center;gap:32px}
.clip-frame{position:relative;width:min(400px,80vw);aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
  box-shadow:0 40px 80px -30px rgba(11,18,14,.7)}
.clip-frame video,.clip-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.clip-frame video:not([src]){display:none}
.clip-frame.recording img{transform:scale(1.12);transition:transform 4s linear}
.clip-frame.has-video img{display:none}
.clip-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.rec{position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(11,18,14,.7);color:var(--paper);
  font-family:var(--mono);font-size:13px;opacity:0;transition:opacity .2s}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--ember);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.clip-frame.recording .rec{opacity:1}
.shutter{position:relative;width:104px;height:104px;border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.shutter svg{position:absolute;inset:0;transform:rotate(-90deg)}
.sh-track{fill:none;stroke:var(--ink);stroke-width:6}
.sh-prog{fill:none;stroke:var(--ember);stroke-width:6;stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:289.03}
.sh-core{position:absolute;inset:14px;border-radius:50%;background:var(--paper);transition:transform .25s var(--ease),border-radius .25s var(--ease),background-color .25s}
.shutter:active .sh-core,.shutter.is-down .sh-core{transform:scale(.86)}
.shutter.is-rec .sh-core{transform:scale(.5);border-radius:22%;background:var(--ink)}
@media (max-width:860px){.clip-grid{grid-template-columns:1fr;gap:40px}}

/* ── use cases ─────────────────────────────────────────────────────────── */
.uses{padding:140px 0 120px;overflow:hidden}
.uses-rail{display:flex;gap:20px;max-width:1320px;margin:56px auto 0;padding:0 var(--gutter) 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.uses-rail::-webkit-scrollbar{display:none}
.uses-rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.use{position:relative;flex:1 0 clamp(260px,28vw,380px);aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;scroll-snap-align:start;background:var(--ink-3);color:var(--paper)}
.use img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);pointer-events:none}
.use:hover img{transform:scale(1.06)}
.use>div{position:absolute;left:0;right:0;bottom:0;padding:26px;background:linear-gradient(0deg,rgba(11,18,14,.85),rgba(11,18,14,0))}
.use:nth-child(2n) h3{color:var(--mint)}
.use h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:38px;line-height:.9;letter-spacing:-.02em;margin:0}
.use p{margin:10px 0 0;font-size:15px;color:var(--fg-soft)}

/* ── film ──────────────────────────────────────────────────────────────── */
.film{padding:140px 0}
.film-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.film-grid .pill{margin-top:36px}
#soundIcon path:first-child{fill:currentColor}
#soundIcon .x{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.film-player{position:relative;width:min(380px,82vw);aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 0 0 10px var(--ink-3),0 50px 90px -30px rgba(0,0,0,.9)}
.film-player video{width:100%;height:100%;object-fit:cover}
.film-progress{position:absolute;left:18px;right:18px;bottom:16px;height:4px;border-radius:4px;background:rgba(244,242,239,.25);overflow:hidden}
.film-progress i{display:block;height:100%;width:0;background:var(--mint)}
@media (max-width:860px){.film-grid{grid-template-columns:1fr;justify-items:start}.film-player{justify-self:center}}

/* ── pricing ───────────────────────────────────────────────────────────── */
.price{padding:140px 0}
.price-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.ticks{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:12px;font-weight:500}
.ticks li{display:flex;gap:12px;align-items:center}
.ticks li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2398BFB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.calc{background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);box-shadow:0 40px 80px -40px rgba(11,18,14,.6)}
.calc-label{font-weight:500;color:var(--fg-soft)}
.calc-guests{display:flex;align-items:baseline;gap:10px;margin:10px 0 18px}
.calc-guests b{font-family:var(--display);font-weight:900;font-size:clamp(64px,7vw,96px);line-height:.85;font-variant-numeric:tabular-nums}
.calc-guests span{color:var(--fg-soft);font-size:18px}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
.calc input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--mint) var(--fill,0%),var(--ink-3) var(--fill,0%))}
.calc input[type=range]::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--mint) var(--fill,0%),var(--ink-3) var(--fill,0%))}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-11px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 6px rgba(152,191,183,.4)}
.calc input[type=range]::-moz-range-thumb{width:32px;height:32px;border:0;border-radius:50%;background:var(--paper);box-shadow:0 0 0 6px rgba(152,191,183,.4)}
.calc-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--fg-faint);margin:2px 4px 26px}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;border-top:1px solid rgba(244,242,239,.12)}
.calc-row span{color:var(--fg-soft)}
.calc-price{font-family:var(--display);font-weight:900;font-size:48px;line-height:1;color:var(--ember);font-variant-numeric:tabular-nums}
.calc-row.sub b{font-size:20px}
.calc .pill{margin-top:14px}
@media (max-width:860px){.price-grid{grid-template-columns:1fr;gap:40px}}

/* ── final ─────────────────────────────────────────────────────────────── */
.final{padding:150px 0 130px;overflow:hidden}
.final-inner{display:flex;flex-direction:column;gap:56px}
.final-title{font-size:clamp(52px,14vw,188px);line-height:.84}
.final-title .line>span{white-space:nowrap}
.final-dot{display:inline-block;width:.34em;height:.34em;margin-left:.06em;fill:var(--ink);vertical-align:baseline;transform-origin:50% 50%}
.final-cta{display:flex;flex-wrap:wrap;align-items:center;gap:28px;justify-content:space-between}
.qr-card{display:flex;align-items:center;gap:18px;padding:14px 22px 14px 14px;border-radius:var(--r-md);background:var(--ink);color:var(--paper);font-weight:500}
.qr-card canvas{width:96px;height:96px;border-radius:12px;image-rendering:pixelated}
@media (max-width:860px){.qr-card{display:none}}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{padding:40px 0}
.foot-inner{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.foot nav{display:flex;gap:22px;margin-left:auto}
.foot nav a{color:var(--fg-soft);text-decoration:none;font-size:15px}
.foot nav a:hover{color:var(--mint)}
.foot .mono{color:var(--fg-faint)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}