/* =========================================================
   MyStash — mystashlabs.com
   Dark · premium · dynamic. Side-by-side alternating layout,
   big edge-bleeding shots, directional reveals + parallax,
   one live interactive demo. Restrained palette — motion and
   depth do the work, not saturated glows.
   ========================================================= */

:root {
  --bg:        #06070a;
  --panel:     rgba(255,255,255,0.032);
  --panel-2:   rgba(255,255,255,0.05);
  --hair:      rgba(255,255,255,0.07);
  --hair-2:    rgba(255,255,255,0.12);
  --ink:       #f3f6fc;
  --ink-soft:  #c0c8d6;
  --ink-mute:  #868f9f;
  --ink-faint: #565f6e;
  --accent:    #6f8fd6;          /* a single cool accent, used with intent */
  --accent-soft: #8fa1c9;

  --maxw: 1600px;          /* a bit wider than the old 1500, not edge-to-edge */
  --frame-w: 1440px;
  --pad: clamp(20px, 3.4vw, 60px);
  --radius: 20px;
  --radius-sm: 13px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6; letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.032em; line-height: 1.03; font-weight: 800; }
.grad {
  background: linear-gradient(180deg, #ffffff 0%, #aeb8cd 135%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- background wash ---- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.aurora::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 80% -6%, rgba(110,143,214,.07), transparent 60%),
    radial-gradient(800px 700px at 4% 6%, rgba(90,110,150,.05), transparent 58%);
}
.aurora-blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .12;
  background: radial-gradient(circle at 50% 50%, rgba(110,143,214,.7), transparent 64%);
}
.a1 { width: 46vw; height: 46vw; left: -8vw; top: -10vw; }
.a2 { width: 40vw; height: 40vw; right: -6vw; top: 46vh; opacity: .09; }
.grain {
  position: absolute; inset: -50%; opacity: .02; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 15px var(--pad);
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding: 10px var(--pad); background: rgba(7,8,11,.78);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--hair);
}
.nav-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; }
.brand-word { height: 20px; width: auto; opacity: .94; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a { color: var(--ink-mute); font-size: 14.5px; font-weight: 500; transition: color .25s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: 8px; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em; padding: 11px 20px;
  border-radius: 11px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn-primary { color: #0a0c12; background: #eef1f8; }
.btn-primary:hover { background: #fff; transform: translateY(-1px); }
.btn-ghost { color: var(--ink-soft); background: var(--panel); border-color: var(--hair-2); backdrop-filter: blur(8px); }
.btn-ghost:hover { color: var(--ink); border-color: rgba(255,255,255,.24); }
.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 12px; }
.btn-xl { padding: 16px 38px; font-size: 16.5px; border-radius: 12px; }

/* ---- shared bits ---- */
section { padding-left: var(--pad); padding-right: var(--pad); }
.kicker {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 18px;
}
.kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.kicker.center { justify-content: center; }
.lede { color: var(--ink-soft); font-size: 19px; max-width: 64ch; }
.sec-head { max-width: 780px; margin: 0 auto clamp(34px, 5vh, 52px); text-align: center; }
.sec-head h2 { font-size: clamp(30px, 3.8vw, 52px); margin-bottom: 14px; }

/* product shots: no container — rounding sits on the image itself */
.frame { margin: 0; }
.frame img { width: 100%; display: block; border-radius: 12px; filter: drop-shadow(0 28px 60px rgba(0,0,0,.6)); }

/* ---------------------------------------------------------
   Hero — text left, big shot right + floating chips
   --------------------------------------------------------- */
.hero {
  max-width: 1720px; margin: 0 auto;   /* hero is the showcase — a touch wider than the rest */
  padding-top: clamp(124px, 16vh, 188px); padding-bottom: clamp(20px,4vh,40px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  column-gap: clamp(28px, 4vw, 60px); row-gap: 28px; align-items: start;
}
/* stage spans both text rows so it stays centered beside title + body copy */
.hero-stage { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); padding: 7px 14px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--hair); backdrop-filter: blur(8px); margin-bottom: 24px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #4fb89f; }
.hero-title { font-size: clamp(36px, 3.9vw, 54px); font-weight: 900; letter-spacing: -0.04em; margin-bottom: 22px; }
@media (min-width: 981px) { .hero-title .hero-line1 { white-space: nowrap; } }
.hero-sub { color: var(--ink-soft); font-size: 18.5px; max-width: 52ch; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.trust-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; }
.trust-pills li {
  font-size: 13px; font-weight: 500; color: var(--ink-mute); padding: 6px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--hair);
}
.hero-stage {
  position: relative; perspective: 2000px;
  padding-right: clamp(62px, 6vw, 104px);   /* reserved gutter the floating rail lives in */
}
.hero-shot {
  margin: 0; transform-style: preserve-3d; will-change: transform;
  transform: rotateY(var(--ry, 10deg)) rotateX(var(--rx, 2deg));
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
/* while the cursor is over the stage, follow it tightly; ease back out on leave */
.hero-stage.tilting .hero-shot { transition: transform .12s linear; }
.hero-shot img { width: 100%; border-radius: 14px; filter: drop-shadow(24px 42px 70px rgba(0,0,0,.6)); }
.hero-chip { display: none; }  /* no floating widgets over the hero — keep it big and clean */

/* floating pro-tools rail standing beside the hero shot, in the reserved right gutter */
.hero-rail {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: clamp(240px, 24vw, 416px); width: auto;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.62));
  pointer-events: none;
}
/* compressed two-column: shrink copy so the image stays dominant */
@media (min-width: 981px) and (max-width: 1240px) {
  .hero { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr); row-gap: 16px; }
  .hero-title { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 14px; }
  .hero-sub { font-size: 15px; margin-bottom: 20px; }
  .hero-actions { margin-bottom: 18px; }
  .hide-sm { display: none; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 100px; row-gap: 20px; }
  /* reset stage to normal flow: pill → title → image → paragraph → buttons */
  .hero-stage { grid-column: auto; grid-row: auto; align-self: auto; perspective: none; }
  .hero-shot { transform: none; }
  .hero-rail { height: clamp(200px, 34vw, 290px); }
}
@media (max-width: 600px) {
  .hero-rail { display: none; }
  .hero-stage { padding-right: 0; }
}

/* ---------------------------------------------------------
   Trust bar
   --------------------------------------------------------- */
.trustbar { max-width: var(--frame-w); margin: clamp(50px,7vh,90px) auto 0; }
.trustbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px clamp(20px,3vw,42px); background: var(--panel); border: 1px solid var(--hair);
  border-radius: var(--radius); backdrop-filter: blur(12px);
}
.tb-item { display: flex; flex-direction: column; gap: 2px; }
.tb-item strong { font-size: 16px; font-weight: 700; }
.tb-item span { font-size: 13.5px; color: var(--ink-mute); }
.tb-sep { width: 1px; height: 34px; background: var(--hair); }
@media (max-width: 760px) { .tb-sep { display: none; } .trustbar-inner { gap: 22px; } .tb-item { flex: 1 1 40%; } }

/* ---------------------------------------------------------
   Feature — full-bleed alternating grid
   text within content width · media bleeds to the screen edge
   --------------------------------------------------------- */
.feature {
  max-width: var(--frame-w); margin: 0 auto;   /* features stay their previous size; only the hero is big */
  padding-top: clamp(84px, 12vh, 156px);
  display: grid; grid-template-columns: 0.92fr 1.4fr; gap: clamp(34px, 5vw, 80px); align-items: center;
}
.feature.reverse { grid-template-columns: 1.4fr 0.92fr; }  /* media always the larger column */
.feature-copy { min-width: 0; }
.feature-media { min-width: 0; }
.feature.reverse .feature-copy { order: 2; }
.feature.reverse .feature-media { order: 1; }

.feature-copy h2 { font-size: clamp(30px, 3.9vw, 54px); margin-bottom: 18px; }
.feature-copy p { color: var(--ink-soft); font-size: 18px; max-width: 42ch; margin: 0; }

.feature-media .frame { width: 100%; }
.feature-media .stage { width: 100%; }

/* codec badges */
.codec-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.codec-badges span {
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft);
  padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--hair-2);
}

/* portrait shots: shown directly, no container — just the panel + its shadow */
.stage { display: flex; align-items: center; justify-content: center; }
.panel-shot {
  max-width: 100%; border-radius: 12px; filter: drop-shadow(0 30px 70px rgba(0,0,0,.6));
}
.panel-shot.tall { max-height: 560px; width: auto; }
.panel-shot.rail { max-height: 520px; width: auto; flex: none; }

.rail-stage { display: flex !important; align-items: center; justify-content: center; gap: clamp(20px, 2.4vw, 38px); }

/* capability pyramid — columns of pills, tallest on the left, tapering to one */
.rail-caps { display: flex; align-items: center; gap: 9px; flex: none; }
/* align-items:center keeps each pill at its own content width (no stretch) */
.rail-caps-col { display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 5.4vw, 70px); }
.rail-caps span {
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.88); white-space: nowrap; text-align: center;
  padding: 9px 20px; border-radius: 999px;
  /* Apple liquid glass — cool bluish tint to echo the rail */
  background: linear-gradient(145deg, rgba(143,161,214,0.20) 0%, rgba(111,143,214,0.06) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(150,170,222,0.22);
  box-shadow: inset 0 1.5px 0 rgba(186,202,255,0.24), inset 0 -1px 0 rgba(0,0,0,0.16), 0 6px 18px rgba(18,28,56,0.30);
  animation: pillBreath 6s ease-in-out infinite;
}
@keyframes pillBreath {
  0%, 100% { opacity: 0.72; }
  50%       { opacity: 1;    }
}
/* gentle, slow, out-of-phase staggering so the cloud shimmers softly */
.rail-caps-col:nth-child(1) span:nth-child(1) { animation-delay: 0.0s; }
.rail-caps-col:nth-child(1) span:nth-child(2) { animation-delay: 1.7s; }
.rail-caps-col:nth-child(1) span:nth-child(3) { animation-delay: 3.4s; }
.rail-caps-col:nth-child(1) span:nth-child(4) { animation-delay: 0.9s; }
.rail-caps-col:nth-child(1) span:nth-child(5) { animation-delay: 2.6s; }
.rail-caps-col:nth-child(2) span:nth-child(1) { animation-delay: 1.2s; }
.rail-caps-col:nth-child(2) span:nth-child(2) { animation-delay: 3.0s; }
.rail-caps-col:nth-child(2) span:nth-child(3) { animation-delay: 0.5s; }
.rail-caps-col:nth-child(2) span:nth-child(4) { animation-delay: 2.2s; }
.rail-caps-col:nth-child(3) span:nth-child(1) { animation-delay: 3.8s; }
.rail-caps-col:nth-child(3) span:nth-child(2) { animation-delay: 1.5s; }
.rail-caps-col:nth-child(3) span:nth-child(3) { animation-delay: 4.4s; }

.rail-caps-more {
  color: rgba(255,255,255,0.42) !important;
  border-style: dashed !important;
  border-color: rgba(255,255,255,0.12) !important;
  font-style: italic;
}

/* at stacked widths, keep the rail on the left and let the pills wrap to fill the right */
@media (max-width: 900px) {
  .rail-stage { justify-content: flex-start; align-items: center; gap: clamp(14px, 4vw, 26px); }
  .rail-caps { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-content: center; justify-content: flex-start; gap: 9px; }
  .rail-caps-col { display: contents; }   /* dissolve the columns so all pills flow as one wrapping cloud */
}
.panel-shot.wide { max-width: 480px; }
.feature-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.feature-list.two { grid-template-columns: 1fr 1fr; gap: 12px 22px; max-width: 360px; }
.feature-list li { position: relative; padding-left: 28px; color: var(--ink-soft); font-size: 16px; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid var(--hair-2);
}
.feature-list li::after {
  content: ""; position: absolute; left: 5px; top: 8.5px; width: 6px; height: 3px;
  border-left: 1.6px solid var(--accent-soft); border-bottom: 1.6px solid var(--accent-soft); transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .feature, .feature.reverse { grid-template-columns: 1fr; gap: 28px; }
  .feature-copy { order: 1; }
  .feature.reverse .feature-copy { order: 1; }
  .feature-media, .feature.reverse .feature-media { order: 2; }
  .stage { min-height: 0; }
  .feature-list.two { max-width: none; }
}

/* ---------------------------------------------------------
   New composites — search duo, compilations, titles/tags, ambient
   --------------------------------------------------------- */
/* spoken-word search: the live bar above its results */
.search-duo { flex-direction: column; align-items: stretch; gap: 22px; }
.search-duo .search-results {
  width: 100%;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
/* results dimmed/offset while the query is "in flight" (JS-controlled; visible by default) */
.search-duo .search-results.pending { opacity: .28; transform: translateY(14px); }

/* ---- 1:1 replica of the app's nav search bar (mirrors .nav-search in index.html,
        scaled ~1.75× to read as a hero element here). ---- */
.oss-bar {
  --oss-accent: #7fa0e8;
  position: relative;
  width: min(100%, 520px); margin: 0 auto;
  display: flex; align-items: center; gap: 13px;
  height: 56px; padding: 0 14px 0 22px;
  border-radius: 30px;
  font-family: 'Trebuchet MS', sans-serif;
  background: rgba(255,255,255,0.04);
  border: 3px solid rgba(123,143,188,0.18);
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .22s ease;
}
/* the "powerful" focused state — always on here, matching the reference shot */
.oss-bar.is-active {
  border-color: rgba(120,150,220,0.7);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 4px rgba(90,141,242,0.14), 0 10px 30px rgba(0,0,0,0.30);
}
.oss-ico { width: 24px; height: 24px; flex-shrink: 0; color: var(--oss-accent); }
/* spinner replaces the magnifier while a query is in flight */
.oss-spinner {
  display: none; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid rgba(120,150,220,0.25);
  border-top-color: var(--oss-accent);
  animation: oss-spin .7s linear infinite;
}
@keyframes oss-spin { to { transform: rotate(360deg); } }
.oss-bar.is-loading .oss-ico { display: none; }
.oss-bar.is-loading .oss-spinner { display: block; }

/* the typed field */
.oss-field {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center;
  font-size: 21px; letter-spacing: .4px; color: #e4ebfb; white-space: nowrap; overflow: hidden;
}
.oss-placeholder { color: rgba(150,165,200,0.5); }
.oss-bar.has-text .oss-placeholder { display: none; }
.oss-typed { color: #e4ebfb; }
.oss-caret {
  width: 2px; height: 24px; margin-left: 1px; background: #7b8fbc;
  animation: oss-blink 1.05s steps(1) infinite;
}
@keyframes oss-blink { 50% { opacity: 0; } }

/* result-count pill */
.oss-count {
  flex-shrink: 0; font-size: 16px; font-weight: 700; letter-spacing: .4px;
  color: #aebfe6; background: rgba(90,141,242,0.16);
  border: 1px solid rgba(90,141,242,0.28);
  padding: 3px 12px; border-radius: 16px; white-space: nowrap;
  display: none;
}
.oss-bar.has-results .oss-count { display: inline-block; }

/* clear (×) */
.oss-clear {
  flex-shrink: 0; display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: rgba(220,230,250,0.7); cursor: default;
}
.oss-clear svg { width: 20px; height: 20px; }
.oss-bar.has-results .oss-clear { display: inline-flex; }

/* "/" hint — only while empty */
.oss-kbd {
  flex-shrink: 0; font-family: ui-monospace, Consolas, monospace; font-size: 22px;
  line-height: 1; color: rgba(160,178,215,0.55); padding: 0 6px 0 2px;
}
.oss-bar.has-text .oss-kbd { display: none; }

/* ---- command palette: the live omni dropdown under the bar
        (mirrors #omniPanel + .omni-* in the app, scaled to match the bar) ---- */
.cmd-stage { flex-direction: column; align-items: center; gap: 12px; }
.cmd-stage .oss-bar { margin: 0; }
/* The list is always rendered to a constant number of rows, so the panel is a
   fixed-size box: typing just floats the match to the top and highlights it
   while the other commands keep filling the rest — the box never resizes. */
.omni-panel {
  box-sizing: border-box; width: min(100%, 520px); text-align: left;
  display: none; padding: 8px; border-radius: 22px;
  background: rgba(16,20,30,0.97);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.40);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  font-family: 'Trebuchet MS', sans-serif;
}
.omni-panel.open { display: block; }
.omni-tip {
  display: flex; align-items: flex-start; gap: 13px;
  margin: 2px 6px 7px; padding: 11px 16px; border-radius: 16px;
  background: rgba(90,141,242,0.12); border: 1px solid rgba(90,141,242,0.22);
  font-size: 16px; line-height: 1.4; color: rgba(206,219,247,0.88);
}
.omni-tip b { color: #9fc0ff; font-weight: 700; }
.omni-tip svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; color: #7fa0e8; }
.omni-hint {
  padding: 7px 16px 9px; font-size: 15px; color: rgba(150,165,200,0.72); letter-spacing: .2px;
}
.omni-hint kbd {
  font-family: inherit; font-size: 14px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px; padding: 1px 7px; margin: 0 2px; color: rgba(205,216,242,0.92);
}
.omni-section {
  padding: 9px 16px 5px; font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: rgba(140,158,200,0.62);
}
.omni-item {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 16px; border-radius: 14px; color: rgba(220,228,245,0.92);
  transition: background .14s ease;
}
.omni-item.focused { background: rgba(90,141,242,0.20); }
.omni-item-icon {
  flex: 0 0 auto; width: 24px; height: 24px;
  color: rgba(160,182,230,0.85);
  display: flex; align-items: center; justify-content: center;
}
.omni-item.focused .omni-item-icon { color: #8fb0f0; }
.omni-item-icon svg { width: 24px; height: 24px; }
.omni-item-title {
  flex: 1; min-width: 0; font-size: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* smart compilations: selection grid with the build panel floating in */
.compile-stage { position: relative; width: 100%; padding-bottom: 6%; }
.compile-grid-wrap { position: relative; width: 90%; }
.compile-stage .compile-grid { width: 100%; display: block; }
.compile-stage .compile-widget {
  position: absolute; right: 0; bottom: 0; width: 44%; max-width: 250px;
  border-radius: 16px; filter: drop-shadow(0 26px 56px rgba(0,0,0,.72));
}

/* check overlays — sit on the image's baked check circles, masking them until
   "selected", then fill blue with a tick (matching the shot) */
.cmp-check {
  position: absolute; transform: translate(-50%, -50%);
  width: 4.6%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 22, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: background .25s ease, border-color .25s ease;
  z-index: 2;
}
.cmp-check .cmp-tick {
  width: 60%; height: 60%; color: #fff; opacity: 0; transform: scale(.4);
  transition: opacity .18s ease, transform .25s cubic-bezier(.2, 1.5, .4, 1);
}
.cmp-check.on { background: #3b82f6; border-color: #3b82f6; }
.cmp-check.on .cmp-tick { opacity: 1; transform: scale(1); }

/* invisible click target over the widget's gradient play button (same box as the widget) */
.cmp-play {
  position: absolute; right: 0; bottom: 0; width: 44%; max-width: 250px;
  aspect-ratio: 528 / 400; pointer-events: none;
}

/* the moving cursor + click ripple */
.cmp-cursor {
  position: absolute; top: 0; left: 0; width: 22px; height: 33px;
  pointer-events: none; z-index: 6; transform: translate(-80px, -80px);
  transition: transform .55s cubic-bezier(.5, .05, .2, 1); will-change: transform;
}
.cmp-cursor-ico {
  display: block; transform-origin: 0 0; transition: transform .12s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
.cmp-cursor-ico svg { display: block; width: 26px; height: auto; }
.cmp-cursor.press .cmp-cursor-ico { transform: scale(.78); }
.cmp-ripple {
  position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(123, 159, 255, 0.45); opacity: 0;
  pointer-events: none; z-index: 5;
}
.cmp-ripple.go { animation: cmpRipple .62s ease-out; }
@keyframes cmpRipple { 0% { opacity: .5; transform: scale(.25); } 100% { opacity: 0; transform: scale(2.6); } }

@media (max-width: 560px) {
  .compile-stage { flex-direction: column; padding-bottom: 0; }
  .compile-grid-wrap { width: 100%; }
  .compile-stage .compile-widget { position: static; width: 62%; margin: -12% auto 0; }
  .cmp-cursor, .cmp-ripple { display: none; }   /* widget reflows below grid — skip the cursor */
}

/* titles & tags / auto playlists */
.edit-shot { max-width: min(100%, 460px); }
.tag-shot  { width: 100%; }

/* ambient: the concept bulb beside the glow it produces */
.ambient-visuals { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.ambient-bulb {
  width: clamp(84px, 11vw, 150px); height: auto; flex: none;
  filter: drop-shadow(0 0 34px rgba(150,122,244,.5));
  animation: bulbGlow 4.2s var(--ease) infinite;
}
.ambient-visuals .ambient-glow { flex: 1; min-width: 0; }
@keyframes bulbGlow {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(150,122,244,.32)); }
  50%      { filter: drop-shadow(0 0 52px rgba(150,122,244,.62)); }
}
@media (prefers-reduced-motion: reduce) { .ambient-bulb { animation: none; } }
@media (max-width: 620px) {
  .ambient-visuals { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ambient-visuals .ambient-glow { width: 100%; flex: none; }
  .ambient-bulb { width: 88px; }
}

/* player: main shot with the ambient-glow view inset in the corner */
.player-duo { position: relative; width: 100%; }
.player-duo .player-main { width: 100%; }
.player-duo .player-ambient { position: absolute; right: -3%; bottom: -12%; width: 46%; margin: 0; }
.player-duo .player-ambient img {
  border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 52px rgba(0,0,0,.7);
}
/* The composition (main shot + inset ambient view in the corner) is fully
   proportional — the inset is a % of the duo width and the duo is 100% wide —
   so it just scales down on narrow screens. We deliberately DON'T break the two
   apart on mobile; they stay overlapped and shrink together, looking identical
   to desktop. */

/* ===== Ambient-glow — a blurred, enlarged copy of each still sits behind it,
   so the picture's own colours spill out on every side, like a TV's ambient
   backlight. One master dial: --glow-strength. ===== */
.player-duo {
  --glow-strength: .55;      /* master intensity (0 = off · ~1.3 = vivid) */
  isolation: isolate;        /* own stacking context so the glow can sit behind */
}
.player-duo .player-main { position: relative; }   /* anchor its spill (the ambient still is already positioned) */
/* the spill: each frame's own image, scaled out past its edges and heavily
   blurred, peeking out around all four sides */
.player-duo .player-main::before,
.player-duo .player-ambient::before {
  content: ""; position: absolute; inset: -12%; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center; border-radius: 22%;
  filter: blur(52px) saturate(1.5);
  opacity: var(--glow-strength); transition: opacity .55s var(--ease);
  animation: glowBreathe 9s ease-in-out infinite alternate;
}
.player-duo .player-main::before    { background-image: url(/assets/img/player.webp); }
.player-duo .player-ambient::before { background-image: url(/assets/img/ambient-glow.webp); animation-duration: 11s; }
/* the toggle hides the glow — animation off so the opacity:0 actually wins */
.player-duo.glow-off .player-main::before,
.player-duo.glow-off .player-ambient::before { animation: none; opacity: 0; }
/* keep a moderate dark shadow for separation without smothering the colour spill */
.player-duo .frame img { filter: drop-shadow(0 16px 34px rgba(0,0,0,.34)); }
/* a slow size-breathe so the light feels alive (opacity untouched, so the toggle still hides it) */
@keyframes glowBreathe {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .player-duo .player-main::before, .player-duo .player-ambient::before { animation: none !important; }
}

/* the player is the lead feature — give its stills a touch more room than the rest */
#player { grid-template-columns: 1.62fr 0.84fr; }
/* make room on the left of the player for the toggle to sit fully OUTSIDE the stills */
#player .feature-media { padding-left: clamp(84px, 6.4vw, 96px); }

/* Narrow screens: collapse the player like every other feature. The desktop
   #player grid + padding above are ID-specificity AND later in source than the
   generic single-column breakpoint, so they'd otherwise win and keep the still
   crammed into the tiny right track. Override them here (after the desktop rules)
   so source order resolves in our favour, and pull the toggle inside the image. */
@media (max-width: 900px) {
  #player { grid-template-columns: 1fr; }
  #player .feature-media { padding-left: 0; }
}

/* the toggle — OUTSIDE the player on its left, vertically centred (like the app's
   own ambient control). Icon-only: the bulb IS the control, colour/greyscale = state. */
.ambient-toggle {
  position: absolute; top: 50%; left: calc(-1 * clamp(84px, 6.4vw, 96px) + 4px);
  transform: translateY(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0; border: 0; background: none; cursor: pointer; user-select: none;
  font-family: inherit;
}
/* just the bulb — no background, no container, no glow ring.
   A faint dark drop-shadow only, for legibility over bright frames. */
.ambient-toggle .amb-ico {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  /* Apple liquid glass — the frames behind the bulb are bent/scattered
     through it, not just blurred. The url(#amb-glass) displacement does
     the refraction; the plain blur lines above it are the fallback for
     browsers that don't support an SVG filter inside backdrop-filter. */
  background: linear-gradient(145deg, rgba(143,161,214,0.20) 0%, rgba(111,143,214,0.06) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(9px) saturate(170%) url(#amb-glass);
  border: 1px solid rgba(150,170,222,0.22);
  box-shadow: inset 0 1.5px 0 rgba(186,202,255,0.24), inset 0 -1px 0 rgba(0,0,0,0.16), 0 6px 18px rgba(18,28,56,0.30);
  transition: transform .3s var(--ease);
}
.ambient-toggle .amb-ico img {
  width: 28px; height: 28px; display: block;
}
.ambient-toggle .amb-label { display: none; }    /* icon-only; bulb conveys state */
.ambient-toggle:hover .amb-ico { transform: translateY(-1px) scale(1.06); }
.ambient-toggle:focus-visible { outline: none; }
.ambient-toggle:focus-visible .amb-ico { outline: 2px solid rgba(140,150,235,.9); outline-offset: 4px; border-radius: 8px; }

/* Narrow screens: the player no longer reserves a left gutter, so bring the
   bulb inside the still (placed after the desktop .ambient-toggle rule so it
   wins on source order). */
@media (max-width: 900px) { .ambient-toggle { left: 10px; } }

@media (max-width: 620px) {
  .player-duo .player-main::before,
  .player-duo .player-ambient::before { inset: -9%; filter: blur(36px) saturate(1.45); }
}

/* loop & export — stacked: copy on top, loop band (left) + export dialog (right) below */
.loop-section { display: block; }   /* override the feature side-by-side grid */
.loop-head { max-width: 720px; margin: 0 auto; text-align: center; }
.loop-head h2 { margin-bottom: 16px; }
.loop-head p { max-width: 60ch; margin: 0 auto; }
.loop-media {
  margin-top: clamp(36px, 5vw, 66px);
  display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
.loop-media .loop-band { width: 100%; margin: 0; }
.loop-media .export-wrap { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.loop-media .export-panel {
  width: 100%; display: block; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
}

/* invisible hit target over the dialog's Export button (bottom-right) */
.exp-btn { position: absolute; left: 74.5%; top: 77%; transform: translate(-50%,-50%); width: 16%; height: 9%; pointer-events: none; }

/* moving cursor + click ripple, mirrored from the markers demo */
.exp-cursor {
  position: absolute; top: 0; left: 0; width: 22px; height: 33px; pointer-events: none; z-index: 6;
  transform: translate(-70px,-70px); transition: transform .62s cubic-bezier(.5,.05,.2,1); will-change: transform;
}
.exp-cursor-ico { display: block; transform-origin: 0 0; transition: transform .12s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.exp-cursor-ico svg { display: block; width: 26px; height: auto; }
.exp-cursor.press .exp-cursor-ico { transform: scale(.78); }
.exp-ripple {
  position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(123,159,255,.45); opacity: 0; pointer-events: none; z-index: 5;
}
.exp-ripple.go { animation: trcRipple .62s ease-out; }

@media (max-width: 760px) {
  .loop-media { grid-template-columns: 1fr; gap: 22px; }
  .loop-media .export-wrap { max-width: 360px; }
  .exp-cursor, .exp-ripple { display: none; }
}

/* markers & transcript: empty panel → scan-revealed transcript → markers */
.markers-trio { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 18px); max-width: 100%; }
.markers-trio .trio-item { position: relative; flex: none; }
.markers-trio .trio-img { display: block; flex: none; height: clamp(280px, 30vw, 420px); width: auto; max-width: none; }
.markers-trio .trio-empty .trio-img { height: clamp(150px, 16vw, 228px); }   /* the empty state ~half size */
.markers-trio .trio-reveal { transform: translateY(-16px); }
.markers-trio .trio-markers { transform: translateY(14px); }

/* hairline dividing the transcribe flow (two left panels) from the markers panel */
.markers-trio .trio-sep {
  align-self: stretch; flex: none; width: 1px; margin: 0 clamp(6px, 1vw, 16px);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.13) 18%, rgba(255,255,255,.13) 82%, transparent);
}

/* scan-reveal of the finished transcript */
.trio-reveal.pending .trio-img { clip-path: inset(0 0 100% 0); }
.trio-reveal.scanning .trio-img { animation: trReveal 1.5s ease forwards; }
@keyframes trReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.scan-bar {
  position: absolute; left: 4%; right: 4%; top: 0; height: 1px; opacity: 0; z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(196,204,218,.5), transparent);
}
.trio-reveal.scanning .scan-bar { animation: trScan 1.5s ease forwards; }
@keyframes trScan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* invisible target over the Transcribe button */
.tr-btn { position: absolute; left: 50%; top: 46.6%; transform: translate(-50%,-50%); width: 62%; height: 9%; pointer-events: none; }

/* invisible targets the cursor taps on the markers panel (no visible highlight) */
.mk-hit {
  position: absolute; transform: translate(-50%,-50%); width: 22%; height: 4.6%;
  opacity: 0; pointer-events: none; z-index: 4;
}

/* moving cursor + click ripple */
.trc-cursor {
  position: absolute; top: 0; left: 0; width: 22px; height: 33px; pointer-events: none; z-index: 6;
  transform: translate(-90px,-90px); transition: transform .6s cubic-bezier(.5,.05,.2,1); will-change: transform;
}
.trc-cursor-ico { display: block; transform-origin: 0 0; transition: transform .12s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.trc-cursor-ico svg { display: block; width: 26px; height: auto; }
.trc-cursor.press .trc-cursor-ico { transform: scale(.78); }
.trc-ripple {
  position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(123,159,255,.45); opacity: 0; pointer-events: none; z-index: 5;
}
.trc-ripple.go { animation: trcRipple .62s ease-out; }
@keyframes trcRipple { 0% { opacity: .5; transform: scale(.25); } 100% { opacity: 0; transform: scale(2.6); } }

@media (max-width: 900px) {
  .markers-trio { justify-content: center; gap: 10px; }
  .markers-trio .trio-img { height: clamp(180px, 46vw, 300px); }
  .markers-trio .trio-empty .trio-img { height: clamp(106px, 27vw, 175px); }
  .markers-trio .trio-sep { margin: 0 4px; }
  .markers-trio .trio-reveal,
  .markers-trio .trio-markers { transform: none; }
  .trc-cursor, .trc-ripple { display: none; }
}

/* pricing — the headline number on each tier */
.tier-price { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: 2px 0 12px; }
.tier-price span { font-size: 14px; font-weight: 600; color: var(--ink-mute); letter-spacing: 0; }

/* ---------------------------------------------------------
   Spotlight — the interactive transcription demo
   --------------------------------------------------------- */
.spotlight { padding-top: clamp(96px, 13vh, 168px); }
.spot-grid {
  max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.spot-copy h2 { font-size: clamp(32px, 4.2vw, 58px); margin-bottom: 18px; }
.spot-copy p { color: var(--ink-soft); font-size: 19px; max-width: 46ch; margin: 0 0 6px; }

.demo-card {
  position: relative; border-radius: 20px; padding: 18px;
  background: linear-gradient(180deg, #0c0e15, #0a0b10);
  border: 1px solid var(--hair-2); box-shadow: 0 50px 130px -54px rgba(0,0,0,.95); overflow: hidden;
}
.demo-top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.demo-search {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--hair-2); border-radius: 12px;
}
.demo-mag { width: 18px; height: 18px; color: var(--ink-mute); flex: none; }
.demo-query { font-size: 15px; color: var(--ink); white-space: pre; min-height: 18px; }
.demo-caret { width: 2px; height: 18px; background: var(--accent); border-radius: 2px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-wave { display: flex; align-items: flex-end; gap: 3px; height: 28px; padding: 0 2px; }
.demo-wave i {
  flex: 1; height: 20%; border-radius: 2px;
  background: linear-gradient(180deg, #7d99dd, #34406a);
  animation: wave 1.5s ease-in-out infinite; opacity: .55;
}
@keyframes wave { 0%,100% { height: 16%; opacity: .4; } 50% { height: 92%; opacity: .9; } }
.demo-lines { display: grid; gap: 8px; }
.demo-line {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 11px; border: 1px solid transparent;
  background: rgba(255,255,255,.022); transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.demo-line .t {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-mute);
  background: rgba(255,255,255,.05); padding: 3px 8px; border-radius: 6px;
}
.demo-line p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.demo-line .jump {
  opacity: 0; transform: translateX(-4px); font-size: 12px; font-weight: 700; color: #0a0c12;
  background: var(--accent); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.demo-line.match {
  background: rgba(111,143,214,.12); border-color: rgba(111,143,214,.42);
  box-shadow: inset 3px 0 0 var(--accent);
}
.demo-line.match .t { color: #d3ddf3; background: rgba(111,143,214,.26); }
.demo-line.match p { color: var(--ink); }
.demo-line.match .jump { opacity: 1; transform: none; }
.demo-line mark { background: rgba(111,143,214,.5); color: #fff; border-radius: 3px; padding: 0 3px; }
@media (max-width: 900px) { .spot-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Widgets
   --------------------------------------------------------- */
.widgets-section { max-width: var(--frame-w); margin: 0 auto; padding-top: clamp(96px, 13vh, 168px); }
.widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.widget {
  margin: 0; padding: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius);
  backdrop-filter: blur(10px); transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.widget:hover { border-color: var(--hair-2); transform: translateY(-3px); }
.widget img { width: 100%; max-width: 230px; }
@media (max-width: 860px) { .widgets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .widgets { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Pricing
   --------------------------------------------------------- */
.pricing { padding-top: clamp(96px, 13vh, 168px); }
.tiers {
  max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.12fr;
  gap: 20px; align-items: stretch;
}
.tier {
  display: flex; flex-direction: column; border-radius: 22px; padding: clamp(28px,3vw,40px);
  background: var(--panel); border: 1px solid var(--hair); backdrop-filter: blur(10px);
}
.tier.pro {
  position: relative; border-color: rgba(111,143,214,.42);
  background: linear-gradient(180deg, rgba(111,143,214,.07), rgba(255,255,255,.015));
  box-shadow: 0 40px 110px -54px rgba(0,0,0,.85);
}
.tier-badge {
  position: absolute; top: 20px; right: 20px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-soft); border: 1px solid rgba(111,143,214,.4);
  padding: 5px 11px; border-radius: 999px;
}
.tier-name { font-size: 22px; font-weight: 800; margin-bottom: 7px; }
.tier-tag { color: var(--ink-mute); font-size: 15px; line-height: 1.5; margin: 0 0 24px; min-height: 46px; }
.tier-feats { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 13px; flex: 1; }
.tier-feats li { position: relative; padding-left: 28px; color: var(--ink-soft); font-size: 15.5px; }
.tier-feats li strong { color: var(--ink); font-weight: 700; }
.tier-feats li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid var(--hair-2);
}
.tier-feats li::after {
  content: ""; position: absolute; left: 5.5px; top: 8px; width: 6px; height: 3px;
  border-left: 1.6px solid var(--accent-soft); border-bottom: 1.6px solid var(--accent-soft); transform: rotate(-45deg);
}
.tier.pro .tier-feats li::before { background: rgba(111,143,214,.16); border-color: rgba(111,143,214,.45); }
.tier.pro .tier-feats li::after { border-color: #cdd8f0; }
.tier-btn { width: 100%; }
.tier-note { color: var(--ink-mute); font-size: 13px; text-align: center; margin: 14px 0 0; }
@media (max-width: 740px) { .tiers { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; padding-top: clamp(90px,12vh,150px); }
.faq-list { display: grid; gap: 11px; }
.faq details {
  border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--panel);
  backdrop-filter: blur(8px); padding: 4px 22px; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.faq details[open] { border-color: var(--hair-2); background: var(--panel-2); }
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 0; font-size: 16.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.chev { position: relative; width: 13px; height: 13px; flex: none; transition: transform .3s var(--ease); }
.chev::before, .chev::after { content: ""; position: absolute; top: 50%; width: 8px; height: 1.7px; background: var(--ink-mute); border-radius: 2px; }
.chev::before { left: -1px; transform: rotate(45deg); }
.chev::after { right: -1px; transform: rotate(-45deg); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details p { margin: 0 0 18px; color: var(--ink-soft); font-size: 15.5px; max-width: 64ch; }

/* ---------------------------------------------------------
   Final CTA + footer
   --------------------------------------------------------- */
.final-cta { max-width: 900px; margin: 0 auto; text-align: center; padding-top: clamp(96px,13vh,160px); padding-bottom: 40px; }
.final-cta h2 { font-size: clamp(34px,4.8vw,58px); font-weight: 900; letter-spacing: -0.038em; margin-bottom: 30px; }
.final-cta .btn { margin-bottom: 22px; }
.trust-line { color: var(--ink-mute); font-size: 14.5px; }

.footer { margin-top: clamp(60px,9vh,110px); border-top: 1px solid var(--hair); padding: 54px var(--pad) 30px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand strong { display: block; font-size: 16px; }
.foot-brand span { font-size: 13px; color: var(--ink-mute); }
.foot-tag { color: var(--ink-mute); font-size: 15px; margin: 0; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { font-size: 14px; color: var(--ink-mute); transition: color .25s; }
.foot-links a:hover { color: var(--ink); }
.foot-bottom {
  max-width: var(--maxw); margin: 36px auto 0; padding-top: 22px; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint);
}
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a { color: var(--ink-faint); transition: color .25s; }
.foot-legal a:hover { color: var(--ink); }

/* ---------------------------------------------------------
   Sub-pages: pricing intro + legal / prose pages
   --------------------------------------------------------- */
.subpage-head { padding-top: clamp(128px, 17vh, 208px); }
.legal {
  max-width: 760px; margin: 0 auto; padding: clamp(128px, 17vh, 208px) var(--pad) clamp(40px, 7vh, 80px);
  color: var(--ink-soft); font-size: 16.5px; line-height: 1.75;
}
.legal .kicker { margin-bottom: 12px; }
.legal h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.03em; margin-bottom: 10px; color: var(--ink); }
.legal .legal-updated { color: var(--ink-faint); font-size: 14px; margin: 0 0 36px; }
.legal h2 { font-size: clamp(20px, 2.4vw, 25px); color: var(--ink); margin: 38px 0 12px; letter-spacing: -0.02em; }
.legal p, .legal li { margin: 0 0 14px; }
.legal ul { padding-left: 22px; margin: 0 0 18px; }
.legal a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }
.legal strong { color: var(--ink); }
.legal .legal-note {
  margin-top: 40px; padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  background: var(--panel); font-size: 14px; color: var(--ink-mute);
}

/* ---------------------------------------------------------
   Reveal animations — directional, with parallax-safe targets
   --------------------------------------------------------- */
.reveal { opacity: 0; transition: opacity .85s var(--ease), transform .85s var(--ease); }
.r-left  { transform: translateX(-46px); }
.r-right { transform: translateX(46px); }
.r-up    { transform: translateY(36px); }
.r-scale { transform: scale(.94); }
.r-fade  { transform: none; }
.reveal.in { opacity: 1; transform: none; }

.reveal.stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.stagger.in > * { opacity: 1; transform: none; }
.reveal.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.reveal.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.reveal.stagger.in > *:nth-child(3) { transition-delay: .20s; }
.reveal.stagger.in > *:nth-child(4) { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .demo-wave i { animation: none; height: 50%; }
  .demo-caret { animation: none; }
  .rail-caps span { animation: none; opacity: 0.92; }
}