/* =========================================================================
   Satchel — launch site
   A quiet, design-led page that wears the app's own Liquid Glass.
   Tokens below mirror Satchel/Core/Theme.swift so the web and the app
   read as one family.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  /* type */
  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* indigo brand — pulled from the app icon + onboarding gradient (#7781FF→#4E5AFD),
     refined toward a more premium, Stripe-adjacent indigo. Used sparingly. */
  --accent-top: #7c7cff;
  --accent: #635bff;
  --accent-deep: #4f46e5;
  --accent-ink: #4f46e5;

  /* radii — continuous-corner feel, echoing Theme.Metric */
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --r-pill: 999px;

  /* motion (from the design-eng playbook + the app's pill curve) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-app: cubic-bezier(0.3, 0.7, 0.2, 1);

  /* layout */
  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 78px;                              /* nav height (hero pulls up under it) */
}

/* light (default) — a calm, premium near-white canvas. The colour now lives
   in the product (the macOS wallpaper inside the demo) and in the accent,
   not in the page background. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;            /* Apple-grade neutral canvas */
  --bg-deep: #efeff2;
  --surface: #ffffff;       /* elevated cards */
  --surface-2: #fbfbfd;
  --band: #eceef2;          /* full-bleed section band — a touch recessed so white cards pop */
  --ink: #1c1c22;
  --ink-2: rgba(28, 28, 34, 0.60);
  --ink-3: rgba(28, 28, 34, 0.40);
  --ink-on-accent: #ffffff;
  --hairline: rgba(20, 20, 40, 0.08);
  --rule: rgba(24, 24, 52, 0.10);        /* section dividers */

  /* depth — real objects on one top-left light. Every lifted thing gets a
     tight contact shadow + a long, soft, indigo-tinted cast (never pure
     black — that's the "pasted sticker" tell). One offset direction site-wide. */
  --shadow-hue: 235 38% 42%;
  --cast-contact: 0 2px 6px hsl(var(--shadow-hue) / 0.16);
  --cast-soft:
    0 1px 1px hsl(var(--shadow-hue) / 0.10),
    0 6px 12px -4px hsl(var(--shadow-hue) / 0.12),
    0 18px 36px -12px hsl(var(--shadow-hue) / 0.16);
  --cast-lift:
    0 2px 4px hsl(var(--shadow-hue) / 0.10),
    var(--cast-contact),
    18px 26px 60px -18px hsl(var(--shadow-hue) / 0.22),
    36px 54px 110px -40px hsl(var(--shadow-hue) / 0.20);
  --scrim-ink: rgba(245, 245, 247, 0.0);   /* local hero-type scrim (neutral) */
  --rim: rgba(255, 255, 255, 0.95);
  --glass-alpha: 1;

  /* neutral premium shadows (no purple tint) */
  --shadow-sm: 0 1px 2px rgba(17, 17, 26, 0.05), 0 2px 6px rgba(17, 17, 26, 0.04);
  --shadow-md: 0 1px 2px rgba(17, 17, 26, 0.04), 0 8px 24px -10px rgba(17, 17, 26, 0.12);
  --shadow-lg: 0 2px 6px rgba(17, 17, 26, 0.05), 0 24px 56px -20px rgba(17, 17, 26, 0.16);

  /* glass — kept for the OS chrome (nav, palette, dock) where it earns its keep */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.76);
  --glass-blur: 22px;
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-hairline: rgba(20, 20, 40, 0.07);
  --glass-rim: rgba(255, 255, 255, 1);
  --glass-sheen: rgba(255, 255, 255, 0.5);
  --glass-shadow:
    0 1px 1px rgba(17, 17, 26, 0.04),
    0 8px 20px -8px rgba(17, 17, 26, 0.10),
    0 28px 56px -22px rgba(17, 17, 26, 0.14);

  /* surface fills (= Theme.swift light branch) */
  --fill: rgba(0, 0, 0, 0.045);
  --fill-hover: rgba(0, 0, 0, 0.08);
  --fill-press: rgba(0, 0, 0, 0.10);
  --track: rgba(0, 0, 0, 0.055);
  --segment-active: #ffffff;
  --card-border: rgba(0, 0, 0, 0.05);
  --card-border-hover: rgba(0, 0, 0, 0.10);
  --divider: rgba(20, 20, 40, 0.08);
  --focus-fill: rgba(99, 91, 255, 0.12);
  --shelf-zone: rgba(0, 0, 0, 0.035);

  --keycap-top: #ffffff;
  --keycap-bottom: #ecedf7;
  --keycap-ink: #1c1c22;
}

/* dark — a deep, near-black room with a single soft light overhead.
   Premium = depth and restraint, not colour. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08080b;
  --bg-deep: #050507;
  --surface: #131318;       /* elevated card */
  --surface-2: #17171d;
  --band: #0c0c10;          /* full-bleed section band */
  --ink: #f4f4f8;
  --ink-2: rgba(235, 235, 245, 0.56);
  --ink-3: rgba(235, 235, 245, 0.34);
  --ink-on-accent: #ffffff;
  --hairline: rgba(255, 255, 255, 0.07);
  --rule: rgba(255, 255, 255, 0.08);

  /* depth — a deep room with one soft overhead light. Shadows go darker and
     longer; still hue-matched, never flat black. */
  --shadow-hue: 235 45% 4%;
  --cast-contact: 0 2px 6px hsl(var(--shadow-hue) / 0.5);
  --cast-soft:
    0 1px 1px hsl(var(--shadow-hue) / 0.4),
    0 6px 14px -4px hsl(var(--shadow-hue) / 0.45),
    0 18px 40px -12px hsl(var(--shadow-hue) / 0.55);
  --cast-lift:
    0 2px 4px hsl(var(--shadow-hue) / 0.4),
    var(--cast-contact),
    18px 26px 64px -18px hsl(var(--shadow-hue) / 0.6),
    36px 56px 120px -40px hsl(var(--shadow-hue) / 0.55);
  --scrim-ink: rgba(8, 8, 11, 0.0);
  --rim: rgba(255, 255, 255, 0.26);
  --glass-alpha: 1;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 32px 64px -24px rgba(0, 0, 0, 0.7);

  --glass-bg: rgba(22, 22, 28, 0.52);
  --glass-bg-strong: rgba(26, 26, 32, 0.68);
  --glass-blur: 26px;
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-hairline: rgba(255, 255, 255, 0.06);
  --glass-rim: rgba(255, 255, 255, 0.26);
  --glass-sheen: rgba(255, 255, 255, 0.07);
  --glass-shadow:
    0 1px 1px rgba(0, 0, 0, 0.5),
    0 12px 28px -12px rgba(0, 0, 0, 0.6),
    0 40px 76px -30px rgba(0, 0, 0, 0.78);

  --fill: rgba(255, 255, 255, 0.07);
  --fill-hover: rgba(255, 255, 255, 0.11);
  --fill-press: rgba(255, 255, 255, 0.15);
  --track: rgba(255, 255, 255, 0.08);
  --segment-active: rgba(255, 255, 255, 0.16);
  --card-border: rgba(255, 255, 255, 0.07);
  --card-border-hover: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.08);
  --focus-fill: rgba(124, 124, 255, 0.20);
  --shelf-zone: rgba(255, 255, 255, 0.035);

  --keycap-top: #46464f;
  --keycap-bottom: #34343b;
  --keycap-ink: #f4f4f8;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01", "ss01";
  overflow-x: hidden;
  letter-spacing: -0.01em;
  transition: background 0.6s var(--ease-out), color 0.4s var(--ease-out);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; }
svg { fill: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* =========================================================================
   Through the Glass — no background "design". The page is a photograph: a
   sharp subject (the palette) lifted on real double shadows over a desktop
   that defocuses with TRUE progressive blur. Colour is never structural.
   ========================================================================= */

/* Progressive-blur primitive — the real stacked-layer technique (not the
   single-element backdrop+opacity hack, which ghosts at the midpoint).
   4 sibling layers, blur doubling 3/8/20/44, each revealed by an
   overlapping radial mask window so adjacent radii blend instead of step.
   Focal point at --fx/--fy (the cursor / palette); sharp pocket in the
   middle, creamy bokeh toward the frame. pointer-events:none so it never
   eats clicks or the drag gesture. One stack visible per scene. */
.pblur { position: absolute; inset: 0; pointer-events: none; --fx: 58%; --fy: 50%; --ell: 80% 90%; --b: 1; }
.pblur__l { position: absolute; inset: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.pblur__l--1 { -webkit-backdrop-filter: blur(calc(3px * var(--b))); backdrop-filter: blur(calc(3px * var(--b)));
  -webkit-mask: radial-gradient(var(--ell) at var(--fx) var(--fy), transparent 20%, #000 33%); mask: radial-gradient(var(--ell) at var(--fx) var(--fy), transparent 20%, #000 33%); }
.pblur__l--2 { -webkit-backdrop-filter: blur(calc(8px * var(--b))); backdrop-filter: blur(calc(8px * var(--b)));
  -webkit-mask: radial-gradient(var(--ell) at var(--fx) var(--fy), transparent 39%, #000 52%); mask: radial-gradient(var(--ell) at var(--fx) var(--fy), transparent 39%, #000 52%); }
.pblur__l--3 { -webkit-backdrop-filter: blur(calc(20px * var(--b))); backdrop-filter: blur(calc(20px * var(--b)));
  -webkit-mask: radial-gradient(var(--ell) at var(--fx) var(--fy), transparent 57%, #000 70%); mask: radial-gradient(var(--ell) at var(--fx) var(--fy), transparent 57%, #000 70%); }
.pblur__l--4 { -webkit-backdrop-filter: blur(calc(44px * var(--b))); backdrop-filter: blur(calc(44px * var(--b)));
  -webkit-mask: radial-gradient(var(--ell) at var(--fx) var(--fy), transparent 74%, #000 88%); mask: radial-gradient(var(--ell) at var(--fx) var(--fy), transparent 74%, #000 88%); }
/* vertical variant — sharp focal band, bokeh toward top + bottom (frosted
   backdrop behind headline & nav). Used for the FAQ recess. */
.pblur--v .pblur__l--1 { -webkit-mask: linear-gradient(#000 0 6%, transparent 22%, transparent 78%, #000 94% 100%); mask: linear-gradient(#000 0 6%, transparent 22%, transparent 78%, #000 94% 100%); }
.pblur--v .pblur__l--2 { -webkit-mask: linear-gradient(#000 0 3%, transparent 16%, transparent 84%, #000 97% 100%); mask: linear-gradient(#000 0 3%, transparent 16%, transparent 84%, #000 97% 100%); }
.pblur--v .pblur__l--3 { -webkit-mask: linear-gradient(#000 0 1.5%, transparent 11%, transparent 89%, #000 98.5% 100%); mask: linear-gradient(#000 0 1.5%, transparent 11%, transparent 89%, #000 98.5% 100%); }
.pblur--v .pblur__l--4 { -webkit-mask: linear-gradient(#000 0 0.5%, transparent 7%, transparent 93%, #000 99.5% 100%); mask: linear-gradient(#000 0 0.5%, transparent 7%, transparent 93%, #000 99.5% 100%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pblur { display: none; }   /* graceful: no blur, the sharp scene still reads */
}

/* grain — a whisper of fractal noise to dither blur masks against 8-bit
   banding. Texture, not colour. */
.grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.3; mix-blend-mode: soft-light;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="dark"] .grain { opacity: 0.42; }
@media (prefers-reduced-transparency: reduce) { .pblur { display: none; } }

.lg-filters { position: absolute; pointer-events: none; }

/* =========================================================================
   Glass — the one material, used everywhere.
   Frost (backdrop blur+saturate) · tint · a lit top-left rim · soft drop.
   "Liquid Glass is mostly the absence of chrome." — kept restrained.
   ========================================================================= */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
/* inner top sheen */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(180deg, var(--glass-sheen), transparent 42%);
  opacity: 0.9; pointer-events: none;
}
/* crisp specular rim, brightest top-left — the tell of real glass */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--glass-rim), transparent 38%, transparent 62%, rgba(255,255,255,0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.8;
}
.glass--panel { box-shadow: 0 1px 1px rgba(17,17,26,0.05), 0 24px 50px -20px rgba(17,17,26,0.18), 0 70px 110px -55px rgba(17,17,26,0.22); }
[data-theme="dark"] .glass--panel { box-shadow: 0 1px 1px rgba(0,0,0,0.5), 0 36px 70px -26px rgba(0,0,0,0.7), 0 90px 140px -70px rgba(0,0,0,0.82); }
.glass--strong { background: var(--glass-bg-strong); }

/* nested glass: subtler tint, no heavy shadow (it's a tint on the same surface) */
.glass--inset {
  background: var(--track);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid var(--glass-hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.glass--inset::after { opacity: 0.4; }
.glass--inset::before { display: none; }

.glass--control {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 8px -4px rgba(30,30,70,0.18);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-weight: 500; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform 0.16s var(--ease-out), background 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--lg { padding: 14px 26px; font-size: 16px; }
.btn svg { fill: currentColor; }

.btn--primary {
  background: var(--ink); color: var(--bg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 8px 20px -8px rgba(20,20,40,0.5);
}
.btn--primary svg { fill: none; stroke: none; }
.btn--primary svg use { fill: currentColor; }
.btn--primary:hover { background: #000; }
[data-theme="dark"] .btn--primary { background: var(--ink); color: #0a0a0f; }
[data-theme="dark"] .btn--primary:hover { background: #fff; }

.btn--ghost {
  background: var(--glass-bg); color: var(--ink);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { background: var(--glass-bg-strong); }
.btn--ghost svg { stroke: currentColor; }

/* =========================================================================
   Nav
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: 50;   /* full-width bar; ::before spans the viewport */
}
.nav__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 20px;
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px var(--gutter);
}
.nav__brand { justify-self: start; }
.nav__links { justify-self: center; }   /* true centre of the bar, not the gap */
.nav__actions { justify-self: end; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  -webkit-mask: linear-gradient(#000 62%, transparent); mask: linear-gradient(#000 62%, transparent);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.nav.is-stuck::before { opacity: 1; }

.nav__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.nav__mark {
  display: grid; place-items: center; width: 34px; height: 34px;
}
/* the real app icon carries its own squircle + 3D shading */
.nav__mark img { width: 100%; height: 100%; display: block; object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(40,40,90,0.32)); }
.nav__name { font-size: 17px; letter-spacing: -0.02em; }

.nav__links { display: flex; gap: 28px; font-size: 14.5px; color: var(--ink-2); }
.nav__links a { position: relative; transition: color 0.2s var(--ease-out); }
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: transform 0.16s var(--ease-out), color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { stroke: currentColor; }
.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }

/* =========================================================================
   Hero
   ========================================================================= */
/* =========================================================================
   Hero — ONE photograph. The macOS desktop fills the frame as the out-of-
   focus "set"; the palette is the tack-sharp subject, lifted on real shadow,
   summoned at the cursor; the copy sits on the focal plane, upper-left.
   ========================================================================= */
.hero {
  position: relative; width: 100%; min-height: 100svh; margin-top: calc(-1 * var(--nav-h));
  overflow: clip; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(var(--nav-h) + clamp(24px, 6vh, 76px)) var(--gutter) 0;
  text-align: center;
}
/* the photograph dissolves into the page at the bottom — a clean hand-off
   from the indigo desktop to the neutral content canvas */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10%; z-index: 9; pointer-events: none;
  background: linear-gradient(transparent, var(--bg) 94%);
}

/* THE SET (z0) — the full-bleed macOS desktop; the supporting windows + dock
   sit BELOW the DOF so they defocus into a soft background; the palette + copy
   stay above it, tack-sharp. */
.hero__stage { position: absolute; inset: 0; z-index: 0; margin: 0; }
.hero__stage .demo { max-width: none; width: 100%; height: 100%; margin: 0; }
.hero .screen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; border-radius: 0; border: 0; box-shadow: none; overflow: hidden; isolation: isolate;
}
.hero .screen__wall { z-index: 0; }
.hero .macwin { z-index: 1; }
.hero .dock { z-index: 2; }
.scene__dof { z-index: 3; --fx: 50%; --fy: 74%; --ell: 114% 72%; }
.hero .macbar { display: none; }   /* the site nav is the top bar */
/* the subject — sharp, centred, BELOW the copy, lifted on its double shadow.
   A compact instance (no shelf) so it stacks under the copy within the fold. */
.hero .palette {
  z-index: 5; left: 50%; top: 72.5%; width: clamp(440px, 54vw, 720px);
  box-shadow: var(--cast-lift); --p-bg: rgba(252,252,254,0.92); --p-border: rgba(255,255,255,0.9);
}
/* the shelf (a large empty drop zone) is shown in Features; the hero palette
   keeps search + tabs + the file grid + the action row */
.hero .palette__shelf { display: none; }
[data-theme="dark"] .hero .palette {
  --p-bg: rgba(26,26,33,0.88); --p-border: rgba(255,255,255,0.12); box-shadow: var(--cast-lift);
}
.hero .demo__ghost { z-index: 6; }
.hero .demo__hotkey, .hero .demo__toast { z-index: 7; }
.hero .demo__cursor { z-index: 8; }
.hero .demo__caption { display: none; }

/* COPY — centred at the TOP, white on the indigo desktop, over a soft scrim */
.hero__copy {
  position: relative; z-index: 10; max-width: 40rem; margin: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__scrim {
  position: absolute; left: 50%; top: 36%; width: 160%; height: 150%; transform: translate(-50%, -50%);
  z-index: -1; pointer-events: none;
  /* light: a whisper of lift behind the copy so it owns its plane */
  background: radial-gradient(50% 40% at 50% 30%, color-mix(in srgb, var(--bg) 76%, white), transparent 66%);
}
[data-theme="dark"] .hero__scrim {
  background: radial-gradient(54% 44% at 50% 32%, rgba(8,8,24,0.36), rgba(8,8,24,0.15) 46%, transparent 70%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 11px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-2);
  background: var(--glass-bg); border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--cast-soft);
  transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.eyebrow:hover { transform: translateY(-1px); color: var(--ink); border-color: var(--card-border-hover); }
.eyebrow svg { stroke: currentColor; }
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: #16c172; box-shadow: 0 0 0 3px rgba(22,193,114,0.18); }

/* LIGHT (default): dark copy on the soft near-white desktop — the brand colour
   stays out of the hero; only a different shade separates it from the page. */
.hero__title {
  margin-top: 14px; text-align: center; color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 420; font-size: clamp(28px, 3.7vw, 46px); line-height: 1.04;
  letter-spacing: -0.026em;
}
.hero__title .hl { display: block; overflow: hidden; padding: 0.02em 0.06em; margin: 0 -0.06em; }
.hero__title .hl > span { display: block; }
.hero__lede {
  margin: 12px auto 0; max-width: 52ch;
  font-size: clamp(15px, 1.5vw, 17px); color: var(--ink-2); line-height: 1.55;
}
.hero__cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__cta svg { stroke: currentColor; }
.hero__cta .btn--primary svg { fill: currentColor; stroke: none; }

/* DARK: white copy on the indigo photograph (unchanged) */
[data-theme="dark"] .hero .eyebrow {
  color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.24); box-shadow: 0 4px 18px -8px rgba(8,8,24,0.5);
}
[data-theme="dark"] .hero .eyebrow:hover { color: #fff; border-color: rgba(255,255,255,0.42); }
[data-theme="dark"] .hero__title { color: #fff; text-shadow: 0 1px 22px rgba(8,8,24,0.34); }
[data-theme="dark"] .hero__lede { color: rgba(255,255,255,0.84); }
[data-theme="dark"] .hero__cta .btn--ghost { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.26); }
[data-theme="dark"] .hero__cta .btn--ghost:hover { background: rgba(255,255,255,0.2); }
/* the meta line is redundant with the strip directly below the hero — drop it
   here so the full palette stacks cleanly under the copy within the fold */
.hero__meta { display: none; }

/* FIRST-LOAD — the palette racks into focus (deep blur resolves) while the
   copy line-wipes up and de-fades, staggered. */
.hero .palette { filter: blur(18px); transition: opacity 0.55s var(--ease-out), transform 0.78s var(--ease-app), filter 0.78s var(--ease-app); }
.hero__title .hl > span { transform: translateY(112%); transition: transform 0.85s var(--ease-out); will-change: transform; }
.hero .eyebrow, .hero__lede, .hero__cta, .hero__meta { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.hero.is-in .hero__title .hl > span { transform: translateY(0); }
.hero.is-in .eyebrow,
.hero.is-in .hero__lede,
.hero.is-in .hero__cta,
.hero.is-in .hero__meta { opacity: 1; transform: none; }
.hero.is-in .eyebrow { transition-delay: 0.05s; }
.hero.is-in .hero__title .hl:nth-child(1) > span { transition-delay: 0.12s; }
.hero.is-in .hero__title .hl:nth-child(2) > span { transition-delay: 0.22s; }
.hero.is-in .hero__lede { transition-delay: 0.36s; }
.hero.is-in .hero__cta { transition-delay: 0.46s; }
.hero.is-in .hero__meta { transition-delay: 0.54s; }
@media (prefers-reduced-motion: reduce) {
  .hero .palette { filter: none; transition: none; }
  .hero__title .hl > span,
  .hero .eyebrow, .hero__lede, .hero__cta, .hero__meta { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   HERO LAB — four switchable hero directions for testing.
   .herolab[data-hero] shows exactly one .vhero; a floating switcher flips
   them. The palette and the macOS scene are cloned from <template> into the
   active variant by app.js. (Strip to the chosen one once decided.)
   ========================================================================= */
.herolab { position: relative; isolation: isolate; }
.vhero { display: none; }
.herolab[data-hero="plinth"] .vhero--plinth { display: flex; }
.herolab[data-hero="spoken"] .vhero--spoken { display: flex; }
.herolab[data-hero="folio"]  .vhero--folio  { display: block; }
.herolab[data-hero="summon"] .vhero--summon { display: flex; }

/* the base .palette is absolutely-placed + hidden for the old demo scene;
   inside a variant it sits in normal flow, full-width, visible by default.
   Plinth/Spoken re-introduce a pre-state below (this is overridden there). */
.vhero .palette {
  position: relative; left: auto; right: auto; top: auto;
  width: 100%; max-width: none; opacity: 1; filter: none;
  transform: none; z-index: 2;
}

/* ---- floating switcher (preview chrome) ---- */
.heroswitch {
  position: fixed; z-index: 95; left: 50%; bottom: clamp(14px, 3vh, 24px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; padding: 4px 5px;
  border-radius: var(--r-pill);
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: var(--cast-lift);
}
.heroswitch__label { padding: 0 8px 0 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.heroswitch button {
  padding: 7px 14px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-2);
  transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out), transform 0.12s var(--ease-out);
}
.heroswitch button:hover { color: var(--ink); }
.heroswitch button:active { transform: scale(0.96); }
.heroswitch button.is-on { color: #fff; background: var(--accent); }
.heroswitch__replay { font-family: var(--font-sans) !important; font-size: 15px !important; line-height: 1; padding: 7px 11px !important; }
@media (max-width: 600px) {
  .heroswitch__label { display: none; }
  .heroswitch button { padding: 6px 10px; font-size: 10.5px; }
}

/* DARK only: nav floats light over the indigo desktop. In light mode the hero
   is near-white, so the nav keeps its normal (dark) treatment. */
[data-theme="dark"] body:not(.page-notes) .nav:not(.is-stuck) .nav__name,
[data-theme="dark"] body:not(.page-notes) .nav:not(.is-stuck) .nav__links a { color: rgba(255,255,255,0.92); }
[data-theme="dark"] body:not(.page-notes) .nav:not(.is-stuck) .nav__links a:hover { color: #fff; }
[data-theme="dark"] body:not(.page-notes) .nav:not(.is-stuck) .nav__links a::after { background: #fff; }
[data-theme="dark"] body:not(.page-notes) .nav:not(.is-stuck) .theme-toggle { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); }

/* ======================= 1 · PLINTH — object on a pedestal ======================= */
.vhero--plinth {
  min-height: 100svh; margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + clamp(36px, 7vh, 84px)) var(--gutter) clamp(40px, 8vh, 90px);
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative; isolation: isolate; overflow: clip;
}
.vp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: clamp(30px, 5vh, 56px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink-2);
}
.vp-eyebrow .keycap--s { min-width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
.vp-eyebrow .keycap--s.keycap--wide { min-width: 50px; font-size: 10.5px; }
.vp-stage { position: relative; display: flex; justify-content: center; width: min(540px, 90vw); }
.vp-stage .palette { box-shadow: var(--cast-lift); }
.vp-shadow {
  position: absolute; left: 50%; bottom: -7%; width: 72%; height: 54px; transform: translateX(-50%);
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(var(--shadow-hue) / 0.42), hsl(var(--shadow-hue) / 0.15) 56%, transparent 78%);
  filter: blur(9px);
}
.vp-title {
  margin-top: clamp(32px, 5vh, 56px);
  font-family: var(--font-serif); font-weight: 420; font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08; letter-spacing: -0.025em; max-width: 17ch;
}
.vp-cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vp-cta svg { stroke: currentColor; }
.vp-cta .btn--primary svg { fill: currentColor; stroke: none; }
.vp-meta { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-3); }
/* intro — the object racks into focus and lands on its shadow */
.vhero--plinth .palette { opacity: 0; filter: blur(16px); transform: scale(0.94) translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.62s var(--ease-app), filter 0.62s var(--ease-app); }
.vhero--plinth .vp-shadow { opacity: 0; transform: translateX(-50%) scale(0.5);
  transition: opacity 0.6s var(--ease-out), transform 0.72s var(--ease-app); }
.vhero--plinth .vp-eyebrow, .vhero--plinth .vp-title, .vhero--plinth .vp-cta, .vhero--plinth .vp-meta {
  opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.vhero--plinth.is-in .palette { opacity: 1; filter: none; transform: none; }
.vhero--plinth.is-in .vp-shadow { opacity: 1; transform: translateX(-50%) scale(1); }
.vhero--plinth.is-in .vp-eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.vhero--plinth.is-in .vp-title { opacity: 1; transform: none; transition-delay: 0.36s; }
.vhero--plinth.is-in .vp-cta { opacity: 1; transform: none; transition-delay: 0.46s; }
.vhero--plinth.is-in .vp-meta { opacity: 1; transform: none; transition-delay: 0.54s; }

/* ======================= 2 · SPOKEN FIELD — the headline is the UI ======================= */
.vhero--spoken {
  min-height: 100svh; margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + clamp(32px, 6vh, 76px)) var(--gutter) clamp(40px, 8vh, 90px);
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative; isolation: isolate; overflow: clip;
}
.vs-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: clamp(28px, 5vh, 52px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-2);
}
.vs-stage { position: relative; width: min(600px, 92vw); }
.vs-stage .palette { box-shadow: var(--cast-lift); }
.vs-stage .palette__search { padding-top: 4px; padding-bottom: 4px; }
.palette__ph.is-typed { color: var(--p-ink); font-weight: 500; }
.palette__caret { display: inline-block; width: 2px; height: 1.04em; margin-left: 2px; background: var(--p-accent-ink); vertical-align: -0.16em; animation: vs-blink 1.05s steps(1) infinite; }
@keyframes vs-blink { 50% { opacity: 0; } }
.vhero--spoken .palette__grid .fcard { transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out); }
.vhero--spoken .palette__grid .fcard.is-cull { opacity: 0.16; transform: scale(0.96); }
.vs-sub { margin-top: clamp(28px, 5vh, 50px); font-family: var(--font-serif); font-size: clamp(17px, 1.9vw, 21px); color: var(--ink-2); letter-spacing: -0.01em; max-width: 30ch; }
.vs-cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vs-cta svg { stroke: currentColor; }
.vs-cta .btn--primary svg { fill: currentColor; stroke: none; }
.vs-meta { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.vhero--spoken .palette { opacity: 0; filter: blur(14px); transform: scale(0.96) translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-app), filter 0.6s var(--ease-app); }
.vhero--spoken .vs-eyebrow, .vhero--spoken .vs-sub, .vhero--spoken .vs-cta, .vhero--spoken .vs-meta {
  opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.vhero--spoken.is-in .palette { opacity: 1; filter: none; transform: none; }
.vhero--spoken.is-in .vs-eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.vhero--spoken.is-in .vs-sub { opacity: 1; transform: none; transition-delay: 0.4s; }
.vhero--spoken.is-in .vs-cta { opacity: 1; transform: none; transition-delay: 0.48s; }
.vhero--spoken.is-in .vs-meta { opacity: 1; transform: none; transition-delay: 0.56s; }

/* ======================= 3 · FOLIO — software as a front page ======================= */
.vhero--folio {
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + clamp(24px, 5vh, 52px)) 0 clamp(40px, 7vh, 84px);
  position: relative; isolation: isolate; overflow: clip; min-height: 100svh;
}
.vf-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.vf-broad { display: grid; grid-template-columns: 2fr 7fr 3fr; gap: clamp(18px, 2.6vw, 44px); align-items: start; }
.vf-rail { display: flex; flex-direction: column; gap: 7px; padding-top: 9px; border-top: 2px solid var(--ink);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.vf-rail b { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }
.vf-statement h1 { font-family: var(--font-serif); font-weight: 420; font-size: clamp(40px, 7.2vw, 96px); line-height: 0.99; letter-spacing: -0.032em; }
.vf-hr { height: 1px; background: var(--rule); margin: clamp(16px, 2.2vw, 26px) 0; }
.vf-lede { font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); line-height: 1.6; max-width: 44ch; }
.vf-cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.vf-cta svg { stroke: currentColor; }
.vf-cta .btn--primary svg { fill: currentColor; stroke: none; }
.vf-margin { padding-top: 9px; border-top: 2px solid var(--ink);
  font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); line-height: 1.36; }
.vf-margin cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.vf-rule { height: 5px; background: var(--ink); margin: clamp(26px, 4vh, 46px) auto clamp(22px, 3vh, 36px); }
.vf-plate { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(16px, 2vw, 32px); align-items: end; }
.vf-plate__cap { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); line-height: 1.6; padding-bottom: 6px; }
.vf-plate__cap b { color: var(--ink); letter-spacing: 0.06em; }
.vf-plate__photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 10; box-shadow: var(--cast-soft); border: 1px solid var(--hairline);
}
.vf-plate__photo .smount, .vf-plate__photo .smount .screen { position: absolute; inset: 0; }
.vf-plate__photo .smount .screen { transform: scale(1.18) translateX(-7%); }
.vf-plate__photo .vf-dof { z-index: 3; --fx: 72%; --fy: 50%; --ell: 90% 98%; }
.vf-plate__photo .pmount { position: absolute; right: 4%; top: 50%; width: min(74%, 440px); transform: translateY(-50%); z-index: 4; }
.vf-plate__photo .palette { box-shadow: var(--cast-lift); }
/* assemble intro */
.vhero--folio .vf-rail, .vhero--folio .vf-margin, .vhero--folio .vf-rule { transform: scaleX(0); transform-origin: left center;
  transition: transform 0.6s var(--ease-app); }
.vhero--folio .vf-rule { transform-origin: center; }
.vhero--folio .vf-statement h1, .vhero--folio .vf-hr, .vhero--folio .vf-lede, .vhero--folio .vf-cta,
.vhero--folio .vf-plate__cap { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.vhero--folio .vf-plate__photo { opacity: 0; filter: blur(14px); transform: scale(0.985);
  transition: opacity 0.6s var(--ease-out), filter 0.7s var(--ease-app), transform 0.7s var(--ease-app); }
.vhero--folio.is-in .vf-rail, .vhero--folio.is-in .vf-margin, .vhero--folio.is-in .vf-rule { transform: scaleX(1); }
.vhero--folio.is-in .vf-statement h1 { opacity: 1; transform: none; transition-delay: 0.14s; }
.vhero--folio.is-in .vf-hr { opacity: 1; transform: none; transition-delay: 0.26s; }
.vhero--folio.is-in .vf-lede { opacity: 1; transform: none; transition-delay: 0.32s; }
.vhero--folio.is-in .vf-cta { opacity: 1; transform: none; transition-delay: 0.4s; }
.vhero--folio.is-in .vf-plate__cap { opacity: 1; transform: none; transition-delay: 0.5s; }
.vhero--folio.is-in .vf-plate__photo { opacity: 1; filter: none; transform: none; transition-delay: 0.46s; }

/* ======= 4 · SUMMON — centered hero; the palette leans to your cursor =======
   Sits on the page canvas (no solid colour block) so it dissolves straight
   into the sections below. One quiet indigo "summon light" pools behind the
   object and drifts toward the pointer; the palette gives a calm parallax
   lean. Structure mirrors the centred sections: eyebrow / title / object / CTA. */
.vhero--summon {
  min-height: 100svh; margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + clamp(14px, 2.6vh, 34px)) var(--gutter) clamp(28px, 4.5vh, 56px);
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative; isolation: isolate; overflow: clip;
}
.vsm-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: clamp(18px, 3vh, 30px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink-2);
}
.vsm-eyebrow .keycap--s { min-width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
.vsm-eyebrow .keycap--s.keycap--wide { min-width: 50px; font-size: 10.5px; }
.vsm-title {
  font-family: var(--font-serif); font-weight: 420; font-size: clamp(29px, 4vw, 50px);
  line-height: 1.05; letter-spacing: -0.028em; color: var(--ink); max-width: 18ch;
}
.vsm-lede {
  margin-top: clamp(11px, 1.6vh, 16px); max-width: 38ch;
  font-size: clamp(14px, 1.5vw, 17px); color: var(--ink-2); line-height: 1.55;
}
.vsm-stage { position: relative; margin-top: clamp(22px, 3.4vh, 40px); width: min(424px, 90vw); display: flex; justify-content: center; }
/* the hero palette is a compact object — one clean row of files, no shelf
   (the full grid + shelf are shown in Features) so the CTA stays in view */
.vhero--summon .palette__shelf { display: none; }
.vhero--summon .palette__grid .fcard:nth-child(n+5) { display: none; }
/* the summon light — soft, contained, dissolves into the page (no hard edge) */
.vsm-light {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 168%; height: 178%; transform: translate(-50%, -50%);
  pointer-events: none; filter: blur(6px);
  background: radial-gradient(closest-side at var(--lightx, 50%) var(--lighty, 42%),
    hsl(244 84% 64% / 0.20), hsl(244 84% 64% / 0.07) 44%, transparent 70%);
  transition: opacity 0.7s var(--ease-out);
}
[data-theme="dark"] .vsm-light {
  background: radial-gradient(closest-side at var(--lightx, 50%) var(--lighty, 42%),
    hsl(248 92% 72% / 0.28), hsl(248 92% 72% / 0.09) 46%, transparent 72%);
}
.vsm-palette {
  position: relative; z-index: 2; width: 100%;
  transform: perspective(1300px) rotateX(calc(var(--leany, 0) * -5deg)) rotateY(calc(var(--leanx, 0) * 5deg)) translate3d(var(--dx, 0px), var(--dy, 0px), 0);
  transform-style: preserve-3d; will-change: transform;
  transition: transform 0.5s var(--ease-out), opacity 0.55s var(--ease-out), filter 0.65s var(--ease-app);
}
.vsm-palette .palette { box-shadow: var(--cast-lift); }
.vsm-cta { margin-top: clamp(26px, 4vh, 44px); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vsm-cta svg { stroke: currentColor; }
.vsm-cta .btn--primary svg { fill: currentColor; stroke: none; }
.vsm-meta { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-3); }
/* intro — gentle: title resolves, object racks in, light blooms, CTA settles */
.vhero--summon .vsm-eyebrow, .vhero--summon .vsm-title, .vhero--summon .vsm-lede,
.vhero--summon .vsm-cta, .vhero--summon .vsm-meta {
  opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.vhero--summon .vsm-light { opacity: 0; }
.vhero--summon .vsm-palette { opacity: 0; filter: blur(14px); }
.vhero--summon.is-in .vsm-eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.vhero--summon.is-in .vsm-title { opacity: 1; transform: none; transition-delay: 0.14s; }
.vhero--summon.is-in .vsm-lede { opacity: 1; transform: none; transition-delay: 0.22s; }
.vhero--summon.is-in .vsm-palette { opacity: 1; filter: none; transition-delay: 0.3s; }
.vhero--summon.is-in .vsm-light { opacity: 1; transition-delay: 0.42s; }
.vhero--summon.is-in .vsm-cta { opacity: 1; transform: none; transition-delay: 0.52s; }
.vhero--summon.is-in .vsm-meta { opacity: 1; transform: none; transition-delay: 0.6s; }

/* ---- responsive: stack the broadsheet + plate; center Summon dock ---- */
@media (max-width: 900px) {
  .vf-broad { grid-template-columns: 1fr; gap: 18px; }
  .vf-margin { border-top: 1px solid var(--rule); }
  .vf-plate { grid-template-columns: 1fr; gap: 14px; }
  .vf-plate__cap { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .vhero .palette, .vhero .vp-shadow, .vhero [class^="vp-"], .vhero [class^="vs-"],
  .vhero [class^="vf-"], .vhero [class^="vsm-"] {
    opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important;
  }
  .vsm-palette { transform: none !important; }
  .vp-shadow { transform: translateX(-50%) !important; }
  .vf-plate__photo .pmount { transform: translateY(-50%) !important; }
  .vf-plate__photo .smount .screen { transform: scale(1.18) translateX(-7%) !important; }
}

/* =========================================================================
   Strip / one-liner
   ========================================================================= */
.strip {
  max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter) 40px; text-align: center;
}
.strip p {
  font-family: var(--font-serif); font-weight: 420;
  font-size: clamp(19px, 3vw, 27px); letter-spacing: -0.02em; color: var(--ink-2);
}
.strip span { color: var(--ink); }

/* =========================================================================
   Sections
   ========================================================================= */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 12vh, 130px) var(--gutter); }
/* crisp full-bleed rules at the top of each section — the spec-sheet rhythm.
   They cross the frame's vertical rules to form quiet intersections. */
.section--features, .section--craft, .section--faq, .section--download { position: relative; }
.section--features::before, .section--craft::before, .section--faq::before, .section--download::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 1px; background: var(--rule); pointer-events: none;
}
/* full-bleed band for section rhythm — the content stays centred, the
   background spans edge to edge with hairlines top and bottom */
.section--band { position: relative; }
.section--band::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; background: var(--band);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  z-index: -1;
}
.section__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(40px, 6vh, 64px); }
/* technical spec label: "+ FEATURES" in mono, flanked by hairlines */
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-ink); background: none; border: none; padding: 0;
}
[data-theme="dark"] .badge { color: #b7bbff; }
.badge::before, .badge::after { content: ""; width: 26px; height: 1px; background: var(--rule); }
.badge__dot { position: relative; width: 9px; height: 9px; background: none; border-radius: 0; }
.badge__dot::before, .badge__dot::after { content: ""; position: absolute; background: var(--accent); }
[data-theme="dark"] .badge__dot::before, [data-theme="dark"] .badge__dot::after { background: #8d92ff; }
.badge__dot::before { left: 50%; top: 0; bottom: 0; width: 1.4px; transform: translateX(-50%); }
.badge__dot::after { top: 50%; left: 0; right: 0; height: 1.4px; transform: translateY(-50%); }
.section__title {
  margin-top: 20px; font-family: var(--font-serif); font-weight: 420;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.025em;
}
.section__sub { margin-top: 16px; font-size: clamp(16px, 1.7vw, 18px); color: var(--ink-2); }

/* =========================================================================
   Features — a crafted bento. Each tile *demonstrates* a feature with a
   small visual assembled from Satchel's own UI atoms (file icons, palette
   fragments, keycaps, chips, cursor). Motion plays only while in view
   (`.is-live`, set by app.js) and is removed for reduced-motion.
   ========================================================================= */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ftile {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--cast-soft);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.ftile:hover { transform: translateY(-4px); box-shadow: var(--cast-lift); border-color: var(--card-border-hover); }
.ftile__viz {
  position: relative; flex: 1; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  border-bottom: 1px solid var(--hairline);
}
.ftile__text { padding: 18px 24px 22px; }
.ftile__text h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -0.02em; }
.ftile__text p { margin-top: 7px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.ftile--a { grid-column: span 4; } .ftile--b { grid-column: span 2; }
.ftile--c { grid-column: span 3; } .ftile--d { grid-column: span 3; }
.ftile--e { grid-column: span 2; } .ftile--f { grid-column: span 2; } .ftile--g { grid-column: span 2; }
.ftile--a .ftile__viz, .ftile--b .ftile__viz { min-height: 244px; }
.ftile--c .ftile__viz, .ftile--d .ftile__viz { min-height: 188px; }
.ftile--e .ftile__viz, .ftile--f .ftile__viz, .ftile--g .ftile__viz { min-height: 176px; }

/* shared bento atoms */
.viz-cursor { position: absolute; z-index: 6; color: var(--ink); pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28)); }
.viz-cursor svg { display: block; }
.keycap--s { min-width: 30px; height: 30px; padding: 0 9px; font-size: 13px; border-radius: 9px; }
.keycap--s.keycap--wide { min-width: 60px; font-size: 11px; }
.kbd-inline { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 5px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--ink-2);
  background: var(--fill); border: 1px solid var(--card-border); vertical-align: middle; }
.bento__foot { margin-top: 26px; text-align: center; font-size: 13.5px; color: var(--ink-3); }

/* extra file-icon types for the demos */
.ficon--pdf { --fl: #f0c4c4; } .ficon--pdf .ficon__badge { background: #e5484d; }
.ficon--zip { --fl: #efd9b3; } .ficon--zip .ficon__badge { background: #d9822b; }
.ficon--png { --fl: #c2d4f7; } .ficon--png .ficon__badge { background: #3e7bfa; }
.ficon--md  { --fl: #d2d6de; } .ficon--md  .ficon__badge { background: #707784; }

/* ---------- A · summoned at your cursor ----------
   the document (skeleton) sits BELOW the hotkey hint so they never collide;
   the palette summons over the page while the document quietly dims behind. */
.viz-summon__doc { position: absolute; inset: 0; padding: 56px 26px 26px; display: flex; flex-direction: column; gap: 11px; }
.viz-summon__doc i { height: 7px; border-radius: 4px; background: var(--ink); opacity: 0.07; }
.viz-summon__doc i:nth-child(1) { width: 62%; } .viz-summon__doc i:nth-child(2) { width: 84%; }
.viz-summon__doc i:nth-child(3) { width: 73%; } .viz-summon__doc i:nth-child(4) { width: 88%; } .viz-summon__doc i:nth-child(5) { width: 54%; }
.viz-summon__keys { position: absolute; top: 20px; left: 24px; z-index: 6; display: flex; align-items: center; gap: 6px; }
/* small hint keys (the base .keycap is 46px and is declared later, so size it here) */
.viz-summon__keys .keycap { min-width: 27px; height: 27px; padding: 0 7px; font-size: 13px; border-radius: 8px; }
.viz-summon__keys .plus { font-size: 13px; color: var(--ink-3); }
.viz-summon__ring { position: absolute; left: 50%; top: 54%; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; z-index: 2; }
.popcard {
  position: absolute; left: 50%; top: 58%; width: 232px; padding: 9px; z-index: 3;
  border-radius: 13px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
  transform: translate(-50%, -28%) scale(0.96); transform-origin: 38% 6%;
}
.popcard__search { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--fill); color: var(--ink-3); font-size: 10.5px; }
.popcard__search svg { stroke: currentColor; }
.popcard__row { display: flex; align-items: center; gap: 7px; padding: 5px 7px; margin-top: 3px; border-radius: 7px; font-size: 11px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.popcard__row.is-focus { background: var(--focus-fill); }
.viz-summon .viz-cursor { left: 47%; top: 74%; }

/* ---------- B · find as you type ---------- */
.viz-search { padding: 22px 20px; display: flex; flex-direction: column; gap: 11px; }
.viz-search__field { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); font-size: 13px; color: var(--ink); }
.viz-search__field svg { stroke: var(--ink-3); }
.viz-search__q { font-weight: 500; }
.caret { width: 1.5px; height: 15px; background: var(--accent); border-radius: 1px; animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.viz-search__list { display: flex; flex-direction: column; gap: 4px; }
.sresult { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; color: var(--ink); transition: opacity 0.4s var(--ease-out), max-height 0.4s var(--ease-out); }
.sresult .sname b { color: var(--accent-ink); font-weight: 700; }
[data-theme="dark"] .sresult .sname b { color: #b7bbff; }
.sresult--out { opacity: 0.32; }
.sresult--out .sname b { color: inherit; font-weight: 500; }

/* ---------- C · drag into anything ---------- */
.viz-drag { padding: 20px 22px; }
.dests { position: absolute; right: 22px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 9px; width: 46%; }
.dest { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px; font-size: 11.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); transition: border-color 0.3s, box-shadow 0.3s, color 0.3s; }
.dest__bar { width: 34px; height: 8px; border-radius: 999px; background: var(--fill); }
.dest__plus { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; background: var(--fill); font-weight: 700; color: var(--ink-3); }
.dest__clip { width: 12px; height: 14px; border-radius: 3px; border: 1.5px solid var(--ink-3); opacity: 0.5; }
.dest--target { border-color: rgba(99,91,255,0.5); box-shadow: 0 0 0 3px rgba(99,91,255,0.12); color: var(--accent-ink); }
[data-theme="dark"] .dest--target { color: #b7bbff; }
.dragfile { position: absolute; left: 24px; top: 50%; transform: translateY(-50%) rotate(-5deg); z-index: 4; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.28)); }
.viz-drag .viz-cursor { left: 70px; top: 52%; }

/* ---------- D · stage a shelf ---------- */
.viz-shelf { padding: 0; }
.shelfstrip { position: absolute; left: 22px; right: 22px; bottom: 22px; height: 58px; border-radius: 12px; border: 1.5px dashed var(--card-border);
  background: color-mix(in srgb, var(--ink) 3%, transparent); display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.shelfstrip__label { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
/* smaller so they sit inside the strip with even top/bottom margin */
.shelfstrip .ficon { width: 30px; height: 38px; }
.bundle { position: absolute; left: 50%; top: 34px; z-index: 4; transform: translateX(-50%); }
.bundle .ficon { position: absolute; left: 0; top: 0; width: 40px; height: 50px; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.22)); }
.bundle .ficon:nth-child(1) { transform: rotate(-11deg) translate(-16px, 4px); }
.bundle .ficon:nth-child(2) { transform: rotate(-2deg) translate(0, 0); }
.bundle .ficon:nth-child(3) { transform: rotate(9deg) translate(16px, 3px); }
.bundle__count { position: absolute; right: -14px; top: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: var(--accent); box-shadow: 0 2px 5px rgba(79,70,229,0.4); }

/* ---------- E · quick actions ---------- */
.viz-actions { display: grid; place-items: center; }
.qa-row { display: flex; align-items: center; gap: 7px; }
.qa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); }
.qa-chip svg { stroke: currentColor; }
.qa-chip--icon { padding: 8px; }
.qa-chip--press { color: var(--accent-ink); border-color: rgba(99,91,255,0.3); }
[data-theme="dark"] .qa-chip--press { color: #b7bbff; }
.qa-toast { position: absolute; left: 50%; top: 30px; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-md); opacity: 0; z-index: 5; }
.qa-toast svg { stroke: #10b981; }

/* ---------- F · catch it mid-drag ---------- */
.viz-catch { display: grid; place-items: center; }
.catchpill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-md); }
.catchpill svg { stroke: var(--accent); }
.catchfile { position: absolute; left: 50%; top: 30px; transform: translateX(-50%) rotate(-6deg); z-index: 4; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.26)); }
.viz-catch .viz-cursor { left: 50%; top: 36px; }

/* ---------- G · make it yours ---------- */
.viz-theme { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; --acc: #3b82f6; }
.themecard { width: 150px; padding: 9px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 5px; }
.themecard__bar { height: 13px; border-radius: 6px; background: var(--fill); }
.themecard__chip { height: 15px; border-radius: 5px; background: var(--fill); }
.themecard__chip.is-acc { background: color-mix(in srgb, var(--acc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent); }
.adots { position: relative; display: flex; gap: 12px; }
.adot { width: 22px; height: 22px; border-radius: 50%; background: var(--s); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.adots__ring { position: absolute; left: 0; top: -3px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink);
  transform: translateX(-3px); transition: transform 0.4s var(--ease-out); opacity: 0.85; }

/* ===== motion — only while the tile is on-screen ===== */
/* one calm sequence: page + hotkey rest → press → palette summons (page dims)
   → holds → palette dismisses, page returns. Nothing competes at once. */
.ftile.is-live[data-anim="summon"] .viz-summon__doc { animation: summon-doc 4.6s var(--ease-out) infinite; }
.ftile.is-live[data-anim="summon"] .viz-summon__keys { animation: summon-keys 4.6s var(--ease-out) infinite; }
.ftile.is-live[data-anim="summon"] .viz-summon__keys .keycap { animation: key-tap 4.6s var(--ease-out) infinite; }
.ftile.is-live[data-anim="summon"] .viz-summon__ring { animation: ring-pulse 4.6s var(--ease-out) infinite; }
.ftile.is-live[data-anim="summon"] .popcard { animation: pop-in 4.6s var(--ease-out) infinite; }
@keyframes summon-doc {
  0%, 13% { opacity: 1; }
  28%, 76% { opacity: 0.38; }
  90%, 100% { opacity: 1; }
}
@keyframes summon-keys {
  0%, 12% { opacity: 1; transform: translateY(0); }
  20%, 82% { opacity: 0; transform: translateY(-3px); }
  90%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes pop-in {
  0%, 13% { opacity: 0; transform: translate(-50%, -16%) scale(0.9); filter: blur(4px); }
  27%, 76% { opacity: 1; transform: translate(-50%, -28%) scale(1); filter: blur(0); }
  90%, 100% { opacity: 0; transform: translate(-50%, -16%) scale(0.9); filter: blur(4px); }
}
@keyframes ring-pulse {
  0%, 14% { opacity: 0; transform: scale(0.4); }
  19% { opacity: 0.5; transform: scale(1); }
  32%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes key-tap {
  0%, 6%, 13%, 100% { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 3px 0 rgba(20,20,40,0.16), 0 5px 10px -4px rgba(20,20,40,0.3); }
  9% { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0 rgba(20,20,40,0.2); }
}

.ftile.is-live[data-anim="search"] .sresult--out { animation: filter-out 4s var(--ease-out) infinite; }
@keyframes filter-out { 0%, 30% { opacity: 0.32; } 45%, 80% { opacity: 0; } 95%, 100% { opacity: 0.32; } }

.ftile.is-live[data-anim="drag"] .dragfile { animation: drag-throw 3.8s var(--ease-in-out) infinite; }
.ftile.is-live[data-anim="drag"] .dest--target { animation: target-glow 3.8s var(--ease-out) infinite; }
@keyframes drag-throw {
  0% { transform: translate(0, -50%) rotate(-5deg) scale(0.9); opacity: 0; }
  10% { transform: translate(0, -50%) rotate(-5deg) scale(1); opacity: 1; }
  16% { transform: translate(0, -50%) rotate(-5deg) scale(1); opacity: 1; }
  60%, 72% { transform: translate(196px, -54%) rotate(-1deg) scale(0.92); opacity: 1; }
  84% { transform: translate(196px, -54%) rotate(-1deg) scale(0.5); opacity: 0; }
  100% { transform: translate(196px, -54%) rotate(-1deg) scale(0.5); opacity: 0; }
}
.ftile.is-live[data-anim="drag"] .viz-cursor { animation: drag-cursor 3.8s var(--ease-in-out) infinite; }
@keyframes drag-cursor { 0%, 16% { transform: translate(0,0); } 60%, 84% { transform: translate(196px, -6px); } 100% { transform: translate(0,0); } }
@keyframes target-glow {
  0%, 40% { border-color: rgba(99,91,255,0.5); box-shadow: 0 0 0 3px rgba(99,91,255,0.12); }
  64% { border-color: rgba(99,91,255,0.95); box-shadow: 0 0 0 4px rgba(99,91,255,0.32); }
  84%, 100% { border-color: rgba(99,91,255,0.5); box-shadow: 0 0 0 3px rgba(99,91,255,0.12); }
}

.ftile.is-live[data-anim="shelf"] .bundle { animation: bundle-lift 3.8s var(--ease-in-out) infinite; }
@keyframes bundle-lift {
  0%, 16% { transform: translateX(-50%) translateY(38px) scale(0.92); }
  44%, 78% { transform: translateX(-50%) translateY(-2px) scale(1); }
  96%, 100% { transform: translateX(-50%) translateY(38px) scale(0.92); }
}

.ftile.is-live[data-anim="actions"] .qa-chip--press { animation: chip-press 3.4s var(--ease-out) infinite; }
.ftile.is-live[data-anim="actions"] .qa-toast { animation: toast-pop 3.4s var(--ease-out) infinite; }
@keyframes chip-press { 16% { transform: scale(1); } 22% { transform: scale(0.94); } 30% { transform: scale(1); } }
@keyframes toast-pop { 0%, 22% { opacity: 0; transform: translate(-50%, 6px); } 34%, 74% { opacity: 1; transform: translate(-50%, 0); } 90%, 100% { opacity: 0; transform: translate(-50%, 6px); } }

.ftile.is-live[data-anim="catch"] .catchfile { animation: catch-drop 3.6s var(--ease-in-out) infinite; }
.ftile.is-live[data-anim="catch"] .catchpill { animation: catch-glow 3.6s var(--ease-out) infinite; }
@keyframes catch-drop {
  0%, 14% { transform: translateX(-50%) translateY(-6px) rotate(-6deg); opacity: 1; }
  58% { transform: translateX(-50%) translateY(70px) rotate(-2deg) scale(0.8); opacity: 1; }
  68%, 86% { transform: translateX(-50%) translateY(82px) rotate(0) scale(0.5); opacity: 0; }
  96%, 100% { transform: translateX(-50%) translateY(-6px) rotate(-6deg); opacity: 1; }
}
@keyframes catch-glow { 50% { box-shadow: var(--shadow-md); } 64% { box-shadow: 0 0 0 4px rgba(99,91,255,0.18), var(--shadow-md); } 80% { box-shadow: var(--shadow-md); } }

.ftile.is-live[data-anim="theme"] .adots__ring { animation: ring-step 7.2s steps(1) infinite; }
.ftile.is-live[data-anim="theme"] .themecard { animation: acc-cycle 7.2s steps(1) infinite; }
@keyframes ring-step {
  0% { transform: translateX(-3px); } 16.6% { transform: translateX(31px); } 33.2% { transform: translateX(65px); }
  49.8% { transform: translateX(99px); } 66.4% { transform: translateX(133px); } 83% { transform: translateX(167px); } 100% { transform: translateX(-3px); }
}
@keyframes acc-cycle {
  0% { --acc: #3b82f6; } 16.6% { --acc: #8b5cf6; } 33.2% { --acc: #ec4899; }
  49.8% { --acc: #f59e0b; } 66.4% { --acc: #10b981; } 83% { --acc: #6b7280; } 100% { --acc: #3b82f6; }
}

@media (prefers-reduced-motion: reduce) {
  .ftile [class*="viz-"] *, .ftile .popcard, .ftile .caret { animation: none !important; }
  .ftile .popcard { opacity: 1; transform: translate(-50%, -28%) scale(0.96); filter: none; }
  .ftile .qa-toast { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================================
   How it works
   ========================================================================= */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step {
  position: relative; border-radius: var(--r-lg); padding: 26px;
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md); overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--card-border-hover); }
.step__no { font-family: var(--font-serif); font-size: 14px; color: var(--accent-ink); font-weight: 500; }
[data-theme="dark"] .step__no { color: #b7bbff; }
.step__keys { height: 92px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 18px; }
.step h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.step p { margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* keycaps — after the app's DarkKeyCapView / onboarding keycaps */
.keycap {
  display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px;
  border-radius: 12px; font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--keycap-ink);
  background: linear-gradient(180deg, var(--keycap-top), var(--keycap-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 3px 0 rgba(20,20,40,0.16), 0 5px 10px -4px rgba(20,20,40,0.3);
  border: 1px solid rgba(0,0,0,0.04);
}
[data-theme="dark"] .keycap { border-color: rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 0 rgba(0,0,0,0.5); }
.keycap--wide { min-width: 92px; font-size: 14px; letter-spacing: 0.02em; }
.plus { font-family: var(--font-serif); font-size: 22px; color: var(--ink-3); }

.step__keys--pills { gap: 6px; }
.ghostpill { padding: 7px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--fill); border: 1px solid var(--card-border); }
.ghostpill.is-active { background: var(--segment-active); color: var(--ink); box-shadow: 0 1px 3px rgba(20,20,40,0.14); }
[data-theme="dark"] .ghostpill.is-active { color: #fff; }
.dragdrop { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #7781ff, #4e5afd); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 22px -10px rgba(78,90,253,0.6); }
.dragdrop svg { stroke: currentColor; }

/* =========================================================================
   Craft
   ========================================================================= */
.section--craft { text-align: center; }
.craft { max-width: 44rem; margin: 0 auto; }
.craft__quote {
  margin: 26px 0 0; font-family: var(--font-serif); font-weight: 360;
  font-size: clamp(32px, 6vw, 60px); line-height: 1.08; letter-spacing: -0.03em;
}
.craft__quote em { font-style: italic; color: var(--accent-ink); }
[data-theme="dark"] .craft__quote em { color: #b7bbff; }
.craft__body { margin: 28px auto 0; max-width: 38rem; font-size: clamp(16px, 1.8vw, 18px); color: var(--ink-2); line-height: 1.7; }
.craft__body em { font-style: italic; color: var(--ink); }
.swatches { display: inline-flex; gap: 12px; margin-top: 42px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; background: var(--s);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 10px -4px var(--s), 0 0 0 4px color-mix(in srgb, var(--s) 16%, transparent);
  transition: transform 0.2s var(--ease-out);
}
.swatch:hover { transform: translateY(-3px) scale(1.06); }
.craft__caption { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }

/* =========================================================================
   FAQ
   ========================================================================= */
.section--faq { max-width: 760px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.qa {
  border-radius: var(--r-md); padding: 4px 22px;
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.qa:hover { border-color: var(--card-border-hover); }
.qa[open] { box-shadow: var(--shadow-md); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__icon { position: relative; flex: 0 0 18px; height: 18px; }
.qa__icon::before, .qa__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--ink-2); border-radius: 2px;
}
.qa__icon::before { width: 13px; height: 1.8px; }
.qa__icon::after { width: 1.8px; height: 13px; transition: transform 0.28s var(--ease-out), opacity 0.28s var(--ease-out); }
.qa[open] .qa__icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.qa__body { overflow: hidden; }
.qa__body p { padding-bottom: 20px; font-size: 14.5px; color: var(--ink-2); line-height: 1.65; max-width: 56ch; }

/* =========================================================================
   Download
   ========================================================================= */
.section--download { text-align: center; }
.download {
  border-radius: var(--r-xl); padding: clamp(40px, 6vw, 64px) var(--gutter);
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface); box-shadow: var(--cast-lift);
}
.download__icon { width: 116px; height: 116px; filter: drop-shadow(18px 26px 36px hsl(var(--shadow-hue) / 0.3)); animation: icon-bob 6s var(--ease-in-out) infinite alternate; }
@keyframes icon-bob { to { transform: translateY(-8px); } }
.download__title { margin-top: 26px; font-family: var(--font-serif); font-weight: 420; font-size: clamp(26px, 4vw, 42px); letter-spacing: -0.025em; line-height: 1.1; }
.download__sub { margin-top: 14px; max-width: 30rem; font-size: clamp(15px, 1.7vw, 17px); color: var(--ink-2); }
.download__cta { margin-top: 28px; }
.download__cta svg { fill: currentColor; }
.download__meta { margin-top: 16px; font-size: 13px; color: var(--ink-3); }

/* =========================================================================
   Maker's-note nudge — a quiet cue toward the essay
   ========================================================================= */
.section--note { text-align: center; padding-top: 0; padding-bottom: clamp(40px, 7vh, 78px); }
.notecue {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 34px);
  max-width: 41rem; margin: 0 auto; padding: clamp(17px, 1.9vw, 23px) clamp(20px, 2.3vw, 28px);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--cast-soft); text-align: left;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out), border-color 0.32s var(--ease-out);
}
.notecue:hover { transform: translateY(-2px); box-shadow: var(--cast-lift); border-color: var(--card-border-hover); }
.notecue__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notecue__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); }
[data-theme="dark"] .notecue__eyebrow { color: #b7bbff; }
.notecue__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.notecue__title { margin-top: 4px; font-family: var(--font-serif); font-weight: 420; font-size: clamp(17px, 1.9vw, 21px); color: var(--ink); letter-spacing: -0.018em; line-height: 1.22; }
.notecue__sub { margin-top: 5px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.notecue__cta { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.notecue__cta svg { stroke: currentColor; transition: transform 0.3s var(--ease-out); }
.notecue:hover .notecue__cta { color: var(--ink); }
.notecue:hover .notecue__cta svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .notecue { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer { border-top: 1px solid var(--divider); margin-top: clamp(56px, 9vh, 96px); }
.footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px, 7vh, 76px) var(--gutter) clamp(38px, 5.5vh, 54px);
  display: grid; gap: 15px; justify-items: center; text-align: center;
}
.footer__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.footer__brand .nav__mark { width: 30px; height: 30px; }
/* a quiet maker's line — not a statement (no italic), just a calm note */
.footer__tag {
  margin-top: 2px; max-width: 32ch;
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(15px, 1.6vw, 18px);
  color: var(--ink-2); letter-spacing: -0.012em; line-height: 1.5;
}
.footer__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(15px, 2vw, 26px);
  margin-top: 13px; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.footer__links a { position: relative; transition: color 0.2s var(--ease-out); }
.footer__links a:hover { color: var(--ink); }
.footer__legal { margin-top: 5px; font-size: 12px; color: var(--ink-3); letter-spacing: 0.01em; }

/* =========================================================================
   The hero demo — an actual macOS screen with Satchel summoned.
   A JS timeline sets [data-step] on .demo; everything below reacts to it.
   ========================================================================= */
.demo { max-width: 1080px; margin: 0 auto; }

.screen {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
  border-radius: clamp(15px, 1.7vw, 24px); border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 4px rgba(17,17,26,0.10), 0 44px 90px -34px rgba(17,17,26,0.42), 0 110px 170px -90px rgba(17,17,26,0.30);
}
[data-theme="dark"] .screen { border-color: rgba(255,255,255,0.08); box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 54px 100px -34px rgba(0,0,0,0.7), 0 120px 180px -100px rgba(0,0,0,0.6); }

/* macOS wallpaper — flat solid desktop colour. No pattern, no gradient; the
   depth comes from the defocus + the lifted palette, not from the surface. */
/* the desktop surface — light mode is a soft near-white (a different shade
   from the page, no loud brand colour); dark mode keeps the deep indigo. */
.screen__wall { position: absolute; inset: 0; z-index: 0; background-color: #e8eaf3; }
[data-theme="dark"] .screen__wall { background-color: #15161c; }

/* menu bar */
.macbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  height: clamp(22px, 3.6%, 30px); display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; font-size: clamp(9px, 1.15vw, 12.5px); color: #fff;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.12);
}
[data-theme="dark"] .macbar { background: rgba(0,0,0,0.26); }
.macbar__left, .macbar__right { display: flex; align-items: center; gap: clamp(9px, 1.3vw, 16px); }
.macbar__apple svg { fill: #fff; }
.macbar__app { font-weight: 700; }
.macbar__menus { display: flex; gap: clamp(9px, 1.3vw, 15px); opacity: 0.92; }
.macbar__menus i { font-style: normal; font-weight: 400; }
.macbar__right svg { stroke: #fff; }
.macbar__clock { font-weight: 500; font-variant-numeric: tabular-nums; }

/* a real macOS window (Messages) — the drop target */
.macwin {
  position: absolute; z-index: 4; overflow: hidden; display: flex; flex-direction: column;
  border-radius: clamp(9px, 1vw, 13px); border: 1px solid rgba(0,0,0,0.12);
  background: rgba(250,250,252,0.82);
  backdrop-filter: blur(34px) saturate(140%); -webkit-backdrop-filter: blur(34px) saturate(140%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.14), 0 34px 64px -26px rgba(0,0,0,0.5);
}
[data-theme="dark"] .macwin { background: rgba(32,32,38,0.84); border-color: rgba(255,255,255,0.1); box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 34px 64px -26px rgba(0,0,0,0.65); }
.macwin--messages { left: 4%; top: 11.5%; width: 31%; height: 65%; }
.macwin__bar {
  position: relative; flex: 0 0 auto; height: clamp(24px, 3vw, 32px);
  display: flex; align-items: center; padding: 0 11px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .macwin__bar { border-bottom-color: rgba(255,255,255,0.07); }
.traffic { display: flex; gap: 7px; }
.traffic i { width: clamp(8px, 0.9vw, 11px); height: clamp(8px, 0.9vw, 11px); border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.14); }
.traffic i:nth-child(1) { background: #ff5f57; }
.traffic i:nth-child(2) { background: #febc2e; }
.traffic i:nth-child(3) { background: #28c840; }
.macwin__title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-size: clamp(9px, 1.1vw, 12px); font-weight: 600; color: #1c1c22; }
[data-theme="dark"] .macwin__title { color: #f4f4f8; }
.macwin__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(5px, 0.7vw, 8px); padding: clamp(9px, 1vw, 13px); overflow: hidden; }
.bubble { max-width: 82%; padding: clamp(5px,0.6vw,8px) clamp(8px,0.9vw,11px); border-radius: 14px; font-size: clamp(8.5px, 1vw, 11.5px); line-height: 1.35; }
.bubble--in { align-self: flex-start; background: #e9e9eb; color: #1c1c22; border-bottom-left-radius: 5px; }
[data-theme="dark"] .bubble--in { background: #3a3a40; color: #f4f4f8; }
.bubble--out { align-self: flex-end; background: linear-gradient(180deg, #38a1ff, #0a7aff); color: #fff; border-bottom-right-radius: 5px; }
.composer { margin-top: auto; display: flex; align-items: center; gap: 7px; }
.composer__plus { color: #9aa0ab; font-size: clamp(12px, 1.4vw, 16px); line-height: 1; }
.composer__field {
  flex: 1; min-width: 0; height: clamp(22px, 2.6vw, 28px); display: flex; align-items: center; padding: 0 10px;
  border-radius: 999px; border: 1px solid rgba(0,0,0,0.13);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
[data-theme="dark"] .composer__field { border-color: rgba(255,255,255,0.14); }
.composer__ph { font-size: clamp(8.5px, 1vw, 11px); color: #9aa0ab; }
.composer__attach {
  display: none; flex: 1; align-items: center; gap: 6px; padding: clamp(4px,0.5vw,6px) 9px; border-radius: 999px;
  font-size: clamp(8.5px, 1vw, 11px); font-weight: 600; color: #4f46e5;
  background: rgba(99,91,255,0.12); border: 1px solid rgba(99,91,255,0.25);
}
[data-theme="dark"] .composer__attach { color: #c7c9ff; background: rgba(124,124,255,0.16); border-color: rgba(124,124,255,0.3); }
.demo[data-step="dragout"] .composer__field { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,91,255,0.2); background: rgba(99,91,255,0.06); }
.demo[data-step="dropped"] .composer__field,
.demo[data-step="focus2"] .composer__field,
.demo[data-step="dragshelf"] .composer__field,
.demo[data-step="shelved"] .composer__field { display: none; }
.demo[data-step="dropped"] .composer__attach,
.demo[data-step="focus2"] .composer__attach,
.demo[data-step="dragshelf"] .composer__attach,
.demo[data-step="shelved"] .composer__attach { display: inline-flex; }

/* === the Satchel palette (mirrors the app, scoped to its own tokens) === */
.palette {
  --p-ink: #1c1c22; --p-ink-2: rgba(28,28,34,0.55); --p-ink-3: rgba(28,28,34,0.42);
  --p-surface: rgba(0,0,0,0.045); --p-surface-hover: rgba(0,0,0,0.08); --p-track: rgba(0,0,0,0.055);
  --p-seg: #ffffff; --p-shelf: rgba(0,0,0,0.028); --p-dash: rgba(0,0,0,0.16);
  --p-focus: rgba(99,91,255,0.12); --p-focus-ring: rgba(99,91,255,0.42);
  --p-accent-soft: rgba(99,91,255,0.12); --p-accent-ink: #4f46e5;
  --p-bg: rgba(247,247,249,0.78); --p-border: rgba(255,255,255,0.7);

  position: absolute; z-index: 7; left: 62%; top: 50%;
  width: clamp(320px, 56%, 600px); padding: clamp(11px, 1.2vw, 16px);
  display: flex; flex-direction: column; gap: clamp(8px, 0.95vw, 12px);
  border-radius: clamp(15px, 1.6vw, 20px);
  background: var(--p-bg); border: 1px solid var(--p-border);
  backdrop-filter: blur(44px) saturate(180%); -webkit-backdrop-filter: blur(44px) saturate(180%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6), 0 34px 60px -22px rgba(17,17,26,0.4), 0 90px 130px -80px rgba(17,17,26,0.45);
  transform: translate(-50%, -50%) scale(0.82); transform-origin: 50% 62%;
  opacity: 0; filter: blur(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}
[data-theme="dark"] .palette {
  --p-ink: #f4f4f8; --p-ink-2: rgba(235,235,245,0.56); --p-ink-3: rgba(235,235,245,0.4);
  --p-surface: rgba(255,255,255,0.06); --p-surface-hover: rgba(255,255,255,0.1); --p-track: rgba(255,255,255,0.07);
  --p-seg: rgba(255,255,255,0.14); --p-shelf: rgba(255,255,255,0.028); --p-dash: rgba(255,255,255,0.16);
  --p-focus: rgba(124,124,255,0.18); --p-focus-ring: rgba(124,124,255,0.5);
  --p-accent-soft: rgba(124,124,255,0.16); --p-accent-ink: #c7c9ff;
  --p-bg: rgba(24,24,30,0.64); --p-border: rgba(255,255,255,0.08);
  box-shadow: 0 1px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06), 0 34px 60px -22px rgba(0,0,0,0.6), 0 90px 130px -80px rgba(0,0,0,0.7);
}
.demo[data-step="summon"] .palette,
.demo[data-step="lens"] .palette,
.demo[data-step="focus"] .palette,
.demo[data-step="dragout"] .palette,
.demo[data-step="dropped"] .palette,
.demo[data-step="focus2"] .palette,
.demo[data-step="dragshelf"] .palette,
.demo[data-step="shelved"] .palette {
  opacity: 1; filter: none; transform: translate(-50%, -50%) scale(0.92);
}

.palette__search {
  display: flex; align-items: center; gap: 9px; padding: clamp(8px,0.95vw,12px) clamp(11px,1.1vw,14px);
  border-radius: clamp(9px,1vw,12px); background: var(--p-track); color: var(--p-ink-3);
  font-size: clamp(11px, 1.2vw, 14px);
}
.palette__search svg { stroke: var(--p-ink-3); }
.palette__ph { flex: 1; text-align: left; }   /* sit beside the icon, not centred */

.palette__tabs { display: flex; gap: 2px; }
.tab {
  flex: 1; padding: clamp(6px,0.75vw,9px) 4px; border-radius: clamp(7px,0.85vw,10px);
  font-size: clamp(10px,1.05vw,13px); font-weight: 600; color: var(--p-ink-2); text-align: center;
  transition: background 0.22s var(--ease-app), color 0.22s var(--ease-app), box-shadow 0.22s var(--ease-app);
}
.tab.is-active { background: var(--p-seg); color: var(--p-ink); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
[data-theme="dark"] .tab.is-active { color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

.palette__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px,0.7vw,9px); }
.fcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: clamp(9px,0.95vw,13px); border-radius: clamp(10px,1.1vw,14px); background: var(--p-surface); min-width: 0;
  text-align: left;   /* don't inherit the hero's centred text */
  transition: background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
/* two groups: the icon (top), then a tight name + timestamp pair below it.
   bigger gap after the icon separates the entities; name + meta stay close. */
.fcard .ficon { width: clamp(28px, 2.7vw, 38px); height: clamp(35px, 3.4vw, 47px);
  margin-bottom: clamp(13px, 1.5vw, 19px); }
.fcard__name { margin-bottom: 2px; }
.fcard.is-focused { background: var(--p-focus); box-shadow: inset 0 0 0 1px var(--p-focus-ring); }
.fcard__name { width: 100%; font-size: clamp(10px,1.05vw,13px); font-weight: 600; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard__meta { width: 100%; font-size: clamp(9px,0.95vw,11.5px); color: var(--p-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* macOS-style document icon, drawn in CSS */
.ficon {
  position: relative; flex: 0 0 auto; width: clamp(34px, 3.5vw, 46px); height: clamp(42px, 4.4vw, 57px);
  background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.14);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); overflow: hidden;
}
.ficon::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: #e6e8ef; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.ficon__lines { position: absolute; left: 6px; right: 7px; top: 9px; height: 50%; opacity: 0.85; border-radius: 1px;
  background-image: repeating-linear-gradient(180deg, var(--fl, #cdd2e2) 0 1.5px, transparent 1.5px 5.5px); }
.ficon__badge { position: absolute; left: 5px; bottom: 5px; padding: 1.5px 4px; border-radius: 4px; color: #fff;
  font-size: clamp(6px,0.62vw,8px); font-weight: 800; letter-spacing: 0.02em; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.ficon--js { --fl: #ded09a; } .ficon--js .ficon__badge { background: #e7b41f; color: #3a2c00; }
.ficon--scss { --fl: #e6c4d6; } .ficon--scss .ficon__badge { background: #cd6799; }
.ficon--css { --fl: #bcd0f5; } .ficon--css .ficon__badge { background: #2f6df3; }
.ficon--sm { width: 42px; height: 52px; }
.ficon--xs { width: clamp(15px,1.5vw,19px); height: clamp(19px,1.9vw,24px); border-radius: 4px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
.ficon--xs::after { width: 7px; height: 7px; }
.ficon--xs .ficon__lines { top: 4px; left: 3px; right: 4px; height: 56%; }
.ficon--xs .ficon__badge { display: none; }

.palette__actions { display: flex; align-items: center; gap: clamp(5px,0.6vw,8px); }
.pbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: clamp(6px,0.7vw,9px) clamp(9px,0.95vw,13px);
  border-radius: clamp(7px,0.85vw,10px); font-size: clamp(10px,1.05vw,13px); font-weight: 600; color: var(--p-ink-2);
  background: var(--p-surface); transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.pbtn svg { stroke: currentColor; }
.pbtn:hover { background: var(--p-surface-hover); color: var(--p-ink); }
.pbtn--icon { padding: clamp(6px,0.7vw,9px); }
.palette__current { margin-left: auto; max-width: 32%; font-size: clamp(9px,1vw,12px); color: var(--p-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.palette__shelf { position: relative; min-height: clamp(52px, 5.6vw, 74px); border-radius: clamp(10px,1.1vw,14px); background: var(--p-shelf); }
.shelf__empty {
  position: absolute; inset: 0; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1.5px dashed var(--p-dash); color: var(--p-ink-3); font-size: clamp(10px,1.05vw,13px); font-weight: 500;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), background 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.shelf__empty svg { stroke: var(--p-ink-3); transition: stroke 0.3s var(--ease-out); }
.shelf__full { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 clamp(8px,0.9vw,12px); opacity: 0; transition: opacity 0.3s var(--ease-out); }
.shelf__chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 10px; background: var(--p-surface); font-size: clamp(10px,1.05vw,12.5px); font-weight: 600; color: var(--p-ink); }
.shelf__dragall { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--p-accent-soft); color: var(--p-accent-ink); font-size: clamp(9px,1vw,12px); font-weight: 600; }
.shelf__dragall svg { stroke: currentColor; }
.demo[data-step="dragshelf"] .shelf__empty { border-color: var(--p-focus-ring); color: var(--p-accent-ink); background: var(--p-accent-soft); }
.demo[data-step="dragshelf"] .shelf__empty svg { stroke: var(--p-accent-ink); }
.demo[data-step="shelved"] .shelf__empty { opacity: 0; }
.demo[data-step="shelved"] .shelf__full { opacity: 1; }

/* === the Dock ==================================================== */
.dock {
  position: absolute; left: 50%; bottom: clamp(7px, 1.5%, 15px); transform: translateX(-50%); z-index: 5;
  display: flex; align-items: flex-end; gap: clamp(5px, 0.7vw, 10px);
  padding: clamp(5px,0.6vw,8px) clamp(7px,0.85vw,12px); border-radius: clamp(14px,1.6vw,20px);
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
[data-theme="dark"] .dock { background: rgba(40,40,48,0.36); border-color: rgba(255,255,255,0.1); }
.dock__app {
  width: clamp(28px, 3.3vw, 44px); height: clamp(28px, 3.3vw, 44px); border-radius: clamp(7px,0.85vw,11px);
  display: grid; place-items: center; background: linear-gradient(160deg, var(--a, #ccc), var(--b, #999));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 8px -3px rgba(0,0,0,0.35); transition: transform 0.3s var(--ease-out);
}
.dock__app svg { stroke: #fff; }
.dock__app--note svg { stroke: #a87b00; }
.dock__app img { width: 100%; height: 100%; border-radius: inherit; }
.dock__app--satchel { background: none; box-shadow: 0 5px 10px -3px rgba(0,0,0,0.4); }
.dock__sep { align-self: center; width: 1px; height: clamp(24px, 2.8vw, 38px); background: rgba(255,255,255,0.32); }
.demo[data-step="hotkey"] .dock__app--satchel,
.demo[data-step="summon"] .dock__app--satchel { transform: translateY(-26%); }

/* dragged-file ghost */
.demo__ghost {
  position: absolute; z-index: 8; left: 44%; top: 44%; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(0.92) rotate(-4deg); filter: drop-shadow(0 12px 18px rgba(0,0,0,0.4));
  transition: left 0.9s var(--ease-in-out), top 0.9s var(--ease-in-out), opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.demo[data-step="dragout"] .demo__ghost { left: 19%; top: 68%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
.demo[data-step="dropped"] .demo__ghost { left: 19%; top: 68%; opacity: 0; }
.demo[data-step="focus2"] .demo__ghost { left: 70%; top: 44%; opacity: 0; transition: opacity 0.2s var(--ease-out); }
.demo[data-step="dragshelf"] .demo__ghost { left: 60%; top: 76%; opacity: 1; transform: translate(-50%, -50%) scale(0.82) rotate(-3deg); }
.demo[data-step="shelved"] .demo__ghost,
.demo[data-step="dismiss"] .demo__ghost { opacity: 0; }

.demo__cursor {
  position: absolute; z-index: 9; left: 60%; top: 92%; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
  transition: left 0.85s var(--ease-in-out), top 0.85s var(--ease-in-out);
}
.demo[data-step="hotkey"] .demo__cursor { left: 60%; top: 60%; }
.demo[data-step="summon"] .demo__cursor,
.demo[data-step="lens"] .demo__cursor { left: 60%; top: 26%; }
.demo[data-step="focus"] .demo__cursor { left: 50%; top: 47%; }
.demo[data-step="dragout"] .demo__cursor,
.demo[data-step="dropped"] .demo__cursor { left: 19%; top: 69%; }
.demo[data-step="focus2"] .demo__cursor { left: 70%; top: 47%; }
.demo[data-step="dragshelf"] .demo__cursor,
.demo[data-step="shelved"] .demo__cursor { left: 60%; top: 78%; }
.demo[data-step="dismiss"] .demo__cursor { left: 60%; top: 90%; }

.demo__hotkey {
  position: absolute; z-index: 9; left: 62%; top: 40%; display: flex; gap: 8px;
  opacity: 0; transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.demo[data-step="hotkey"] .demo__hotkey { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.demo__cap {
  min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: 11px;
  font-weight: 700; font-size: 17px; color: var(--keycap-ink); background: linear-gradient(180deg, var(--keycap-top), var(--keycap-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 3px 0 rgba(20,20,40,0.18), 0 6px 12px -4px rgba(20,20,40,0.4);
}
[data-theme="dark"] .demo__cap { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 0 rgba(0,0,0,0.5), 0 6px 12px -4px rgba(0,0,0,0.6); }
.demo__cap--wide { min-width: 80px; font-size: 13px; }

.demo__toast {
  position: absolute; z-index: 9; left: 50%; bottom: 15%; display: flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-pill); color: var(--ink); font-size: clamp(11px, 1.3vw, 13px); font-weight: 500;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-md); opacity: 0; transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.demo__toast svg { stroke: var(--accent); }
.demo[data-step="dropped"] .demo__toast,
.demo[data-step="shelved"] .demo__toast { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .demo__cursor, .demo__ghost, .demo__hotkey, .demo__toast { display: none; }
  .palette { opacity: 1 !important; filter: none !important; transform: translate(-50%, -50%) scale(0.92) !important; }
  .dock__app--satchel { transform: none !important; }
}

/* =========================================================================
   Reveal on scroll
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .download__icon { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.08s !important; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 940px) {
  .nav__links { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .ftile { grid-column: span 1 !important; }
  .ftile--a { grid-column: span 2 !important; }
}

/* ---- Mobile hero: the landscape desktop is too small to read at phone width,
   so the photograph becomes a flat field — copy on top, the palette standing
   alone as the product below, all in normal flow. Light = soft near-white. ---- */
@media (max-width: 760px) {
  .hero {
    background: #e8eaf3;
    justify-content: center;
    padding: calc(var(--nav-h) + clamp(16px, 5vh, 40px)) var(--gutter) clamp(34px, 7vh, 64px);
    gap: clamp(22px, 5vh, 44px);
  }
  [data-theme="dark"] .hero { background: #15161c; }
  .hero::after { display: none; }
  .hero__scrim { display: none; }
  /* the set collapses to flow; only the palette (the product) remains */
  .hero__stage { position: static; inset: auto; width: 100%; max-width: 440px; margin: 0 auto; }
  .hero__stage .demo, .hero .screen {
    position: static; inset: auto; height: auto; width: 100%; aspect-ratio: auto;
    border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  }
  .hero .screen__wall, .hero .macwin, .hero .dock, .hero .macbar, .hero .scene__dof,
  .hero .demo__ghost, .hero .demo__hotkey, .hero .demo__toast, .hero .demo__cursor { display: none; }
  .hero .palette {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    transform: none !important; filter: none !important; opacity: 1 !important;
    width: 100%; margin: 0 auto;
  }
  .hero .palette__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hero__title { font-size: clamp(33px, 11vw, 44px); }
  .hero__cta .btn { width: 100%; }
  .nav__name { display: none; }
  .bento { grid-template-columns: 1fr; }
  .ftile { grid-column: span 1 !important; }
}

/* hero-lab palettes go 2-up on phones (all variants share the .palette grid) */
@media (max-width: 640px) {
  .vhero .palette__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   Maker's note page (notes.html) — editorial, type-led, quieter glass.
   ========================================================================= */
.page-notes .nav__links a[aria-current="page"] { color: var(--ink); }
.note { width: 100%; }
.note__masthead, .prose { max-width: 752px; margin-inline: auto; padding-inline: var(--gutter); }

.note__masthead { padding-top: clamp(36px, 7vh, 84px); padding-bottom: clamp(26px, 4vh, 42px); border-bottom: 1px solid var(--divider); }
.note__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
[data-theme="dark"] .note__kicker { color: #b7bbff; }
.note__kicker svg { stroke: currentColor; }
.note__kicker:hover { color: var(--ink); }
.note__title { margin-top: 22px; font-family: var(--font-serif); font-weight: 420; font-size: clamp(33px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -0.028em; }
.note__dek { margin-top: 18px; font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); line-height: 1.5; max-width: 36ch; }
.note__byline { margin-top: 28px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-3); }
.note__byline b { color: var(--ink-2); font-weight: 600; }
.note__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(160deg, var(--accent-top), var(--accent-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }

.prose { padding-top: clamp(34px, 6vh, 54px); padding-bottom: clamp(20px, 3vh, 36px); font-size: 18px; line-height: 1.72; }
.prose > p { margin-top: 22px; }
.prose__lead { font-size: 21px; line-height: 1.6; }
.prose h2 { margin-top: 46px; font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; line-height: 1.2; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: rgba(91,97,255,0.35); text-underline-offset: 3px; transition: text-decoration-color 0.2s var(--ease-out); }
[data-theme="dark"] .prose a { color: #b7bbff; text-decoration-color: rgba(183,187,255,0.4); }
.prose a:hover { text-decoration-color: currentColor; }
.prose em { font-style: italic; }
.prose__sign { margin-top: 34px; font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--ink-2); }

.pullquote {
  margin: 42px 0; padding-left: 24px; border-left: 2px solid var(--accent);
  font-family: var(--font-serif); font-style: italic; font-weight: 420;
  font-size: clamp(21px, 3.2vw, 29px); line-height: 1.32; letter-spacing: -0.02em; color: var(--ink);
}

.apps { max-width: 1000px; margin: 0 auto; padding: clamp(40px, 7vh, 80px) var(--gutter) clamp(16px, 3vh, 32px); }
.apps__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(30px, 5vh, 46px); }
.apps__title { margin-top: 18px; font-family: var(--font-serif); font-weight: 420; font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.025em; }
.apps__sub { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.apps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.appcard {
  display: flex; flex-direction: column; border-radius: var(--r-lg); padding: 22px;
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-md);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.appcard::before, .appcard::after { display: none; }
.appcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--card-border-hover); }
.appcard__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.appcard__icon { width: 64px; height: 64px; border-radius: 16px; filter: drop-shadow(0 10px 20px rgba(78,90,253,0.28)); }
.appcard__icon--ph { display: grid; place-items: center; font-size: 26px; color: #fff; background: linear-gradient(160deg, var(--g1), var(--g2)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); filter: none; }
.appcard__status { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 4px 10px; border-radius: var(--r-pill); color: #0f7a4f; background: rgba(16,185,129,0.14); }
[data-theme="dark"] .appcard__status { color: #5fe3a8; }
.appcard__status--soon { color: var(--ink-3); background: var(--fill); }
.appcard__name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.appcard__line { margin-top: 5px; font-size: 14px; color: var(--ink-2); }
.appcard__idea { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; flex: 1; }
.appcard__link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); }
[data-theme="dark"] .appcard__link { color: #b7bbff; }
.appcard__link svg { stroke: currentColor; transition: transform 0.2s var(--ease-out); }
.appcard:hover .appcard__link svg { transform: translateX(3px); }
.apps__note { text-align: center; margin-top: 40px; font-size: 15px; color: var(--ink-2); }
.apps__note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .apps__note a { color: #b7bbff; }

@media (max-width: 760px) { .apps__grid { grid-template-columns: 1fr; } }