/* ── Self-hosted fonts ──────────────────────────────────────────────
   Downloaded from Google Fonts (all four families are OFL) and served
   from our own origin. No visitor request reaches fonts.googleapis.com
   or fonts.gstatic.com — the site must not leak visitor IPs to a third
   party when the product's whole pitch is that it collects nothing.
   To refresh: re-download the woff2 files, keep the unicode-ranges. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Coconat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/coconat-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/geist-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/geist-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-mono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-mono-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-mono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================
   Luz Photo — marketing page
   Flat white with product imagery and supplied vector wordmarks.
   ============================================================ */

:root {
  --bg:        #F5F5F5;
  --ink:       #0a0a0a;   /* near-black */
  --ink-soft:  #555555;
  --ink-faint: #8c8c8c;
  --line:      rgba(10, 10, 10, 0.12);
  --line-2:    rgba(10, 10, 10, 0.06);

  /* app-window chrome — exact values from the real Luz Photo app (light) */
  --app-paper:  #f6f5f4;            /* main grid area (flush) */
  --app-bar:    #f2f0ec;            /* toolbar (light, flush across the top) */
  --app-side:   #fcfcfc;            /* sidebar (flush, full height) */
  --app-tile:   #e7e6e3;           /* grid tile placeholder (.905/.901/.892) */
  --app-ink:    #1d1d1f;           /* .primary (near-black) */
  --app-soft:   #86868b;           /* .secondary (system gray) */
  --app-line:   rgba(0, 0, 0, 0.08);
  --app-chip:   rgba(0, 0, 0, 0.08);   /* unselected pill fill (.primary 8%) */
  --app-blue:   #007aff;           /* macOS accent */
  --app-blue-bg:rgba(0, 122, 255, 0.14);

  --serif: "Instrument Serif", Georgia, serif;
  --fat:   "Coconat", Georgia, serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* page frame */
  --wrap:    1240px;                    /* content column */
  --gut:     clamp(28px, 6vw, 88px);    /* side margin */
  --section: clamp(96px, 11vw, 168px);  /* space under each section */
  --hero-type-size: 80px;
}

.theme-charcoal {
  --bg:        #2a2a2a;
  --ink:       #ffffff;
  --ink-soft:  #d0d0d0;
  --ink-faint: #a8a8a8;
  --line:      rgba(255, 255, 255, .18);
  --line-2:    rgba(255, 255, 255, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* visually hidden, still read by assistive tech (no visual footprint) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: visible;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

::selection { background: var(--ink); color: var(--bg); }

a { color: inherit; text-decoration: none; }
em { font-style: italic; }
/* ───────── Header ───────── */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  /* same centered max-width + gut as .hero-copy and every section below it —
     plain edge-to-edge --gut padding drifts from that on wide viewports,
     where the content column is centered instead of flush to the edge */
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 34px) var(--gut);
}
/* The supplied horizontal wordmark anchors the left; actions sit right. */
.logo {
  order: 1;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  transition: opacity .25s var(--ease);
}
.logo:hover { opacity: .68; }
.logo-mark { display: none; }
.logo-image { display: block; width: auto; height: 40px; }
.theme-charcoal .logo-image { filter: brightness(0) invert(1); }
.theme-charcoal .footer-wordmark { filter: none; }
.site-nav {
  --nav-glass-inset: 10px 14px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  order: 2;
  display: flex; align-items: center; gap: 6px;
  background: rgba(224, 226, 228, .30);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 100px;
  /* Symmetric: the bordered Download pill is the only child now. The old
     asymmetric 18px left was breathing room for the bare GitHub text link
     that used to sit here — with that gone it just reads as dead space. */
  padding: 18px 22px;
  box-shadow: 0 12px 28px rgba(18, 18, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(26px) saturate(.78);
  backdrop-filter: blur(26px) saturate(.78);
  margin-right: -8px;
}
.site-nav::before,
.site-nav::after {
  content: "";
  position: absolute;
  inset: var(--nav-glass-inset);
  border-radius: inherit;
  pointer-events: none;
}
.site-nav::before {
  z-index: 0;
  background: url("assets/demos/stage-library.webp") 50% 62% / cover;
  opacity: .62;
  filter: saturate(.68) brightness(.96);
  scale: 1.045;
}
.site-nav::after {
  z-index: 1;
  background: transparent;
}
.site-nav > a { position: relative; z-index: 2; }
/* App Store button — the header and the call under the screenshots share it */
.btn-appstore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(224, 226, 228, .30);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(18, 18, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(26px) saturate(.78);
  backdrop-filter: blur(26px) saturate(.78);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.btn-appstore:hover { opacity: 1; }
.btn-appstore svg { flex: none; }

/* larger variant for the call under the screenshots */
.btn-appstore.lg { padding: 13px 24px 13px 21px; font-size: 15.5px; gap: 10px; }

/* Guide button beside the App Store button — used by the header on every
   page, so it lives here rather than in info.css. Same pill shape as
   .btn-appstore, just grey instead of ink. */
.btn-guide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(10, 10, 10, .06);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.btn-guide svg { flex: none; }
.btn-guide:hover { opacity: 1; }
.btn-guide[aria-current="page"] { background: rgba(10, 10, 10, .1); font-weight: 600; }

/* Keep the library image inside the header container while the Guide control
   remains a bright, frosted layer above it. */
.site-nav .btn-guide,
.site-nav .btn-guide[aria-current="page"] {
  border: 1px solid rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 8px 20px rgba(18, 18, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(18px) saturate(.8);
  backdrop-filter: blur(18px) saturate(.8);
}
.site-nav .btn-guide:hover {
  background: rgba(255, 255, 255, .82);
}
.site-nav .btn-appstore:hover {
  border-color: rgba(205, 104, 84, .42);
  background: rgba(205, 104, 84, .22);
  color: #fff;
}
.site-nav .btn-appstore {
  border-color: rgba(0, 0, 0, .72);
  background: #0a0a0a;
  color: #fff;
}

.theme-charcoal .site-nav {
  background: #f2f1ef;
}
.theme-charcoal .btn-appstore { background: #fff; color: #181818; }
.theme-charcoal .btn-appstore:hover { background: #e9e9e9; color: #181818; }
.theme-charcoal .btn-guide { background: #202124; color: #fff; }
.theme-charcoal .btn-guide:hover { background: #35363a; color: #fff; }
.theme-charcoal .btn-guide[aria-current="page"] { background: rgba(255,255,255,.14); }

/* Feedback — deliberately plain and quick to complete. */
.feedback-page { position: relative; isolation: isolate; min-height: 100vh; color: var(--ink); overflow-x: hidden; background-color: #f5f5f5; background-image: linear-gradient(to right, rgba(18,18,18,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(18,18,18,.05) 1px, transparent 1px); background-size: 20px 20px; }
.feedback-main { max-width: var(--wrap); margin: 0 auto; padding: clamp(76px, 10vw, 132px) var(--gut) 80px; }
.feedback-heading { margin-bottom: 42px; }
.feedback-eyebrow { margin: 0 0 13px; color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.feedback-heading h1 { margin: 0; }
.feedback-intro { max-width: 56ch; margin: 10px 0 0; color: var(--ink); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; }
.feedback-form { width: min(100%, 520px); padding: clamp(22px, 3vw, 30px); border: 1px solid rgba(255,255,255,.78); border-radius: 18px; background: rgba(224,226,228,.30); box-shadow: 0 24px 58px rgba(18,18,18,.13), inset 0 1px 0 rgba(255,255,255,.55); -webkit-backdrop-filter: blur(26px) saturate(.78); backdrop-filter: blur(26px) saturate(.78); }
.feedback-field { display: grid; gap: 8px; margin: 0 0 22px; }.feedback-field label { font-size: 13px; font-weight: 500; }
.feedback-field input, .feedback-field select, .feedback-field textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(10,10,10,.18); border-radius: 8px; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--font-sans); padding: 11px 12px; box-shadow: inset 0 1px 1px rgba(0,0,0,.03); }
.feedback-field textarea { resize: vertical; min-height: 130px; }.feedback-field input:focus, .feedback-field select:focus, .feedback-field textarea:focus { outline: 3px solid rgba(0,99,219,.26); outline-offset: 1px; border-color: #0063db; }
.feedback-note { margin: 2px 0 22px; color: var(--ink); font-size: 12px; line-height: 1.5; }.feedback-error { margin: 0 0 22px; border-left: 3px solid #bb3434; background: #fff2f2; color: #762121; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.feedback-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; border: 0; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; font: 500 14px/1 var(--font-sans); padding: 0 20px; text-decoration: none; }.feedback-submit:hover { background: #363636; }
.feedback-honeypot { position: absolute; left: -9999px; }
.feedback-thanks { text-align: center; }
.feedback-thanks .feedback-intro { margin-inline: auto; }
@media (max-width: 600px) { .feedback-main { padding: 62px 28px 70px; } }

/* Legal link row above the full-width footer artwork. */
.docs-footer {
  padding: 30px var(--gut) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
}
.docs-footer a {
  font-size: 13px;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.docs-footer a:hover { color: var(--ink); }

/* ───────── Hero ───────── */
.hero {
  --hero-pad: clamp(16px, 3vw, 44px);
  position: relative;
  z-index: 6;
  min-height: 0;
  isolation: isolate;
  background: var(--bg);
  overflow: visible;
  max-width: 1440px;
  margin: 0 auto;
  padding: 104px var(--hero-pad) var(--section);
}

/* The supplied stacked MUSE artwork becomes a mask for an overlapping photo
   collage, so the page closes with the product's subject inside its name. */
.site-footer {
  width: 100%;
  margin-top: calc(clamp(-160px, -12vw, -70px) - 50px);
  padding: 0;
  overflow: hidden;
}
.footer-wordmark {
  position: relative;
  display: block;
  width: 108%;
  aspect-ratio: 1393 / 675;
  max-width: none;
  margin-left: -4%;
  overflow: hidden;
  background: #555;
  -webkit-mask-image: url("assets/luz2.svg?v=20260805a");
  mask-image: url("assets/luz2.svg?v=20260805a");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: translateY(calc(20% + 40px));
}
.footer-wordmark img {
  position: absolute;
  top: -12%;
  width: 30%;
  height: 124%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
}
.footer-wordmark img:nth-child(1) { left: -4%; transform: rotate(-7deg) scale(1.05); }
.footer-wordmark img:nth-child(2) { left: 14%; transform: rotate(5deg) scale(1.08); }
.footer-wordmark img:nth-child(3) { left: 32%; transform: rotate(-4deg) scale(1.06); }
.footer-wordmark img:nth-child(4) { left: 50%; transform: rotate(6deg) scale(1.08); }
.footer-wordmark img:nth-child(5) { left: 68%; transform: rotate(-5deg) scale(1.07); }
.footer-wordmark img:nth-child(6) { left: 86%; transform: rotate(4deg) scale(1.08); }
.footer-wordmark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 42, 42, .38);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Sections are simply present — there is no scroll reveal. The class is kept
   only so the markup does not need rewriting if one is ever wanted again. */

/* fake-link toast */
.fake-toast {
  position: fixed; z-index: 100; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; font-family: var(--sans); font-size: 12.5px;
  padding: 11px 20px; border-radius: 100px; pointer-events: none;
  opacity: 0; transition: opacity .35s, transform .35s var(--ease);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.35);
}
.theme-charcoal .fake-toast { background: #3a3a3a; color: var(--ink); }
.fake-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───────── Hero ───────── */
.hero-collage {
  --carousel-shift: 200px;
  position: relative;
  min-height: 1100px;
  overflow: visible;
  isolation: isolate;
  background: #000;
}
.hero-collage::after {
  content: "";
  position: absolute;
  inset: 0 calc(-2 * var(--carousel-shift)) calc(-1 * var(--section)) 0;
  z-index: 3;
  background: var(--bg);
  mix-blend-mode: lighten;
  pointer-events: none;
}
.hero-content {
  position: absolute;
  top: 50px;
  left: calc(
    max(0px, calc((100vw - var(--wrap)) / 2)) + var(--gut)
    - max(0px, calc((100vw - 1440px) / 2)) - var(--hero-pad)
  );
  width: min(72%, 940px);
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: left;
  color: var(--ink);
  mix-blend-mode: difference;
}
.hero-eyebrow {
  margin-bottom: 70px;
  font-family: var(--fat);
  font-size: var(--hero-type-size);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: inherit;
}
.hero-eyebrow span { display: block; }
.hero-lede {
  color: inherit;
}
.hero-lede span { display: block; }
.hero-lede span:nth-child(1) { transform: translateX(50px); }
.hero-lede span:nth-child(2),
.hero-lede span:nth-child(3) { width: 6.5em; text-align: right; }
.hero-lede span:nth-child(4) { transform: translateX(50px); }
.hero-app-card {
  --card-pad: clamp(10px, 1.35vw, 14px);
  position: relative;
  z-index: 4;
  display: block;
  width: min(100%, 280px);
  aspect-ratio: 1400 / 872;
  margin: 22px 0 0 50px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #f2f1ef;
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .75);
  pointer-events: auto;
  isolation: isolate;
}
.hero-app-card::before,
.hero-app-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-app-card::before {
  z-index: 0;
  background: url("assets/demos/stage-library.webp") 50% 62% / cover;
  opacity: .62;
  filter: saturate(.68) brightness(.96);
  scale: 1.045;
}
.hero-app-card::after {
  z-index: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
}
.hero-app-window {
  position: absolute;
  z-index: 2;
  inset: var(--card-pad);
  overflow: hidden;
  border-radius: 8px;
  background: #f7f7f7;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}
.hero-app-window img {
  position: absolute;
  top: -5.95%;
  left: -5.12%;
  display: block;
  width: 112.75%;
  max-width: none;
  height: auto;
  transition: transform .45s var(--ease);
}
.hero-app-card-arrow {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: #168da2;
  box-shadow: 0 7px 24px rgba(0, 0, 0, .24);
  transition: transform .25s var(--ease), background-color .25s ease;
}
.hero-app-card-arrow svg { width: 17px; height: 17px; }
.hero-app-card:hover .hero-app-window img { transform: scale(1.025); }
.hero-app-card:hover .hero-app-card-arrow {
  transform: translate(2px, -2px);
  background: #0f7488;
}
.hero-app-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.hero-carousel {
  position: absolute;
  inset: -50vh calc(-2 * var(--carousel-shift)) -50vh 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  cursor: grab;
  transition: opacity .35s ease;
}
.hero-carousel.is-ready { opacity: 1; pointer-events: auto; }
.hero-carousel:active { cursor: grabbing; }
.hero-carousel-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel { transition: none; }
}

/* Feature media rises into view; copy, hero media, and footer remain still. */
.feat .media-reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .8s ease, transform .8s var(--ease);
  will-change: opacity, transform;
}
.feat .media-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ───────── Feature sections — one pattern, used by all seven ───────── */
.feat {
  position: relative; z-index: 5;
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gut) var(--section);
}
.feat-head { max-width: 700px; margin-bottom: 44px; }
.feat-head.center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
/* #edit and #share both go straight from centered copy into a full-width
   screenshot — the generic 44px reads as too much air above an image this
   large, unlike the demo-grid sections it also serves. */
#edit .feat-head, #share .feat-head { margin-bottom: 24px; }
#edit .feat-head.center,
#share .feat-head.center {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.feat-label {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Muted color washes keep the labels distinct against the charcoal field. */
#browse .duo-col:nth-child(1) .feat-label { background: rgba(87, 139, 215, .18); border-color: rgba(124, 169, 235, .42); }
#browse .duo-col:nth-child(2) .feat-label { background: rgba(205, 104, 84, .18); border-color: rgba(235, 141, 122, .42); }
#edit .feat-label    { background: rgba(201, 143, 62, .18); border-color: rgba(235, 179, 100, .42); }
#move .feat-label    { background: rgba(190, 82, 130, .18); border-color: rgba(226, 125, 169, .42); }
#private .feat-label { background: rgba(129, 91, 190, .18); border-color: rgba(166, 128, 224, .42); }
#share .feat-label   { background: rgba(54, 145, 123, .18); border-color: rgba(91, 188, 165, .42); }
.feat-head h2 {
  font-family: var(--fat);
  font-weight: 400;
  font-size: clamp(26px, 3.1vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 16px;
  text-wrap: balance;
}
.feat-head p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}

/* two feature columns sharing one row */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); }
.duo-col .feat-head { max-width: none; margin-bottom: 26px; }
.duo-col .feat-head p { font-size: 15.5px; }

/* the three cards */
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.demo {
  padding: 0 0 4px;
  background: none;
}
/* The first two product stories and the privacy pair sit inside a single
   frosted surface; their existing interactive demo panels remain unchanged. */
#browse .product-demo,
#private .product-demo {
  padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(224, 226, 228, .30);
  box-shadow: 0 24px 58px rgba(18, 18, 18, .13), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(26px) saturate(.78);
  backdrop-filter: blur(26px) saturate(.78);
}
#browse .product-demo .demo-body,
#private .product-demo .demo-body {
  padding: 18px 2px 2px;
}
.demo-stage {
  position: relative;
  height: 192px;
  border-radius: 11px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #f2f1ef 42%, #d9d8d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
/* just a corner of that section's pill color, layered over the original grey
   wash so the opposite corner keeps its depth instead of going flat white */
#browse .duo-col:nth-child(1) .demo-stage { background: radial-gradient(78% 65% at 12% 8%, #dce8fb 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#browse .duo-col:nth-child(2) .demo-stage { background: radial-gradient(78% 65% at 12% 8%, #fbe4e0 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#edit .demo-stage    { background: radial-gradient(78% 65% at 12% 8%, #fdf1e0 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#move .demo-stage    { background: radial-gradient(78% 65% at 12% 8%, #fbe4ee 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#private .demo-stage { background: radial-gradient(78% 65% at 12% 8%, #ece3fb 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#share .demo-stage   { background: radial-gradient(78% 65% at 12% 8%, #d9f2ec 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
.demo-body { padding: 18px 2px 0; }
.demo-body h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.demo-body p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.58;
  color: var(--ink);
}
.feature-points {
  display: grid;
  gap: 6px;
  padding-left: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.48;
  color: var(--ink);
}
.feature-points li {
  position: relative;
  padding-left: 1.25em;
}
.feature-points li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}

/* quiet, text-only feature notes that follow a section's main image or heading */
.text-features {
  display: grid;
  gap: clamp(34px, 4.5vw, 64px);
  margin-top: clamp(42px, 5vw, 72px);
}
.text-features-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.text-features-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.text-feature {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.text-feature h3 {
  max-width: 13ch;
  margin-bottom: 12px;
  font-family: var(--fat);
  font-size: clamp(25px, 2.5vw, 34px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
.text-feature p {
  max-width: 43ch;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}
.share-text-features { margin-top: clamp(48px, 6vw, 88px); }
.text-feature-wide { grid-column: 1 / -1; }
.text-feature-wide p { max-width: 58ch; }

/* a screenshot shown full width inside a section */
.feat-shot { margin: 0 0 20px; border-radius: 14px; overflow: hidden; }
.feat-shot img { display: block; width: 100%; height: auto; }
/* breaks out of .feat's narrower 1240px column to match the showcase image's
   own margins at the top of the page — same box (1440px, same side padding),
   centered on the viewport rather than on the section it sits in */
.feat-shot.wide {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1440px;
  padding: 0 clamp(16px, 3vw, 44px);
  box-sizing: border-box;
}
/* The editor and sharing screenshots belong to their sections rather than
   breaking out to the viewport, so they follow the same side gutters as every
   other feature. */
#edit .feat-shot.wide,
#share .feat-shot.wide {
  width: calc(100% + 112px);
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  padding: 0;
}
@media (max-width: 760px) {
  #edit .feat-shot.wide,
  #share .feat-shot.wide {
    width: calc(100% + 12vw - 20px);
  }
}
#share .share-showcase {
  aspect-ratio: 2392 / 1608;
}
#share .share-showcase img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: share-grid-cycle 10s ease-in-out infinite;
}
#share .share-showcase img:nth-child(2) { animation-name: share-detail-cycle; }
@keyframes share-grid-cycle {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes share-detail-cycle {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #share .share-showcase img { animation: none; }
  #share .share-showcase img:first-child { opacity: 1; }
  #share .share-showcase img:nth-child(2) { opacity: 0; }
}

/* mini-UI primitives, drawn from the real app's palette */
.mini { font-family: var(--sans); color: var(--app-ink); }
.mini-panel {
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 6px 18px rgba(0,0,0,.07);
  padding: 12px 13px;
  width: 100%;
}
.mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--app-chip);
  font-size: 11.5px;
  color: var(--app-ink);
}
.mini-chip.on { background: var(--app-ink); color: #fff; }
.mini-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--app-ink);
  text-transform: uppercase;
}

/* ───────── Code-built product demos ─────────
   These are small working views of Luz Photo, not generic diagrams. They reuse the
   app's visual grammar: macOS window chrome, raised gray inspector cards,
   uppercase section labels, native blue selection, and quiet compact type. */
.product-demo .demo-stage {
  --stage-x: 0px;
  --stage-y: 0px;
  height: 280px;
  padding: 20px;
  isolation: isolate;
}
.product-demo .demo-stage::before,
.product-demo .demo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.product-demo .demo-stage::before {
  z-index: -2;
  background-image: var(--demo-backdrop);
  background-position: var(--demo-position, 50% 50%);
  background-size: cover;
  opacity: .62;
  filter: saturate(.68) brightness(.96);
  scale: 1.045;
  translate: var(--stage-x) var(--stage-y);
  transition: translate .8s var(--ease), filter .5s ease;
  will-change: translate;
}
.product-demo .demo-stage::after {
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
}
.product-demo .luz-photo-ui { z-index: 1; }

[data-demo="library"] { --demo-backdrop: url("assets/demos/stage-library.webp"); --demo-position: 50% 62%; }
[data-demo="analysis"] { --demo-backdrop: url("assets/demos/stage-analysis.webp"); --demo-position: 50% 44%; }
[data-demo="histogram"] { --demo-backdrop: url("assets/demos/stage-histogram.webp"); --demo-position: 50% 42%; }
[data-demo="versions"] { --demo-backdrop: url("assets/demos/stage-versions.webp"); --demo-position: 50% 48%; }
[data-demo="curve"] { --demo-backdrop: url("assets/demos/stage-curve.webp"); --demo-position: 50% 40%; }
[data-demo="import"] { --demo-backdrop: url("assets/demos/stage-import.webp"); --demo-position: 50% 48%; }
[data-demo="export"] { --demo-backdrop: url("assets/demos/stage-export.webp"); --demo-position: 50% 42%; }
[data-demo="pdf"] { --demo-backdrop: url("assets/demos/stage-pdf.webp"); --demo-position: 50% 50%; }
[data-demo="publish"] { --demo-backdrop: url("assets/demos/stage-publish.webp"); --demo-position: 50% 48%; }
[data-demo="share-page"] { --demo-backdrop: url("assets/demos/stage-share.webp"); --demo-position: 50% 52%; }
[data-demo="verify"] { --demo-backdrop: url("assets/demos/stage-verify.webp"); --demo-position: 50% 42%; }
[data-demo="privacy"] { --demo-backdrop: url("assets/demos/stage-privacy.webp"); --demo-position: 50% 48%; }
[data-demo="folders"] { --demo-backdrop: url("assets/demos/stage-folders.webp"); --demo-position: 50% 52%; }
[data-demo="backup"] { --demo-backdrop: url("assets/demos/stage-backup.webp"); --demo-position: 50% 48%; }

.duo .product-demo .demo-stage { height: 304px; }
.luz-photo-ui,
.luz-photo-ui * { box-sizing: border-box; }
.luz-photo-ui {
  --ui-blue: #3478d8;
  --ui-paper: #f7f7f7;
  --ui-panel: #ececec;
  --ui-line: rgba(0, 0, 0, .09);
  --ui-muted: #737373;
  position: relative;
  width: min(100%, 340px);
  color: #222;
  background: rgba(250, 250, 250, .96);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .10), 0 18px 36px -18px rgba(0, 0, 0, .32);
  overflow: hidden;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
}
.luz-photo-ui button,
.luz-photo-ui input { font: inherit; }
.luz-photo-ui button {
  appearance: none;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  letter-spacing: 0;
}
.luz-photo-ui button:focus-visible,
.luz-photo-ui input:focus-visible {
  outline: 2px solid var(--ui-blue);
  outline-offset: 1px;
}
.ui-titlebar {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--ui-line);
}
.traffic { display: flex; gap: 4px; flex: none; }
.traffic i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.traffic i:nth-child(1) { background: #ff5f57; }
.traffic i:nth-child(2) { background: #febc2e; }
.traffic i:nth-child(3) { background: #28c840; }
.ui-toolbar { display: flex; gap: 4px; margin-left: auto; }
.ui-toolbar span,
.view-mode {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ededed;
  color: #555;
  white-space: nowrap;
}
.view-mode {
  position: absolute;
  left: 50%;
  gap: 2px;
  padding: 2px;
  transform: translateX(-50%);
}
.view-mode > span,
.view-mode > b {
  min-width: 42px;
  height: 16px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 450;
}
.view-mode > b {
  color: #303030;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .13);
}
.ui-search {
  width: 112px;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: #777;
  background: #ededed;
  white-space: nowrap;
  overflow: hidden;
}
.panel-title,
.modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-title b,
.luz-photo-ui label,
.ui-inspector section > b,
.privacy-ui > span {
  font-size: 7.5px;
  font-weight: 650;
  letter-spacing: .08em;
  color: #626262;
}
.panel-title span,
.modal-heading button {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .07);
  font-size: 11px;
}
.ui-action,
.primary-action {
  min-height: 23px;
  padding: 0 10px;
  border-radius: 7px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 550 !important;
}
.ui-action { background: rgba(0, 0, 0, .07) !important; }
.primary-action { background: var(--ui-blue) !important; color: #fff !important; }
.demo-range {
  appearance: none;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ui-blue) 0 55%, #d4d4d4 55% 100%);
  accent-color: var(--ui-blue);
}
.demo-range::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .24);
}

/* Library */
.library-ui { width: min(100%, 440px); height: 246px; }
.library-body { position: relative; height: calc(100% - 32px); display: flex; }
.ui-sidebar {
  width: 30%;
  min-width: 112px;
  padding: 12px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, .86);
  border-right: 1px solid var(--ui-line);
}
.ui-sidebar strong { margin: 4px 7px 2px; font-size: 7px; color: #858585; letter-spacing: .08em; }
.ui-sidebar span { height: 24px; padding: 0 7px; display: flex; align-items: center; border-radius: 6px; white-space: nowrap; }
.ui-sidebar span b { margin-left: auto; color: #777; font-weight: 400; }
.ui-sidebar .selected { background: var(--ui-blue); color: #fff; }
.ui-sidebar .selected b { color: #fff; }
.ui-gallery { flex: 1; min-width: 0; padding: 9px 10px 32px; background: var(--ui-paper); }
.ui-tagbar { height: 23px; display: flex; gap: 4px; margin-bottom: 8px; overflow: hidden; }
.ui-tagbar span { height: 20px; padding: 0 8px; border-radius: 999px; display: flex; align-items: center; background: #e7e7e7; color: #686868; white-space: nowrap; }
.ui-tagbar .active { background: #262626; color: #fff; }
.coded-grid { --grid-gap: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); transition: gap .35s var(--ease); }
.coded-photo { display: block; position: relative; overflow: hidden; background-color: #aaa; }
.coded-grid .coded-photo { aspect-ratio: 1.18; border-radius: 4px; transition: aspect-ratio .35s var(--ease), transform .35s var(--ease); }
.library-ui[data-layout="rows"] .coded-grid { grid-template-columns: repeat(2, 1fr); }
.library-ui[data-layout="rows"] .coded-grid .coded-photo { aspect-ratio: 1.9; }
.library-ui[data-layout="grid"] .coded-grid { grid-template-columns: repeat(4, 1fr); }
.library-ui[data-layout="grid"] .coded-grid .coded-photo { aspect-ratio: 1; }
.layout-popover {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 9px;
  width: 148px;
  height: 31px;
  padding: 5px 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 999px;
  background: rgba(238, 238, 238, .94);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
  backdrop-filter: blur(12px);
}
.layout-modes { display: flex; gap: 1px; }
.layout-modes button { width: 19px; height: 20px; border-radius: 5px; color: #777; }
.layout-modes button.active { background: #fff; color: #222; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.grid-gap { flex: 1; min-width: 0; }

/* Viewer analysis */
.viewer-ui { width: min(100%, 420px); height: 246px; border: 0; background: #3f3f41; color: #fff; }
.viewer-ui .ui-titlebar { color: #3a3a3a; }
.viewer-body { height: 190px; padding: 12px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px; }
.hero-photo { min-width: 0; border-radius: 4px; }
.scan-line {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 12px rgba(255, 255, 255, .7);
  opacity: 0;
}
.ui-inspector { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-inspector > strong { font-size: 9px; padding: 0 2px 2px; }
.ui-inspector section { padding: 7px 8px; border-radius: 8px; background: rgba(255, 255, 255, .10); }
.ui-inspector section > b { display: block; margin-bottom: 5px; color: rgba(255, 255, 255, .55); }
.analysis-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.analysis-tags span { padding: 3px 6px; border-radius: 999px; background: rgba(255, 255, 255, .13); opacity: 0; transform: translateY(4px); }
.palette-row { display: flex; gap: 4px; }
.palette-row i { width: 17px; height: 17px; border-radius: 5px; border: 1px solid rgba(255,255,255,.12); }
.palette-row i:nth-child(1) { background: #090909; }.palette-row i:nth-child(2) { background: #282828; }.palette-row i:nth-child(3) { background: #626262; }.palette-row i:nth-child(4) { background: #a3a3a3; }.palette-row i:nth-child(5) { background: #e2e2e2; }
.ocr-row span { font-family: var(--mono); font-size: 7px; }
.analyze-action { position: absolute; right: 13px; bottom: 10px; color: #fff !important; background: rgba(255,255,255,.13) !important; }
.product-demo.is-playing .scan-line { animation: scan-photo 1.5s var(--ease) both; }
.product-demo.is-playing .analysis-tags span { animation: tag-arrive .42s var(--ease) both; }
.product-demo.is-playing .analysis-tags span:nth-child(2) { animation-delay: .12s; }
.product-demo.is-playing .analysis-tags span:nth-child(3) { animation-delay: .24s; }

/* Editor */
.editor-mini { height: 220px; background: #f8f8f8; }
.editor-mini-body { height: calc(100% - 32px); padding: 11px; display: grid; grid-template-columns: 1.25fr .9fr; gap: 9px; }
.editor-photo,
.version-preview { border-radius: 3px; }
.editor-inspector { min-width: 0; padding: 9px; border-radius: 9px; background: #e7e7e7; }
.histogram { width: 100%; height: 66px; margin: 7px 0 2px; overflow: visible; }
.histogram-fill { fill: #777; opacity: .82; }
.clip-fill { fill: #db4b3e; opacity: .95; }
.histogram-demo p { font-size: 8px; line-height: 1.35; margin: 2px 0 8px; }
.light-controls { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 10px; }
.light-controls span { display: grid; grid-template-columns: 1fr auto; gap: 5px; font-size: 7.5px; }
.light-controls b { font-family: var(--mono); font-size: 7px; font-weight: 400; }
.light-controls i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 999px; background: #ccc; }
.light-controls em { display: block; width: 64%; height: 100%; background: var(--ui-blue); transition: width .7s var(--ease); }
.histogram-demo.is-adjusted .light-controls span:nth-child(1) em { width: 78%; }
.histogram-demo.is-adjusted .light-controls span:nth-child(2) em { width: 69%; }
.status-dot { width: 5px; height: 5px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #db4b3e; }
.zebra { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.8) 0 3px, rgba(20,20,20,.8) 3px 6px); mix-blend-mode: difference; transition: opacity .3s var(--ease); }
.histogram-demo.show-zebras .zebra { opacity: .48; }
.product-demo.is-playing .clip-fill { animation: clipping-pulse 1.3s ease-in-out 2; }
.version-preview { transition: filter .4s var(--ease); }
.versions-demo[data-version="original"] .version-preview { filter: contrast(.75) brightness(1.12); }
.versions-demo[data-version="contrast"] .version-preview { filter: contrast(1.5); }
.versions-demo[data-version="soft"] .version-preview { filter: contrast(.75) brightness(1.26); }
.before-half { position: absolute; inset: 0 50% 0 0; background: rgba(255,255,255,.32); border-right: 1px solid #fff; }
.snapshot-list { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.snapshot-list button { min-width: 0; padding: 4px; display: flex; align-items: center; gap: 5px; border-radius: 5px; text-align: left; }
.snapshot-list button.active { background: rgba(0, 0, 0, .08); }
.snapshot-list button > i { width: 28px; height: 24px; flex: none; border-radius: 3px; }
.snapshot-list button span { min-width: 0; font-size: 8px; line-height: 1.2; white-space: nowrap; }
.snapshot-list small { display: block; color: #777; font-size: 6.5px; }
.curve-ui { width: min(100%, 330px) !important; height: auto; padding: 13px; background: #e9e9e9; }
.tone-curve {
  width: 100%;
  height: auto;
  margin-top: 10px;
  display: block;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 0;
  background: rgba(255, 255, 255, .5);
  cursor: crosshair;
  touch-action: none;
}
.curve-histogram { fill: #747474; opacity: .15; }
.curve-grid path { fill: none; stroke: rgba(0, 0, 0, .13); stroke-width: .5; }
.curve-path { fill: none; stroke: var(--ui-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: d .45s var(--ease); }
.curve-points circle { fill: var(--ui-blue); stroke: none; transition: cx .4s var(--ease), cy .4s var(--ease); }
.curve-hint { display: block; margin-top: 7px; color: #737373; font-size: 7px; text-align: center; }

/* Import, export and sharing modals */
.modal-ui { min-height: 220px; padding: 13px; background: rgba(250,250,250,.98); }
.modal-heading { font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.modal-ui > p { color: #767676; line-height: 1.35; }
.source-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.source-list button { min-height: 34px; padding: 4px 6px; display: grid; grid-template-columns: 25px 1fr auto; gap: 7px; align-items: center; border-radius: 7px; text-align: left; }
.source-list button.active { background: #e9e9e9; }
.source-list button > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-style: normal; font-weight: 600; }
.source-list button span { font-size: 8.5px; line-height: 1.15; }
.source-list small { display: block; color: #777; font-size: 7px; margin-top: 2px; }
.source-list button > b { color: #888; font-size: 13px; }
.export-ui { display: flex; flex-direction: column; }
.export-ui label,
.publish-ui label { display: flex; justify-content: space-between; margin: 9px 1px 5px; }
.export-ui label span,
.publish-ui label span { color: #343434; font-weight: 450; letter-spacing: 0; }
.format-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; border-radius: 7px; background: #e9e9e9; }
.format-options button { height: 25px; border-radius: 5px; }
.format-options button.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.export-size { width: 100%; margin: 8px 0 16px; }
.export-detail-list { display: flex; flex-direction: column; border-top: 1px solid var(--ui-line); }
.export-detail-list span { min-height: 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ui-line); color: #666; }
.export-detail-list b { color: #222; font-weight: 450; }
.export-summary { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--ui-line); }
.pdf-ui { height: 220px; padding: 12px; background: #e8e8e8; overflow: visible; }
.pdf-toolbar { display: flex; justify-content: space-between; align-items: center; font-weight: 550; }
.pdf-toolbar > div { display: flex; padding: 2px; border-radius: 6px; background: rgba(0,0,0,.07); }
.pdf-toolbar button { height: 20px; padding: 0 7px; border-radius: 4px; }
.pdf-toolbar button.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pdf-page { width: 142px; height: 165px; margin: 8px auto 0; padding: 12px; background: #fff; box-shadow: 0 4px 13px rgba(0,0,0,.14); transition: width .35s var(--ease); }
.pdf-title { display: block; font-size: 9px; font-weight: 600; margin-bottom: 8px; }
.pdf-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pdf-cells i { aspect-ratio: 1; border-radius: 1px; }
.pdf-page small { display: block; margin-top: 8px; color: #888; font-size: 6px; }
.pdf-ui.layout-rows .pdf-cells { grid-template-columns: repeat(2, 1fr); gap: 3px; }
.pdf-ui.layout-rows .pdf-cells i { aspect-ratio: 2.2; }
.pdf-badge { position: absolute; right: 8px; bottom: 9px; padding: 4px 7px; border-radius: 5px; color: #b22f29; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.drive-account,
.backup-file { margin: 9px 0; padding: 8px; display: grid; grid-template-columns: 28px 1fr auto; gap: 7px; align-items: center; border-radius: 8px; background: #ebebeb; }
.drive-account > i,
.backup-file > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: #fff; font-style: normal; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.drive-account span,
.backup-file span { font-size: 8.5px; line-height: 1.15; }
.drive-account small,
.backup-file small { display: block; margin-top: 2px; color: #777; font-size: 6.5px; }
.drive-account > b { font-size: 7px; color: #2d7b3e; }
.upload-track,
.restore-progress { height: 4px; overflow: hidden; border-radius: 999px; background: #ddd; }
.upload-track i,
.restore-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ui-blue); }
.publish-status { margin: 7px 0 8px; min-height: 12px; }
.publish-action { float: right; }
.publish-ui.is-uploading .upload-track i { animation: fill-track 1.5s var(--ease) forwards; }
.share-page-ui { height: 220px; padding: 11px; transition: background .35s var(--ease), color .35s var(--ease); }
.share-page-ui.tone-white { background: #fff; color: #222; }
.share-page-ui.tone-gray { background: #a8a8a8; color: #151515; }
.share-page-ui.tone-dark { background: #202020; color: #f3f3f3; }
.share-page-bar { display: flex; align-items: center; gap: 6px; }
.share-page-bar > button { height: 19px; padding: 0 7px; border-radius: 999px; background: rgba(128,128,128,.18); }
.backdrops { display: flex; gap: 4px; margin-left: auto; }
.backdrops button { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(100,100,100,.4); }
.backdrops button.active { outline: 1px solid currentColor; outline-offset: 2px; }
.backdrops .light { background: #fff; }.backdrops .gray { background: #aaa; }.backdrops .dark { background: #222; }
.share-coded-grid { --share-gap: 10px; margin-top: 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--share-gap); transition: gap .25s var(--ease); }
.share-coded-grid i { aspect-ratio: 1.2; border-radius: 2px; }
.density-control { position: absolute; left: 50%; bottom: 10px; width: 138px; height: 28px; padding: 0 9px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; border-radius: 999px; color: #eee; background: rgba(20,20,20,.72); backdrop-filter: blur(10px); }
.density-control input { flex: 1; min-width: 0; }
.verify-main { margin-top: 16px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; }
.verify-preview { margin: 0; display: grid; grid-template-columns: 62px 22px 62px; justify-content: end; align-items: center; gap: 6px; }
.verify-preview .coded-photo { height: 54px; border-radius: 5px; }
.verify-preview .arrow { text-align: center; color: #777; }
.clean-file { height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.12); font-weight: 650; }
.clean-file small { font-size: 6px; color: #777; font-weight: 400; }
.verify-steps { display: flex; flex-direction: column; gap: 8px; }
.verify-steps span { opacity: .45; transform: translateX(-3px); }
.verify-steps i { width: 15px; height: 15px; margin-right: 6px; display: inline-grid; place-items: center; border-radius: 50%; background: #dfeee1; color: #26743a; font-style: normal; }
.verify-action { position: absolute; right: 13px; bottom: 12px; }
.product-demo.is-playing .verify-steps span { animation: verify-step .35s var(--ease) forwards; }
.product-demo.is-playing .verify-steps span:nth-child(2) { animation-delay: .18s; }
.product-demo.is-playing .verify-steps span:nth-child(3) { animation-delay: .36s; }

/* Privacy, folders and backup */
.privacy-ui { height: 220px; padding: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.privacy-mark { width: 38px; height: 38px; margin: 2px 0 10px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #252525; font-size: 18px; }
.privacy-ui strong { margin-top: 7px; font-size: 15px; font-weight: 600; }
.privacy-ui p { max-width: 210px; margin-top: 5px; color: #717171; line-height: 1.4; }
.local-status { margin-top: auto; padding: 7px 10px; border-radius: 999px; background: #ededed; }
.local-status i { width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: #36a253; }
.product-demo.is-playing .local-status i { animation: local-pulse 1.6s ease-in-out 2; }
.folders-ui { height: 220px; }
.folders-ui .ui-titlebar > span:nth-child(2) { margin: 0 auto; font-weight: 600; }
.folders-ui .ui-titlebar button { width: 18px; height: 18px; border-radius: 50%; background: #ededed; }
.folder-list { padding: 9px; display: flex; flex-direction: column; gap: 4px; }
.folder-list button { min-height: 38px; padding: 5px 7px; display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: center; border-radius: 7px; text-align: left; }
.folder-list button.active { background: var(--ui-blue); color: #fff; }
.folder-list button > i { font-style: normal; font-size: 13px; }
.folder-list button span { font-size: 9px; line-height: 1.15; }
.folder-list button small { display: block; margin-top: 2px; color: #858585; font-size: 7px; }
.folder-list button.active small { color: rgba(255,255,255,.78); }
.folder-list button > b { font-weight: 400; color: #777; }
.folder-list button.active > b { color: #fff; }
.folder-location { position: absolute; left: 10px; right: 10px; bottom: 9px; min-height: 30px; padding: 7px 9px; display: grid; grid-template-columns: 9px auto 1fr; gap: 5px; align-items: center; border-top: 1px solid var(--ui-line); }
.folder-location small { text-align: right; color: #777; }
.location-dot { width: 7px; height: 7px; border-radius: 50%; background: #46a65e; }
.backup-ui { min-height: 220px; }
.backup-file { margin-top: 14px; }
.backup-file > b { color: #777; font-size: 7px; font-weight: 400; }
.reconnect-row { margin: 13px 1px; display: flex; align-items: center; justify-content: space-between; }
.toggle { position: relative; width: 26px; height: 15px; border-radius: 999px; background: #bbb; }
.toggle::after { content: ""; position: absolute; width: 11px; height: 11px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.24); }
.toggle.on { background: var(--ui-blue); }
.toggle.on::after { left: 13px; }
.backup-footer { position: absolute; left: 13px; right: 13px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.restore-status { color: #777; }
.backup-ui.is-restoring .restore-progress i { animation: fill-track 1.5s var(--ease) forwards; }

@keyframes scan-photo { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(160px); } }
@keyframes tag-arrive { to { opacity: 1; transform: translateY(0); } }
@keyframes clipping-pulse { 50% { opacity: .35; } }
@keyframes fill-track { to { width: 100%; } }
@keyframes verify-step { to { opacity: 1; transform: translateX(0); } }
@keyframes local-pulse { 50% { box-shadow: 0 0 0 5px rgba(54,162,83,.16); } }

/* The larger Cursor-style presentation gives each feature enough room to read
   as a working product surface. Text and demo alternate down the page while
   the two opening library views remain side by side. */
#edit .demo-grid,
#move .demo-grid,
#share .demo-grid,
#private .demo-grid {
  grid-template-columns: 1fr;
  gap: 36px;
}
#edit .demo-grid .demo,
#move .demo-grid .demo,
#share .demo-grid .demo,
#private .demo-grid .demo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, .72fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
}
#edit .demo-grid .demo:nth-child(even),
#move .demo-grid .demo:nth-child(even),
#share .demo-grid .demo:nth-child(even),
#private .demo-grid .demo:nth-child(even) {
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.6fr);
}
#edit .demo-grid .demo:nth-child(even) .demo-stage,
#move .demo-grid .demo:nth-child(even) .demo-stage,
#share .demo-grid .demo:nth-child(even) .demo-stage,
#private .demo-grid .demo:nth-child(even) .demo-stage { grid-column: 2; grid-row: 1; }
#edit .demo-grid .demo:nth-child(even) .demo-body,
#move .demo-grid .demo:nth-child(even) .demo-body,
#share .demo-grid .demo:nth-child(even) .demo-body,
#private .demo-grid .demo:nth-child(even) .demo-body { grid-column: 1; grid-row: 1; }
#edit .demo-grid .demo-stage,
#move .demo-grid .demo-stage,
#share .demo-grid .demo-stage,
#private .demo-grid .demo-stage { height: 430px; }
#edit .demo-grid .demo-body,
#move .demo-grid .demo-body,
#share .demo-grid .demo-body,
#private .demo-grid .demo-body { padding: 0; }
#edit .demo-grid .luz-photo-ui,
#move .demo-grid .luz-photo-ui,
#share .demo-grid .luz-photo-ui,
#private .demo-grid .luz-photo-ui {
  width: min(100%, 520px);
  transform: none;
  font-size: 10px;
}
.duo .product-demo .demo-stage { height: 372px; }
.duo .product-demo .luz-photo-ui { transform: none; }
.duo .library-ui,
.duo .viewer-ui { width: min(100%, 480px); height: 286px; }
.duo .viewer-body { height: calc(100% - 32px); }
#edit .demo-grid .editor-mini { height: 312px; }
#edit .demo-grid .curve-ui { height: auto; }
#move .demo-grid .import-ui { height: 308px; }
#move .demo-grid .export-ui { height: 286px; }
#move .demo-grid .pdf-ui { height: 326px; }
#move .demo-grid .pdf-page { width: 190px; height: 246px; padding: 15px; }
#share .demo-grid .publish-ui { height: 286px; }
#share .demo-grid .share-page-ui { height: 326px; }
#share .demo-grid [data-demo="verify"] .demo-stage { height: 270px; }
#share .demo-grid .verify-ui { height: 166px; }
#share .demo-grid .share-coded-grid img { aspect-ratio: 1.5; }

/* The two sharing examples are a matched pair beneath the main screenshot. */
#share .demo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
#share .demo-grid .demo,
#share .demo-grid .demo:nth-child(even) {
  display: block;
}
#share .demo-grid .demo:nth-child(even) .demo-stage,
#share .demo-grid .demo:nth-child(even) .demo-body {
  grid-column: auto;
  grid-row: auto;
}
#share .demo-grid .demo-stage { height: 360px; }
#share .demo-grid .demo-body { padding: 18px 2px 0; }

#private .demo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
#private .demo-grid .demo,
#private .demo-grid .demo:nth-child(even) {
  display: block;
}
#private .demo-grid .demo:nth-child(even) .demo-stage,
#private .demo-grid .demo:nth-child(even) .demo-body {
  grid-column: auto;
  grid-row: auto;
}
#private .demo-grid .demo-stage { height: 336px; }
#private .demo-grid .privacy-ui,
#private .demo-grid .backup-ui { height: 238px; }
#private .demo-grid .demo-body { padding: 18px 2px 0; }

.coded-photo img,
.coded-grid img,
.snapshot-list img,
.pdf-cells img,
.share-coded-grid img,
.verify-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coded-grid .coded-photo,
.pdf-cells img,
.share-coded-grid img { min-width: 0; }
.coded-grid .coded-photo {
  outline: 2px solid transparent;
  outline-offset: 2px;
  filter: saturate(.92);
  transition: aspect-ratio .35s var(--ease), transform .35s var(--ease), outline-color .25s, filter .35s;
}
.coded-grid .coded-photo.auto-selected {
  outline-color: var(--ui-blue);
  filter: saturate(1.08);
  transform: translateY(-2px);
}
.hero-photo img { object-position: 50% 42%; }
.editor-photo img { object-position: 50% 72%; transition: filter .8s var(--ease); }
.version-preview img { object-position: 52% 70%; }
.snapshot-list button > img { width: 28px; height: 24px; flex: none; border-radius: 3px; object-fit: cover; }
.snapshot-list button[data-version="original"] img { filter: contrast(.75) brightness(1.1); }
.snapshot-list button[data-version="contrast"] img { filter: contrast(1.45) saturate(1.08); }
.snapshot-list button[data-version="soft"] img { filter: contrast(.75) brightness(1.22) saturate(.72); }
.pdf-cells img { aspect-ratio: 1; border-radius: 1px; object-fit: cover; }
.pdf-ui.layout-rows .pdf-cells img { aspect-ratio: 2.2; }
.share-coded-grid img { aspect-ratio: 1.2; border-radius: 2px; object-fit: cover; }
.verify-preview .coded-photo img { object-position: 48% 31%; }
.demo-pointer {
  position: absolute;
  z-index: 5;
  left: 48%;
  top: 54%;
  display: block;
  width: 20px;
  height: 27px;
  overflow: visible;
  fill: #fff;
  stroke: #161616;
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
  transition: left .7s var(--ease), top .7s var(--ease);
  pointer-events: none;
}
.edit-sweep {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 2px;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.75);
}
.product-demo.is-playing .edit-sweep { animation: edit-sweep 3.6s var(--ease) infinite; }
.histogram-demo.is-adjusted .editor-photo img { filter: contrast(1.22) brightness(1.08) saturate(1.12); }
@keyframes edit-sweep {
  0%, 10% { left: 0; opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 1; }
  84%, 100% { left: calc(100% - 2px); opacity: 0; }
}

/* ───────── Responsive ───────── */
@media (max-width: 980px) {
  .hero-collage { min-height: 800px; }
  :root { --hero-type-size: 60px; }
  .hero-content { width: 76%; }
  .hero-eyebrow { margin-bottom: 52px; }
  .hero-lede span:nth-child(1) { transform: translateX(34px); }
  .hero-lede span:nth-child(4) { transform: translateX(34px); }
  .hero-app-card {
    width: 260px;
    margin-left: 34px;
    margin-top: 18px;
  }
  .demo-grid { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; gap: 56px; }
  .text-features-three { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .hero {
    --hero-pad: 12px;
    padding-top: 88px;
    overflow: hidden;
  }
  .hero-collage {
    --carousel-shift: 72px;
    min-height: 600px;
  }
  :root { --hero-type-size: 42px; }
  .hero-content { top: 22px; width: 92%; }
  .hero-eyebrow { margin-bottom: 34px; line-height: 1.08; }
  .hero-lede span:nth-child(1) { transform: translateX(0); }
  .hero-lede span:nth-child(4) { transform: translateX(0); }
  .hero-app-card {
    width: 230px;
    margin-left: 0;
    margin-top: 16px;
  }
  .demo-grid { grid-template-columns: 1fr; }
  .text-features-two { grid-template-columns: 1fr; gap: 34px; }
  .text-feature-wide { grid-column: auto; }
  .product-demo .demo-stage,
  .duo .product-demo .demo-stage { height: 276px; padding: 16px; }
  .luz-photo-ui { max-width: 360px; }
  .library-ui,
  .viewer-ui { height: 238px; }
  .verify-main { grid-template-columns: 158px minmax(0, 1fr); gap: 10px; }
  .verify-preview { justify-content: start; }
}

@media (max-width: 760px) {
  /* Match the header to the same shared gutter used by feature copy and cards.
     Safe-area insets add to that alignment on notched devices. */
  .site-header {
    padding: 10px calc(var(--gut) + env(safe-area-inset-right)) 10px calc(var(--gut) + env(safe-area-inset-left));
    gap: 8px;
  }
  .site-nav { margin-right: 0; }

  /* These paired examples use section-specific two-column rules above, so the
     generic mobile .demo-grid rule cannot override them by specificity. */
  #private .demo-grid { grid-template-columns: minmax(0, 1fr); }
  #private .demo-grid .demo { min-width: 0; }

  #edit .demo-grid .demo,
  #move .demo-grid .demo,
  #share .demo-grid .demo,
  #private .demo-grid .demo,
  #edit .demo-grid .demo:nth-child(even),
  #move .demo-grid .demo:nth-child(even),
  #share .demo-grid .demo:nth-child(even),
  #private .demo-grid .demo:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
  #edit .demo-grid .demo:nth-child(even) .demo-stage,
  #move .demo-grid .demo:nth-child(even) .demo-stage,
  #share .demo-grid .demo:nth-child(even) .demo-stage,
  #private .demo-grid .demo:nth-child(even) .demo-stage,
  #edit .demo-grid .demo:nth-child(even) .demo-body,
  #move .demo-grid .demo:nth-child(even) .demo-body,
  #share .demo-grid .demo:nth-child(even) .demo-body,
  #private .demo-grid .demo:nth-child(even) .demo-body { grid-column: 1; grid-row: auto; }
  #edit .demo-grid .demo-stage,
  #move .demo-grid .demo-stage,
  #share .demo-grid .demo-stage,
  #private .demo-grid .demo-stage { height: 344px; }
  #edit .demo-grid [data-demo="curve"] .demo-stage { height: 404px; }
  #edit .demo-grid .luz-photo-ui,
  #move .demo-grid .luz-photo-ui,
  #share .demo-grid .luz-photo-ui,
  #private .demo-grid .luz-photo-ui { transform: none; }
  .duo .product-demo .demo-stage { height: 310px; }
  .duo .product-demo .luz-photo-ui { transform: none; }
  /* header buttons keep their full labels on mobile (no collapse), just compact */
  .logo { padding: 0; }
  .logo-image { width: auto; height: 34px; }
  .site-nav { --nav-glass-inset: 10px; gap: 6px; padding: 18px; }
  .site-nav::before { scale: 1; }
  .btn-appstore { font-size: 12.5px; gap: 6px; padding: 7px 12px 7px 10px; }
  .btn-guide { gap: 6px; padding: 7px 10px; }
  .site-nav .btn-guide,
  .site-nav .btn-appstore { height: 36px; box-sizing: border-box; }
  .btn-guide svg,
  .btn-appstore svg { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .feat .media-reveal { opacity: 1; transform: none; }
  *, *::after, *::before { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ───────── Video hero ─────────
   The header stays quiet at the top while the hero makes one clear promise:
   the product is best understood in motion, so the video is the first thing
   people see after the statement. */
.hero {
  padding: clamp(126px, 11vw, 168px) var(--hero-pad) clamp(84px, 9vw, 128px);
  overflow: hidden;
}
.hero-collage {
  min-height: 0;
  max-width: 1160px;
  margin: 0 auto;
  overflow: visible;
  background: none;
}
.hero-collage::after { display: none; }
.hero-top-art {
  position: absolute;
  z-index: 0;
  top: calc(-100px - clamp(140px, 14vw, 210px));
  left: 50%;
  display: block;
  width: min(120vw, 1393px);
  max-width: none;
  aspect-ratio: 1393 / 690;
  height: auto;
  transform: translateX(-50%);
  background: #fff;
  -webkit-mask: url("assets/luz-photo-top.svg") center / 100% 100% no-repeat;
  mask: url("assets/luz-photo-top.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  user-select: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  top: auto;
  left: auto;
  width: 100%;
  pointer-events: auto;
}
.hero-copy {
  width: min(100%, 1040px);
  margin: 0 auto;
  text-align: center;
  color: var(--ink);
  mix-blend-mode: normal;
}
.hero-eyebrow {
  display: block;
  margin-bottom: clamp(22px, 3vw, 34px);
  font-family: var(--fat);
  font-size: var(--hero-type-size);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--ink);
}
.hero-eyebrow span { display: block; }
.hero-lede span { display: block; transform: none; }
.hero-media {
  width: min(100%, calc(var(--wrap) - (2 * var(--gut))));
  max-width: none;
  margin: clamp(50px, 6vw, 76px) auto 0;
  background: transparent;
}
.hero-media-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
}
.hero-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1664 / 1080;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 620px) {
  .hero {
    --hero-pad: var(--gut);
    padding-top: 110px;
    padding-bottom: 72px;
  }
  .hero-top-art {
    top: -160px;
    width: 620px;
    transform: translateX(-50%);
  }
  .hero-content { width: 100%; }
  .hero-eyebrow {
    margin-bottom: 20px;
  }
  .hero-intro {
    max-width: 290px;
    margin-top: 23px;
    font-size: 15px;
  }
  .hero-media {
    width: 100%;
    margin-top: 38px;
  }
  .hero-media-stage { padding: 0; }
  .hero-video { border-radius: 0; }
}

/* The product's four jobs read as one moving cluster beneath the short
   promise above them. Each pill has its own small loop so the group feels
   alive without pulling attention away from the video. */
.hero-lede {
  --pill-lift: clamp(9px, 1.1vw, 16px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  gap: clamp(8px, 1.3vw, 16px);
  font-size: clamp(24px, 3.1vw, 42px);
  line-height: .9;
  letter-spacing: 0;
}
.hero-lede span,
.hero-lede span:nth-child(1),
.hero-lede span:nth-child(2),
.hero-lede span:nth-child(3),
.hero-lede span:nth-child(4) {
  display: inline-flex;
  width: auto;
  min-height: 1.25em;
  align-items: center;
  justify-content: center;
  padding: .34em .76em .4em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(224, 226, 228, .30);
  color: var(--ink);
  font-family: var(--fat);
  font-size: 1em;
  font-weight: 400;
  line-height: .92;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(18, 18, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(26px) saturate(.78);
  backdrop-filter: blur(26px) saturate(.78);
  animation-fill-mode: both;
  will-change: transform;
}
.hero-lede span:nth-child(1) {
  border-color: rgba(124, 169, 235, .52);
  background: rgba(87, 139, 215, .20);
}
.hero-lede span:nth-child(2) {
  border-color: rgba(226, 125, 169, .52);
  background: rgba(190, 82, 130, .20);
}
.hero-lede span:nth-child(3) {
  border-color: rgba(235, 141, 122, .52);
  background: rgba(205, 104, 84, .20);
}
.hero-lede span:nth-child(4) {
  border-color: rgba(235, 179, 100, .52);
  background: rgba(201, 143, 62, .20);
}
.hero-lede span:nth-child(1) {
  transform: translate3d(-3px, 2px, 0) rotate(-7deg);
  animation: hero-pill-one 17s ease-in-out infinite;
}
.hero-lede span:nth-child(2) {
  transform: translate3d(2px, 1px, 0) rotate(6deg);
  animation: hero-pill-two 20s ease-in-out -5s infinite;
}
.hero-lede span:nth-child(3) {
  transform: translate3d(-2px, -2px, 0) rotate(-5deg);
  animation: hero-pill-three 16s ease-in-out -9s infinite;
}
.hero-lede span:nth-child(4) {
  transform: translate3d(2px, 1px, 0) rotate(8deg);
  animation: hero-pill-four 19s ease-in-out -3s infinite;
}
@keyframes hero-pill-one {
  0%, 100% { transform: translate3d(-3px, 2px, 0) rotate(-7deg); }
  25% { transform: translate3d(5px, calc(var(--pill-lift) * -1), 0) rotate(3deg); }
  50% { transform: translate3d(8px, 4px, 0) rotate(8deg); }
  75% { transform: translate3d(2px, var(--pill-lift), 0) rotate(1deg); }
}
@keyframes hero-pill-two {
  0%, 100% { transform: translate3d(2px, 1px, 0) rotate(6deg); }
  25% { transform: translate3d(-5px, calc(var(--pill-lift) * -1), 0) rotate(-2deg); }
  50% { transform: translate3d(-8px, 5px, 0) rotate(-8deg); }
  75% { transform: translate3d(-3px, var(--pill-lift), 0) rotate(-3deg); }
}
@keyframes hero-pill-three {
  0%, 100% { transform: translate3d(-2px, -2px, 0) rotate(-5deg); }
  25% { transform: translate3d(5px, var(--pill-lift), 0) rotate(4deg); }
  50% { transform: translate3d(8px, -4px, 0) rotate(9deg); }
  75% { transform: translate3d(-3px, calc(var(--pill-lift) * -1), 0) rotate(0deg); }
}
@keyframes hero-pill-four {
  0%, 100% { transform: translate3d(2px, 1px, 0) rotate(8deg); }
  25% { transform: translate3d(-5px, calc(var(--pill-lift) * -1), 0) rotate(0deg); }
  50% { transform: translate3d(-8px, 3px, 0) rotate(-7deg); }
  75% { transform: translate3d(3px, var(--pill-lift), 0) rotate(-2deg); }
}
@media (max-width: 620px) {
  .hero-lede {
    max-width: 360px;
    gap: 7px;
    font-size: clamp(21px, 7.2vw, 30px);
  }
  .hero-lede span,
  .hero-lede span:nth-child(1),
  .hero-lede span:nth-child(2),
  .hero-lede span:nth-child(3),
  .hero-lede span:nth-child(4) { padding: .34em .65em .4em; }
}

/* A quiet drafting-grid field keeps the white page tactile without adding a
   separate panel behind the hero. */
body {
  --grid-size: 20px;
  --grid-line: rgba(18, 18, 18, .05);
  background-color: #F5F5F5;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 0;
}

/* Long-form reading pages use a plain background. */
body.docs-page {
  background-image: none;
}

.hero { background: transparent; }

/* Let the drafting grid dissolve into white as the import/export story
   begins and ends. The section content stays above these edge washes. */
#move {
  --grid-fade-top: clamp(280px, 24vw, 440px);
  --grid-fade-bottom: var(--grid-fade-top);
  isolation: isolate;
  background: transparent;
}
#move::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  top: calc(var(--grid-fade-top) * -1);
  height: calc(100% + var(--grid-fade-top) + var(--grid-fade-bottom));
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .12) calc(var(--grid-fade-top) * .28),
    rgba(255, 255, 255, .52) calc(var(--grid-fade-top) * .68),
    #fff var(--grid-fade-top),
    #fff calc(100% - var(--grid-fade-bottom)),
    rgba(255, 255, 255, .52) calc(100% - (var(--grid-fade-bottom) * .68)),
    rgba(255, 255, 255, .12) calc(100% - (var(--grid-fade-bottom) * .28)),
    rgba(255, 255, 255, 0) 100%
  );
}
#move > .feat-head,
#move > .move-bento,
#move > .move-info-grid {
  position: relative;
  z-index: 2;
}

/* A soft field of remembered photographs gives this transfer-focused section
   some depth. It deliberately sits between the white grid wash and the live
   product cards, so the UI always remains the clearest plane. */
.move-floating-gallery {
  position: absolute;
  z-index: 1;
  top: clamp(24px, 3vw, 56px);
  bottom: clamp(38px, 5vw, 84px);
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.floating-photo {
  --float-x: 8px;
  --float-y: -12px;
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(6px, .8vw, 12px);
  box-shadow: 0 18px 38px rgba(28, 35, 38, .12);
  animation: photo-drift var(--float-duration, 9s) ease-in-out infinite alternate;
  will-change: transform, scale, opacity;
}
.floating-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.floating-photo.depth-far { --photo-scale: .66; --photo-opacity: .20; filter: blur(7px); opacity: var(--photo-opacity); }
.floating-photo.depth-mid { --photo-scale: .84; --photo-opacity: .31; filter: blur(3.5px); opacity: var(--photo-opacity); }
.floating-photo.depth-near { --photo-scale: 1; --photo-opacity: .43; filter: blur(1px); opacity: var(--photo-opacity); }
.move-floating-gallery:not(.is-visible) .floating-photo { opacity: 0; scale: calc(var(--photo-scale) * .46); }
.move-floating-gallery.is-visible .floating-photo { opacity: var(--photo-opacity); scale: var(--photo-scale); transition: opacity .9s ease, scale 1.25s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--arrival-delay, 0s); }
.photo-01 { top: 4%; left: -1%; width: clamp(112px, 12vw, 204px); aspect-ratio: 4 / 5; --float-x: 11px; --float-y: 15px; --float-duration: 11s; --arrival-delay: .04s; }
.photo-02 { top: calc(9% + 10px); left: 15%; width: clamp(132px, 15vw, 244px); aspect-ratio: 5 / 4; --float-x: -10px; --float-y: 17px; --float-duration: 13s; --arrival-delay: .18s; animation-delay: -4s; }
.photo-03 { top: calc(8% + 10px); left: 41%; width: clamp(150px, 18vw, 300px); aspect-ratio: 3 / 4; --float-x: 12px; --float-y: 11px; --float-duration: 10s; --arrival-delay: .10s; animation-delay: -2s; }
.photo-04 { top: 8%; right: 14%; width: clamp(120px, 13vw, 218px); aspect-ratio: 16 / 10; --float-x: -8px; --float-y: 18px; --float-duration: 12s; --arrival-delay: .26s; animation-delay: -6s; }
.photo-05 { top: 21%; right: -2%; width: clamp(126px, 14vw, 230px); aspect-ratio: 4 / 5; --float-x: 10px; --float-y: -14px; --float-duration: 14s; --arrival-delay: .38s; animation-delay: -8s; }
.photo-06 { top: 43%; left: 4%; width: clamp(148px, 17vw, 280px); aspect-ratio: 5 / 4; --float-x: -12px; --float-y: 14px; --float-duration: 12s; --arrival-delay: .18s; animation-delay: -5s; }
.photo-07 { top: 49%; left: 29%; width: clamp(118px, 13vw, 214px); aspect-ratio: 4 / 5; --float-x: 9px; --float-y: -16px; --float-duration: 11s; --arrival-delay: .33s; animation-delay: -7s; }
.photo-08 { top: 46%; right: 27%; width: clamp(138px, 16vw, 264px); aspect-ratio: 3 / 2; --float-x: -10px; --float-y: 12px; --float-duration: 13s; --arrival-delay: .28s; animation-delay: -3s; }
.photo-09 { bottom: 3%; right: 5%; width: clamp(146px, 17vw, 280px); aspect-ratio: 4 / 5; --float-x: 12px; --float-y: -11px; --float-duration: 10s; --arrival-delay: .46s; animation-delay: -9s; }
.photo-10 { bottom: -1%; left: 10%; width: clamp(120px, 14vw, 228px); aspect-ratio: 3 / 2; --float-x: -9px; --float-y: -15px; --float-duration: 14s; --arrival-delay: .52s; animation-delay: -1s; }
.photo-11 { top: 31%; left: 18%; width: clamp(72px, 8vw, 128px); aspect-ratio: 3 / 4; --float-x: 8px; --float-y: -12px; --float-duration: 12s; --arrival-delay: .31s; animation-delay: -3s; }
.photo-12 { top: 34%; left: 43%; width: clamp(60px, 6vw, 98px); aspect-ratio: 5 / 4; --float-x: -7px; --float-y: 9px; --float-duration: 10s; --arrival-delay: .44s; animation-delay: -6s; }
.photo-13 { top: 31%; right: 16%; width: clamp(82px, 9vw, 142px); aspect-ratio: 4 / 5; --float-x: 10px; --float-y: 8px; --float-duration: 13s; --arrival-delay: .36s; animation-delay: -8s; }
.photo-14 { bottom: 24%; left: -2%; width: clamp(58px, 7vw, 108px); aspect-ratio: 3 / 2; --float-x: 7px; --float-y: -8px; --float-duration: 11s; --arrival-delay: .56s; animation-delay: -4s; }
.photo-15 { bottom: 22%; left: 47%; width: clamp(100px, 11vw, 172px); aspect-ratio: 3 / 4; --float-x: -8px; --float-y: 13px; --float-duration: 14s; --arrival-delay: .49s; animation-delay: -7s; }
.photo-16 { bottom: 29%; right: 17%; width: clamp(78px, 8vw, 132px); aspect-ratio: 5 / 4; --float-x: 9px; --float-y: -10px; --float-duration: 10s; --arrival-delay: .60s; animation-delay: -9s; }
.photo-17 { bottom: 8%; right: 31%; width: clamp(58px, 6vw, 96px); aspect-ratio: 4 / 5; --float-x: -6px; --float-y: 8px; --float-duration: 13s; --arrival-delay: .64s; animation-delay: -5s; }
.photo-18 { top: 15%; right: 1%; width: clamp(72px, 8vw, 122px); aspect-ratio: 3 / 2; --float-x: 8px; --float-y: 11px; --float-duration: 12s; --arrival-delay: .22s; animation-delay: -2s; }
.photo-19 { top: 18%; left: 31%; width: clamp(62px, 7vw, 114px); aspect-ratio: 4 / 5; --float-x: -7px; --float-y: 10px; --float-duration: 11s; --arrival-delay: .40s; animation-delay: -5s; }
.photo-20 { top: 25%; right: 33%; width: clamp(76px, 8vw, 136px); aspect-ratio: 3 / 2; --float-x: 9px; --float-y: -8px; --float-duration: 13s; --arrival-delay: .34s; animation-delay: -7s; }
.photo-21 { top: 59%; left: 17%; width: clamp(58px, 6.5vw, 106px); aspect-ratio: 5 / 4; --float-x: 7px; --float-y: 9px; --float-duration: 12s; --arrival-delay: .58s; animation-delay: -3s; }
.photo-22 { top: 64%; left: 40%; width: clamp(72px, 8vw, 132px); aspect-ratio: 3 / 4; --float-x: -9px; --float-y: -10px; --float-duration: 14s; --arrival-delay: .52s; animation-delay: -8s; }
.photo-23 { top: 57%; right: 13%; width: clamp(56px, 6vw, 102px); aspect-ratio: 4 / 5; --float-x: 6px; --float-y: -7px; --float-duration: 10s; --arrival-delay: .62s; animation-delay: -4s; }
.photo-24 { bottom: 6%; left: 32%; width: clamp(74px, 8.5vw, 144px); aspect-ratio: 3 / 2; --float-x: -8px; --float-y: 11px; --float-duration: 13s; --arrival-delay: .66s; animation-delay: -6s; }
.photo-25 { top: 12%; left: 4%; width: clamp(52px, 5.5vw, 92px); aspect-ratio: 3 / 2; --float-x: 7px; --float-y: -9px; --float-duration: 11s; --arrival-delay: .29s; animation-delay: -5s; }
.photo-26 { top: 13%; left: 25%; width: clamp(68px, 7.5vw, 122px); aspect-ratio: 4 / 5; --float-x: -8px; --float-y: 11px; --float-duration: 14s; --arrival-delay: .35s; animation-delay: -8s; }
.photo-27 { top: 12%; right: 33%; width: clamp(54px, 6vw, 98px); aspect-ratio: 5 / 4; --float-x: 6px; --float-y: 8px; --float-duration: 12s; --arrival-delay: .32s; animation-delay: -2s; }
.photo-28 { top: 38%; right: 5%; width: clamp(76px, 8.5vw, 142px); aspect-ratio: 3 / 4; --float-x: -9px; --float-y: -10px; --float-duration: 13s; --arrival-delay: .48s; animation-delay: -7s; }
.photo-29 { top: 41%; left: 43%; width: clamp(52px, 5.5vw, 92px); aspect-ratio: 4 / 5; --float-x: 7px; --float-y: 9px; --float-duration: 10s; --arrival-delay: .53s; animation-delay: -4s; }
.photo-31 { top: 72%; left: 23%; width: clamp(56px, 6vw, 98px); aspect-ratio: 4 / 5; --float-x: 6px; --float-y: 10px; --float-duration: 11s; --arrival-delay: .69s; animation-delay: -3s; }
.photo-32 { top: 70%; right: 20%; width: clamp(70px, 7.5vw, 126px); aspect-ratio: 5 / 4; --float-x: -7px; --float-y: -11px; --float-duration: 13s; --arrival-delay: .65s; animation-delay: -6s; }
.photo-33 { bottom: 4%; right: 43%; width: clamp(52px, 5.5vw, 94px); aspect-ratio: 3 / 2; --float-x: 8px; --float-y: 8px; --float-duration: 12s; --arrival-delay: .71s; animation-delay: -5s; }

@keyframes photo-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--float-x), var(--float-y), 0); }
}
@media (max-width: 760px) {
  .move-floating-gallery { opacity: .72; }
  .photo-02, .photo-04, .photo-07, .photo-08, .photo-10, .photo-11, .photo-12, .photo-13, .photo-14, .photo-15, .photo-16, .photo-17, .photo-18, .photo-19, .photo-20, .photo-21, .photo-22, .photo-23, .photo-24, .photo-25, .photo-26, .photo-27, .photo-28, .photo-29, .photo-31, .photo-32, .photo-33 { display: none; }
  .photo-01 { left: -8%; }
  .photo-03 { left: 56%; }
  .photo-05 { right: -10%; }
  .photo-06 { left: -5%; }
  .photo-09 { right: -7%; }
}

/* Match the product subheads to the card-pill typography without adding a
   pill container around them. */
.demo-body h3 {
  display: block;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--fat);
  font-size: clamp(19px, 1.8vw, 27px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: .95;
  text-transform: none;
  color: var(--ink);
}

@media (max-width: 620px) {
  .demo-body h3 {
    font-size: clamp(19px, 6vw, 25px);
  }
}

/* The Edit and Share notes sit as a fixed, lightly skewed trio over the
   bottom of their product image. */
#edit .text-features,
#share .text-features {
  position: relative;
  z-index: 3;
  margin-top: clamp(-180px, -12vw, -120px);
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}
#edit .text-feature,
#share .text-feature {
  min-width: 0;
  min-height: 250px;
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 34px) clamp(28px, 3.2vw, 42px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgba(18, 18, 18, .11);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(18, 18, 18, .07);
  text-align: center;
  position: relative;
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
}
#edit .text-feature::after,
#share .text-feature::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(18, 18, 18, .14);
  border-radius: 16px;
  pointer-events: none;
}
#edit .text-feature:nth-child(1),
#share .text-feature:nth-child(1) {
  transform: translate3d(-3px, 6px, 0) rotate(-4deg);
  animation: feature-card-one 17s ease-in-out infinite;
}
#edit .text-feature:nth-child(2),
#share .text-feature:nth-child(2) {
  transform: translate3d(2px, -10px, 0) rotate(4deg);
  animation: feature-card-two 20s ease-in-out -5s infinite;
}
#edit .text-feature:nth-child(3),
#share .text-feature:nth-child(3) {
  transform: translate3d(-2px, 3px, 0) rotate(-3deg);
  animation: feature-card-three 16s ease-in-out -9s infinite;
}
@keyframes feature-card-one {
  0%, 100% { transform: translate3d(-3px, 6px, 0) rotate(-4deg); }
  25% { transform: translate3d(3px, -4px, 0) rotate(-1deg); }
  50% { transform: translate3d(6px, 8px, 0) rotate(1deg); }
  75% { transform: translate3d(-1px, 14px, 0) rotate(-2deg); }
}
@keyframes feature-card-two {
  0%, 100% { transform: translate3d(2px, -10px, 0) rotate(4deg); }
  25% { transform: translate3d(-3px, -18px, 0) rotate(1deg); }
  50% { transform: translate3d(-6px, -5px, 0) rotate(-1deg); }
  75% { transform: translate3d(1px, -2px, 0) rotate(2deg); }
}
@keyframes feature-card-three {
  0%, 100% { transform: translate3d(-2px, 3px, 0) rotate(-3deg); }
  25% { transform: translate3d(3px, 10px, 0) rotate(0deg); }
  50% { transform: translate3d(6px, -1px, 0) rotate(2deg); }
  75% { transform: translate3d(-4px, -6px, 0) rotate(-1deg); }
}
#edit .text-feature h3,
#share .text-feature h3 {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(22px, 2.6vw, 30px);
  padding: .42em .76em .48em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(224, 226, 228, .30);
  color: var(--ink);
  font-family: var(--fat);
  font-size: clamp(19px, 1.8vw, 27px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: .95;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 12px 28px rgba(18, 18, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(26px) saturate(.78);
  backdrop-filter: blur(26px) saturate(.78);
}
#edit .text-feature h3 {
  border-color: rgba(235, 179, 100, .42);
  background: rgba(201, 143, 62, .18);
}
#share .text-feature h3 {
  border-color: rgba(91, 188, 165, .42);
  background: rgba(54, 145, 123, .18);
}
#edit .text-feature p,
#share .text-feature p {
  max-width: 34ch;
  margin: 0 auto;
  color: var(--ink);
  text-align: center;
}

@media (max-width: 620px) {
  #edit .text-features,
  #share .text-features { margin-top: -56px; }
  #edit .text-feature,
  #share .text-feature {
    min-height: 0;
    padding: 26px 22px 30px;
  }
  #edit .text-feature h3,
  #share .text-feature h3 {
    margin-bottom: 20px;
    font-size: clamp(19px, 6vw, 25px);
  }
}

/* Import and export use three columns of the same floating cards as Edit and
   Share. Each card carries its own group tag so the columns stay legible even
   when the cards drift. */
.move-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(56px, 7vw, 96px);
}
.move-info-group {
  min-width: 0;
  --pill-lift: clamp(20px, 2.6vw, 34px);
}
.move-info-list {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
}
.move-info-item {
  position: relative;
  min-height: 520px;
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 34px) clamp(28px, 3.2vw, 42px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 18, .11);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(18, 18, 18, .07);
  text-align: center;
}
.move-info-item::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(18, 18, 18, .14);
  border-radius: 16px;
  pointer-events: none;
}
.move-info-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  margin: 0 auto clamp(22px, 2.6vw, 30px);
  padding: 6px 13px;
  border: 1px solid rgba(226, 125, 169, .42);
  border-radius: 999px;
  background: rgba(190, 82, 130, .18);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.move-info-tag svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.move-info-details {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 2px;
  text-align: left;
}
.move-info-detail {
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--line-2);
}
.move-info-item h3,
.move-info-item p {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 34ch;
  font-family: var(--sans);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.36;
  letter-spacing: -.015em;
  text-align: left;
}
.move-info-item h3 {
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--ink);
}
.move-info-item p {
  font-weight: 400;
  color: var(--ink-faint);
}

@media (max-width: 980px) {
  .move-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .move-info-group:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .move-info-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    margin-top: 52px;
  }
  .move-info-group:last-child {
    grid-column: auto;
  }
  .move-info-item {
    min-height: 0;
    padding: 26px 22px 30px;
  }
  .move-info-item h3,
  .move-info-item p {
    font-size: 18px;
  }
}

/* One calm container now holds the three grouped rows. */
.move-info-grid {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  margin-top: 0;
}
#move .feat-head {
  margin-bottom: 24px;
}
.move-info-card {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.move-info-card::after {
  display: none;
}
.move-info-row {
  position: relative;
  z-index: 1;
  display: block;
  padding: clamp(22px, 2.8vw, 34px) 0;
  border-bottom: 1px solid var(--line-2);
}
.move-info-row:last-child {
  border-bottom: 0;
}
.move-info-row .move-info-tag {
  margin: 0 auto clamp(18px, 2vw, 26px);
}
.move-info-row-items {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 42px);
  text-align: left;
}
.move-info-row-items .move-info-detail {
  min-width: 0;
  padding: 0;
  border: 0;
}
.move-info-row-items h3,
.move-info-row-items p {
  display: block;
  max-width: none;
  font-family: var(--sans);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.38;
  letter-spacing: -.015em;
}
.move-info-row-items h3 {
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.38;
  color: var(--ink);
}
.move-info-row-items p {
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.62;
  letter-spacing: 0;
  text-wrap: pretty;
  color: #6b6b6b;
}

.move-info-row .move-info-tag svg {
  width: 18px;
  height: 18px;
}
.move-info-row .move-info-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--fat);
  font-size: clamp(19px, 1.8vw, 27px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: .95;
  text-transform: none;
}

@media (max-width: 620px) {
  .move-info-grid {
    margin-top: 52px;
  }
  .move-info-row {
    padding: 22px 0 24px;
  }
  .move-info-row-items {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .move-info-row-items .move-info-detail {
    padding: 20px 0;
    border-top: 1px solid var(--line-2);
  }
  .move-info-row-items h3 {
    font-size: 18px;
    line-height: 1.38;
  }
  .move-info-row-items p {
    font-size: 15.5px;
    line-height: 1.62;
  }
}


/* Import/export is the page's bento moment: two wide cards bracket two
   narrower ones, while every panel remains a small, animated Luz Photo surface. */
#move > .move-bento {
  position: relative;
  z-index: 2;
}
.move-stations,
#move > .move-info-grid {
  display: none;
}
.move-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
  margin-top: clamp(42px, 6vw, 80px);
}
.move-card-import,
.move-card-pdf { grid-column: span 7; }
.move-card-export,
.move-card-presets { grid-column: span 5; }
.move-card {
  min-width: 0;
  min-height: clamp(510px, 41vw, 620px);
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(224, 226, 228, .30);
  box-shadow: 0 24px 58px rgba(18, 18, 18, .13), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(26px) saturate(.78);
  backdrop-filter: blur(26px) saturate(.78);
}
.move-card-small {
  min-height: clamp(450px, 36vw, 540px);
}
.move-card-import,
.move-card-export,
.move-card-presets,
.move-card-pdf { background: rgba(224, 226, 228, .30); }
.move-card-copy {
  padding: 0;
}
.move-card-copy h3 {
  max-width: 15ch;
  margin-bottom: 12px;
  font-family: var(--fat);
  font-size: clamp(25px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink);
}
.move-card-small .move-card-copy h3 {
  max-width: 13ch;
  font-size: clamp(23px, 2.25vw, 31px);
}
.move-card-copy p {
  max-width: 54ch;
  color: #575757;
  font-size: clamp(14px, 1.15vw, 16.5px);
  line-height: 1.52;
  text-wrap: pretty;
}
.move-card .demo-stage {
  flex: 1 1 auto;
  min-height: 280px;
  height: auto;
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(16px, 2.1vw, 28px);
  border-radius: 12px;
}
.move-card-large .demo-stage { min-height: 316px; }
.move-card-small .demo-stage { min-height: 248px; }
.move-card .luz-photo-ui {
  width: min(100%, 520px);
  transform: none;
  font-size: 10px;
}
.move-card-small .luz-photo-ui {
  width: min(100%, 420px);
  font-size: 9px;
}
.move-card-import .import-ui { min-height: 308px; }
.move-card-export .export-ui { height: 286px; }
.move-card-presets .preset-ui { min-height: 258px; }
.move-card-pdf .pdf-ui { height: 326px; }
.move-card-pdf .pdf-page { width: 190px; height: 246px; padding: 15px; }
[data-demo="presets"] { --demo-backdrop: url("assets/demos/stage-export.webp"); --demo-position: 50% 42%; }

.preset-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.preset-list button {
  min-height: 34px;
  padding: 4px 6px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  gap: 7px;
  align-items: center;
  border-radius: 7px;
  text-align: left;
}
.preset-list button.active { background: #e9e9e9; }
.preset-list button > i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  font-style: normal;
  font-weight: 600;
}
.preset-list button span { font-size: 8.5px; line-height: 1.15; }
.preset-list small { display: block; margin-top: 2px; color: #777; font-size: 7px; }
.preset-list button > b { color: #888; font-size: 13px; }
.preset-footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ui-line);
  color: #777;
}

@media (max-width: 760px) {
  .move-bento {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 42px;
  }
  .move-card-import,
  .move-card-export,
  .move-card-presets,
  .move-card-pdf { grid-column: auto; }
  .move-card,
  .move-card-small,
  .move-card-large {
    min-height: 0;
  }
  .move-card .demo-stage,
  .move-card-small .demo-stage,
  .move-card-large .demo-stage {
    min-height: 278px;
    height: auto;
  }
  .move-card-large .demo-stage { min-height: 316px; }
  .move-card-small .demo-stage { min-height: 278px; }
  .move-card .luz-photo-ui,
  .move-card-small .luz-photo-ui { transform: none; }
}

/* FAQ uses the same feature heading scale and raised white-card treatment as
   the other product notes on the page. */
.faq-section {
  position: relative;
  z-index: 5;
}
.faq-layout {
  display: grid;
  gap: clamp(34px, 4.5vw, 64px);
  align-items: start;
}
.faq-head {
  margin-bottom: 0;
}
#faq .feat-label {
  background: rgba(156, 118, 85, .18);
  border-color: rgba(156, 118, 85, .42);
}
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.faq-column {
  display: grid;
  gap: 24px;
  align-content: start;
}
.faq-item {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 34px) clamp(28px, 3.2vw, 42px);
  border: 1px solid rgba(18, 18, 18, .11);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(18, 18, 18, .07);
}
.faq-item::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(18, 18, 18, .14);
  border-radius: 16px;
  pointer-events: none;
}
.faq-item summary {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: var(--fat);
  font-size: clamp(19px, 1.8vw, 27px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
  outline: 2px solid #3478d8;
  outline-offset: 4px;
  border-radius: 8px;
}
.faq-item summary > i {
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
  color: var(--ink);
}
.faq-item summary > i::before,
.faq-item summary > i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}
.faq-item summary > i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary > i::after { opacity: 0; }
.faq-answer {
  position: relative;
  z-index: 1;
  max-width: 62ch;
  padding: 22px 0 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.62;
}
.faq-answer p { margin: 0; }

@media (max-width: 760px) {
  .faq-layout {
    gap: 44px;
  }
  .faq-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .faq-column { gap: 18px; }
  .faq-item {
    padding: 26px 22px 30px;
  }
  .faq-item summary {
    gap: 12px;
    font-size: clamp(19px, 6vw, 25px);
  }
  .faq-answer {
    padding-top: 20px;
  }
}

/* Editorial feature rows sit between the hero film and the practical
   two-column product proof. */
.spotlight {
  position: relative;
  z-index: 7;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut) var(--section);
}
.spotlight-list {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  margin-block: -44px;
  padding-block: 44px;
}
.spotlight-list.is-entering .spotlight-trigger {
  opacity: 0;
  transform: translateY(42px);
}
.spotlight-list.is-entering.is-visible .spotlight-trigger {
  animation: spotlight-rise .72s cubic-bezier(.16, 1, .3, 1) forwards;
}
.spotlight-list.is-entering.is-visible .spotlight-row:nth-child(2) .spotlight-trigger { animation-delay: .13s; }
.spotlight-list.is-entering.is-visible .spotlight-row:nth-child(3) .spotlight-trigger { animation-delay: .26s; }
@keyframes spotlight-rise {
  to { opacity: 1; transform: translateY(0); }
}
.spotlight-row-heading {
  margin: 0;
}
.spotlight-trigger {
  --spotlight-glow-blur: min(42px, calc(var(--gut) - 8px));
  --spotlight-glow-spread: min(14px, calc(var(--gut) - var(--spotlight-glow-blur) - 2px));
  position: relative;
  appearance: none;
  width: 100%;
  padding: clamp(30px, 3.8vw, 56px) clamp(26px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(224, 226, 228, .30);
  box-shadow: 0 24px 58px rgba(18, 18, 18, .13), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(26px) saturate(.78);
  backdrop-filter: blur(26px) saturate(.78);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--fat);
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .88;
  text-align: left;
  transition: background-color .22s ease, box-shadow .22s ease;
}
.spotlight-trigger[data-spotlight="organize"] { --spotlight-wash: #fbe4e0; --spotlight-glow: rgba(251, 228, 224, .82); }
.spotlight-trigger[data-spotlight="edit"] { --spotlight-wash: #fdf1e0; --spotlight-glow: rgba(253, 241, 224, .82); }
.spotlight-trigger[data-spotlight="share"] { --spotlight-wash: #d9f2ec; --spotlight-glow: rgba(217, 242, 236, .82); }
.spotlight-trigger:hover {
  background: var(--spotlight-wash);
}
.spotlight-trigger:focus-visible {
  outline: none;
}
.spotlight-arrow {
  display: block;
  flex: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(25px, 2.6vw, 38px);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
}
@media (min-width: 761px) {
  .spotlight-trigger > span { white-space: nowrap; }
}

.spotlight-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.spotlight-modal[hidden] { display: none; }
.spotlight-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.spotlight-modal.is-closing {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}
.spotlight-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .54);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .18s ease;
}
.spotlight-modal.is-open .spotlight-scrim { opacity: 1; }
.spotlight-modal.is-closing .spotlight-scrim { opacity: 0; }
.spotlight-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  height: 100%;
  overflow: auto;
  padding: clamp(96px, 9vw, 144px) clamp(28px, 5vw, 74px) 64px;
  background: #fff;
  color: var(--ink);
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  will-change: transform;
}
.spotlight-modal.is-open .spotlight-panel { transform: translateX(0); }
.spotlight-modal[data-spotlight="organize"] .spotlight-panel { background: #fbe4e0; }
.spotlight-modal[data-spotlight="edit"] .spotlight-panel { background: #fdf1e0; }
.spotlight-modal[data-spotlight="share"] .spotlight-panel { background: #d9f2ec; }
.spotlight-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
}
.spotlight-close:hover {
  background: rgba(10, 10, 10, .06);
  color: var(--ink);
}
.spotlight-close:focus-visible {
  outline: none;
  box-shadow: none;
}
.spotlight-detail { max-width: 52ch; }
.spotlight-detail-label {
  display: block;
  margin-bottom: 24px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
}
.spotlight-detail h2 {
  margin-bottom: 42px;
  font-family: var(--fat);
  font-size: clamp(46px, 4.4vw, 70px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .9;
  text-wrap: balance;
}
.spotlight-detail p {
  margin-bottom: 28px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}
.spotlight-detail-points {
  margin-top: 48px;
  padding-top: 22px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.45;
}
.spotlight-detail-points li::before {
  content: "→";
  display: inline-block;
  margin-right: 10px;
  color: var(--ink-soft);
}
body.spotlight-modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .spotlight-trigger {
    padding: 28px 24px 32px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    font-size: clamp(26px, 3.1vw, 38px);
    line-height: .9;
  }
  .spotlight-arrow {
    font-size: 28px;
  }
  .spotlight-panel {
    width: 100%;
    padding: 92px 24px 48px;
  }
  .spotlight-close {
    top: 18px;
    right: 18px;
  }
  .spotlight-detail h2 {
    margin-bottom: 32px;
    font-size: clamp(45px, 12vw, 58px);
  }
}


/* ───────── Documentation and legal pages ───────── */
:root {
  --docs-nav:  260px;                    /* tree column */
  --docs-gap:  clamp(32px, 5vw, 72px);   /* tree → prose */
  /* The header scrolls away with the page now, so nothing sticky needs to clear
     it. Kept as a token because the tree, the topic scroll-margins and the
     mobile bar all measure off it. */
  --docs-top:  0px;
}

/* ───────── Header ─────────
   Nothing is overridden. styles.css positions it `absolute`, floating over the
   page, and that is kept here so the header is pixel-identical to the homepage
   — same glass pills, same padding, same 34px mark, same place on screen.

   Because it is out of flow, the page title must clear it the way the hero's
   headline does: `.docs` carries the hero's own top padding (see below), which
   is what puts the h1 on the same line as the homepage headline. An earlier
   pass set this header `position: static`, which pushed every h1 down by the
   header's full 118px height. Don't do that. */

/* .btn-guide and .docs-footer live in styles.css — the homepage uses them too. */

/* keyboard users get a real way past the tree */
.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  z-index: 200; background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 100px; font-size: 13px;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ───────── Page frame ───────── */
.docs {
  max-width: var(--wrap);
  margin: 0 auto;
  /* Top padding is the HERO's, verbatim (styles.css `.hero`), so the h1 lands on
     the same line as the homepage headline instead of below the floating
     header. Change it there and here together. */
  padding: 154px var(--gut) clamp(72px, 9vw, 120px);
  display: grid;
  grid-template-columns: var(--docs-nav) minmax(0, 1fr);
  /* column-gap only: `gap` also applies between the title row and the columns
     below it, which stacked on the title's own margin and opened a ~110px hole. */
  column-gap: var(--docs-gap);
  row-gap: 0;
  align-items: start;
}
/* The legal pages are a single prose column, no tree. It is capped for
   readability but starts at the SAME gutter as the homepage and /info — not
   centred, which floated it 164px in and made every legal page look like a
   different site. */
.docs.docs-solo {
  grid-template-columns: minmax(0, 72ch);
}

.docs-title {
  grid-column: 1 / -1;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.docs-title p {
  margin-top: 10px;
  max-width: 56ch;
  color: var(--ink);
  font-size: clamp(15px, 1.5vw, 17px);
}

/* ───────── Tree column ───────── */
.docs-aside {
  position: sticky;
  top: calc(var(--docs-top) + 20px);
  max-height: calc(100vh - var(--docs-top) - 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.docs-search { position: relative; flex: none; }
.docs-search input {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  background: rgba(10, 10, 10, .04);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 34px 10px 34px;
  outline: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.docs-search input::placeholder { color: var(--ink); }
/* type="search" draws its own clear button in WebKit, which sat beside ours and
   read as two X's. Ours stays: it is styled with the page and is keyboard-
   reachable with a real label. */
.docs-search input::-webkit-search-cancel-button,
.docs-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.docs-search input:focus {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .4);
}
.docs-search .icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--ink); pointer-events: none; display: grid;
}
.docs-search .clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; background: none; cursor: pointer;
  color: var(--ink); border-radius: 6px; display: none;
  align-items: center; justify-content: center; font-size: 15px; line-height: 1;
}
.docs-search.has-query .clear { display: flex; }
.docs-search .clear:hover { color: var(--ink); background: rgba(10, 10, 10, .06); }

/* results panel — overlays the tree rather than pushing it */
.docs-results {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  max-height: min(58vh, 460px); overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .3);
  padding: 6px;
  display: none;
}
.docs-results.is-open { display: block; }
.docs-results li { list-style: none; }
.docs-results a {
  display: block;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
}
.docs-results a:hover,
.docs-results a.is-active { background: rgba(10, 10, 10, .05); }
.docs-results .r-crumb {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.docs-results .r-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 1px;
}
.docs-results .r-snip {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.5;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.docs-results mark {
  background: rgba(255, 214, 0, .38);
  color: inherit;
  border-radius: 2px;
}
.docs-results .r-empty {
  padding: 14px 11px;
  font-size: 13.5px;
  color: var(--ink);
}

/* the tree itself */
.docs-tree { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 8px; }
.docs-tree ul { list-style: none; }
.docs-tree > ul > li + li { margin-top: 22px; }
.docs-tree .t-group {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
.docs-tree a {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  padding: 4px 10px;
  margin-left: -10px;
  border-radius: 7px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.docs-tree a:hover { color: var(--ink); background: rgba(10, 10, 10, .04); }
.docs-tree a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  background: rgba(10, 10, 10, .06);
}

/* mobile-only disclosure button */
.docs-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  background: rgba(10, 10, 10, .04);
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.docs-toggle .chev { transition: transform .25s var(--ease); color: var(--ink); }
.docs-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ───────── Prose column ───────── */
.docs-body { min-width: 0; }

.docs-group + .docs-group { margin-top: clamp(56px, 7vw, 88px); }
.docs-group > h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.topic { padding: 30px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: calc(var(--docs-top) + 24px); }
.topic:last-child { border-bottom: 0; }
.topic > h3 {
  font-family: var(--fat);
  font-weight: 800;
  font-stretch: 100%;
  font-optical-sizing: auto;
  /* Smaller than the homepage's 38px H2 — there are 31 of these, and Coconat
     at section-header size would shout down the prose it labels. */
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.topic p {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink);
}
.topic p + p { margin-top: 12px; }
.topic p strong { color: var(--ink); font-weight: 500; }
.topic a:not(.btn-appstore) {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: border-color .2s var(--ease);
}
.topic a:not(.btn-appstore):hover { border-color: var(--ink); }
.topic ul {
  max-width: 68ch;
  margin: 12px 0 0 0;
  padding-left: 18px;
}
.topic li {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink);
  margin-top: 6px;
}

/* the four-part shape: prose, Where, Keys, Note */
.meta {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 4px 14px;
  max-width: 68ch;
  align-items: baseline;
}
.meta dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 3px;
}
/* Each dd is its own grid item, so a dt followed by three dds put the 2nd and
   3rd back in column 1 and they wrapped under the label. Pin every dd to the
   value column. */
.meta dd { grid-column: 2; font-size: 14px; line-height: 1.6; color: var(--ink); }
.meta dd + dd { margin-top: 2px; }

/* menu paths and shortcut names */
.path, kbd {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  background: rgba(10, 10, 10, .05);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}
kbd { font-weight: 500; }

.note {
  margin-top: 16px;
  max-width: 68ch;
  padding: 12px 16px;
  border-left: 2px solid var(--line);
  background: rgba(10, 10, 10, .025);
  border-radius: 0 8px 8px 0;
}
.note p { font-size: 13.5px; line-height: 1.6; }

/* the all-shortcuts table */
.keytable { width: 100%; max-width: 68ch; border-collapse: collapse; margin-top: 16px; }
.keytable caption {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 18px 0 6px;
}
.keytable td {
  padding: 7px 0;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  vertical-align: baseline;
}
.keytable td:first-child { width: 108px; white-space: nowrap; padding-right: 14px; }
.keytable tr:last-child td { border-bottom: 0; }

/* search jump target */
@keyframes docsFlash {
  from { background: rgba(255, 214, 0, .30); }
  to   { background: transparent; }
}
.topic.flash { animation: docsFlash 1.4s var(--ease); border-radius: 8px; }

/* ───────── Mobile ───────── */
@media (max-width: 900px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 110px;
  }
  .docs-aside {
    position: sticky;
    top: var(--docs-top);
    max-height: none;
    z-index: 40;
    background: var(--bg);
    padding: 12px 0 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line-2);
    gap: 10px;
  }
  .docs-toggle { display: flex; }
  /* Collapsed by default on mobile; the button owns the state. Using a button
     rather than <details> because the tree is two levels deep and needs to keep
     its group headings — and because UA <details> styling is the one thing that
     still differs enough between browsers to bite. */
  .docs-tree {
    display: none;
    max-height: 62vh;
    margin-top: 4px;
    padding: 4px 0 8px;
  }
  .docs-tree.is-open { display: block; }
  .docs-results { max-height: 52vh; }
  .topic { scroll-margin-top: 150px; }
  .meta { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .meta dt { padding-top: 8px; }
  .meta dd { grid-column: 1; }   /* single column here, so undo the desktop pin */
  .keytable td:first-child { width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topic.flash { animation: none; }
  .docs-toggle .chev { transition: none; }
}

/* One H1 system shared by the homepage and every secondary page. */
.hero-eyebrow,
.docs-title h1,
.feedback-heading h1,
.feedback-thanks h1 {
  font-family: var(--fat);
  font-weight: 400;
  font-size: var(--hero-type-size);
  line-height: .95;
  letter-spacing: -.04em;
}