/* SEENCAM landing, the calm edition (2026-10-24).
   The same page, sections and scroll story, with the noise taken out: one dark ground,
   a light serif for every headline with one word in italic, small spaced mono labels,
   far more air, and the nav as a floating pill at the bottom of the screen. */

:root{
  --ink:#0A0C0B; --ink-2:#121514; --ink-3:#1B1F1D;
  --display:"Instrument Serif",Georgia,serif;
  --fg-soft:rgba(244,242,239,.66); --fg-faint:rgba(244,242,239,.40);
}

/* one ground everywhere */
.paper,.ember-bg,.mint-bg{background:var(--ink);color:var(--paper)}
.paper .lede,.ember-bg .lede,.mint-bg .lede{color:var(--fg-soft)}

/* headlines: light serif, sentence case, one word in italic */
.display{font-family:var(--display);font-weight:400;text-transform:none;letter-spacing:-.015em;line-height:.98}
.display em{font-style:italic;color:var(--paper)}
.h2{font-size:clamp(44px,6vw,92px);max-width:15ch}
.lede{font-size:clamp(16px,1.25vw,19px);line-height:1.6;max-width:44ch}

/* a small spaced label over each headline */
.kicker{display:flex;align-items:center;gap:12px;margin:0 0 26px;font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint)}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}

/* more air between sections */
.how,.cams,.orig,.find,.clip,.uses,.price,.reels{padding-top:200px}
.how{margin-top:0}
.final{padding:220px 0 200px}

/* the primary button is quiet and white; ember is kept for the small accents */
.pill-ember{background:var(--paper);color:var(--ink)}
.pill-ember:hover{background:#fff;box-shadow:0 14px 34px -14px rgba(244,242,239,.45)}
.pill-ghost{box-shadow:inset 0 0 0 1px rgba(244,242,239,.28)}
.pill-ghost:hover{background:rgba(244,242,239,.06);color:var(--paper)}
.pill-ink{background:var(--paper);color:var(--ink)}

/* the nav: a small floating pill at the bottom, never hidden */
.nav{inset:auto auto 20px 50%;transform:translateX(-50%);height:56px;gap:22px;padding:0 8px 0 22px;
  background:rgba(22,25,24,.78);box-shadow:inset 0 0 0 1px rgba(244,242,239,.09),0 20px 50px -20px rgba(0,0,0,.8)}
.nav.is-hidden{transform:translateX(-50%)}
.nav .wordmark{font-size:16px;letter-spacing:.12em;font-family:var(--body);font-weight:600}
.nav-links{margin-left:0;gap:0}
.nav-links a{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft);padding:12px 12px}
.nav-links a:hover{color:var(--paper);background:transparent}
.nav .pill-ember{background:var(--ember);color:#160A04;min-height:42px;padding:0 18px}
@media (max-width:860px){.nav{gap:14px}.nav .pill{margin-left:0}}

/* the old highlight marker reads as italic now */
.hl{background:none;color:inherit;padding:0;font-style:italic}
.mint{color:inherit;font-style:italic}

/* sections that were drawn for a light ground */
.how-halo{opacity:.35}
.save-chip.is-plain{color:var(--paper);box-shadow:inset 0 0 0 1px rgba(244,242,239,.3)}
.calc{background:var(--ink-2);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(244,242,239,.08)}
.calc-row.sub,.calc-scale{color:var(--fg-faint)}
.use div p{color:var(--fg-soft)}
.qr-card{background:var(--paper);color:var(--ink)}

/* ── reels: pinned, three styles, played by scroll ─────────────────────── */
.reels{position:relative;height:340vh}
.reels-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  max-width:1320px;margin:0 auto;padding:0 var(--gutter);gap:40px}
.reels-copy{position:relative;min-height:340px}
.reels-step{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.reels-step.is-on{opacity:1;transform:none;pointer-events:auto}
.reels-step .h2{max-width:11ch}
.reels-names{display:flex;gap:10px;margin-top:40px;position:absolute;left:0;bottom:-120px}
.reels-names span{font:500 11px/1 var(--mono);letter-spacing:.18em;padding:11px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(244,242,239,.16);color:var(--fg-faint);transition:color .4s,box-shadow .4s}
.reels-names span.is-on{color:var(--paper);box-shadow:inset 0 0 0 1px var(--ember)}
.reels-phone-wrap{display:flex;justify-content:center;perspective:1600px}
.reels-phone{position:relative;width:min(330px,62vw);aspect-ratio:9/19.5;border-radius:54px;background:#050606;padding:11px;
  box-shadow:0 0 0 2px #2A2D2B,0 0 0 3.5px #8E928F,0 60px 120px -30px rgba(0,0,0,.9);will-change:transform;transform-style:preserve-3d}
.reels-phone::after{content:"";position:absolute;top:22px;left:50%;width:31%;height:30px;margin-left:-15.5%;border-radius:999px;background:#000;z-index:3}
.reels-screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:#000}
.reels-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.reels-screen video.is-on{opacity:1}
.reels-glow{position:absolute;width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(closest-side,rgba(236,240,242,.14),rgba(236,240,242,0));filter:blur(30px);pointer-events:none}
@media (max-width:860px){
  .reels{height:300vh}
  .reels-stage{grid-template-columns:1fr;align-content:center;gap:28px;padding-top:40px}
  .reels-copy{min-height:210px;order:2}
  .reels-step .h2{font-size:clamp(36px,10vw,52px)}
  .reels-step .lede{font-size:15px;margin-top:12px}
  .reels-names{display:none}
  .reels-phone{width:min(240px,56vw);border-radius:40px;padding:8px}
  .reels-screen{border-radius:33px}
}
@media (prefers-reduced-motion:reduce){.reels{height:auto}.reels-stage{position:relative;height:auto;padding:120px var(--gutter)}}

.nav-links a,.nav .wordmark{white-space:nowrap}

/* the rest of the heavy display type, in the serif */
.how-step h3,.use h3{font-family:var(--display);font-weight:400;text-transform:none;letter-spacing:-.01em;line-height:1}
.how-step h3{font-size:clamp(38px,4.2vw,64px)}
.use h3{font-size:40px}
.cams-name span{font-family:var(--display);font-weight:400;font-style:italic;letter-spacing:-.02em}
.find-count b,.calc-guests b,.calc-price{font-family:var(--display);font-weight:400}
.step-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.how-halo{display:none}
.how-step p{color:var(--fg-soft)}
@media (max-width:860px){.how-step{--card:rgba(18,21,20,.92)}.how-step p,.how-step h3{color:var(--paper)}}
@media (max-width:860px){.reels-stage{padding-bottom:110px;gap:18px}.reels-phone{width:min(220px,52vw)}}
@media (max-width:860px){.dx-caps{bottom:92px}}

/* ── fewer words (2026-10-24): headlines only. People don't read the small print on a
   landing page, and it made every screen busy. The copy stays in the markup for search
   and screen readers' context; what shows is the one line that matters. */
.dx-intro .lede,.dx-cap p,.dx-rail,
.kicker,.how-step p,.step-tag,.how-dots,
.cams-head .lede,.cams-photo figcaption,.cams-chips,
.orig-copy .lede,.save-row,
.find-head .lede,
.reels-step .lede,.reels-names,
.clip-copy .lede,
.use div p,
.price-grid .lede,.ticks{display:none !important}
.reels-step .kicker{display:flex !important}          /* the reel's name is the point there */
.dx-cap .dx-end-cta{display:inline-flex}
@media (max-width:860px){.how-step h3{border-radius:22px;padding-bottom:16px}}