/* ============================================================================
   FILM FOUNDRY — hero: the app on a pro display
   A premium monitor floats on a dark stage. The screen runs the real edit:
   scroll → cursor picks a look → photo snaps to film → halation blooms.
   ============================================================================ */
:root {
  --stage: 8 8 10; --window: 13 13 15; --card: 21 21 25; --hover: 32 32 38; --hairline: 44 44 52;
  --ink-strong: 245 245 248; --ink: 214 215 222; --ink-muted: 150 151 162; --ink-low: 116 117 128;
  --accent: 255 151 24; --primary: 240 241 245; --primary-ink: 15 15 18;
  --annc-h: 38px;
  --gutter: clamp(20px, 5vw, 80px); --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif; --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: rgb(var(--stage)); color: rgb(var(--ink)); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--ink-muted)); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0.005em; }
.accent { color: rgb(var(--accent)); }

/* dark studio stage */
.stage { position: fixed; inset: 0; z-index: 0; background:
  radial-gradient(130% 95% at 50% 30%, #17171c 0%, #101013 42%, #0a0a0c 70%, #060608 100%);
  filter: brightness(calc(1 + var(--glow, 0) * 0.12)); }
.stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 44%, transparent 55%, rgb(0 0 0 / 0.55) 100%); }

/* announcement bar — the launch deal until its deadline, then the AUG20 rent-plan
   code (content swapped by the countdown script in js/app.js, which also stamps
   body.deal-ended). The bar survives the flip; only dismissing it (per-deal id)
   hides it and restores the nav to the top. */
.annc { position: fixed; top: 0; left: 0; right: 0; z-index: 41; height: var(--annc-h);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding-inline: var(--gutter); font-size: 0.6rem; letter-spacing: 0.14em;
  background: rgb(var(--window)); border-bottom: 1px solid rgb(var(--hairline) / 0.7);
  color: rgb(var(--ink-muted)); white-space: nowrap; transition: color 0.2s; }
.annc b { color: rgb(var(--accent)); font-weight: 500; }
/* the struck founding price — muted, with an accent strike so "50% off" reads at a glance */
.annc__was { color: rgb(var(--ink-low)); text-decoration: line-through;
  text-decoration-color: rgb(var(--accent) / 0.7); }
.annc:hover { color: rgb(var(--ink-strong)); }
.annc__arr { color: rgb(var(--accent)); }
/* on narrow phones drop the framing so the core deal (50% off · $498 $249 until July 31) fits one line */
@media (max-width: 520px) { .annc__pre, .annc__sep, .annc__long { display: none; } }
.annc__x { position: fixed; top: 0; right: max(8px, calc(var(--gutter) - 12px)); z-index: 42; height: var(--annc-h); width: 38px;
  display: flex; align-items: center; justify-content: center; border: 0; background: transparent;
  color: rgb(var(--ink-low)); cursor: pointer; transition: color 0.2s; }
.annc__x:hover { color: rgb(var(--ink-strong)); }
.annc__x svg { width: 10px; height: 10px; }
html.annc-off body { --annc-h: 0px; }
html.annc-off .annc, html.annc-off .annc__x { display: none; }
/* two-state copy: [data-deal-pre] shows until the launch deadline, [data-deal-post] after */
body:not(.deal-ended) [data-deal-post] { display: none; }
body.deal-ended [data-deal-pre] { display: none; }

/* nav */
.nav { position: fixed; top: var(--annc-h); left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 64px; padding-inline: var(--gutter); transition: background 0.4s ease; }
.nav.stuck { background: rgb(var(--stage) / 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__brand { display: flex; align-items: center; gap: 11px; }
.nav__mark { width: 23px; height: 23px; border-radius: 6px; }
.nav__word { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--ink-strong)); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__link { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--ink-muted)); transition: color 0.2s; }
.nav__link:hover { color: rgb(var(--ink-strong)); }
/* mobile menu toggle — a hamburger that crosses into an X when open.
   The bars need explicit coordinates: an absolutely-positioned pseudo with auto
   top/left lands at its inline "static position" and the three lines stagger. */
.nav__mobile { display: flex; align-items: center; gap: 6px; }
.nav__mobile .nav__dlmini { display: none; }
.nav__toggle { display: none; position: relative; z-index: 2; width: 42px; height: 42px; margin-right: -9px; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.nav__bars { position: relative; display: block; width: 22px; height: 1.6px; border-radius: 2px; background: rgb(var(--ink-strong)); transition: background 0.18s ease; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 1.6px; border-radius: 2px; background: rgb(var(--ink-strong)); transition: transform 0.28s var(--ease); }
.nav__bars::before { transform: translateY(-6.5px); }
.nav__bars::after { transform: translateY(6.5px); }
.nav--open .nav__bars { background: transparent; }
.nav--open .nav__bars::before { transform: translateY(0) rotate(45deg); }
.nav--open .nav__bars::after { transform: translateY(0) rotate(-45deg); }
@media (max-width: 760px) {
  .nav__toggle { display: inline-flex; }
  .nav__mobile .nav__dlmini { display: inline-flex; }
  .nav__links {
    position: fixed; top: calc(var(--annc-h) + 64px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--gutter) 22px;
    background: rgb(var(--stage) / 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgb(var(--hairline) / 0.9);
    transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.26s ease, transform 0.26s var(--ease), visibility 0s linear 0.26s;
  }
  .nav--open .nav__links { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.26s ease, transform 0.26s var(--ease); }
  .nav__links .nav__link { display: block; padding: 15px 2px; font-size: 0.82rem; border-bottom: 1px solid rgb(var(--hairline) / 0.55); }
  .nav__links .btn { margin-top: 16px; width: 100%; justify-content: center; padding: 14px 22px; }
}

.btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 100px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 0.25s var(--ease), background 0.25s ease; }
.btn--primary { background: rgb(var(--primary)); color: rgb(var(--primary-ink)); font-weight: 500; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.55); }
.btn--ghost { background: rgb(255 255 255 / 0.07); color: rgb(var(--ink-strong)); border: 1px solid rgb(255 255 255 / 0.14); backdrop-filter: blur(6px); }
.btn__dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--accent)); }
.nav .btn { padding: 9px 16px; }

/* ---- HERO ---------------------------------------------------------------- */
main { position: relative; z-index: 1; }
.hero { position: relative; height: 320vh; }

/* ---- PREMIUM DEVICE HERO (the real software on a pro display) ------------- */
.hero--device { height: auto; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: clamp(92px, 13vh, 168px); overflow: hidden; padding: clamp(72px, 10vh, 120px) 0 0; }
.device-glow { position: absolute; left: 50%; top: 60%; width: 72%; height: 62%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 206 156 / 0.20), rgb(255 206 156 / 0.05) 55%, transparent 74%); filter: blur(46px);
  animation: heroGlowBreath 8s ease-in-out infinite; }
/* the screen-glow gently breathes — transform-only (composited, no repaint) and it
   starts AT the resting scale, so there's no flash/dip when the animation kicks in. */
@keyframes heroGlowBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.07); }
}
.hero--device .hero__head { position: relative; z-index: 3; text-align: center; padding-inline: var(--gutter); max-width: 880px; }
.hero--device .kicker { color: rgb(var(--ink-muted)); margin-bottom: 12px; }
.hero--device .hero__title { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; font-size: clamp(2rem, 5vw, 3.7rem); color: rgb(var(--ink-strong)); }
.hero--device .hero__lead { max-width: 48ch; margin: 24px auto 0; color: rgb(var(--ink-muted)); font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.62; }
.hero--device .hero__actions { margin-top: clamp(32px, 4.5vh, 48px); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__plat { margin: clamp(16px, 2.4vh, 26px) 0 0; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--ink-low)); }
.hero__plat .hero__os { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.42em; margin-right: 0.45em; }
.hero__soon { color: rgb(var(--ink-muted)); }
.hero__compat { margin: 9px 0 0; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--ink-low)); }
.hero__compat-arrow { color: rgb(var(--accent)); margin-right: 4px; }

.device { position: relative; z-index: 2; }
.device__rise { display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; animation: deviceIn 1.15s cubic-bezier(.2, .72, .12, 1) both; }
@keyframes deviceIn { from { opacity: 0; transform: translateY(46px) scale(0.984); } to { opacity: 1; transform: none; } }
.device__bezel { position: relative; padding: clamp(7px, 0.7vw, 11px); border-radius: clamp(15px, 1.5vw, 24px);
  background: linear-gradient(156deg, #36363d 0%, #1c1c20 38%, #0c0c0f 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.10) inset, 0 0 0 1px #000,
    0 54px 100px -34px rgb(0 0 0 / 0.88), 0 20px 56px -26px rgb(0 0 0 / 0.72),
    0 0 150px 8px rgb(255 202 150 / 0.14); }
.device__bezel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05); }
.device__screen { position: relative; width: min(1060px, 90vw, 104vh); aspect-ratio: 16 / 9; border-radius: clamp(8px, 0.8vw, 13px); overflow: hidden; background: #0a0a0c; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.9), inset 0 0 40px rgb(0 0 0 / 0.45); }
.device__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.device__glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(122deg, rgb(255 255 255 / 0.08) 0%, transparent 15%, transparent 85%, rgb(255 255 255 / 0.03) 100%); }
/* ===== DEVICE STAND — aluminum neck + foot plate ============================
   Drawn as an inline SVG (see index.html). CSS box-shapes read as a cheap fan
   base; the SVG gives the right silhouette — a tapered metal neck and a foot
   with real thickness (lit top surface, darker front lip) + a soft contact shadow. */
.device__stand { display: flex; justify-content: center; margin-top: clamp(-5px, -0.5vw, -2px); line-height: 0; }
.device__svg { width: clamp(320px, 40vw, 490px); height: auto; display: block; }
@media (max-width: 760px) { .device__svg { width: clamp(165px, 46vw, 300px); } }
.hero--device .hero__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; color: rgb(255 255 255 / 0.5); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.56rem; }
@media (prefers-reduced-motion: reduce) { .device__rise, .device-glow { animation: none; } }
.hero__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.hero__head { position: absolute; top: clamp(58px, 9vh, 86px); left: 0; right: 0; text-align: center; padding-inline: var(--gutter); z-index: 6; will-change: opacity, transform; }
.kicker { display: block; margin-bottom: clamp(10px, 1.5vh, 16px); color: rgb(var(--ink-muted)); }
.hero__title { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 0.98; font-size: clamp(1.9rem, 4.6vw, 3.5rem); color: rgb(var(--ink-strong)); }

/* the rig that holds the monitor (pushed below the headline; scaled on scroll) */
.rig { position: relative; z-index: 4; margin-top: clamp(178px, 28.5vh, 230px); display: flex; flex-direction: column; align-items: center; will-change: transform; transform-origin: 50% 50%; }

/* soft ambient bias-light glow behind the screen */
.ambient { position: absolute; z-index: -1; left: 50%; top: 42%; width: 78%; height: 70%; transform: translate(-50%, -50%) scale(1.15); background: url("../assets/film-developed-hero.jpg") center/cover; filter: blur(74px) saturate(calc(1.15 + var(--glow, 0) * 0.8)) brightness(calc(0.62 + var(--glow, 0) * 0.55)); opacity: calc(0.5 + var(--glow, 0) * 0.38); border-radius: 50%; pointer-events: none; }

.monitor { display: flex; flex-direction: column; align-items: center; }
.monitor__frame { position: relative; padding: 11px; border-radius: 22px;
  background: linear-gradient(158deg, #303036 0%, #1a1a1e 38%, #0e0e11 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 0 0 1px #000,
    0 60px 120px -34px rgb(0 0 0 / 0.85), 0 24px 60px -28px rgb(0 0 0 / 0.7),
    0 0 120px 12px rgb(255 208 158 / calc(var(--glow, 0) * 0.42)); }   /* the screen lights the room while developing */
.monitor__frame::before { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(158deg, rgb(255 255 255 / 0.10), transparent 22%); }
.monitor__screen { position: relative; width: min(740px, 50vw, 56vh); aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: #0a0a0c; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.9), inset 0 0 30px rgb(0 0 0 / 0.5); }
.ui { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; will-change: opacity; }
/* uiFilm2 is the static chrome; raw + film are clipped to the image viewport so
   ONLY the photo develops — the panels/grid never blink. inset = viewport rect. */
/* the photo is the product — kept pristine; the only change to it is the actual develop (raw->film) */
#uiFilm2 { opacity: 1; z-index: 1; }
#uiRaw  { opacity: 1; z-index: 2; clip-path: inset(8.06% 21.25% 6.67% 14.84%); }
#uiFilm { opacity: 0; z-index: 3; clip-path: inset(8.06% 21.25% 6.67% 14.84%); }
.screen__glass { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(122deg, rgb(255 255 255 / 0.06) 0%, transparent 18%, transparent 82%, rgb(255 255 255 / 0.03) 100%); }
/* film grain veil, scoped to the viewport, resolves in WITH halation */
.vgrain { position: absolute; left: 14.84%; top: 8.06%; width: 63.91%; height: 85.27%; z-index: 5; pointer-events: none; mix-blend-mode: overlay; opacity: 0; will-change: opacity; }
/* darkroom vignette that breathes closed on the viewport, opens at settle */
.screenvig { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 11px;
  box-shadow: inset 0 0 60px 8px rgb(0 0 0 / var(--vig, 0));
  background: radial-gradient(120% 120% at 78% 64%, transparent 52%, rgb(0 0 0 / calc(var(--vig, 0) * 0.5)) 100%); }

/* stand */
.monitor__neck { display: block; width: 130px; height: 58px; margin: -1px auto 0;
  background: linear-gradient(180deg, #232327, #131316); clip-path: polygon(28% 0, 72% 0, 88% 100%, 12% 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.03); }
.monitor__base { display: block; width: 250px; height: 15px; margin: -2px auto 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #202024, #0c0c0e 75%); box-shadow: 0 20px 34px -14px rgb(0 0 0 / 0.85); }

/* cursor + viewport snap flash (on the screen).
   The image viewport occupies ~x[14.8%,79.5%] y[7.8%,94%] of the captured UI. */
.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 9; opacity: 0; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.55)); will-change: transform, opacity; pointer-events: none; }
/* selection ring over the Vesper 400 cell in the captured grid (measured) */
.ringsel { position: absolute; left: 86.05%; top: 65.9%; width: 6.09%; height: 7.99%; z-index: 7; border: 2px solid rgb(var(--accent)); border-radius: 6px; box-shadow: 0 0 16px rgb(var(--accent) / 0.6); opacity: 0; transition: opacity 0.12s var(--ease); pointer-events: none; }
.ringsel.show { opacity: 1; }

/* "engine is working" status pill — your "Applying the LUT…" (lives top-left of the viewport) */
.devpill { position: absolute; left: 16.4%; top: 11%; z-index: 9; display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 8px; border-radius: 100px; background: rgb(9 9 11 / 0.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 6px 22px -6px rgb(0 0 0 / 0.65), 0 0 22px -4px rgb(var(--accent) / 0.5); opacity: 0; transition: opacity 0.3s var(--ease), box-shadow 0.3s var(--ease); pointer-events: none; will-change: opacity; }
.devpill__txt { font-family: var(--sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.01em; color: rgb(var(--ink-strong)); white-space: nowrap; }
.devpill__spin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgb(var(--accent) / 0.28); border-top-color: rgb(var(--accent)); animation: devspin 0.7s linear infinite; box-shadow: 0 0 8px rgb(var(--accent) / 0.55); }
.devpill__check { flex: none; width: 13px; height: 13px; display: none; color: rgb(var(--accent)); filter: drop-shadow(0 0 5px rgb(var(--accent) / 0.6)); }
@keyframes devspin { to { transform: rotate(360deg); } }
.devpill.done .devpill__spin { display: none; }
.devpill.done .devpill__check { display: block; }
.devpill.done { box-shadow: 0 0 0 1px rgb(var(--accent) / 0.42), 0 6px 22px -6px rgb(0 0 0 / 0.65), 0 0 26px -2px rgb(var(--accent) / 0.55); }

.hero__foot { position: absolute; left: 0; right: 0; bottom: clamp(26px, 5vh, 52px); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.hero__hint { font-size: 0.64rem; color: rgb(var(--ink-low)); }

/* ---- the develop viewport inside the real Develop UI --------------------- */
/* viewport rect, measured on the captured Develop chrome */
.vp { position: absolute; left: 14.84%; top: 8.06%; width: 63.91%; height: 85.27%; z-index: 2; overflow: hidden; }
.vp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* vpFinal = the developed film2 (always there); vpRaw = a flat 'undeveloped' copy on top,
   developed away from the top by --dev (0 = all flat, 1 = fully developed film) */
.vp__raw { z-index: 1; filter: saturate(0.22) contrast(0.8) brightness(1.08) blur(0.6px);
  clip-path: inset(calc(var(--dev, 0) * 100%) 0 0 0); will-change: clip-path; }
/* the develop head: a soft glowing scan edge that rides the develop boundary */
.vp__scan { position: absolute; left: 0; right: 0; top: calc(var(--dev, 0) * 100%); height: 10%; z-index: 2;
  transform: translateY(-86%); pointer-events: none; mix-blend-mode: screen; opacity: var(--scan, 0);
  background: linear-gradient(to bottom, rgb(255 226 178 / 0) 0%, rgb(255 232 196 / 0.5) 72%, rgb(255 244 224 / 0.95) 100%); }

/* the engine's read of the exposure, on the real Exposure value (measured x ~96% y ~14.4%) */
.exov__read { position: absolute; right: 1.4%; top: 14.4%; z-index: 5; padding: 1px 6px; border-radius: 3px; background: #16161b; font-size: 0.58rem; letter-spacing: 0.02em; color: rgb(var(--accent)); pointer-events: none; transition: color 0.25s var(--ease); }

/* read → sample → applied cue, lower-left of the viewport */
.cue { position: absolute; left: 16.6%; top: 84%; z-index: 6; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 100px; background: rgb(9 9 11 / 0.72); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.09), 0 0 20px -4px rgb(var(--accent) / 0.45);
  font-size: 0.6rem; letter-spacing: 0.01em; color: rgb(var(--ink-strong)); white-space: nowrap; opacity: 0; will-change: opacity; pointer-events: none; }
.cue::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 0 8px rgb(var(--accent) / 0.8); }

/* ---- scroll-scrub develop video (two framings) -------------------------- */
.scrub { display: block; background: #0a0a0c; }

/* A) FULL-BLEED cinematic (default, and body.frame-bleed) */
.cine { display: none; }
body:not(.frame-monitor) .monitor { display: none; }
body:not(.frame-monitor) .rig { position: absolute; inset: 0; margin: 0 !important; transform: none !important; }
body:not(.frame-monitor) .cine { display: block; position: absolute; inset: 0; z-index: 2; }
body:not(.frame-monitor) .cine .scrub { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
body:not(.frame-monitor) .ambient { left: 50%; top: 50%; width: 94%; height: 90%; transform: translate(-50%, -50%) scale(1.08);
  border-radius: 34%; filter: blur(92px) saturate(calc(1.1 + var(--glow, 0) * 0.7)) brightness(calc(0.46 + var(--glow, 0) * 0.5)); opacity: calc(0.42 + var(--glow, 0) * 0.42); }
body:not(.frame-monitor) .hero__title { text-shadow: 0 2px 40px rgb(0 0 0 / 0.55); }
.cine__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgb(6 6 8 / 0.62) 0%, rgb(6 6 8 / 0) 24%, rgb(6 6 8 / 0) 62%, rgb(6 6 8 / 0.74) 100%); }

/* B) MONITOR framing (body.frame-monitor) — the develop video plays inside the real Develop viewport */
body.frame-monitor .cine { display: none; }
body.frame-monitor .monitor { display: flex; }
.vp .scrub { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* real app components floating over the full-bleed develop (bleed only) */
.hud { display: none; }
body:not(.frame-monitor) .hud { display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hud__tag { position: absolute; left: clamp(20px, 4vw, 60px); top: clamp(84px, 13vh, 128px); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 100px; background: rgb(9 9 11 / 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--ink-strong)); }
.hud__dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 0 8px rgb(var(--accent)); }
.hud__panel { position: absolute; right: clamp(14px, 2.2vw, 44px); top: 50%; transform: translateY(-50%); height: min(80vh, 760px); }
.hud__panel img { height: 100%; width: auto; display: block; border-radius: 13px; opacity: 0.97;
  box-shadow: -22px 0 54px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.06); }
.hud__ev { position: absolute; right: 4.5%; top: 12.3%; padding: 1px 6px; border-radius: 3px; background: #16161b; font-size: 0.6rem; letter-spacing: 0.02em; color: rgb(var(--accent)); }
body:not(.frame-monitor) #cueBleed { position: absolute; left: clamp(20px, 4vw, 60px); bottom: clamp(98px, 17vh, 160px); top: auto; }

/* ---- the develop stage (exposure response) ------------------------------ */
.dev { position: relative; z-index: 3; }
/* monitor hero: head pinned top, monitor centered in the sticky, foot pinned bottom */
.hero__head { position: absolute; top: clamp(42px, 6vh, 66px); }
.hero__foot { position: absolute; bottom: clamp(18px, 3.5vh, 38px); }
.rig { margin-top: 0; }
.dev__frame { position: relative; height: min(46vh, 460px); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0a0a0c; box-shadow: 0 50px 120px -42px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.07); }
.dev__photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#glfallback { background: #0a0a0c center/cover no-repeat; background-image: url("../assets/raw-photo-hero.jpg"); opacity: 0; }
#glfallback.show { opacity: 1; }
.dev__chip { position: absolute; left: 15px; top: 14px; z-index: 4; padding: 6px 12px; border-radius: 100px; background: rgb(9 9 11 / 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1); font-size: 0.58rem; color: rgb(var(--ink-strong)); }
.curve { position: absolute; right: 14px; top: 14px; z-index: 4; margin: 0; padding: 9px 11px 6px; border-radius: 10px; background: rgb(9 9 11 / 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
.curve canvas { display: block; width: 126px; height: 90px; }
.curve figcaption { margin-top: 4px; font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ink-low)); text-align: center; }
.expo { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 4; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 11px 15px; border-radius: 10px; background: rgb(9 9 11 / 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
.expo__lbl { font-size: 0.56rem; color: rgb(var(--ink-muted)); }
.expo__track { position: relative; height: 4px; border-radius: 2px; background: rgb(var(--hover)); }
.expo__track::after { content: ""; position: absolute; left: 50%; top: -4px; width: 1px; height: 12px; background: rgb(255 255 255 / 0.22); }
.expo__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 2px; background: rgb(var(--accent)); }
.expo__thumb { position: absolute; top: 50%; left: 0%; width: 13px; height: 13px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 5px rgb(0 0 0 / 0.55); }
.expo__val { font-size: 0.58rem; color: rgb(var(--accent)); min-width: 66px; text-align: right; font-variant-numeric: tabular-nums; }
.hero__foot { padding-inline: var(--gutter); }
.hero__pitch { margin: 0; max-width: 58ch; text-align: center; font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.5; color: rgb(var(--ink-muted)); }
.hero__pitch em { font-style: normal; color: rgb(var(--ink-strong)); }
.hero__pitch .accent { color: rgb(var(--accent)); }
@media (max-width: 900px) { .dev__frame { height: auto; width: 88vw; } .curve { display: none; } }

/* ---- lede ---------------------------------------------------------------- */
.lede { position: relative; z-index: 1; padding: clamp(124px, 21vh, 248px) var(--gutter) clamp(100px, 15vh, 184px); background: linear-gradient(180deg, rgb(6 6 8 / 0) 0%, rgb(6 6 8 / 0.9) 22%, rgb(var(--stage)) 52%); }
.lede__inner { max-width: 1080px; margin: 0 auto; }
.lede__title { margin: 16px 0 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(1.9rem, 4.4vw, 3.9rem); color: rgb(var(--ink-strong)); }
.lede__body { margin: clamp(22px, 4vh, 36px) 0 0; max-width: 62ch; font-size: clamp(1.02rem, 1.35vw, 1.24rem); color: rgb(var(--ink-muted)); }
[data-beat] { opacity: 0; }
.lede.in [data-beat] { opacity: 1; }
.lede__title .wd { display: inline-block; opacity: 0; transform: translateY(0.6em); }
.lede__title .wd.in { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.55s var(--ease); }

/* shared */
.section-head { max-width: 1080px; margin: 0 auto clamp(54px, 8.5vh, 108px); }
.section-title { margin: 14px 0 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(1.8rem, 4vw, 3.5rem); color: rgb(var(--ink-strong)); }
.tscroll .tfx { display: inline-block; will-change: transform, filter, opacity; }
.section-sub { margin: 18px 0 0; max-width: 56ch; color: rgb(var(--ink-muted)); font-size: clamp(1rem, 1.2vw, 1.15rem); }
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---- engine features ----------------------------------------------------- */
.features { position: relative; z-index: 1; padding: clamp(100px, 15vh, 196px) var(--gutter); }
.feature { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.22fr; gap: clamp(28px, 5vw, 78px); align-items: center; padding: clamp(56px, 9vh, 124px) 0; }
.feature--rev .feature__copy { order: 2; }
.feature__no { display: block; color: rgb(var(--accent)); margin-bottom: 15px; }
.feature__title { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(1.5rem, 2.5vw, 2.4rem); color: rgb(var(--ink-strong)); }
.feature__body { margin: 16px 0 0; color: rgb(var(--ink-muted)); font-size: clamp(1rem, 1.15vw, 1.12rem); max-width: 44ch; }
.shot { margin: 0; border-radius: 14px; overflow: hidden; background: rgb(var(--card)); border: 1px solid rgb(255 255 255 / 0.08); box-shadow: 0 40px 90px -42px rgb(0 0 0 / 0.85); }
.shot__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgb(var(--window)); border-bottom: 1px solid rgb(255 255 255 / 0.06); }
.shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.shot img { display: block; width: 100%; height: auto; }

/* ---- stocks -------------------------------------------------------------- */
.stocks { position: relative; z-index: 1; padding: clamp(100px, 15vh, 196px) var(--gutter); }
.stock-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 13px; }
.stock { padding: 19px 20px 17px; border-radius: 12px; background: rgb(var(--card)); border: 1px solid rgb(255 255 255 / 0.07); transition: transform 0.25s var(--ease), border-color 0.25s; }
.stock:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / 0.16); }
.stock--hl { border-color: rgb(var(--accent) / 0.5); box-shadow: 0 0 0 1px rgb(var(--accent) / 0.28), 0 18px 50px -28px rgb(var(--accent) / 0.4); }
.stock__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.stock__name { font-weight: 600; font-size: 1.04rem; color: rgb(var(--ink-strong)); }
.stock__iso { color: rgb(var(--ink-low)); font-size: 0.64rem; }
.stock__desc { margin: 10px 0 15px; color: rgb(var(--ink-muted)); font-size: 0.9rem; }
.stock__tag { color: rgb(var(--ink-low)); font-size: 0.6rem; }

/* ---- before / after ------------------------------------------------------ */
.compare { position: relative; z-index: 1; padding: clamp(100px, 15vh, 196px) var(--gutter); }
.ba { position: relative; max-width: 1180px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.08); box-shadow: 0 40px 90px -42px rgb(0 0 0 / 0.85); user-select: none; cursor: ew-resize; touch-action: none; }
.ba img { display: block; height: 100%; object-fit: cover; pointer-events: none; }
.ba__base { position: absolute; inset: 0; width: 100%; }
.ba__top { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba__top img { position: absolute; left: 0; top: 0; max-width: none; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgb(255 255 255 / 0.9); transform: translateX(-1px); pointer-events: none; }
.ba__grip { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / 0.94); transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgb(0 0 0 / 0.45); }
.ba__grip::before { content: "\\2194"; position: absolute; inset: 0; display: grid; place-items: center; color: #111; font-size: 15px; }
.ba__lbl { position: absolute; bottom: 16px; padding: 6px 10px; border-radius: 6px; background: rgb(0 0 0 / 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 0.6rem; color: rgb(var(--ink-strong)); }
.ba__lbl--l { left: 16px; } .ba__lbl--r { right: 16px; color: rgb(var(--accent)); }

/* ---- band ---------------------------------------------------------------- */
.band { position: relative; z-index: 1; padding: clamp(88px, 13vh, 164px) var(--gutter); }

/* ---- THE FILM RESPONSE — full-bleed burst clip, autoplays on scroll-in --- */
.fr { position: relative; z-index: 1; height: 100svh; min-height: 580px; overflow: hidden; background: rgb(var(--stage)); display: flex; align-items: flex-end; }
.fr__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.fr__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(5 5 7 / 0.9) 0%, rgb(5 5 7 / 0.12) 30%, rgb(5 5 7 / 0) 56%); }
.fr__copy { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(54px, 10vh, 116px);
  opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: 1.3s; }
.fr.fr-in .fr__copy { opacity: 1; transform: none; }
.fr .kicker { color: rgb(255 255 255 / 0.62); margin-bottom: 12px; }
.fr__title { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(2rem, 4.6vw, 3.8rem); color: #f6f6f8; text-shadow: 0 2px 40px rgb(0 0 0 / 0.6); }
.fr__title .serif { color: #fff; }
.fr__body { margin: 18px 0 0; max-width: 50ch; color: rgb(255 255 255 / 0.78); font-size: clamp(0.98rem, 1.2vw, 1.14rem); line-height: 1.6; text-shadow: 0 1px 20px rgb(0 0 0 / 0.6); }
.is-static .fr__copy { opacity: 1; transform: none; transition: none; }
/* scroll-scrubbed variant: a tall track, the stage pins while the clip scrubs */
.fr--scrub { height: 300vh; display: block; overflow: visible; align-items: initial; min-height: 0; }
.fr--scrub .fr__sticky { position: sticky; top: 0; height: 100svh; height: 100dvh; min-height: 580px; overflow: hidden; background: rgb(var(--stage)); display: flex; align-items: flex-end; }
.fr--scrub .fr__copy { transition-delay: 0.2s; }
.is-static .fr--scrub { height: 100svh; }
.is-static .fr--scrub .fr__sticky { position: relative; }
/* A/B compare (temporary): stacked clips crossfade on toggle */
.fr__video { transition: opacity .25s var(--ease); }
.fr__video--off { opacity: 0; }
.fr__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* fallback poster behind the canvas: shows the developed frame during the sprite load, and is the
   safety net if the sprite ever fails to decode on a device — so the section is never a black box */
.fr__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fr__stage { position: absolute; inset: 0; z-index: 0; }
@media (max-width: 760px) {
  /* MOBILE: no scroll-scrub (it fights touch-scroll and can't be sharp full-bleed from a landscape
     clip). Instead show the develop in a sharp, deliberately MATTED 16:9 frame — a framed print on
     the dark darkroom wall — centered; it develops itself when it scrolls into view. */
  .fr--scrub { height: auto; }
  .fr--scrub .fr__sticky { position: relative; height: auto; min-height: 100svh; min-height: 100dvh;
    flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 5vh, 38px);
    padding: clamp(88px, 14vh, 132px) var(--gutter); }
  .fr--scrub .fr__stage { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 28px 60px -28px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.09); }
  .fr--scrub .fr__scrim { display: none; }
  .fr--scrub .fr__copy { position: static; padding: 0; max-width: none; text-align: center; }
}
/* free-trial email capture (custom UI -> posts to Brevo) */
.hero__actions--trial { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__actions--trial .trial__msg { text-align: center; }
/* trial terms / trust line under the CTAs (hero + closing) */
.cta-fine { margin: 6px auto 0; max-width: 54ch; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.03em; line-height: 1.75; color: rgb(var(--ink-low)); text-align: center; }
.cta-fine b { color: rgb(var(--ink-muted)); font-weight: 500; }
.trial { width: 100%; max-width: 480px; }
.trial__row { display: flex; align-items: center; gap: 0; background: rgb(var(--card) / 0.72); border: 1px solid rgb(var(--hairline)); border-radius: 100px; padding: 5px 5px 5px 8px; transition: border-color .2s, background .2s; }
.trial__email { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 0; border-radius: 0; background: none; color: rgb(var(--ink)); font-family: inherit; font-size: 0.95rem; line-height: 1.2; outline: none; }
.trial__email::placeholder { color: rgb(var(--ink-low)); }
.trial__row:focus-within { border-color: rgb(var(--accent) / 0.75); }
.trial__btn { white-space: nowrap; flex: 0 0 auto; padding: 11px 20px; }
.trial__btn:hover { transform: none; }
.trial__msg { margin: 12px 0 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: .02em; color: rgb(var(--ink-muted)); }
.trial__msg--ok { color: rgb(var(--ink-strong)); }
.trial__msg--err { color: #ff6f61; }
.trial__dlmsg { display: block; }
.trial__dl { display: inline-flex; margin-top: 14px; }
.trial__dlnote { display: block; margin-top: 10px; font-size: 0.9em; letter-spacing: .02em; color: rgb(var(--ink-muted)); }
.cta-sec__inner .trial { margin: 4px auto 0; }
.cta-sec__inner .trial__msg { text-align: center; }
@media (max-width: 560px) { .trial__row { flex-direction: column; align-items: stretch; border-radius: 22px; gap: 6px; padding: 6px; } .trial__email { text-align: center; } .trial__btn { width: 100%; justify-content: center; } }
#frVideoB { transform: scale(1.15); transform-origin: center; }   /* zoom clip B in a bit (compare-only) */
.fr__ab { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(8 8 10 / 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / 0.14); }
.fr__ab-btn { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.72); background: transparent; border: 0; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.fr__ab-btn.is-on { background: rgb(var(--accent)); color: rgb(8 8 10); }
.fr__ab-btn:hover:not(.is-on) { color: #fff; }

/* shared slider base — the exposure input in the comparison demo below reuses this */
.xr__exp { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.22); outline: none; cursor: grab; }
.xr__exp::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--accent)); border: 2px solid #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 0.6); cursor: grab; }
.xr__exp::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 2px 10px rgb(0 0 0 / 0.6); cursor: grab; }

/* ---- EXPOSURE RESPONSE: a full-bleed cinema split — one light dial, two engines ---- */
.xb { position: relative; z-index: 1; padding: clamp(64px, 8vh, 120px) 0; background: rgb(var(--stage)); }
.xb__head { max-width: 760px; margin: 0 auto clamp(24px, 4vh, 44px); padding: 0 var(--gutter); text-align: center; }
.xb__head .section-title { margin: 14px 0 0; }
.xb__sub-copy { text-wrap: balance; }
/* Pane height. The exports are 4:3, each pane is half the bench, so a pane only shows the WHOLE
   frame when its height is (50vw / 1.3333) = 37.5vw. Height used to come from 52vh alone: fine on a
   tall window, but on a WIDE one the pane kept widening while its height stood still, so `cover`
   sliced the top and bottom off and left a letterbox band through the middle of the photo (worst on
   a wide+short window: at 2000x883 it was throwing away ~39% of the frame).
   max(52vh, 37.5vw) keeps the old vh-driven height wherever vh still wins (narrow/tall windows look
   exactly as before) and grows the pane to the no-crop height once width takes over. The 750px cap
   pairs with the 2000px max-width below: 2000/2 = 1000 wide, 1000/1.3333 = 750 tall, so past that
   the bench freezes at a full-frame 4:3 and centres instead of cropping again. */
.xb__wrap { margin: 0; position: relative; --xb-h: clamp(360px, max(52vh, 37.5vw), 750px); }
.xb__panes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #000; border-top: 1px solid rgb(255 255 255 / 0.08); border-bottom: 1px solid rgb(255 255 255 / 0.08);
  max-width: 2000px; margin-inline: auto; }
.xb__pane { position: relative; height: var(--xb-h); overflow: hidden; background: #000; }
.xb__pane::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 130px rgb(0 0 0 / 0.38); }
.xb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; -webkit-user-drag: none; user-select: none; }
.xb__img--x { opacity: 0; }
.xb__tag { position: absolute; top: 16px; left: 16px; z-index: 4; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgb(8 8 10 / 0.45); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgb(255 255 255 / 0.14); color: rgb(255 255 255 / 0.72); }
.xb__tag--film { color: #fff; border-color: rgb(var(--accent) / 0.6); left: auto; right: 16px; }
.xb__same { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgb(8 8 10 / 0.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgb(255 255 255 / 0.18); color: rgb(255 255 255 / 0.85); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.xb__same.is-on { opacity: 1; }
/* plain-language telemetry: one frozen frame vs the film's strip, the lit frame sliding with the light */
.xb__tele { position: absolute; bottom: 14px; left: 14px; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 999px; background: rgb(8 8 10 / 0.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgb(255 255 255 / 0.12); font-size: 9px; letter-spacing: 0.12em; color: rgb(255 255 255 / 0.88); font-variant-numeric: tabular-nums; }
.xb__tele--film { left: auto; right: 14px; }
.xb__strip { display: inline-flex; gap: 3px; }
.xb__strip i { width: 13px; height: 9px; border-radius: 2px; border: 1px solid rgb(255 255 255 / 0.3); background: transparent; }
.xb__strip i.on { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.85); }
.xb__strip i.xb__cell-dead { border-color: rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.22); }
/* the dial dock: a camera EV-comp drum floating on the comparison — a 1/3-stop tick tape
   slides under a fixed amber index, like the top-plate dial on a camera body */
.xb__dock { position: absolute; left: 50%; top: calc(var(--xb-h) - 16px); transform: translate(-50%, -100%);
  z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.xd { position: relative; display: flex; align-items: center; gap: 10px; }
/* step buttons: click a detent instead of dragging. Introduced after the guided pass,
   then they idle barely-there and wake when the cursor comes near the dial */
.xd__step { width: 30px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 19px; line-height: 1; color: rgb(255 255 255 / 0.75);
  background: rgb(8 8 10 / 0.4); border: 1px solid rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.45s, color 0.2s, border-color 0.2s, transform 0.12s; }
.xd--rest .xd__step { opacity: 0.18; pointer-events: auto; animation: xdBeckon 1.7s ease-in-out 2; }
.xd:hover .xd__step, .xd__step:focus-visible { opacity: 0.9; }
.xd__step:hover { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.5); }
.xd__step:active { transform: scale(0.93); }
@keyframes xdBeckon { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.95; color: rgb(var(--accent)); } }
.xd__win { position: relative; width: 264px; height: 46px; overflow: hidden; border-radius: 12px;
  background: rgb(8 8 10 / 0.62); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);
  border: 1px solid rgb(255 255 255 / 0.16); cursor: ew-resize; touch-action: none; outline: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 8px 24px rgb(0 0 0 / 0.35); }
.xd__win:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 4px; }
.xd__win::before, .xd__win::after { content: ""; position: absolute; top: 0; bottom: 0; width: 54px; z-index: 2; pointer-events: none; }
.xd__win::before { left: 0; background: linear-gradient(90deg, rgb(8 8 10 / 0.82), transparent); }
.xd__win::after { right: 0; background: linear-gradient(270deg, rgb(8 8 10 / 0.82), transparent); }
.xd__tape { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
.xd__tick { position: absolute; bottom: 7px; width: 1px; height: 9px; background: rgb(255 255 255 / 0.3); }
.xd__tick--maj { width: 1.5px; height: 15px; background: rgb(255 255 255 / 0.6); }
.xd__num { position: absolute; bottom: 26px; transform: translateX(-50%); font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.62); font-variant-numeric: tabular-nums; }
.xd__index { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -0.75px;
  background: rgb(var(--accent)); z-index: 3; pointer-events: none; }
.xd__index::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: rgb(var(--accent)); }
.xb__note { text-align: center; margin-top: 16px; padding: 0 var(--gutter); font-size: 0.62rem; letter-spacing: 0.12em; color: rgb(var(--ink-low)); }
@media (max-width: 640px) {
  /* phones: the photo fades into the stage through a bottom gradient, the chips sit in that
     calm zone, and the dial rests just below — one continuous flow instead of stacked layers.
     The drum keeps its liquid look via a gradient sheen (no photo behind it down here). */
  .xb__wrap { --xb-h: clamp(300px, 46vh, 480px); }
  .xb__pane::after { background: linear-gradient(180deg, transparent 60%, rgb(8 8 10 / 0.62) 86%, rgb(8 8 10 / 0.94) 100%);
    box-shadow: inset 0 0 90px rgb(0 0 0 / 0.3); }
  .xb__tag { top: 8px; left: 8px; font-size: 8.5px; padding: 4px 8px; }
  .xb__tag--film { left: auto; right: 8px; }
  .xb__tele { bottom: 10px; left: 8px; padding: 6px 9px; font-size: 8px; gap: 6px; background: none; border-color: rgb(255 255 255 / 0.08); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .xb__tele--film { left: auto; right: 8px; }
  .xb__strip i { width: 10px; height: 7px; }
  .xb__dock { position: static; transform: none; margin: 14px auto 0; }
  .xd__win { background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.02) 40%, rgb(0 0 0 / 0.28)), rgb(13 13 15 / 0.92); }
}
@media (max-width: 349px) {
  .xd__step { display: none; }   /* tiny phones: the 264px drum alone; drag still works */
}
/* ---- THE LIBRARY — 13 stocks; hover/tap a row to preview it ---- */
.lib { position: relative; z-index: 1; padding: clamp(84px, 14vh, 172px) var(--gutter); background: rgb(var(--stage)); }
/* one frame: stock list (left) + live preview (right) inside a single bordered card */
.lib__frame { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(232px, 312px) 1fr; border: 1px solid rgb(255 255 255 / 0.10); border-radius: 18px; overflow: hidden; background: #000; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 50px 110px -45px rgb(0 0 0 / 0.95); }
.lib__list { display: flex; flex-direction: column; overflow-y: auto; background: rgb(var(--window) / 0.5); border-right: 1px solid rgb(255 255 255 / 0.08); }
.lib__row { flex: 1; min-height: 34px; display: flex; align-items: center; gap: 11px; width: 100%; padding: 0 16px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px solid rgb(255 255 255 / 0.05); transition: background 0.2s, padding-left 0.2s var(--ease); }
.lib__row:last-child { border-bottom: 0; }
.lib__row:hover, .lib__row.is-active { background: rgb(var(--hover)); }
.lib__row.is-active { padding-left: 22px; }
.lib__no { font-size: 10px; color: rgb(var(--ink-low)); font-variant-numeric: tabular-nums; }
.lib__nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; font-size: 0.92rem; font-weight: 600; color: rgb(var(--ink)); white-space: nowrap; }
.lib__row.is-active .lib__nm { color: rgb(var(--ink-strong)); }
.lib__looks { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink-low)); white-space: nowrap; }
.lib__stage { position: relative; aspect-ratio: 4 / 3; background: #000; }
.lib__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s var(--ease); }
.lib__stage img.is-shown { opacity: 1; }
.lib__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 22px 18px; background: linear-gradient(to top, rgb(5 5 7 / 0.82), rgb(5 5 7 / 0)); }
.lib__cap-nm { font-size: 1.3rem; font-weight: 600; color: #fff; }
.lib__cap-ds { font-size: 0.85rem; color: rgb(255 255 255 / 0.72); margin-top: 3px; }
.lib__cap-lk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--accent)); margin-top: 8px; }
.lib__ph { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); background: rgb(8 8 10 / 0.5); border: 1px solid rgb(255 255 255 / 0.16); padding: 4px 8px; border-radius: 999px; display: none; }
.lib__stage.is-ph .lib__ph { display: block; }
.lib__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lib__dot--n { background: rgb(var(--ink-low)); }
.lib__dot--c { background: #6db4ff; }
.lib__dot--w { background: rgb(var(--accent)); }
.lib__dot--m { background: #e9e9ef; }
.lib__controls { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-top: clamp(20px, 2.6vh, 30px); }
.lib__samples { position: absolute; top: 12px; left: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 9px; background: rgb(0 0 0 / 0.42); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / 0.14); }
.lib__sample { font-family: var(--mono); font-size: 11px; line-height: 1; padding: 6px 11px; border-radius: 6px; cursor: pointer; background: transparent; border: 0; color: rgb(255 255 255 / 0.6); transition: color 0.2s var(--ease), background 0.2s var(--ease); }
.lib__sample:hover { color: rgb(255 255 255 / 0.92); }
.lib__sample:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 1px; }
.lib__sample.is-on { color: #fff; background: rgb(255 255 255 / 0.18); }
.lib__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--ink-low)); }
.lib__legend span { display: inline-flex; align-items: center; gap: 6px; }
.lib__list { scrollbar-width: none; }
.lib__list::-webkit-scrollbar { display: none; }
/* mobile stock indicator — dot/pill page control (reference-style) */
.lib__dots { display: none; }
.lib__dot2 { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.26); cursor: pointer; flex: none; transition: width 0.3s var(--ease), background 0.3s var(--ease); }
.lib__dot2.on { width: 26px; background: rgb(var(--ink-strong)); }
@media (max-width: 760px) {
  .lib__frame { grid-template-columns: 1fr; }
  .lib__stage { order: -1; touch-action: pan-y; }
  /* named list becomes a horizontal, snap-scrolling chip strip below the preview — real names + big tap targets beat 13 anonymous dots */
  .lib__list { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .lib__row { flex: 0 0 auto; width: auto; min-height: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 12px 16px; border-bottom: 0; border-right: 1px solid rgb(255 255 255 / 0.06); scroll-snap-align: center; }
  .lib__row.is-active { padding-left: 16px; background: rgb(var(--hover)); }
  .lib__nm { flex: none; font-size: 0.9rem; }
  .lib__no { display: none; }
  .lib__dots { display: none; }
}

/* ---- THE WORKSPACE — 4-card feature grid (photo + feature) ---- */
.feat { position: relative; z-index: 1; padding: clamp(84px, 14vh, 172px) 0; background: rgb(var(--stage)); }
.feat__head { max-width: 1080px; margin: 0 auto clamp(28px, 4vh, 48px); padding: 0 var(--gutter); }
.feat__head .section-title { margin: 14px 0 0; }
/* the rail + its controls share a positioned wrapper. The rail FADES OUT at the window edge on any side
   you can still scroll toward, and the chevron sits inside that faded zone — so the arrow reads as part
   of the window edge, never as a button dropped on someone's photo. At the start the left side is fully
   clean (no scrim, no arrow); at the end, the right side is. Touch devices get no arrows: swipe + the
   half-peek card already do the job. */
.feat__railwrap { position: relative; max-width: 1080px; margin: 0 auto; }
.feat__railwrap::before, .feat__railwrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(52px, 6.5vw, 96px); z-index: 2; pointer-events: none; transition: opacity 0.3s var(--ease); }
.feat__railwrap::before { left: 0; background: linear-gradient(to right, rgb(var(--stage)) 12%, rgb(var(--stage) / 0)); }
.feat__railwrap::after { right: 0; background: linear-gradient(to left, rgb(var(--stage)) 12%, rgb(var(--stage) / 0)); }
.feat__railwrap.at-start::before { opacity: 0; }
.feat__railwrap.at-end::after { opacity: 0; }
.feat__nav { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.feat__railwrap.at-start .feat__btn--prev, .feat__railwrap.at-end .feat__btn--next { opacity: 0; pointer-events: none; }
@media (hover: none) { .feat__nav { display: none; } }
/* mid-page micro-CTA: catch peak desire without breaking the scroll */
.midcta { max-width: 1080px; margin: clamp(26px, 4vh, 44px) auto 0; padding: 0 var(--gutter); text-align: center; font-size: 0.68rem; color: rgb(var(--ink-low)); }
.midcta__link { color: rgb(var(--ink-muted)); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.midcta__link:hover { color: rgb(var(--ink-strong)); }
.feat__btn { position: absolute; top: var(--arrow-cy, 50%); transform: translateY(-50%); z-index: 3; pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.2); background: rgb(10 10 12 / 0.55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); color: rgb(var(--ink-strong)); font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.7); transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.feat__btn--prev { left: clamp(8px, 1.4vw, 20px); }
.feat__btn--next { right: clamp(8px, 1.4vw, 20px); }
.feat__btn:hover { background: rgb(20 20 24 / 0.85); border-color: rgb(255 255 255 / 0.4); }
.feat__btn:disabled { cursor: default; }
.feat__rail { max-width: 1080px; margin: 0 auto; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding: 4px var(--gutter) 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.feat__rail::-webkit-scrollbar { display: none; }
/* rail dots: how many cards + which one (same language as the stocks dots) */
.feat__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.feat__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.26); cursor: pointer; flex: none; transition: width 0.3s var(--ease), background 0.3s var(--ease); }
.feat__dots button.on { width: 26px; background: rgb(var(--ink-strong)); }
/* show 2 full cards + a half of the next (the "there's more" peek): 2.5 cards + 2 gaps fill the rail */
.feat__card { flex: 0 0 calc((100% - 48px) / 2.5); scroll-snap-align: start; }
.feat__shot { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid rgb(255 255 255 / 0.08); }
.feat__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat__txt { margin: 18px 2px 0; color: rgb(var(--ink-muted)); font-size: 1rem; line-height: 1.55; }

/* before/after crossfade slider (shared by the Acutance + Shot Exposure cards) */
.baf { position: absolute; inset: 0; }
.baf__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.baf__img--before { z-index: 2; will-change: opacity; }
.baf__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 40px clamp(14px, 3vw, 22px) 14px; background: linear-gradient(to top, rgb(5 5 7 / 0.86), rgb(5 5 7 / 0.44) 55%, rgb(5 5 7 / 0)); }
.baf__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.baf__lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255 255 255 / 0.58); }
.baf__val { font-size: clamp(13px, 1.6vw, 15px); color: #fff; }
.baf__ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.4); }
.baf__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feat__txt strong { color: rgb(var(--ink-strong)); font-weight: 600; }

/* Shot exposure card: three real exposures (box speed / 1 under / 2 under) stacked and crossfaded by the slider */
.sx { position: absolute; inset: 0; }
.sx__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; will-change: opacity; }
/* "Tonal Seam" — full-card 16-bit tonal-depth graphic (no photo). One vertical
   shadow→highlight ramp split down the centre: stepped (8-bit) vs smooth (16-bit).
   Pure CSS, resolved at rest. Orange rationed to: seam "16-bit", struck "256", footer. */
.feat__raw .raw16 { position: absolute; inset: 0; font-family: var(--mono); }
.feat__raw .raw16__field { position: absolute; inset: 0; display: flex; }
.feat__raw .raw16__half { width: 50%; height: 100%; }
/* 8-bit half: 8 hard, countable steps (shadow at bottom → highlight at top) */
.feat__raw .raw16__half--banded { position: relative; background: linear-gradient(to top,
  #0d0d12 0% 12.5%,  #1f2027 12.5% 25%,  #34353f 25% 37.5%, #4d4e5a 37.5% 50%,
  #686976 50% 62.5%, #888997 62.5% 75%,  #adaebb 75% 87.5%, #e8e8f0 87.5% 100%); }
/* black hairline rules ON each step boundary so the seams stay crisp on any DPI */
.feat__raw .raw16__half--banded::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to top, rgb(0 0 0 / 0.5) 0 1px, transparent 1px 12.5%); }
/* 16-bit half: one continuous gradient = smooth roll-off, no visible steps */
.feat__raw .raw16__half--smooth { background: linear-gradient(to top, #0d0d12, #e8e8f0); }
/* hairline seam down the centre */
.feat__raw .raw16__divider { position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; transform: translateX(-0.5px);
  background: rgb(255 255 255 / 0.42); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.4); }
/* panel labels — clean horizontal text in each panel's light top corner, dark so it
   reads against the bright top of the ramp. No plate/box/border — just text. */
.feat__raw .raw16__lbl { position: absolute; top: 12px; z-index: 3;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: rgb(13 13 18 / 0.85); }
.feat__raw .raw16__lbl--l { left: 13px; }
.feat__raw .raw16__lbl--r { left: calc(50% + 13px); }
/* serif hero number — quiet headline anchored low on the smooth (16-bit) half */
.feat__raw .raw16__hero { position: absolute; right: 30px; bottom: 58px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; pointer-events: none; }
.feat__raw .raw16__kicker { font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgb(var(--ink-muted)); margin-bottom: 2px; text-shadow: 0 1px 6px rgb(0 0 0 / 0.55); }
.feat__raw .raw16__num { font-family: var(--serif); font-size: clamp(34px, 6.5vw, 54px);
  line-height: 0.82; letter-spacing: -0.01em; color: rgb(var(--ink-strong)); text-shadow: 0 1px 10px rgb(0 0 0 / 0.5); }
/* footer caption — scrim so it reads over the bright foot of the ramps */
.feat__raw .raw16__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: space-between; gap: 8px; padding: 24px 14px 12px;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.5);
  background: linear-gradient(to top, rgb(5 5 7 / 0.82) 22%, rgb(5 5 7 / 0)); }
.feat__raw .raw16__foot-hl { color: rgb(var(--accent)); }
/* visually-hidden honesty sentence */
.feat__raw .raw16__sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) { .feat__card { flex-basis: 80vw; } }
/* halation card: a slider that crossfades 4 real exports (none → max) */
.feat__halo { position: relative; cursor: default; }
.feat__halo .halo__f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.08s linear; }
.feat__halo .halo__f[data-stop="0"] { opacity: 1; }
.halo__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 34px 16px 14px; background: linear-gradient(to top, rgb(5 5 7 / 0.78), rgb(5 5 7 / 0)); }
.halo__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.halo__lbl { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.62); }
.halo__val { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.halo__exp { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 999px; background: linear-gradient(to right, rgb(var(--accent)) var(--p, 40%), rgb(255 255 255 / 0.22) var(--p, 40%)); outline: none; cursor: grab; touch-action: none; }
.halo__exp::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%; background: rgb(var(--accent)); border: 2px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 0.55), 0 0 calc(4px + 12px * var(--g, 0.4)) rgb(var(--accent) / calc(0.25 + 0.5 * var(--g, 0.4))); cursor: grab; }
.halo__exp::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 2px 8px rgb(0 0 0 / 0.55), 0 0 calc(4px + 12px * var(--g, 0.4)) rgb(var(--accent) / calc(0.25 + 0.5 * var(--g, 0.4))); cursor: grab; }
.halo__exp::-moz-range-progress { height: 3px; border-radius: 999px; background: rgb(var(--accent)); }
.halo__exp:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 3px; border-radius: 999px; }

/* ---- ORGANIZE feature card ("tap-chips-tree") — fills .feat__shot via block flow,
   so it needs NO position:relative on the parent. All classes .org__* namespaced. */
.org{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;
  font-family:var(--mono);background:rgb(var(--window));color:rgb(var(--ink))}
.org__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.org__bar{flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:11px 14px;border-bottom:1px solid rgb(var(--hairline))}
.org__dot{width:9px;height:9px;border-radius:50%;background:rgb(var(--hairline))}
.org__path{margin-left:8px;font-size:11px;letter-spacing:.02em;color:rgb(var(--ink-low))}
.org__body{flex:1 1 auto;min-height:0;padding:14px 15px 8px;
  display:flex;flex-direction:column;overflow:hidden}
.org__cmd{flex:0 0 auto;font-size:12.5px;line-height:1.5;white-space:nowrap;margin-bottom:13px}
.org__user{color:rgb(var(--ink-strong))}
.org__flag{color:rgb(var(--ink))}
.org__arg{color:rgb(var(--ink-muted))}
.org__opt{color:rgb(var(--ink-low))}
.org__key{color:rgb(var(--accent));font-weight:600}
.org__cur{display:inline-block;width:7px;height:14px;margin-left:3px;vertical-align:-2px;
  background:rgb(var(--accent));animation:org-blink 1.05s steps(1) infinite}
@keyframes org-blink{0%,49.9%{opacity:1}50%,100%{opacity:0}}
.org__diff{flex:1 1 auto;min-height:0;font-size:12px;line-height:1.6;position:relative;overflow:hidden}
.org__row{display:flex;align-items:center;white-space:nowrap;height:19.2px;
  opacity:0;transform:translateY(3px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.org__row.is-in{opacity:1;transform:none}
.org__tw{flex:0 0 auto;color:rgb(var(--ink-low))}
.org__dir{color:rgb(var(--ink-strong))}
.org__dir.is-new{color:rgb(var(--accent))}
.org__file{color:rgb(var(--ink-muted))}
.org__mv{color:rgb(var(--accent));margin:0 7px;flex:0 0 auto}
.org__dest{color:rgb(var(--ink))}
.org__indent{display:inline-block;flex:0 0 auto}
.org__stat{flex:0 0 auto;height:17px;margin-top:2px;font-size:11px;letter-spacing:.02em;
  color:rgb(var(--ink-low));opacity:0;transition:opacity .4s var(--ease)}
.org__stat.is-in{opacity:1}
.org__stat b{color:rgb(var(--accent));font-weight:600}
.org__keys{flex:0 0 auto;display:flex;gap:7px;
  padding:11px 14px 13px;border-top:1px solid rgb(var(--hairline))}
.org__chip{font-family:var(--mono);font-size:11.5px;cursor:pointer;padding:5px 11px;border-radius:7px;
  color:rgb(var(--ink-muted));background:rgb(var(--card));border:1px solid rgb(var(--hairline));
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.org__chip:hover{background:rgb(var(--hover));color:rgb(var(--ink))}
.org__chip.is-on{color:rgb(var(--accent));border-color:rgb(var(--accent) / 0.5);background:rgb(var(--accent) / 0.1)}
.org__chip:focus-visible{outline:2px solid rgb(var(--accent) / 0.7);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .org__cur{animation:none}
  .org__row{transition:none;opacity:1;transform:none}
  .org__stat{transition:none;opacity:1}
}
/* ---- ORGANIZE feature card v3 ("routing") — merge many folders into one, or split a shoot by
   date/camera/rating. An inline SVG diagram (built per mode in app.js): source(s) on one side,
   accent lanes fanning to/from folder(s) on the other, files riding the lanes. Lane flow is a CSS
   dash animation; file travel is SMIL animateMotion (both auto-skip under reduced-motion). */
.orgx{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
  font-family:var(--mono,"Fragment Mono",monospace);color:rgb(var(--ink));
  background:rgb(var(--window));overflow:hidden}
.orgx *{box-sizing:border-box}
.orgx__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.orgx__stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;display:flex}
.orgx__svg{display:block;width:100%;height:100%}
.orgx__svg text{font-family:var(--mono,"Fragment Mono",monospace)}
.orgx__lane{fill:none;stroke:rgb(var(--accent) / 0.45);stroke-width:1.5;stroke-dasharray:3 6;
  stroke-linecap:round;animation:orgx-flow .5s linear infinite}
@keyframes orgx-flow{to{stroke-dashoffset:-9}}
.orgx__chips{flex:none;display:flex;gap:6px;justify-content:center;padding:9px 8px 13px}
.orgx__chip{font-family:var(--mono,"Fragment Mono",monospace);font-size:11px;line-height:1;
  padding:5px 10px;border-radius:7px;cursor:pointer;background:rgb(var(--card));
  border:1px solid rgb(var(--hairline));color:rgb(var(--ink-muted));
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.orgx__chip:hover{color:rgb(var(--ink))}
.orgx__chip:focus-visible{outline:2px solid rgb(var(--accent) / 0.6);outline-offset:2px}
.orgx__chip.is-on{color:rgb(var(--accent));border-color:rgb(var(--accent) / 0.5);
  background:rgb(var(--accent) / 0.1)}
/* a row briefly lights up when a file arrives in its folder */
.orgx__svg .orgx-row rect{transition:fill .5s var(--ease)}
.orgx__svg .orgx-file{transition:fill .5s var(--ease)}
.orgx__svg .orgx-row.is-fresh rect{fill:rgb(var(--accent) / 0.16)}
.orgx__svg .orgx-row.is-fresh .orgx-file{fill:rgb(var(--ink-strong))}
/* destinations + lanes start hidden and fade in once files begin to move ("begin with no other folders") */
.orgx__svg .orgx-folder.is-dest{opacity:0;transition:opacity .5s var(--ease)}
.orgx__svg.is-playing .orgx-folder.is-dest{opacity:1}
.orgx__svg .orgx__lane{opacity:0;transition:opacity .5s var(--ease)}
.orgx__svg.is-playing .orgx__lane{opacity:1}
/* a file in transit */
.orgx__svg .orgx-mover rect{filter:drop-shadow(0 2px 5px rgb(0 0 0 / 0.5))}
@media (prefers-reduced-motion: reduce){.orgx__lane{animation:none}
  .orgx__svg .orgx-row rect,.orgx__svg .orgx-file{transition:none}
  .orgx__svg .orgx-folder.is-dest,.orgx__svg .orgx__lane{opacity:1;transition:none}}
/* ---- DARKROOM feature card — interactive zone-select demo (live luminance band by black/white point).
   Canvas computes the orange zone mask from darkroom.jpg with the app's exact overlay (255,151,24) +
   feathered-band math; d1 (darkroom-mask.jpg) sits behind as the no-JS / reduced-motion poster. */
.dkr{position:relative;width:100%;height:100%;background:#000;overflow:hidden}
.dkr__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dkr__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.dkr__cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.dkr__toggle{position:absolute;top:12px;right:12px;z-index:6;padding:6px 11px;border-radius:7px;
  background:rgb(8 8 10 / 0.55);border:1px solid rgb(255 255 255 / 0.18);color:#fff;font-size:10px;
  letter-spacing:0.1em;text-transform:uppercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
.dkr__toggle.is-on{background:rgb(var(--accent) / 0.16);border-color:rgb(var(--accent) / 0.5);color:rgb(var(--accent))}
.dkr__bar{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:32px 16px 15px;
  background:linear-gradient(to top,rgb(5 5 7 / 0.85),rgb(5 5 7 / 0))}
.dkr__top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.dkr__lbl{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgb(255 255 255 / 0.62)}
.dkr__val{font-size:13px;color:#fff;font-variant-numeric:tabular-nums}
.dkr__track{position:relative;height:13px;border-radius:4px;
  background:linear-gradient(90deg,#0b0b0c,#9a9a9e,#fafafa);box-shadow:inset 0 0 0 1px rgb(255 255 255 / 0.14);touch-action:none}
.dkr__band{position:absolute;top:-2px;bottom:-2px;border:1.5px solid rgb(var(--accent));border-radius:4px;
  background:rgb(var(--accent) / 0.12);pointer-events:none}
.dkr__h{position:absolute;top:50%;width:13px;height:23px;transform:translate(-50%,-50%);border-radius:3px;
  background:#fff;border:1px solid rgb(0 0 0 / 0.35);box-shadow:0 2px 7px rgb(0 0 0 / 0.55);cursor:grab;padding:0;z-index:2}
.dkr__h:active{cursor:grabbing}
.dkr__hint{position:absolute;top:12px;left:12px;z-index:6;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:rgb(255 255 255 / 0.55);background:rgb(8 8 10 / 0.45);border:1px solid rgb(255 255 255 / 0.12);padding:5px 9px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.dkr__row{display:flex;align-items:center;gap:9px;margin-top:10px}
.dkr__rlbl{flex:none;width:64px;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgb(255 255 255 / 0.5)}
.dkr__row input[type=range]{-webkit-appearance:none;appearance:none;flex:1 1 auto;height:3px;border-radius:999px;background:rgb(255 255 255 / 0.25);outline:none;cursor:grab;touch-action:none}
.dkr__row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:rgb(var(--accent));border:2px solid #fff;box-shadow:0 2px 7px rgb(0 0 0 / 0.55);cursor:grab}
.dkr__row input[type=range]::-moz-range-thumb{width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:rgb(var(--accent));cursor:grab}
.dkr__expv,.dkr__tempv{flex:none;width:32px;text-align:right;font-size:11px;color:#fff;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){.dkr__cv,.dkr__bar,.dkr__toggle,.dkr__hint{display:none}}
/* ---- DARKROOM dedicated section (deep-dive: zone select + dodge & burn workflow) ---- */
/* ---- INSTANT FILM section — same photo, develops in view; Format control swaps the scanned frame ---- */
.inst{position:relative;z-index:1;padding:clamp(72px,12vh,150px) var(--gutter);background:rgb(var(--stage))}
.inst__wrap{max-width:1140px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,84px);align-items:center}
.inst__copy{max-width:500px}
.inst__copy .section-title{margin:14px 0 0}
.inst__sub{margin:18px 0 0;color:rgb(var(--ink-muted));font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6}
.inst__ctrl{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3.6vh,40px)}
.inst__ctrl-lbl{font-family:var(--mono,"Fragment Mono",monospace);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgb(var(--ink-low))}
.inst__chips{display:flex;gap:8px}
.inst__chip{font-family:var(--mono,"Fragment Mono",monospace);font-size:12px;line-height:1;
  padding:8px 16px;border-radius:8px;cursor:pointer;background:rgb(var(--card));
  border:1px solid rgb(var(--hairline));color:rgb(var(--ink-muted));
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.inst__chip:hover{color:rgb(var(--ink))}
.inst__chip:focus-visible{outline:2px solid rgb(var(--accent) / 0.6);outline-offset:2px}
.inst__chip.is-on{color:rgb(var(--accent));border-color:rgb(var(--accent) / 0.5);background:rgb(var(--accent) / 0.1)}
.inst__status{margin:18px 0 0;font-family:var(--mono,"Fragment Mono",monospace);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--ink-low));transition:color .3s}
.inst__status.dev{color:rgb(var(--accent))}
.inst__viewer{position:relative;height:clamp(380px,54vh,540px);overflow:hidden}
.inst__slot{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;
  width:min(460px,86%);height:17px;border-radius:0 0 11px 11px;
  background:linear-gradient(180deg,#1c1c20,#0b0b0d);
  box-shadow:0 5px 13px rgb(0 0 0 / 0.55),inset 0 -1px 0 rgb(255 255 255 / 0.05)}
.inst__slot::before{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:3px;border-radius:2px;
  background:#000;box-shadow:inset 0 1px 2px rgb(0 0 0 / 0.9)}
.inst__slot::after{content:"";position:absolute;right:13px;top:6px;width:4px;height:4px;border-radius:50%;
  background:rgb(var(--accent));box-shadow:0 0 6px rgb(var(--accent) / 0.7)}
.inst__viewer::before{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:72%;height:74%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center, rgb(255 206 158 / 0.13), transparent 64%);filter:blur(32px)}
.inst__pic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.inst__pic.is-on{opacity:1;pointer-events:auto}
.inst__raw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.85;
  transition:opacity .7s var(--ease), filter .7s var(--ease)}
.inst__pic.is-out .inst__raw{opacity:.32;filter:blur(3px)}
.inst__print{position:relative;z-index:2;max-height:100%;max-width:min(450px,86%);width:auto;height:auto;border-radius:5px;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  transform:translateY(var(--peek,-90%));
  transition:transform .85s cubic-bezier(.16,1,.3,1), filter 2.4s cubic-bezier(.2,.7,.25,1);
  filter:drop-shadow(0 30px 54px rgb(0 0 0 / 0.62))}
.inst__pic.is-out .inst__print{transform:translateY(0)}
.inst__pic.no-trans .inst__print{transition:none;cursor:grabbing}
.inst__pic.is-dev .inst__print{filter:drop-shadow(0 30px 54px rgb(0 0 0 / 0.62)) saturate(.12) contrast(.72) brightness(.98) blur(3px) sepia(.12)}
.inst__pic.is-dev.is-developed .inst__print{filter:drop-shadow(0 30px 54px rgb(0 0 0 / 0.62))}
.inst__pull{margin-top:18px;font-family:var(--mono,"Fragment Mono",monospace);font-size:12px;letter-spacing:.08em;
  padding:11px 22px;border-radius:100px;cursor:pointer;background:rgb(var(--primary));color:rgb(var(--primary-ink));border:0;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.inst__pull:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgb(0 0 0 / 0.55)}
.inst__pull:focus-visible{outline:2px solid rgb(var(--accent) / 0.6);outline-offset:2px}
.inst__hint{position:absolute;left:50%;top:76px;transform:translateX(-50%);z-index:4;pointer-events:none;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgb(255 255 255 / 0.7);
  background:rgb(0 0 0 / 0.4);backdrop-filter:blur(4px);padding:4px 10px;border-radius:100px;
  animation:inst-bob 1.6s ease-in-out infinite;transition:opacity .3s var(--ease)}
.inst__hint.is-hidden{opacity:0}
@keyframes inst-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}
@media (max-width:760px){
  .inst__wrap{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .inst__copy{max-width:none}
  .inst__viewer{height:clamp(340px,60vw,460px);order:-1}
  .inst__ctrl{flex-wrap:wrap}
}
@media (prefers-reduced-motion: reduce){.inst__print{transition:none;transform:none}.inst__raw{transition:none}}
.dark{position:relative;z-index:1;padding:clamp(84px,14vh,172px) var(--gutter);background:rgb(var(--stage))}
.dark__head{max-width:720px;margin:0 auto clamp(38px,5.5vh,64px);text-align:center}
.dark__head .section-title{margin:14px 0 0}
.dark__grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:clamp(34px,5vw,76px);align-items:center}
.dark__demo{position:absolute;inset:0;overflow:hidden;background:#000;cursor:crosshair}
.dark__demo .dkr{position:absolute;inset:0}
.dark__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(24px,3.4vh,36px)}
.dark__steps li{position:relative;padding-left:46px}
.dark__no{position:absolute;left:0;top:1px;font-family:var(--mono);font-size:12px;color:rgb(var(--accent));letter-spacing:0.08em}
.dark__steps h3{margin:0 0 5px;font-size:1.08rem;font-weight:600;letter-spacing:-0.01em;color:rgb(var(--ink-strong))}
.dark__steps p{margin:0;color:rgb(var(--ink-muted));font-size:0.95rem;line-height:1.62}
.dark__brush{margin-top:14px;display:flex;align-items:center;gap:13px}
.dark__base,.dark__zone{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dark__zone{opacity:0;transition:opacity .65s var(--ease)}
.dark__demo.is-zone .dark__zone{opacity:1}
.dark__paint{position:absolute;inset:0;transition:opacity .45s var(--ease)}
.dark__demo.is-zone .dark__paint{opacity:0}
.dark__stroke{position:absolute;left:55%;top:43%;width:0;height:0;animation:dark-brush 6.5s cubic-bezier(.45,0,.55,1) infinite}
.dark__glow{position:absolute;left:50%;top:50%;width:150px;height:130px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(ellipse at center, rgb(255 246 226 / 0.5), transparent 66%);
  mix-blend-mode:screen;filter:blur(7px)}
.dark__cursor{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;border:1.5px solid rgb(255 255 255 / 0.72);box-shadow:0 0 0 1px rgb(0 0 0 / 0.35)}
.dark__cursor::before{content:"";position:absolute;inset:13px;border-radius:50%;border:1px dashed rgb(255 255 255 / 0.5)}
.dark__cursor::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:rgb(var(--accent));transform:translate(-50%,-50%)}
.dark__brush-meta{position:absolute;left:13px;bottom:13px;font-size:10.5px;letter-spacing:0.04em;color:rgb(var(--ink));
  background:rgb(0 0 0 / 0.42);backdrop-filter:blur(4px);padding:5px 9px;border-radius:7px;border:1px solid rgb(255 255 255 / 0.12)}
.dark__zonebtn{position:absolute;top:13px;right:13px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgb(var(--ink));cursor:pointer;
  background:rgb(0 0 0 / 0.42);backdrop-filter:blur(4px);padding:6px 11px;border-radius:8px;
  border:1px solid rgb(255 255 255 / 0.16);transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.dark__zonebtn:hover{border-color:rgb(255 255 255 / 0.3)}
.dark__zonebtn:focus-visible{outline:2px solid rgb(var(--accent) / 0.6);outline-offset:2px}
.dark__zonedot{width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%)}
.dark__zonebtn.is-on{color:rgb(var(--accent));border-color:rgb(var(--accent) / 0.55);background:rgb(var(--accent) / 0.14)}
@keyframes dark-brush{0%{transform:translate(0,0)}25%{transform:translate(-16px,10px)}50%{transform:translate(10px,20px)}75%{transform:translate(20px,6px)}100%{transform:translate(0,0)}}
.dark__demo.is-painting .dark__stroke{animation:none}
@media (prefers-reduced-motion: reduce){.dark__stroke{animation:none}.dark__zone{transition:opacity .3s}}
@media (max-width:820px){.dark__grid{grid-template-columns:1fr;max-width:420px;gap:30px}}

/* ---- TEXT auto-designer card — the type auto-arranges into editorial covers that cycle
   (the "Try another" variant walk); the pieces glide between layouts (positioned in % so the
   moves animate smoothly), the legibility scrim crossfades to follow the headline. ---- */
.td__demo{position:absolute;inset:0;overflow:hidden;background:#0a0a0c}
.td__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.td__grid{position:absolute;inset:15px;z-index:1;pointer-events:none;border:1px solid rgb(255 255 255 / 0.22);background-image:linear-gradient(rgb(255 255 255 / 0.16),rgb(255 255 255 / 0.16)),linear-gradient(rgb(255 255 255 / 0.16),rgb(255 255 255 / 0.16)),linear-gradient(rgb(255 255 255 / 0.16),rgb(255 255 255 / 0.16)),linear-gradient(rgb(255 255 255 / 0.16),rgb(255 255 255 / 0.16));background-size:1px 100%,1px 100%,100% 1px,100% 1px;background-position:33.333% 0,66.666% 0,0 33.333%,0 66.666%;background-repeat:no-repeat;filter:drop-shadow(0 1px 1px rgb(0 0 0 / 0.35))}
.td__kicker,.td__tag,.td__headline{position:absolute;z-index:2}
.td__kicker{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;white-space:nowrap;color:rgb(255 255 255 / 0.94);text-shadow:0 1px 8px rgb(0 0 0 / 0.55);transition:top .6s cubic-bezier(.4,0,.2,1),left .6s cubic-bezier(.4,0,.2,1),width .6s cubic-bezier(.4,0,.2,1)}
.td__headline{margin:0;color:#fff;line-height:0.98;letter-spacing:-0.015em;font-weight:400;text-shadow:0 2px 22px rgb(0 0 0 / 0.5),0 1px 5px rgb(0 0 0 / 0.45);transition:top .6s cubic-bezier(.4,0,.2,1),left .6s cubic-bezier(.4,0,.2,1),width .6s cubic-bezier(.4,0,.2,1),font-size .6s cubic-bezier(.4,0,.2,1)}
.td__tag{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;color:rgb(255 255 255 / 0.8);text-shadow:0 1px 8px rgb(0 0 0 / 0.55);transition:top .6s cubic-bezier(.4,0,.2,1),left .6s cubic-bezier(.4,0,.2,1),width .6s cubic-bezier(.4,0,.2,1)}
.td__demo.is-c1 .td__kicker{top:8%;left:5%;width:40%;text-align:left}
.td__demo.is-c1 .td__headline{top:16%;left:5%;width:61.6%;text-align:left;font-size:clamp(1.7rem,5.2vw,2.45rem)}
.td__demo.is-c1 .td__tag{top:92%;left:5%;width:50%;text-align:left}
.td__demo.is-c2 .td__kicker{top:50%;left:23%;width:50%;text-align:center}
.td__demo.is-c2 .td__headline{top:55%;left:8%;width:84%;text-align:center;font-size:clamp(2rem,6.2vw,2.9rem)}
.td__demo.is-c2 .td__tag{top:73.5%;left:23%;width:50%;text-align:center}
.td__demo.is-c3 .td__kicker{top:5%;left:55%;width:40%;text-align:right}
.td__demo.is-c3 .td__headline{top:63%;left:5%;width:61.6%;text-align:left;font-size:clamp(1.7rem,5.2vw,2.45rem)}
.td__demo.is-c3 .td__tag{top:92%;left:5%;width:40%;text-align:left}
.td__demo.is-c4 .td__kicker{top:9%;left:17.3%;width:61.6%;text-align:center}
.td__demo.is-c4 .td__headline{top:16%;left:5%;width:86.6%;text-align:center;font-size:clamp(2rem,6.2vw,2.9rem)}
.td__demo.is-c4 .td__tag{top:50%;left:17.3%;width:61.6%;text-align:center}
.td__demo.is-c5 .td__kicker{top:56%;left:44%;width:48%;text-align:right}
.td__demo.is-c5 .td__headline{top:63%;left:33.4%;width:58.6%;text-align:right;font-size:clamp(1.7rem,5.2vw,2.45rem)}
.td__demo.is-c5 .td__tag{top:92%;left:44%;width:48%;text-align:right}
.td__demo.is-c6 .td__kicker{top:8%;left:66.6%;width:27%;text-align:right}
.td__demo.is-c6 .td__headline{top:20%;left:5%;width:62%;text-align:left;font-size:clamp(1.45rem,4.4vw,2rem)}
.td__demo.is-c6 .td__tag{top:92%;left:5%;width:45%;text-align:left}
.td__demo.is-c7 .td__kicker{top:60%;left:19.2%;width:61.6%;text-align:center}
.td__demo.is-c7 .td__headline{top:66%;left:19.2%;width:61.6%;text-align:center;font-size:clamp(1.45rem,4.4vw,2rem)}
.td__demo.is-c7 .td__tag{top:91%;left:19.2%;width:61.6%;text-align:center}
.td__demo.is-c8 .td__kicker{top:8%;left:66.6%;width:29.4%;text-align:right}
.td__demo.is-c8 .td__headline{top:16%;left:5%;width:62%;text-align:left;font-size:clamp(2rem,6.2vw,2.9rem)}
.td__demo.is-c8 .td__tag{top:92%;left:66.6%;width:29.4%;text-align:right}
.td__cue{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.5rem;letter-spacing:0.12em;text-transform:uppercase;color:rgb(8 8 10);background:rgb(var(--accent));border:0;padding:5px 9px;border-radius:6px;cursor:pointer;opacity:0.72;-webkit-appearance:none;appearance:none;transition:opacity .35s var(--ease),transform .2s var(--ease)}
.td__cue:hover{opacity:1}
.td__cue:active{transform:scale(0.95)}
.td__cue:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1}
.td__demo.is-flip .td__cue{opacity:1}
.td__cue-ic{font-size:0.72rem;line-height:1}
@media (prefers-reduced-motion: reduce){.td__kicker,.td__headline,.td__tag,.td__cue{transition:none}}

/* ---- before/after WIPE — real dodge & burn captures (drag to compare + reveal the brush mask) ---- */
.ba{position:relative;width:100%;height:100%;overflow:hidden;background:#000;cursor:ew-resize;touch-action:pan-y;user-select:none}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.ba__before{clip-path:inset(0 50% 0 0)}
.ba__mask{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s var(--ease);pointer-events:none;z-index:3}
.ba.show-mask .ba__mask{opacity:1}
.ba__divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgb(255 255 255 / 0.9);transform:translateX(-1px);z-index:4;pointer-events:none;box-shadow:0 0 0 1px rgb(0 0 0 / 0.35)}
.ba__handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgb(8 8 10 / 0.5);border:1.5px solid #fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ba__handle::before,.ba__handle::after{content:"";position:absolute;top:50%;width:0;height:0;border:5px solid transparent;transform:translateY(-50%)}
.ba__handle::before{left:6px;border-right-color:#fff}
.ba__handle::after{right:6px;border-left-color:#fff}
.ba__tag{position:absolute;bottom:12px;z-index:4;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#fff;background:rgb(8 8 10 / 0.5);border:1px solid rgb(255 255 255 / 0.16);padding:5px 9px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.ba__tag--b{left:12px}
.ba__tag--a{right:12px}
.ba__brush{position:absolute;top:12px;right:12px;z-index:5;font-family:var(--mono,monospace);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:#fff;background:rgb(8 8 10 / 0.5);border:1px solid rgb(255 255 255 / 0.18);padding:6px 11px;border-radius:7px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ba__brush.is-on{background:rgb(var(--accent) / 0.16);border-color:rgb(var(--accent) / 0.5);color:rgb(var(--accent))}
.band__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 58px); }
.band__item { border-top: 1px solid rgb(255 255 255 / 0.12); padding-top: 22px; }
.band__n { display: block; font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -0.02em; color: rgb(var(--ink-strong)); }
.band__u { color: rgb(var(--ink-low)); font-size: 0.58em; margin-left: 1px; }
.band__l { margin: 12px 0 0; color: rgb(var(--ink-muted)); font-size: 0.95rem; max-width: 34ch; }

/* ---- cta + footer -------------------------------------------------------- */
/* ---- credibility strip ---- */
.proof { position: relative; z-index: 1; padding: clamp(44px, 7vh, 84px) var(--gutter); border-top: 1px solid rgb(255 255 255 / 0.07); background: rgb(var(--stage)); }
.proof__line { max-width: 1000px; margin: 0 auto; text-align: center; font-size: clamp(11px, 1.3vw, 13px); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink-low)); line-height: 2; }

.cta-sec { position: relative; z-index: 1; padding: clamp(132px, 21vh, 256px) var(--gutter); text-align: center; }
.cta-sec__inner { max-width: 820px; margin: 0 auto; }
.cta-sec__title { margin: 16px 0 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(2.1rem, 5.2vw, 4.4rem); color: rgb(var(--ink-strong)); }
.cta-sec__btn { margin-top: clamp(26px, 4vh, 42px); }
/* bridge for visitors who passed on the launch deal above */
.cta-sec__bridge { margin: 20px auto 26px; max-width: 52ch; font-size: 0.97rem; line-height: 1.6; color: rgb(var(--ink-muted)); }
.cta-sec__bridge b { color: rgb(var(--accent)); font-weight: 600; }

/* Launch offer — focused 2-tier: dominant Lifetime card + slim neutral after-launch panel.
   All selectors scoped under .lxb. */
.lxb{ position:relative; z-index:1; max-width:1140px; margin:0 auto;
  padding:clamp(60px,9vh,112px) var(--gutter); color:rgb(var(--ink));
  border-top:1px solid rgb(var(--hairline) / 0.6); }
.lxb__head{ max-width:920px; margin:0 auto clamp(34px,5vh,52px); }
.lxb__kick{ color:rgb(var(--accent)); margin:0 0 16px; }
.lxb__title{ margin:0 0 18px; font-weight:600; letter-spacing:-0.02em; line-height:1.04;
  font-size:clamp(1.95rem,4vw,2.9rem); color:rgb(var(--ink-strong)); }
.lxb__serif{ color:rgb(var(--ink-muted)); }
.lxb__lede{ margin:0; max-width:56ch; font-size:0.96rem; line-height:1.6; color:rgb(var(--ink-muted)); }
.lxb__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
/* the ladder: three equal full-colour cards, cheapest to forever — lifetime closes on the right
   with the big price + the one filled button, not a greyed-out pair beside a glowing hero */
.lxb__col{ position:relative; display:flex; flex-direction:column;
  background:rgb(var(--card)); border:1px solid rgb(var(--hairline));
  border-radius:16px; padding:26px 24px 24px; }
.lxb__flag{ position:absolute; top:-11px; left:24px; margin:0;
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:rgb(8 8 10);
  background:rgb(var(--accent)); padding:4px 11px; border-radius:6px; }
/* the annual card's standing per-month advantage over monthly (34% = 1 - 19/29);
   unlike the deal flag it survives .lxb--ended */
.lxb__saveflag{ position:absolute; top:-11px; left:24px; margin:0;
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:rgb(8 8 10);
  background:rgb(var(--accent)); padding:4px 11px; border-radius:6px; }
.lxb__colhead{ min-height:132px; box-sizing:border-box; padding-bottom:20px; margin-bottom:18px; border-bottom:1px solid rgb(var(--hairline)); }
.lxb__tier{ margin:0 0 14px; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:rgb(var(--ink-muted)); }
.lxb__tier--hero{ color:rgb(var(--accent)); }
.lxb__amt{ margin:0 0 10px; font-weight:400; line-height:1; font-size:2.2rem; color:rgb(var(--ink-strong)); }
.lxb__amt--hero{ display:flex; align-items:baseline; gap:10px; }
.lxb__big{ font-style:normal; font-size:3.3rem; line-height:0.9; letter-spacing:-0.02em; color:rgb(var(--ink-strong)); }
.lxb__once{ font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:rgb(var(--accent)); }
.lxb__per{ font-size:0.78rem; letter-spacing:0; text-transform:none; color:rgb(var(--ink-low)); }
.lxb__cad{ margin:0; font-size:0.76rem; line-height:1.5; color:rgb(var(--ink-low)); }
.lxb__cad--hero{ color:rgb(var(--ink-muted)); }
.lxb__anchor{ margin:14px 0 0; font-size:0.95rem; line-height:1.5; color:rgb(var(--ink-muted)); }
.lxb__anchor b{ color:rgb(var(--ink-strong)); font-weight:600; }
.lxb__anchor .lxb__anchor-acc{ color:rgb(var(--accent)); }
.lxb__hl{ color:rgb(var(--ink-strong)); font-weight:600; }
.lxb__rows{ list-style:none; margin:0 0 22px; padding:0; }
.lxb__rows li{ display:flex; align-items:flex-start; gap:12px; padding:9px 0;
  font-size:0.82rem; line-height:1.4; color:rgb(var(--ink));
  border-bottom:1px solid rgb(var(--hairline) / 0.45); }
.lxb__rows li:last-child{ border-bottom:0; }
.lxb__ck{ flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%; position:relative; }
.lxb__ck--on{ background:rgb(var(--ink) / 0.1); }
.lxb__ck--on::after{ content:""; position:absolute; left:5px; top:3px; width:4px; height:7px;
  border:solid rgb(var(--ink-muted)); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.lxb__ck--hero{ background:rgb(var(--accent)); }
.lxb__ck--hero::after{ content:""; position:absolute; left:5px; top:3px; width:4px; height:7px;
  border:solid rgb(8 8 10); border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
.lxb__ck--off::after{ content:""; position:absolute; left:3px; top:7px; width:10px; height:1.5px;
  background:rgb(var(--ink-low) / 0.7); }
.lxb__ck--meter{ border:1px solid rgb(var(--ink-low) / 0.6); }
.lxb__ck--meter::after{ content:""; position:absolute; left:7px; top:3px; width:1px; height:5px;
  background:rgb(var(--ink-low)); transform-origin:bottom center; transform:rotate(38deg); }
.lxb__foot{ margin-top:auto; }
.lxb__btn{ width:100%; justify-content:center; margin-top:4px; }
.lxb__ghost{ display:inline-flex; align-items:center; justify-content:center; width:100%;
  box-sizing:border-box; padding:13px 18px; border-radius:999px;
  border:1px solid rgb(var(--hairline)); color:rgb(var(--ink-muted));
  font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; }
.lxb__ghost--dim{ border:0; padding:0; text-transform:none; letter-spacing:0.02em; font-size:0.74rem; color:rgb(var(--ink-low)); }
.lxb__save{ margin:0 0 16px; padding-top:16px; border-top:1px solid rgb(var(--hairline) / 0.5); display:flex; flex-direction:column; gap:5px; text-align:center; }
.lxb__save-lbl{ font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:rgb(var(--ink-low)); }
.lxb__save-row{ font-size:0.86rem; color:rgb(var(--ink-muted)); }
.lxb__save-row s{ color:rgb(var(--ink-low)); margin-right:8px; }
.lxb__save-row em{ font-style:normal; color:rgb(var(--accent)); }
.lxb__fine{ margin:28px 0 0; max-width:64ch; font-size:0.72rem; line-height:1.6; color:rgb(var(--ink-low)); }
/* focused 2-tier layout: dominant lifetime card + slim, neutral after-launch panel */
.lxb__deal{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; max-width:920px; margin:0 auto; }
.lxb__main{ position:relative; display:flex; flex-direction:column; padding:30px 30px 26px; border-radius:18px;
  background:linear-gradient(180deg, rgb(255 151 24 / 0.06), rgb(21 21 25 / 0) 42%), rgb(var(--card));
  border:1px solid rgb(var(--accent) / 0.5);
  box-shadow:0 0 0 1px rgb(255 151 24 / 0.1), 0 26px 64px -34px rgb(255 151 24 / 0.26); }
.lxb__main .lxb__amt--hero{ margin-top:4px; }
.lxb__main .lxb__rows{ margin:18px 0 22px; }
.lxb__after{ align-self:center; display:flex; flex-direction:column; gap:18px;
  padding:30px 26px; border-radius:18px; background:rgb(var(--card)); border:1px solid rgb(var(--hairline)); }
.lxb__after-lbl{ margin:0 0 6px; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:rgb(var(--ink-muted)); }
.lxb__after-amt{ margin:0; display:flex; align-items:baseline; gap:5px; }
.lxb__after-num{ font-size:2.5rem; line-height:1; letter-spacing:-0.01em; color:rgb(var(--ink)); }
.lxb__after-per{ font-size:0.9rem; letter-spacing:0.03em; text-transform:none; color:rgb(var(--ink-muted)); }
.lxb__after-sub{ margin:10px 0 0; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:rgb(var(--ink-muted)); }
.lxb__after-alt{ margin:7px 0 0; font-size:0.84rem; color:rgb(var(--ink-low)); }
.lxb__after-note{ margin:0; font-size:0.84rem; line-height:1.55; color:rgb(var(--ink-muted)); }
.lxb__after-amt + .lxb__after-note{ margin-top:14px; }
@media (max-width:820px){
  .lxb__deal{ grid-template-columns:1fr; }
  .lxb__grid{ grid-template-columns:1fr; }
}

/* after-launch anchor panel (right of the deal) */
.lxb__after-note b{ color:rgb(var(--ink-strong)); font-weight:600; }
.lxb__after-div{ height:1px; background:rgb(var(--hairline) / 0.6); }

/* honest urgency line under the buy button */
.lxb__urgency{ margin:11px 0 0; text-align:center; font-size:0.68rem; line-height:1.5; color:rgb(var(--accent) / 0.88); }
.lxb__urgency b{ color:rgb(var(--accent)); font-weight:600; }

.lxb__urgency--aside{ text-align:left; margin:0; }

/* live countdown at the buy button */
.lxb__count{ margin:0 0 12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 10px;
  padding:9px 14px; border-radius:999px; border:1px solid rgb(var(--accent) / 0.35);
  background:rgb(255 151 24 / 0.07); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; }
.lxb__count-lbl{ color:rgb(var(--ink-muted)); }
.lxb__count-clock{ color:rgb(var(--accent)); font-variant-numeric:tabular-nums; min-width:11ch; text-align:left; }
/* the struck standing price beside the founding price (launch anchor) */
.lxb__was{ font-style:normal; font-size:1.7rem; line-height:1; letter-spacing:-0.01em;
  color:rgb(var(--ink-low)); text-decoration:line-through; text-decoration-thickness:1.5px; }
/* the two rent cards' quiet CTA pins to the bottom so the three cards read as one row */
.lxb__cta{ margin-top:auto; justify-content:center; }

/* honored end state: past the deadline the page flips to the standing price — the deal
   retires, the lifetime tier stays purchasable at $498 (the JS swaps the price text) */
.lxb--ended .lxb__count, .lxb--ended .lxb__flag, .lxb--ended .lxb__was{ display:none; }

/* demoted rent row under the deal */
.lxb__subs{ max-width:920px; margin:20px auto 0; text-align:center;
  font-size:0.82rem; line-height:1.8; color:rgb(var(--ink-low)); }
.lxb__subs a{ color:rgb(var(--ink-muted)); text-decoration:underline; text-underline-offset:3px; }
.lxb__subs a:hover{ color:rgb(var(--ink-strong)); }

/* "Software that listens" — trust band between pricing and the closing CTA */
.listen{ position:relative; z-index:1; text-align:center;
  padding:clamp(64px,10vh,120px) var(--gutter);
  border-top:1px solid rgb(var(--hairline) / 0.6); }
.listen__inner{ max-width:760px; margin:0 auto; }
.listen__title{ margin:14px 0 0; }
.listen__lead{ margin:22px auto 0; max-width:60ch; font-size:1.02rem; line-height:1.62; color:rgb(var(--ink-muted)); }
.listen__sub{ margin:16px 0 0; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:rgb(var(--ink-low)); }
.listen__actions{ margin-top:clamp(24px,3.5vh,36px); display:flex; flex-wrap:wrap; gap:16px 22px;
  align-items:center; justify-content:center; }
.listen__link{ font-size:0.9rem; color:rgb(var(--ink-muted)); text-decoration:underline; text-underline-offset:3px; }
.listen__link:hover{ color:rgb(var(--ink-strong)); }

/* FAQ — accordion of native <details>, hairline rows, +/- mark that closes to a dash */
.faq { position: relative; z-index: 1; padding: clamp(76px, 12vh, 150px) var(--gutter); border-top: 1px solid rgb(255 255 255 / 0.07); background: rgb(var(--stage)); }
.faq__list { max-width: 1080px; margin: 0 auto; border-top: 1px solid rgb(var(--hairline)); }
.faq__item { border-bottom: 1px solid rgb(var(--hairline)); }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(19px, 2.4vh, 27px) 2px; color: rgb(var(--ink)); font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500; letter-spacing: -0.01em; transition: color 0.2s var(--ease); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: rgb(var(--ink-strong)); }
.faq__q:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 4px; border-radius: 4px; }
details[open] .faq__q { color: rgb(var(--ink-strong)); }
.faq__mark { position: relative; width: 15px; height: 15px; flex: none; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; background: rgb(var(--ink-muted));
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease); }
.faq__mark::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq__mark::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
details[open] .faq__mark::before { background: rgb(var(--accent)); }
details[open] .faq__mark::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq__a { padding: 0 2px clamp(20px, 2.6vh, 28px); }
.faq__a p { margin: 0; max-width: 64ch; color: rgb(var(--ink-muted)); font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.65; }
details[open] .faq__a { animation: faqIn 0.38s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { details[open] .faq__a { animation: none; }
  .faq__mark::before, .faq__mark::after { transition: none; } }
.foot { position: relative; z-index: 1; padding: clamp(56px, 8vh, 92px) var(--gutter) clamp(26px, 4vh, 40px); border-top: 1px solid rgb(255 255 255 / 0.08); }
.foot__top { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) 2fr; gap: clamp(32px, 6vw, 100px); }
.foot__brand .nav__brand { display: inline-flex; align-items: center; gap: 11px; }
.foot__tag { margin: 18px 0 0; max-width: 38ch; color: rgb(var(--ink-muted)); font-size: 0.92rem; line-height: 1.62; }
.foot__plat { margin: 14px 0 0; color: rgb(var(--ink-low)); font-size: 0.62rem; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 4vw, 48px); }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.foot__h { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--ink-low)); margin-bottom: 4px; }
.foot__col a { font-size: 0.92rem; color: rgb(var(--ink-muted)); transition: color 0.2s; }
.foot__col a:hover { color: rgb(var(--ink-strong)); }
.foot__soon { font-size: 0.92rem; color: rgb(var(--ink-low)); }
.foot__bar { max-width: 1180px; margin: clamp(40px, 6vh, 64px) auto 0; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.06); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.foot__fine { margin: 0; color: rgb(var(--ink-low)); font-size: 0.62rem; }
.foot__legal { display: flex; gap: 18px; }
.foot__legal a { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--ink-low)); transition: color 0.2s; }
.foot__legal a:hover { color: rgb(var(--ink-strong)); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .monitor__screen { width: 86vw; }
  .hero__title { font-size: clamp(2rem, 9vw, 3.4rem); }
  .feature { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .feature--rev .feature__copy { order: 0; }
  .band__grid { grid-template-columns: 1fr; gap: 6px; }
  .foot__top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) { .foot__cols { grid-template-columns: 1fr 1fr; gap: 26px 20px; } .foot__bar { flex-direction: column; align-items: flex-start; } }
@media (max-width: 600px) { .monitor__frame { padding: 7px; border-radius: 16px; } .monitor__neck { width: 92px; height: 42px; } .monitor__base { width: 168px; } .vgrain { display: none; } }
@media (prefers-reduced-motion: reduce) { [data-beat], [data-reveal], .lede__title .wd { opacity: 1 !important; transform: none !important; filter: none !important; } }
.is-static [data-beat], .is-static [data-reveal], .is-static .lede__title .wd { opacity: 1 !important; transform: none !important; filter: none !important; }

/* ---- feature-card hover lift (both rails) -------------------------------- */
.feat__shot { transition: transform 0.45s var(--ease), border-color 0.3s ease, box-shadow 0.45s var(--ease); }
@media (hover: hover) {
  .feat__card:hover .feat__shot { transform: translateY(-5px); border-color: rgb(255 255 255 / 0.16); box-shadow: 0 28px 60px -30px rgb(0 0 0 / 0.8); }
}
@media (prefers-reduced-motion: reduce) { .feat__shot { transition: none; } .feat__card:hover .feat__shot { transform: none; } }

/* ---- PUSH / PULL — the same frame, developed five ways (real exports) ---- */
.pp { position: relative; z-index: 1; padding: clamp(84px, 14vh, 172px) var(--gutter); background: rgb(var(--stage)); }
.pp__wrap { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.pp__copy { max-width: 500px; }
.pp__copy .section-title { margin: 14px 0 0; }
.pp__sub { margin: 18px 0 0; color: rgb(var(--ink-muted)); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; }
.pp__facts { list-style: none; margin: clamp(22px, 3.2vh, 34px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pp__facts li { position: relative; padding-left: 22px; color: rgb(var(--ink-muted)); font-size: 0.92rem; line-height: 1.5; }
.pp__facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 0 8px rgb(var(--accent) / 0.55); }
.pp__demo { position: relative; }
.pp__demo::before { content: ""; position: absolute; z-index: 0; inset: -10% -7% -14%; background: radial-gradient(58% 52% at 50% 40%, rgb(var(--accent) / 0.11), transparent 72%); filter: blur(6px); pointer-events: none; }
.pp__stage { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgb(255 255 255 / 0.10); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 50px 110px -45px rgb(0 0 0 / 0.95); }
.pp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.5s var(--ease); -webkit-user-drag: none; user-select: none; }
.pp__img[data-stop="-2"] { opacity: 1; }   /* permanent base of the crossfade stack */
.pp__badge, .pp__ei { position: absolute; top: 14px; z-index: 6; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: rgb(8 8 10 / 0.42); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgb(255 255 255 / 0.14); }
.pp__badge { left: 14px; color: rgb(255 255 255 / 0.92); }
.pp__ei { right: 14px; color: rgb(var(--accent)); font-variant-numeric: tabular-nums; }
.pp__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 40px clamp(16px, 3vw, 26px) 16px; background: linear-gradient(to top, rgb(5 5 7 / 0.86), rgb(5 5 7 / 0.46) 52%, rgb(5 5 7 / 0)); }
.pp__bar-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.pp__bar .pp__lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255 255 255 / 0.58); }
.pp__bar .pp__val { font-size: clamp(15px, 1.8vw, 18px); color: #fff; font-variant-numeric: tabular-nums; }
.pp__dial { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.22); outline: none; cursor: grab; touch-action: none; }
.pp__dial::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--accent)); border: 2px solid #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 0.6); cursor: grab; }
.pp__dial::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 2px 10px rgb(0 0 0 / 0.6); cursor: grab; }
.pp__dial:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 3px; border-radius: 999px; }
.pp__ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 9.5px; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.4); }
/* push/pull as a darkroom feature card: the stage fills the 4:5 shot (the section chrome is dropped) */
.feat__shot .pp__stage--card { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; border: 0; box-shadow: none; }
@media (max-width: 820px) {
  .pp__wrap { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .pp__copy { max-width: none; }
  .pp__demo { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .pp__img { transition: opacity 0.2s linear; } }

/* ---- COMPOSITES card — contact sheet / carousel / split ------------------ */
.cs { position: absolute; inset: 0; background: rgb(var(--window)); overflow: hidden; }
.cs__pane { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease); }
.cs__pane.is-on { opacity: 1; pointer-events: auto; }
.cs__pane--contact { background: #0d0d10; padding: 34px 16px 56px; }
.cs__strip { position: absolute; top: 12px; left: 16px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--ink-low)); }
.cs__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 10px; height: 100%; }
.cs__f { position: relative; margin: 0; border-radius: 3px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07); }
.cs__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs__f figcaption { position: absolute; right: 5px; bottom: 3px; font-size: 8px; letter-spacing: 0.12em; color: rgb(var(--accent) / 0.9); text-shadow: 0 1px 4px rgb(0 0 0 / 0.8); }
.cs__pane--carousel { background: rgb(var(--window)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px 0 56px; }
.cs__slides { display: flex; gap: 10px; width: 100%; padding-left: 14%; overflow: hidden; }
.cs__slides img { flex: 0 0 72%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08); }
.cs__dots { display: flex; gap: 5px; }
.cs__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / 0.25); }
.cs__dots i.on { background: rgb(var(--ink-strong)); }
.cs__pane--split { background: #0d0d10; display: flex; align-items: center; padding: 0 14px 44px; }
.cs__split { display: flex; gap: 8px; width: 100%; height: 46%; }
.cs__split span { flex: 1; border-radius: 6px; background-size: 300% 100%; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
.cs__chips { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; gap: 6px; justify-content: center; }
.cs__chip { font-family: var(--mono); font-size: 10.5px; line-height: 1; padding: 6px 10px; border-radius: 7px; cursor: pointer; background: rgb(var(--card)); border: 1px solid rgb(var(--hairline)); color: rgb(var(--ink-muted)); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.cs__chip:hover { color: rgb(var(--ink)); }
.cs__chip:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 2px; }
.cs__chip.is-on { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.5); background: rgb(var(--accent) / 0.1); }
@media (prefers-reduced-motion: reduce) { .cs__pane { transition: none; } }

/* ---- SCOPES card — waveform / parade / vectorscope, computed live -------- */
.scp { position: absolute; inset: 0; display: flex; flex-direction: column; background: rgb(var(--window)); }
.scp__photo { position: relative; flex: 0 0 44%; min-height: 0; overflow: hidden; }
.scp__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scp__badge { position: absolute; right: 10px; top: calc(44% - 30px); z-index: 3; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); background: rgb(8 8 10 / 0.55); border: 1px solid rgb(255 255 255 / 0.14); padding: 4px 8px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.scp__panel { position: relative; flex: 1 1 auto; min-height: 0; background: #0b0b0e; border-top: 1px solid rgb(255 255 255 / 0.08); }
.scp__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scp__chips { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 6px; justify-content: center; z-index: 2; }
.scp__chip { font-family: var(--mono); font-size: 10.5px; line-height: 1; padding: 6px 10px; border-radius: 7px; cursor: pointer; background: rgb(var(--card)); border: 1px solid rgb(var(--hairline)); color: rgb(var(--ink-muted)); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.scp__chip:hover { color: rgb(var(--ink)); }
.scp__chip:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 2px; }
.scp__chip.is-on { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.5); background: rgb(var(--accent) / 0.1); }

/* ---- COLOR WHEELS card — lift / gamma / gain ----------------------------- */
.cw { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 20px 0; background: rgb(var(--window)); }
.cw__unit { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-height: 0; }
.cw__wheel { position: relative; flex: none; width: clamp(78px, 22%, 104px); aspect-ratio: 1; border-radius: 50%; cursor: crosshair; touch-action: none;
  background: conic-gradient(#e05252, #e0a052, #d4cf5a, #6fce85, #58bfd8, #6672e0, #c465d6, #e05252);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 26px -14px rgb(0 0 0 / 0.8); }
.cw__wheel::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(closest-side, #101014 62%, #17171c 100%); }
.cw__wheel::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.07)), linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.07));
  background-size: 100% 1px, 1px 100%; background-position: 0 50%, 50% 0; background-repeat: no-repeat; }
.cw__dot { position: absolute; left: 50%; top: 50%; z-index: 2; width: 11px; height: 11px; border-radius: 50%; background: rgb(240 241 245 / 0.95); border: 1.5px solid rgb(8 8 10 / 0.6); box-shadow: 0 0 8px rgb(0 0 0 / 0.6); transform: translate(-50%, -50%); pointer-events: none; }
.cw__meta { display: flex; flex-direction: column; gap: 5px; }
.cw__lbl { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--ink)); }
.cw__ro { font-size: 10px; letter-spacing: 0.06em; color: rgb(var(--accent)); font-variant-numeric: tabular-nums; }
.cw__foot { flex: none; padding: 12px 0 14px; border-top: 1px solid rgb(var(--hairline)); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--ink-low)); text-align: center; }

/* ---- LENS CORRECTION card — distorted grid straightens ------------------- */
.lens { position: absolute; inset: 0; background: #0c0c0f; overflow: hidden; }
.lens__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lens__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lens__vig { position: absolute; inset: 0; pointer-events: none; opacity: var(--a, 0); transition: opacity 0.2s linear;
  background: radial-gradient(75% 75% at 50% 50%, transparent 46%, rgb(0 0 0 / 0.62) 100%); }
.lens__badge { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--ink)); background: rgb(0 0 0 / 0.45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 6px 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.14); opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.lens.is-matched .lens__badge { opacity: 1; transform: none; }
.lens__dotp { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 0 8px rgb(var(--accent) / 0.8); }
.lens__btn { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgb(8 8 10 / 0.55); border: 1px solid rgb(255 255 255 / 0.18); padding: 6px 11px; border-radius: 7px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.lens__btn:hover { border-color: rgb(255 255 255 / 0.34); }
.lens__btn:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 2px; }
.lens__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- LIBRARY card — cull, star, filter ----------------------------------- */
.libx { position: absolute; inset: 0; display: flex; flex-direction: column; background: rgb(var(--window)); }
.libx__bar { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid rgb(var(--hairline)); font-size: 10px; letter-spacing: 0.05em; }
.libx__path { color: rgb(var(--ink-muted)); }
.libx__count { color: rgb(var(--accent)); font-variant-numeric: tabular-nums; }
.libx__chips { flex: none; display: flex; gap: 6px; padding: 10px 14px; }
.libx__chip { font-family: var(--mono); font-size: 10.5px; line-height: 1; padding: 5px 10px; border-radius: 7px; cursor: pointer; background: rgb(var(--card)); border: 1px solid rgb(var(--hairline)); color: rgb(var(--ink-muted)); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.libx__chip:hover { color: rgb(var(--ink)); }
.libx__chip:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 2px; }
.libx__chip.is-on { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.5); background: rgb(var(--accent) / 0.1); }
.libx__grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 7px; padding: 0 14px 14px; }
.libx__t { position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06); transition: opacity 0.3s var(--ease); }
.libx__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.libx__t.is-hide { display: none; }
.libx__raw { position: absolute; top: 5px; left: 5px; font-size: 7.5px; letter-spacing: 0.12em; padding: 2px 5px; border-radius: 4px; color: rgb(8 8 10); background: rgb(var(--accent) / 0.92); }
.libx__stars { position: absolute; left: 6px; bottom: 4px; font-size: 9px; letter-spacing: 0.08em; color: #ffd77a; text-shadow: 0 1px 4px rgb(0 0 0 / 0.85); }
@media (max-width: 600px) { .cw__wheel { width: clamp(64px, 20%, 84px); } }