/* Enpasse site kit. V2 tokens (Geist, copper) on Linear's craft: hairlines, page-coloured shadows, masks, one quiet reveal. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #08090a; --bg-1: #0f1011; --bg-2: #141516; --bg-3: #191a1b; --bg-4: #1f2021;
  --panel: #0f1011;
  --line: #ffffff14; --line-2: #ffffff0d; --line-3: #ffffff1f; --border: #23252a;
  --fg-1: #f7f8f8; --fg-2: #d0d6e0; --fg-3: #8a8f98; --fg-4: #62666d;
  --cu: #d79154; --cu-strong: #b87333; --cu-tint: #26180d; --cu-tint-2: #1a1109; --cu-line: #68401b;
  --ok: #4cc38a; --ok-tint: #0f2a1d; --amber: #f0b24a; --amber-tint: #2b1f0a; --red: #eb5757; --blue: #6b9eea;
  --paper: #f4f1ea; --paper-ink: #2a2723; --mark: #f6e58d; /* retired: page-local paper cards move to .src-excerpt (app.css) */
  --inv: #f7f8f8; --inv-fg: #08090a;
  --etch: #000;
  --glass: inset 0 0 0 1px #ffffff08, inset 0 1px #ffffff0a, 0 0 0 1px #0009, 0 4px 4px #0000001a;
  --float: 0 8.6px 12.9px var(--bg), 0 0 68.6px var(--bg);
  --lift: 0 400px 112px #0000, 0 256px 103px #00000003, 0 144px 86px #0000000d, 0 64px 64px #00000017, 0 16px 35px #0000001a;
  /* motion: three curves, a few durations (animation-qa.md, shared motion spec). No overshoot, no endless pulses, no glow. */
  --ease-spring: cubic-bezier(.22,1,.36,1); /* entrances: a spring with bounce 0 */
  --ease-swap: cubic-bezier(.645,.045,.355,1); /* trades places, crossfades, paths, scrubs */
  --ease-linear: linear; /* shimmer, marching dashes, marquee only */
  --dur-hover: 160ms; --dur-enter: 400ms; --stagger: 60ms; --dur-swap: 700ms; --dur-draw: 500ms; --dur-reveal: 600ms; --hold: 3s;
  /* older names kept as aliases so page files follow the tokens */
  --ease-out: var(--ease-spring); --ease-lift: var(--ease-spring); --ease-enter: var(--ease-spring);
  --max: 1344px; --outer: 46px; --gutter: 32px;
  --hairline-plate: var(--bg); --hairline-hi: #d0d6e0; --hairline-edge: #6b6d75; --hairline-mid: #4a4b52; --hairline-lo: #29292d;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff; --bg-1: #fafafa; --bg-2: #f4f4f5; --bg-3: #ececee; --bg-4: #e4e4e7; --panel: #fbfbfb;
  --line: #00000014; --line-2: #0000000a; --line-3: #0000001f; --border: #e4e4e7;
  --fg-1: #0d0d0f; --fg-2: #3c3f45; --fg-3: #6b6f76; --fg-4: #a1a4aa;
  --cu: #8f541a; --cu-tint: #fcf4ee; --cu-tint-2: #fdf8f3; --cu-line: #efc099;
  --ok: #1f8a54; --ok-tint: #e9f7ef; --amber: #946200; --amber-tint: #fdf3e1;
  --inv: #0d0d0f; --inv-fg: #fff; --etch: #fff;
  --glass: inset 0 0 0 1px #00000010, 0 1px 2px #0000000f;
  --float: 0 8px 24px #0000000f, 0 0 0 1px #0000000a;
  --hairline-plate: #fff; --hairline-hi: #232327; --hairline-edge: #a4a4ac; --hairline-mid: #c3c3c9; --hairline-lo: #e0e0e4;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg-1); font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum"; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 560; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::selection { background: color-mix(in srgb, var(--cu-strong) 35%, transparent); }
:focus-visible { outline: 2px solid var(--cu); outline-offset: 2px; border-radius: 6px; }

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

/* ---------- type ---------- */
.t-display { font-size: clamp(40px, 5.6vw, 72px); line-height: 1; letter-spacing: -0.032em; font-weight: 560; }
.t-h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.03em; }
.t-h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.028em; }
.t-mission { font-size: clamp(26px, 3.3vw, 48px); line-height: 1.1; letter-spacing: -0.028em; font-weight: 560; color: var(--fg-4); max-width: 30ch; }
.t-mission b { color: var(--fg-1); font-weight: 560; }
.t-lede { font-size: 17px; line-height: 1.55; color: var(--fg-3); }
.t-desc { font-size: 16px; line-height: 1.6; color: var(--fg-3); max-width: 40ch; }
.t-desc b { color: var(--fg-1); font-weight: 500; }
.eyebrow { font-size: 13px; color: var(--fg-3); display: flex; gap: 10px; align-items: center; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: 72px; transition: background var(--dur-hover), border-color var(--dur-hover); border-bottom: 1px solid transparent; }
/* The blur sits on a layer behind the header: backdrop-filter on .hdr itself would trap the fixed phone menu inside the 64px bar. */
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--dur-hover); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
html[data-scrolled] .hdr { border-bottom-color: var(--line); }
html[data-scrolled] .hdr::before { opacity: 1; }
.hdr .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.logo svg { width: 26px; height: 13px; }
.nav { display: flex; gap: 2px; margin-left: auto; font-size: 13px; color: var(--fg-3); }
.nav a { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; transition: color var(--dur-hover); }
.nav a:hover { color: var(--fg-1); }
.hdr-cta { display: flex; gap: 8px; align-items: center; padding-left: 16px; margin-left: 8px; border-left: 1px solid var(--line); }
@media (max-width: 860px) { .nav { display: none; } .hdr-cta { margin-left: auto; border: 0; } }

/* ---------- buttons ---------- */
.btn { --h: 40px; height: var(--h); padding: 0 calc(var(--h) * .45); display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: filter var(--dur-hover) var(--ease-spring), transform var(--dur-hover) var(--ease-spring), background var(--dur-hover); }
.btn-sm { --h: 32px; font-size: 13px; }
.btn-inv { background: var(--inv); color: var(--inv-fg); box-shadow: 0 8px 2px #0000, 0 5px 2px #00000003, 0 3px 2px #0000000a, 0 1px 1px #00000012, 0 0 1px #00000014; }
.btn-glass { background: var(--bg-3); box-shadow: var(--glass); color: var(--fg-1); }
.btn-ghost { background: transparent; color: var(--fg-3); }
@media (any-hover: hover) { .btn:hover { filter: brightness(1.15); } .btn-ghost:hover { color: var(--fg-1); } }
.btn:active { transform: scale(.97); }
.arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg-3); transition: color var(--dur-hover); }
.arrow svg { width: 12px; height: 12px; transition: transform var(--dur-hover) var(--ease-spring); }
.arrow:hover { color: var(--fg-1); }
.arrow:hover svg { transform: translateX(2px); }
.pill-new { height: 28px; padding: 0 10px 0 4px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-size: 13px; color: var(--fg-3); background: var(--bg-2); box-shadow: var(--glass); transition: color var(--dur-hover); }
.pill-new span:first-child { height: 20px; padding: 0 8px; border-radius: 999px; background: var(--bg-4); color: var(--fg-1); display: inline-flex; align-items: center; font-size: 12px; }
.pill-new:hover { color: var(--fg-1); }

/* ---------- reveal ---------- */
.rise { opacity: 0; filter: blur(10px); transform: translateY(20%); animation: rise 1s cubic-bezier(.25,.1,.25,1) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; filter: blur(0); transform: none; } }
.in-view { opacity: 0; filter: blur(4px); transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease-spring), filter var(--dur-reveal) var(--ease-spring), transform var(--dur-reveal) var(--ease-spring); transition-delay: var(--d, 0s); }
.in-view.seen { opacity: 1; filter: none; transform: none; }
/* stagger: .in-view children of a .stagger parent, each with style="--i:0|1|2...", arrive --stagger apart */
.stagger > .in-view { transition-delay: calc(var(--i, 0) * var(--stagger)); }

/* ---------- hero ---------- */
.hero { padding-top: 168px; position: relative; }
.hero-sub { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hero-sub p { max-width: 44ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stage { position: relative; margin-top: 80px; }
.stage-floor { position: absolute; left: 50%; bottom: -12%; width: 140vw; height: 80%; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity var(--dur-reveal) var(--ease-spring) .3s; background: radial-gradient(52% 58% at 50% 100%, color-mix(in srgb, var(--fg-2) 16%, transparent), transparent 70%); }
.stage.on .stage-floor { opacity: 1; }
:root[data-theme="light"] .stage-floor { background: radial-gradient(52% 58% at 50% 100%, #0000000d, transparent 70%); }
.frame { position: relative; border-radius: 12px; padding: 8px; background: color-mix(in srgb, var(--bg-1) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line-3), var(--lift); opacity: 0; filter: blur(4px); transform: translateY(12px); transition: opacity var(--dur-swap) var(--ease-spring) .3s, filter var(--dur-swap) var(--ease-spring) .3s, transform var(--dur-swap) var(--ease-spring) .3s; }
.stage.on .frame { opacity: 1; filter: none; transform: none; }
.frame-clip { position: relative; border-radius: 8px; overflow: hidden; height: 760px; box-shadow: 0 0 0 1px var(--line); background: var(--bg); }
.frame-fade { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.grain { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: overlay; opacity: .5; background-size: 256px 256px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); z-index: 5; }
/* the cursor-following glow and sheen are retired (no glow anywhere); the elements stay hidden so old markup is harmless */
.glow, .sheen { display: none !important; }
.glow { position: absolute; width: 480px; height: 480px; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: lighten; background: radial-gradient(circle, #ffffff10 0%, transparent 50%); opacity: 0; transition: opacity .4s; z-index: 6; }
.stage:hover .glow, .vig:hover .glow { opacity: 1; }
:root[data-theme="light"] .glow { display: none; }
.sheen { position: absolute; inset: -1px; border-radius: 13px; pointer-events: none; border: 1px solid #ffffff2a; -webkit-mask-image: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 0%), #000, transparent 70%); mask-image: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 0%), #000, transparent 70%); z-index: 7; }
.synthetic { margin-top: 20px; font-size: 12px; color: var(--fg-4); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- sections ---------- */
.divider { height: 2px; background: linear-gradient(var(--etch) 0 1px, var(--line) 1px 2px); }
.sec { padding: 128px 0; }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: end; }
.sec-head > :first-child { grid-column: 1 / span 7; }
.sec-head > :last-child { grid-column: 8 / span 5; }
.sec-head .eyebrow { margin-bottom: 20px; }
.sec-head .arrow { margin-top: 20px; }
@media (max-width: 1024px) { .sec { padding: 96px 0; } .sec-head > :first-child, .sec-head > :last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .sec { padding: 72px 0; } :root { --outer: 16px; } }

.mission { padding: 200px 0 160px; }

/* Fig band */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fig { position: relative; padding: 24px 32px 40px; min-height: 480px; display: flex; flex-direction: column; }
.fig + .fig { border-left: 1px solid var(--line); }
.fig-no { font-size: 12px; color: var(--fg-3); opacity: .6; }
.fig-art { flex: 1; display: grid; place-items: center; min-height: 300px; }
.fig-art [data-hairline] { width: 100%; max-width: 380px; }
.fig-read { font-size: 12px; color: var(--fg-4); height: 18px; margin-bottom: 18px; transition: color var(--dur-hover); }
.fig:hover .fig-read { color: var(--fg-3); }
.fig h3 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.fig p { margin-top: 4px; color: var(--fg-3); font-size: 15px; max-width: 34ch; }
@media (max-width: 1024px) { .figs { grid-template-columns: 1fr; } .fig + .fig { border-left: 0; border-top: 1px solid var(--line); } .fig { min-height: 0; } }

/* vignette stage: a dimmed board with a floating panel, masked to the page */
.vig { position: relative; margin-top: 72px; height: 640px; }
.vig-board { position: absolute; inset: 0 -6% 0 -2%; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 40%, transparent 92%), linear-gradient(to right, #000 0, #000 70%, transparent 97%); mask-image: linear-gradient(to bottom, #000 0, #000 40%, transparent 92%), linear-gradient(to right, #000 0, #000 70%, transparent 97%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.vig-panel { position: absolute; border-radius: 16px; overflow: hidden; isolation: isolate; }
.vig-panel::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; background: linear-gradient(#ffffff05, #ffffff05), var(--panel); box-shadow: 0 4px 32px color-mix(in srgb, var(--bg) 60%, transparent); }
.vig-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line-3); background: radial-gradient(50% 50% at 100% 0, #ffffff0a, transparent 60%); }
:root[data-theme="light"] .vig-panel::before { background: #fff; box-shadow: 0 12px 40px #00000014; }

.ingredients { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); font-size: 15px; }
.ingredients > .lbl { grid-column: 1 / span 6; color: var(--fg-3); }
.ingredients ul { list-style: none; margin: 0; padding: 0 0 0 24px; display: flex; flex-direction: column; gap: 10px; grid-column: span 3; }
.ingredients ul + ul { border-left: 1px solid var(--line); }
.ingredients li a { color: var(--fg-2); display: inline-flex; gap: 8px; transition: color var(--dur-hover); }
.ingredients li a span { color: var(--fg-4); transition: color var(--dur-hover); }
.ingredients li a:hover { color: var(--fg-1); }
.ingredients li a:hover span { color: var(--fg-2); }
@media (max-width: 768px) { .ingredients > .lbl { grid-column: 1 / -1; margin-bottom: 16px; } .ingredients ul { grid-column: span 6; padding-left: 0; } .ingredients ul + ul { border: 0; padding-left: 16px; } }

/* modes and trust */
.grid3 { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.grid3 > div { padding: 32px; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.grid3 > div + div { border-left: 1px solid var(--line); }
.grid3 h3 { font-size: 15px; font-weight: 500; }
.grid3 p { color: var(--fg-3); max-width: 34ch; }
.grid3 .viz { margin-bottom: auto; }
@media (max-width: 1024px) { .grid3 { grid-template-columns: 1fr; } .grid3 > div + div { border-left: 0; border-top: 1px solid var(--line); } }

.cta { padding: 224px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.cta h2 { max-width: 16ch; }

.ftr { border-top: 1px solid var(--line); font-size: 13px; }
.ftr-cols { padding: 64px 0 48px; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.ftr-cols h4 { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--fg-1); }
.ftr-cols a { display: block; color: var(--fg-3); padding: 4px 0; transition: color var(--dur-hover); }
.ftr-cols a:hover { color: var(--fg-1); }
.ftr-legal { padding: 24px 0 48px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; color: var(--fg-4); font-size: 12px; }
.ftr-legal p { max-width: 80ch; }
.theme-sw { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); gap: 2px; }
.theme-sw button { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-3); cursor: pointer; font-size: 12px; transition: background var(--dur-hover), color var(--dur-hover); }
.theme-sw button[aria-pressed="true"] { background: var(--bg-3); color: var(--fg-1); box-shadow: var(--glass); }
@media (max-width: 768px) { .ftr-cols { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .in-view, .frame, .src-excerpt mark, .ap-paper mark { animation: none !important; transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* AI use modes */
.modes > div { min-height: 340px; }
.md-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-1); font-size: 12px; color: var(--fg-3); }
.md-seg span { height: 24px; padding: 0 10px; border-radius: 6px; display: inline-flex; align-items: center; }
.md-seg .on { background: var(--bg-3); color: var(--fg-1); box-shadow: var(--glass); }
.md-rows { margin-top: 16px; display: flex; flex-direction: column; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.md-rows > div { height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-2); }

/* nothing scrolls sideways: wide atmosphere layers are clipped, not hidden */
html, body { overflow-x: clip; }
.hero, .sec, main { overflow-x: clip; }
@media (max-width: 520px) { .hdr-cta .btn-ghost { display: none; } .hdr .logo { font-size: 15px; } }
.frame-clip.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent), linear-gradient(#000 72%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent), linear-gradient(#000 72%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }

/* ---------- product page: film hero ---------- */
.film-hero { position: relative; min-height: 900px; padding-top: 460px; padding-bottom: 96px; overflow: clip; }
.film-hero video, .film-hero .poster { position: absolute; inset: 0 0 auto 50%; width: max(100%, 1920px); height: auto; aspect-ratio: 16 / 9; transform: translateX(-50%); object-fit: cover; opacity: 0; transition: opacity 1s var(--ease-spring); pointer-events: none; }
.film-hero video[data-loaded] { opacity: .6; }
.film-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom in oklab, transparent 0 55%, var(--bg) 92%); }
.film-hero .wrap { position: relative; z-index: 1; }
.film-hero .halo { position: absolute; left: -10%; top: -40%; width: 90%; height: 180%; border-radius: 50%; background: radial-gradient(closest-side, var(--bg), transparent); filter: blur(10px); opacity: .5; z-index: -1; }
.film-hero .eyebrow { margin-bottom: 20px; color: var(--fg-2); }
.film-hero h1 { max-width: none; }
.film-hero .t-lede { margin-top: 24px; max-width: 46ch; }
:root[data-theme="light"] .film-hero video[data-loaded] { opacity: .9; filter: invert(1) hue-rotate(180deg) contrast(.85); }
@media (max-width: 768px) { .film-hero { padding-top: 280px; min-height: 0; } .film-hero video { width: 220%; } }

/* lit grey stage behind a showcase scene (Linear's pillar showcase) */
.lit-stage { position: relative; margin-top: 72px; border-radius: 16px; height: 720px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #2a2c30 0%, #17181a 46%, var(--bg) 100%); box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff0d; }
:root[data-theme="light"] .lit-stage { background: radial-gradient(120% 90% at 50% 0%, #e7e8ea 0%, #f2f2f3 50%, #fff 100%); }
.lit-stage .grain { opacity: .25; }

/* bordered feature grid: one small component per cell, caption at the bottom */
.fgrid { margin-top: 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fgrid > .cell { position: relative; min-height: 460px; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.fgrid > .cell:nth-child(odd) { border-right: 1px solid var(--line); }
.fgrid > .cell:nth-last-child(-n+2) { border-bottom: 0; }
.cell-viz { position: relative; flex: 1; min-height: 320px; display: grid; place-items: center; overflow: hidden; }
.cell-cap { padding: 0 32px 32px; }
.cell-cap h3 { font-size: 15px; font-weight: 500; color: var(--fg-1); }
.cell-cap p { margin-top: 4px; color: var(--fg-3); font-size: 15px; max-width: 44ch; }
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr; } .fgrid > .cell { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; } .fgrid > .cell:last-child { border-bottom: 0 !important; } }

/* Levels of detail: the focal work stays sharp; navigation, settings and the boards behind panels go soft.
   Enough to feel real, not enough to copy. */
#hero-app .ap-side { filter: blur(1.1px); opacity: .7; }
#hero-app .ap-keys, #hero-app .ap-top { filter: blur(.8px); opacity: .6; }
#hero-app .ap-strip { filter: blur(.5px); }
#hero-app .ap-evc[data-evc="2"], #hero-app .ap-evc[data-evc="3"] { filter: blur(1.4px); opacity: .7; }
#hero-app .ap-tabs { filter: blur(.6px); opacity: .8; }
.vig-board { filter: blur(1.4px) brightness(.85); }
.va-p:not(.focus) { filter: blur(1.6px) saturate(.6) !important; }
.ftr-cols a.logo { display: inline-flex; color: var(--fg-1); }

/* product menu */
.nav-menu { position: relative; }
.nav-btn { height: 32px; padding: 0 10px 0 12px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-3); font-size: 13px; cursor: pointer; transition: color var(--dur-hover); }
.nav-btn svg { width: 12px; height: 12px; transition: transform var(--dur-hover) var(--ease-spring); }
.nav-btn:hover, .nav-btn[aria-expanded="true"] { color: var(--fg-1); }
.nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-pop { position: absolute; left: -12px; top: 42px; width: 360px; padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 96%, transparent); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--line-3), 0 8px 32px var(--bg), 0 20px 50px #00000066; display: grid; gap: 2px; animation: pop-in var(--dur-hover) var(--ease-spring); }
.nav-pop[hidden] { display: none; }
.nav-pop a { height: auto; padding: 10px 12px; border-radius: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--fg-1); transition: background var(--dur-hover); }
.nav-pop a:hover, .nav-pop a:focus-visible { background: var(--bg-3); }
.nav-pop b { font-weight: 500; font-size: 13.5px; }
.nav-pop span { color: var(--fg-3); font-size: 12.5px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.nav-pop.wide { width: 600px; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.nav-col { display: flex; flex-direction: column; gap: 2px; }
.nav-col + .nav-col { padding-left: 8px; border-left: 1px solid var(--line-2); }
.nav-h { padding: 8px 12px 6px; font-size: 12px; color: var(--fg-4); }
.nav-pop a.sm { padding: 8px 12px; }
.ftr-cols { grid-template-columns: 1.4fr repeat(5, 1fr); }
@media (max-width: 1024px) { .ftr-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ftr-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- phone menu ---------- */
.mnav-btn { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; cursor: pointer; position: relative; }
.mnav-btn span { position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 2px; background: var(--fg-1); transition: transform var(--dur-hover) var(--ease-spring), top var(--dur-hover) var(--ease-spring); }
.mnav-btn span:first-child { top: 18px; } .mnav-btn span:last-child { top: 25px; }
.mnav-btn[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.mnav-btn[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }
.mnav { position: fixed; inset: 64px 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: 8px 16px 48px; animation: mnav-in var(--dur-hover) var(--ease-spring); }
.mnav[hidden] { display: none; }
.mnav nav { display: flex; flex-direction: column; }
.mnav-h { padding: 20px 4px 6px; font-size: 13px; color: var(--fg-4); }
.mnav a { min-height: 48px; padding: 0 4px; display: flex; align-items: center; font-size: 17px; color: var(--fg-1); border-bottom: 1px solid var(--line-2); }
@keyframes mnav-in { from { opacity: 0; } }
html.mnav-open, html.mnav-open body { overflow: hidden; }
@media (max-width: 860px) {
  .mnav-btn { display: block; }
  .hdr { height: 64px; }
  .hdr-cta { gap: 4px; }
}
@media (max-width: 520px) { .hide-phone { display: none; } }

/* ---------- comfortable tap targets on touch screens ---------- */
@media (pointer: coarse), (max-width: 860px) {
  .ftr-cols a { padding: 10px 0; }
  .ftr-legal a, .theme-sw button { min-height: 40px; }
  .theme-sw button { height: 36px; padding: 0 14px; }
  .btn-sm { --h: 40px; }
  .arrow { min-height: 40px; }
  .ingredients li a { padding: 8px 0; }
}
.ftr-cols a[data-pending] { display: none; }
.ftr-cols { grid-template-columns: 1.4fr repeat(6, 1fr); }
@media (max-width: 1200px) { .ftr-cols { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .ftr-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ftr-cols { grid-template-columns: 1fr 1fr; } }
.ftr-connect:not(:has(a:not([data-pending]))) { display: none; }
.nav-pop.wide { grid-template-columns: 1.15fr 1fr; }
.nav-also { grid-column: 1 / -1; margin-top: 4px; padding: 10px 12px 4px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 12.5px; color: var(--fg-4); }
.nav-pop .nav-also a { padding: 4px 0; display: inline; color: var(--fg-3); font-size: 12.5px; }
.nav-pop .nav-also a:hover { color: var(--fg-1); background: none; }
.hdr-cta .btn-inv { gap: 0; }
@media (max-width: 640px) { .sec-head, .ingredients, .pillar-head { column-gap: 12px; } }
.hdr .logo, .ftr-cols a.logo { min-height: 44px; padding: 6px 0; }

/* compact citation chip tooltip (site.js): the chip shows EV-061; version, lines or page appear here on hover */
.chip-tip { position: fixed; left: 0; top: 0; z-index: 100; height: 24px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 8px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3), var(--float); color: var(--fg-2); font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity var(--dur-hover), transform var(--dur-hover) var(--ease-spring); }
.chip-tip.on { opacity: 1; transform: none; }
.chip-tip b { font-weight: 400; color: var(--fg-1); }
@media (prefers-reduced-motion: reduce) { .sugg { transition: none !important; } }

/* B5: a film hero melts into the page over its bottom quarter */
.film-hero video, .film-hero .poster { -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); }