/* Camera Sink — marketing site
   Dark and cool, with a film light leak in blues and violets: the blue comes
   from the app icon. The page stays near-black until the last section, where
   it fades to indigo as you scroll (data-bg in index.html, main.js). Buttons
   are white. Headlines are dot-matrix, like a camera's LCD. Lavender is kept
   for one meaning only: what you type. */

:root {
  --night: #05060B;          /* the hero's colour, and the page's before main.js runs */
  --page: var(--night);      /* main.js fades this between the sections' colours */
  --panel: #0A0D16;          /* screens and cards */
  --line: rgba(232, 238, 250, 0.11);
  --line-2: rgba(232, 238, 250, 0.2);
  --text: #E8EEFA;           /* cool off-white */
  --text-2: rgba(232, 238, 250, 0.7);
  --text-3: rgba(232, 238, 250, 0.54);
  --blue: #8EB2FF;           /* markers, from the app icon */
  --blue-2: #B9D0FF;
  --lilac: #CDB4FF;          /* what you type */
  --ok: #86E5B8;             /* copied and checked */
  --button: #FFFFFF;         /* the Download buttons */
  --button-hover: #DCE6FF;
  --ink: #070B1C;            /* text on the buttons */

  --dots: "Doto", "Geist Mono", ui-monospace, monospace;
  --body: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --nav: 64px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--text);
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.you { color: var(--lilac); }

/* Read by screen readers, not shown */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────────── Type ───────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font: 500 11.5px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--blue);
  box-shadow: 0 0 10px rgba(142, 178, 255, 0.8);
}

.section-title {
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* ───────────── The SD card corner ─────────────
   Buttons and the price card lose a top-left corner, like an SD card. */

.notched {
  --n: 34px;
  --r: 18px;
  padding: 1px;
  background: var(--line-2);
  border-radius: var(--r);
  clip-path: polygon(var(--n) 0, 100% 0, 100% 100%, 0 100%, 0 var(--n));
}
.notched-fill {
  height: 100%;
  border-radius: calc(var(--r) - 1px);
  clip-path: polygon(calc(var(--n) - 0.6px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--n) - 0.6px));
}

/* ───────────── Buttons ───────────── */

.btn {
  --n: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px 0 20px;
  border-radius: 4px;
  clip-path: polygon(var(--n) 0, 100% 0, 100% 100%, 0 100%, 0 var(--n));
  background: var(--button);
  color: var(--ink);
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--button-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 4px var(--ink);
}
.btn-icon { width: 15px; height: 15px; flex: none; }
.btn-small { --n: 8px; min-height: 36px; padding: 0 16px; font-size: 12px; }
.btn-wide { width: 100%; }

.cta-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-2);
}

/* ───────────── Nav ───────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(3, 5, 11, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--nav);
}
/* The logo is just the name (the icon is kept for the app itself) */
.brand {
  font-weight: 750;
  font-size: 17px;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: 30px;
  margin-left: auto;
}
.nav-links a {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--text); }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
}

/* ───────────── Scroll scenes ─────────────
   A scene is a tall section with a stage that stays pinned to the screen
   while you scroll through it. main.js plays the stage from start to finish.
   Without the "motion" class (Reduce Motion, or no JavaScript), each stage
   is an ordinary section showing its finished state. */

.scene { position: relative; }
.stage { position: relative; }

.motion .scene { height: var(--len, 300vh); }
.motion .stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  will-change: transform, opacity; /* main.js sinks and dims it as the next section comes up */
}
/* Tabbing to a button in a scene puts the scene back where it really is, so
   the browser scrolls the button fully into view */
.motion .stage:has(:focus-visible) { transform: none !important; opacity: 1 !important; }
/* Each section has the page colour behind it, so it slides up over the scene
   before it as that scene sinks away */
.motion main > section { position: relative; background: var(--page); }

.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(232, 238, 250, 0.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(232, 238, 250, 0.035) 0 1px, transparent 1px 120px);
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%);
}

/* ───────────── Hero ───────────── */

.hero { --len: 230vh; }
.hero .stage {
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav) + clamp(32px, 7vh, 80px)) 0 32px;
  overflow: hidden;
}

/* The light leak: a slow, cool glow seen through a sensor-like grid */
.leak {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.leak-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.34) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(rgba(0, 0, 0, 0.34) 1px, transparent 1px) 0 0 / 6px 6px;
}
/* Dark in the middle, where the words are; the glow shows at the top and bottom */
.leak-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 11, 0.35) 0%, rgba(5, 6, 11, 0.05) 18%, rgba(5, 6, 11, 0.25) 40%, var(--night) 60%, rgba(5, 6, 11, 0.62) 82%, rgba(5, 6, 11, 0.08) 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: 28px 64px;
  will-change: transform, opacity;
}
/* A soft shade behind each column keeps the words readable over the glow */
.hero-text,
.hero-side {
  position: relative;
  isolation: isolate;
}
.hero-text::before,
.hero-side::before {
  content: "";
  position: absolute;
  inset: -70px -90px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(3, 5, 12, 0.62), rgba(3, 5, 12, 0.32) 60%, transparent);
  pointer-events: none;
}
/* Tabbing to the Download button brings faded copy back */
.motion .hero-copy:focus-within { opacity: 1 !important; }
/* The small label gets its own dark tag, since it's too small for the shade alone */
.hero .eyebrow {
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(3, 5, 12, 0.55);
  color: #F4F7FF;
}
.hero-title {
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  /* Sized so "Photos sorted." stays on one line */
  font-size: clamp(2.8rem, 5.5vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
}
.hero-lede {
  max-width: 30em;
  font-size: clamp(16px, 1.45vw, 18.5px);
  color: rgba(244, 247, 255, 0.94);
}
.hero-side .cta { margin-top: 24px; }
.hero .cta-note { color: rgba(244, 247, 255, 0.9); }

.device-wrap {
  position: relative;
  z-index: 3;
  margin-top: clamp(40px, 7vh, 72px);
  will-change: transform;
}

/* The Mac: a screen on the left, the aluminium side with the card slot on the right */
.device {
  --dh: clamp(300px, 44vh, 430px);
  --dark: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: var(--dh);
  border-radius: 18px;
  box-shadow: 0 60px 140px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.device-screen {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 18px 0 0 18px;
  background: radial-gradient(120% 90% at 20% 0%, #161B2A, #05070D 60%);
  overflow: hidden;
}

.menubar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  flex: none;
  height: 32px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--line);
  font: 500 12.5px/1 var(--body);
}
.menubar-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 60px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.09);
}
.menubar-card { width: 11px; height: 15px; color: var(--text); }
.menubar-status { font-variant-numeric: tabular-nums; min-width: 2.3em; text-align: right; }
.menubar-status.is-done { color: var(--ok); }
.menubar-clock { opacity: 0.8; }

.device .menubar-status { opacity: 0; transition: opacity 0.3s ease; }
.device.is-in .menubar-status { opacity: 1; }

.screen-body {
  position: relative;
  flex: 1;
  padding: clamp(20px, 3.4vh, 32px) clamp(20px, 2.6vw, 34px);
}
.screen-prompt {
  font: 400 clamp(15px, 1.5vw, 20px)/1.4 var(--mono);
  color: var(--text-2);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.motion .blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.screen-found {
  position: absolute;
  inset: clamp(20px, 3.4vh, 32px) clamp(20px, 2.6vw, 34px) auto;
}
.screen-found > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.device.is-in .screen-prompt { opacity: 0; transform: translateY(-10px); }
.device.is-in .screen-found > * { opacity: 1; transform: none; }
.device.is-in .screen-found > :nth-child(2) { transition-delay: 0.12s; }
.device.is-in .screen-found > :nth-child(3) { transition-delay: 0.24s; }

.found-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11.5px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-2);
}
.found-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--blue);
  box-shadow: 0 0 10px rgba(142, 178, 255, 0.9);
}
.found-big {
  margin-top: 10px;
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: clamp(3.4rem, 6.6vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.found-sub { margin-top: 10px; color: var(--text-2); font-size: 15px; }

.device-face {
  position: relative;
  min-width: 0;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(165deg, #E4E8EF 0%, #CED4DD 55%, #BCC3CE 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 -3px 8px rgba(0, 0, 0, 0.16);
}
/* The lights dim as you scroll on */
.device-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: var(--panel);
  opacity: calc(var(--dark) * 0.9);
  pointer-events: none;
}

.screw {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2F5F9, #959CA8 70%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.screw::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 4.25px;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.35);
  transform: rotate(40deg);
}
.screw:nth-of-type(1) { top: 14px; left: 14px; }
.screw:nth-of-type(2) { top: 14px; right: 14px; }
.screw:nth-of-type(3) { bottom: 14px; left: 14px; }
.screw:nth-of-type(4) { bottom: 14px; right: 14px; }

.grille {
  position: absolute;
  top: 22px;
  right: 40px;
  width: 64px;
  height: 22px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.32) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
}
.face-brand {
  position: absolute;
  top: 22px;
  left: 40px;
  font: 600 10px/1.2 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26, 32, 46, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.slot-zone {
  --cw: clamp(96px, 11vw, 148px);
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(78%, calc(var(--cw) * 2.1));
  transform: translateX(-50%);
}
.slot {
  position: relative;
  z-index: 2;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(#10131B, #2E3440);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.75);
}
.slot-label {
  display: block;
  margin-top: 12px;
  text-align: center;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26, 32, 46, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Everything below the slot's middle is inside the Mac, so it's hidden */
.card-mask {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(100% - 7px);
  width: calc(var(--cw) + 120px);
  height: calc(var(--cw) * 1.3 + 220px);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.card-move {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 100%;
  will-change: transform;
}
.sdcard {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35));
}
.motion .device:not(.is-in) .sdcard { animation: hover 3.6s ease-in-out infinite; }
@keyframes hover {
  50% { transform: translateY(-7px); }
}

.face-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding: 0 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.lamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 32, 46, 0.55);
}
.lamp::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #969DA9;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.lamp-library::before {
  background: #3FBF7F;
  box-shadow: 0 0 8px rgba(63, 191, 127, 0.8);
}
.device.is-in .lamp-read::before {
  background: var(--blue);
  box-shadow: 0 0 10px rgba(142, 178, 255, 0.95);
}

/* "Scroll to put the card in", at the bottom of the Mac's screen */
.scroll-cue {
  position: absolute;
  left: clamp(20px, 2.6vw, 34px);
  bottom: clamp(18px, 3vh, 28px);
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.scroll-cue::before {
  content: "";
  width: 1px;
  height: 22px;
  background: linear-gradient(var(--blue), transparent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
html:not(.motion) .scroll-cue { display: none; }

html:not(.motion) .hero .stage { padding-bottom: 72px; }

@media (max-width: 760px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-title { font-size: 13.4vw; letter-spacing: -0.05em; }
  .hero-side .cta { margin-top: 18px; }
  .device-wrap { margin-top: 36px; }
  .device {
    --dh: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 150px 250px;
  }
  .device-screen { border-radius: 16px 16px 0 0; }
  .device-face { border-radius: 0 0 16px 16px; }
  .slot-zone { --cw: 104px; top: 60%; }
  .face-foot { padding: 0 28px; height: 46px; }
  .face-brand { left: 30px; }
  .grille { right: 30px; }
  .found-big { font-size: 3rem; margin-top: 6px; }
  .found-sub { display: none; }
}

/* ───────────── Cameras ───────────── */

.brands {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.brands-label {
  flex: none;
  padding-left: var(--edge);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.marquee {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-list {
  display: flex;
  flex: none;
  gap: 52px;
  padding-right: 52px;
}
.marquee-list li {
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text-2);
  white-space: nowrap;
}
/* Each copy is at least as wide as the strip, so the loop never shows a gap */
.motion .marquee-list { min-width: 100%; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-list { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
html:not(.motion) .marquee-list[aria-hidden] { display: none; }
html:not(.motion) .marquee-list { flex-wrap: wrap; flex: 1; gap: 8px 36px; }
html:not(.motion) .marquee {
  -webkit-mask-image: none;
  mask-image: none;
  padding-right: var(--edge);
}

@media (max-width: 760px) {
  .brands { flex-direction: column; align-items: stretch; gap: 14px; }
  .brands-label { padding-left: var(--gutter); }
  html:not(.motion) .marquee { padding-inline: var(--gutter); }
}

/* ───────────── How it works ───────────── */

.how { --len: 340vh; }
.how .stage {
  display: flex;
  align-items: center;
  padding: calc(var(--nav) + 40px) 0 40px;
}
html:not(.motion) .how .stage { padding: 120px 0; }

.how-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}

.how-steps {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.how-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.how-num {
  font: 500 12px/1.9 var(--mono);
  color: var(--text-3);
}
.how-step.is-active .how-num { color: var(--blue-2); }
.how-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; transition: color 0.35s ease; }
/* Steps you're not on are dimmed with colour (still readable), not faded out */
.motion .how-step:not(.is-active) .how-title { color: var(--text-3); }
.how-text {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--text-2);
  font-size: 15.5px;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.45s ease;
}
.how-step.is-active .how-text { max-height: 7em; opacity: 1; margin-top: 6px; }
.how-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
}
.how-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue);
  box-shadow: 0 0 10px rgba(142, 178, 255, 0.7);
}
html:not(.motion) .how-text { max-height: none; opacity: 1; margin-top: 6px; }
/* main.js measures with transitions off, so it gets final heights straight away */
.is-measuring,
.is-measuring * { transition: none !important; }
html:not(.motion) .how-bar { display: none; }

/* The import, on screen */
.screen {
  --row: 27px;
  transform-origin: 50% 0; /* main.js shrinks it from the top on short screens */
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(255, 255, 255, 0.02);
}
.no-js .screen { display: none; }
.screen-inner { display: flex; flex-direction: column; }
.screen .menubar { justify-content: space-between; height: 40px; padding: 0 16px 0 20px; }
.screen-state {
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.mock-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}
.mock-col { min-width: 0; padding: 22px 24px 24px; }
.mock-lib { border-left: 1px solid var(--line); }
.mock-label {
  margin-bottom: 14px;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mock-path {
  min-height: 1.5em;
  margin-bottom: 16px;
  font: 400 12px/1.5 var(--mono);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-path b { color: var(--text); font-weight: 500; }

.mock-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin-bottom: 16px;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.mock-field.is-on { opacity: 1; }
.mock-field-label { font-size: 12.5px; color: var(--text-2); }
.mock-field-box {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  font: 500 14px/1 var(--body);
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.mock-field.is-typing .mock-field-box {
  border-color: rgba(205, 180, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(205, 180, 255, 0.16);
}
.caret {
  display: none;
  width: 1.5px;
  height: 17px;
  margin-left: 1px;
  background: var(--lilac);
  animation: blink 1s steps(1) infinite;
}
.mock-field.is-typing .caret { display: inline-block; }

/* Room for the finished lists (5 card files, 12 library rows), so the screen never jumps */
.mock-files { min-height: calc(var(--row) * 5); }
.tree { min-height: calc(var(--row) * 12); }

.mock-files li,
.tree li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: var(--row);
  font: 400 12px/1 var(--mono);
  white-space: nowrap;
  animation: rise 0.3s ease both;
}
.mock-files li {
  justify-content: space-between;
  margin: 0 -10px;
  padding: 0 10px;
  border-radius: 5px;
  color: var(--text-2);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.mock-files li.is-copying { background: rgba(142, 178, 255, 0.12); color: var(--text); }
.mock-files li.is-done { color: var(--text); }
.file-state {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--ok);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mock-files li.is-done .file-state { opacity: 1; transform: none; }

.tree li { padding-left: calc(var(--d, 0) * 14px); color: var(--text); }
.tree svg { flex: none; width: 15px; height: 15px; }
.tree .is-folder svg { color: var(--blue-2); }
.tree .is-file { color: var(--text-2); }
.tree .is-file svg { color: var(--text-3); }
.tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.is-file .tree-name { display: flex; }
/* In a renamed file, only the date and event shorten; the number and extension always show */
.tree-stem { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree-tail { flex: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.mock-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13.5px;
  color: var(--text-2);
}
.mock-status { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-status.is-done { color: var(--ok); }
.mock-meter {
  flex: none;
  width: min(200px, 30%);
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.mock-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--ok));
}

@media (max-width: 860px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .how .section-title { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .how-steps { margin-top: 20px; }
  /* Pinned on a phone: start at the top, one step at a time. The other steps
     are hidden from view but still read by screen readers. */
  .motion .how .stage { align-items: flex-start; padding: calc(var(--nav) + 16px) 0 12px; }
  .motion .how .eyebrow { display: none; }
  .motion .how-step:not(.is-active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .motion .how-step { padding: 14px 0; }
  .screen { --row: 24px; }
  .mock-cols { grid-template-columns: minmax(0, 1fr); }
  .mock-col { padding: 18px; }
  .mock-lib { border-left: 0; border-top: 1px solid var(--line); }
  .motion .mock-lib { display: none; border-top: 0; }
  .motion .screen.show-lib .mock-card { display: none; }
  .motion .screen.show-lib .mock-lib { display: block; }
  /* The card's list and the library's swap places with a fade, not a jump */
  .motion .mock-col { animation: rise 0.35s ease both; }
  .motion .tree { min-height: calc(var(--row) * 12); }
  .tree li { padding-left: calc(var(--d, 0) * 11px); gap: 7px; font-size: 11px; }
  .mock-foot { padding: 12px 18px; font-size: 12.5px; }
}

/* ───────────── Features: sideways track ───────────── */

.features { --len: 420vh; }
.features .stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: calc(var(--nav) + 28px) 0 36px;
}
html:not(.motion) .features .stage { padding: 120px 0; }

.features-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.features-count {
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.features-of { margin-left: 0.18em; font-size: 0.42em; color: var(--text-3); }
.features-bar { height: 2px; background: var(--line); }
.features-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue);
  box-shadow: 0 0 10px rgba(142, 178, 255, 0.7);
}
html:not(.motion) .features-count,
html:not(.motion) .features-bar { display: none; }

.features-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-inline: var(--edge);
  will-change: transform;
}
.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: clamp(280px, 30vw, 400px);
  /* Leaves room for the heading above on shorter windows */
  height: clamp(280px, calc(100svh - 300px), 470px);
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(232, 238, 250, 0.07), rgba(232, 238, 250, 0.02));
  overflow: hidden;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.fcard::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 80%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(160, 140, 255, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.fcard.is-active { border-color: rgba(185, 208, 255, 0.5); }
.fcard.is-active::before { opacity: 1; }
.fcard-read {
  margin-bottom: auto;
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: clamp(4.4rem, 8.4vw, 7.4rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
  will-change: transform;
}
.fcard-title { margin-bottom: 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.fcard-text { font-size: 16px; color: var(--text-2); }
.receipt {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
  font: 400 11.5px/1.5 var(--mono);
  color: var(--text-2);
}

html:not(.motion) .features-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
html:not(.motion) .fcard { width: auto; height: auto; min-height: 340px; }
html:not(.motion) .fcard-read { margin-bottom: 40px; font-size: clamp(3.4rem, 5.4vw, 5rem); }

@media (max-width: 760px) {
  .features-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .features .section-title { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .features-count { font-size: 2.2rem; }
  .fcard { width: 80vw; height: clamp(300px, calc(100svh - 290px), 430px); padding: 24px 22px 22px; }
}

/* ───────────── Organize a Folder ───────────── */

.organize { --len: 320vh; }
.organize .stage {
  display: flex;
  align-items: center;
  padding: calc(var(--nav) + 28px) 0 32px;
}
html:not(.motion) .organize .stage { padding: 120px 0; }
.js:not(.motion) .organize .stage { min-height: 760px; }

.org-field { position: absolute; inset: 0; pointer-events: none; }
.org-copy { position: relative; z-index: 2; }
/* The day folders start 46% of the way across (main.js), so the words stop before that */
.org-copy > * { max-width: min(26rem, 42%); }
.org-text { margin-top: 20px; font-size: 17.5px; color: var(--text-2); }

.org-stats { display: flex; gap: 40px; margin-top: 30px; }
.org-stats dt {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.org-stats dd {
  margin-top: 6px;
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.chip {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: rgba(14, 18, 30, 0.94);
  font: 500 11px/1 var(--mono);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  will-change: transform, opacity;
}
.chip i {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
}
.chip span { overflow: hidden; text-overflow: ellipsis; }

.org-head {
  position: absolute;
  left: 0;
  top: 0;
  font: 500 12px/1.3 var(--mono);
  color: var(--text);
  white-space: nowrap;
  will-change: opacity;
}
.org-head small {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.org-head span { display: inline-flex; align-items: center; gap: 7px; }
.org-head svg { width: 15px; height: 15px; color: var(--blue-2); }

.ticks { display: grid; gap: 10px; margin-top: 26px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; }
.ticks svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ok); }

/* Up to 1000px wide the folders sit in a 2 × 2 grid under the words (the same
   breakpoint as main.js), and main.js sets the still version's height. */
@media (max-width: 1000px) {
  .organize .stage { align-items: flex-start; }
  .org-copy > * { max-width: 34rem; }
  .org-copy .ticks { display: none; }
  .js:not(.motion) .organize .stage { min-height: 0; }
}

@media (max-width: 760px) {
  .organize .section-title { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .org-text { margin-top: 14px; font-size: 16px; }
  .org-stats { margin-top: 18px; }
  .org-stats dd { font-size: 40px; }
  /* Pinned on a phone there's only room for the words and the folders */
  .motion .org-stats {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .chip { height: 26px; font-size: 10px; }
  .org-head { font-size: 11px; }
}

/* ───────────── Sections ───────────── */

.section { position: relative; padding: clamp(96px, 13vw, 160px) 0; }

.reveal { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal-on .reveal:not(.is-in) { opacity: 0; transform: translateY(26px); }

/* Screenshot placeholders. Swap each <figure class="shot"> for an <img class="shot-img">. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  margin-top: 64px;
}
.shot,
.shot-img { will-change: transform; }
.shot {
  aspect-ratio: var(--ratio, 16 / 10);
  border: 1px dashed rgba(142, 178, 255, 0.35);
  border-radius: 12px;
  background:
    repeating-linear-gradient(135deg, rgba(142, 178, 255, 0.05) 0 1px, transparent 1px 14px),
    var(--panel);
  overflow: hidden;
}
.shot-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 100%;
  padding: 20px;
  text-align: center;
}
.shot-tag {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-2);
}
.shot-name { font-size: 15px; font-weight: 600; }
.shot-size { font: 400 11px/1 var(--mono); color: var(--text-3); }
.shot-img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }

.shot-a { grid-column: 1 / span 5; }
.shot-b { grid-column: 7 / span 6; margin-top: 110px; }
.shot-c { grid-column: 1 / span 6; margin-top: -30px; }
.shot-d { grid-column: 8 / span 5; margin-top: 90px; }

@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 40px; }
  .gallery-grid > * { grid-column: auto; margin-top: 0; }
}

/* Pricing */
.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.pricing-text { margin-top: 20px; max-width: 28em; font-size: 18px; color: var(--text-2); }

.price-tilt { perspective: 1100px; }
.price-card {
  --n: 56px;
  --r: 20px;
  --rx: 0deg;
  --ry: 0deg;
  background: linear-gradient(180deg, rgba(185, 208, 255, 0.75), var(--line-2) 45%);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.price-card.is-tilting { transition-duration: 0.12s; }
.price-inner {
  position: relative;
  padding: 66px 36px 36px;
  background: linear-gradient(180deg, #151A2B, #0A0D16 55%);
  overflow: hidden;
}
.price-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(500px circle at var(--gx, 30%) var(--gy, 0%), rgba(190, 210, 255, 0.12), transparent 45%);
  pointer-events: none;
}
.price-contacts {
  position: absolute;
  top: 20px;
  left: 96px;
  display: flex;
  gap: 9px;
}
.price-contacts i {
  width: 7px;
  height: 22px;
  border-radius: 4px;
  background: rgba(232, 238, 250, 0.16);
}
.price-name {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
}
.price-amount {
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: 104px;
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.price-once { font-size: 18px; color: var(--text-2); }
.price-quip { margin-top: 14px; }
.price-inner .ticks { margin: 26px 0 30px; }

@media (max-width: 860px) {
  .pricing { grid-template-columns: minmax(0, 1fr); }
  .price-tilt { max-width: 440px; }
}

/* FAQ */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px;
}
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  flex: none;
  width: 20px;
  font: 400 20px/1 var(--mono);
  text-align: center;
  color: var(--blue-2);
  transition: transform 0.25s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p {
  max-width: 40em;
  padding: 0 40px 24px 0;
  color: var(--text-2);
}

@media (max-width: 860px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Last call: the light comes back */
.final {
  position: relative;
  padding: clamp(110px, 14vw, 180px) 0 clamp(130px, 16vw, 200px);
  overflow: hidden;
  text-align: center;
}
.final-glow {
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: max(1200px, 130%);
  height: 110%;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 50% 50%, rgba(84, 126, 255, 0.5), transparent),
    radial-gradient(closest-side at 30% 60%, rgba(96, 214, 200, 0.3), transparent),
    radial-gradient(closest-side at 72% 58%, rgba(168, 110, 255, 0.38), transparent);
  pointer-events: none;
}
.motion .final-glow { animation: glow 12s ease-in-out infinite alternate; }
@keyframes glow {
  to { transform: translateX(-50%) translateY(-6%) scale(1.08); }
}
.final-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.final-title {
  max-width: 11em;
  margin-bottom: 40px;
  font-family: var(--dots);
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

/* Footer */
.footer {
  padding: 32px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-2);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.brand-quiet { font-size: 15px; color: var(--text); }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer-note { margin-left: auto; }

@media (max-width: 760px) {
  .footer-note { width: 100%; margin-left: 0; }
}

/* ───────────── Less motion ───────────── */

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