/* ============================================================
   FMHyper — design system v2 "Precision engineering"
   Paper / ink / signal orange. Flat. Hairlines. Big type.
   Site chrome lives here; the app mock-ups (mock-*, dash-*)
   keep their own dark palette, scoped further down.
   ============================================================ */
:root {
  /* page */
  --paper: #eceef0;
  --paper-2: #f7f8fa;
  --ink: #16140f;
  --ink-60: rgba(22,20,15,.74);
  --ink-40: rgba(22,20,15,.62);
  --hair: rgba(22,20,15,.24);
  --hair-2: rgba(22,20,15,.50);
  --signal: #ff4d00;
  --signal-ink: #b83600;
  --coal: #171512;
  --coal-2: #1e1b17;
  --paper-on-coal: #efe9dd;
  --mist-warm: rgba(239,233,221,.60);
  --hair-light: rgba(239,233,221,.16);
  /* app-mock palette (used ONLY inside product depictions) */
  --electric: #ff4d00;
  --electric-2: #e04400;
  --cyan: #ff8a4d;
  --cyan-2: #ff6a1a;
  --accent2: #ff8a4d;
  --grad: linear-gradient(135deg, var(--electric) 0%, var(--cyan) 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,77,0,.16), rgba(255,138,77,.10));
  --navy: #1a1612;
  --void: #05070f;
  --graphite: #1a1612;
  /* type */
  --sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --display: 'Clash Display', 'General Sans', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --nav-h: 68px;
  --maxw: 1280px;
  --radius: 4px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
/* Dark palette scoped to the hero stage + app depictions so the
   preserved mock/dash CSS keeps reading its old variable names. */
#stage, .mock-app, .dash, .portal-band, .cmp-pane.after {
  --ink: #f2ece1;
  --mist: #b3a795;
  --mist-2: #a9a093;
  --line: rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.16);
  --panel: rgba(255,255,255,.04);
  --panel-2: rgba(255,255,255,.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.reduced { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* faint paper grain over everything */
/* tiled grain overlay removed */
::selection { background: var(--signal); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1,h2,h3,h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; }
h3, h4, .feat h3, .pain h3, .step h3, .svc h3, details.faq summary,
.pcard h2, .auth-card h1, .rv-step h2, .rv-success h2 { line-height: 1.18; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 32px; }

/* ---------- Eyebrow: mono index labels ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: inherit; opacity: .92;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--signal); flex: none; }
.gradient-text { color: inherit; }

/* ---------- Buttons: flat, square, decisive ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius);
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--signal); color: #16140f; }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
#stage .btn-primary:hover, .cta-panel .btn-primary:hover, .portal-band .btn-primary:hover { background: var(--paper-on-coal); color: #16140f; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: var(--signal); border-color: var(--signal); color: #16140f; }
.btn-sm { padding: 11px 18px; font-size: 13.5px; }

/* ---------- Preloader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 400;
  background: var(--coal); color: var(--paper-on-coal);
  display: none;
  align-items: flex-end; justify-content: space-between;
  padding: 28px 32px;
}
.js #loader { display: flex; }
.reduced #loader, .js #loader.done { display: none; }
#loader .ld-word { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 5vw, 54px); letter-spacing: -.02em; }
#loader .ld-word i { font-style: normal; color: var(--signal); }
#loader .ld-count { font-family: var(--mono); font-size: clamp(48px, 10vw, 120px); font-weight: 500; line-height: .9; letter-spacing: -.04em; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  color: var(--paper-on-coal);                 /* over the dark hero at top */
  border-bottom: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s, transform .45s var(--ease);
}
.nav.scrolled { background: var(--paper); color: var(--ink); border-bottom-color: var(--hair); }
.nav.nav-hide { transform: translateY(-100%); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.brand .tm { color: var(--signal); font-size: 21px; line-height: 1; }
.brand-logo { display: none; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 500; opacity: .75; transition: opacity .2s; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .3s var(--ease); }
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* ---------- Language toggle ---------- */
.lang-toggle { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: var(--radius); overflow: hidden; }
.lang-toggle button {
  background: transparent; border: none; color: inherit; opacity: .6;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  padding: 7px 11px; transition: opacity .2s, background .2s, color .2s;
}
.lang-toggle button:hover { opacity: 1; }
.lang-toggle button.active { opacity: 1; background: var(--signal); color: #16140f; }

/* ---------- Hero (dark contrast beat) ---------- */
#cinema { position: relative; z-index: 1; background: var(--coal); }
#stage {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 640px;
  overflow: hidden;
  perspective: 1600px; perspective-origin: 50% 42%;
  background: var(--coal);
  color: var(--paper-on-coal);
}
/* hairline blueprint grid, warm, very faint */
/* decorative grid-line field removed (reads as generated-UI signature) */
.stage-grain {
  display: none;
}
.stage-glow {
  position: absolute; left: 38%; top: 66%; width: 1400px; height: 780px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,.14) 55%, transparent 76%);
  filter: blur(24px); pointer-events: none;
}
.stage-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stage-bg svg { width: 100%; height: 100%; display: block; }


#heroCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; display: block; opacity: 0; transition: opacity .7s ease;
}
#heroCanvas.ready { opacity: 1; }
.hero-copy {
  position: absolute; inset: 0; z-index: 8;
  display: grid; align-content: center; justify-items: start;
  text-align: left;
  padding-left: max(32px, calc((100% - 1280px) / 2 + 32px));
  padding-right: 32px;
  pointer-events: none;
}
.hero-copy .inner { pointer-events: auto; max-width: 660px; position: relative; }
.hero-copy .inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 42%; top: 50%; transform: translate(-50%, -50%);
  width: 160%; height: 165%;
  background: radial-gradient(ellipse 56% 52% at 50% 50%, rgba(23,21,18,.72), rgba(23,21,18,.38) 55%, rgba(23,21,18,0) 78%);
  filter: blur(26px);
}
.hero-copy .wordmark {
  font-size: clamp(60px, 10.5vw, 150px);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.03em;
  margin: 22px 0 0;
  color: var(--paper-on-coal);
}
.hero-copy .wordmark .dot { color: var(--signal); }
/* It is an h1 now, so it inherits the display face and line-height 1.02 from
   the global h1 rule. Put the body face back or the descenders collide. */
.hero-copy h1.tagline { font-family: var(--sans); font-weight: 450; line-height: 1.5; letter-spacing: 0; margin-block: 0; }
.hero-copy .tagline {
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--mist-warm); margin: 26px 0 0; max-width: 520px;
  font-weight: 450;
}
.hero-actions { display: flex; gap: 14px; justify-content: flex-start; margin-top: 38px; flex-wrap: wrap; }
.scroll-cue { margin-top: 48px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--mist-warm); font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; transition: opacity .4s; }
.scroll-cue .chev { width: 24px; height: 24px; border: 1px solid var(--hair-light); display: grid; place-items: center; animation: bob 1.8s ease-in-out infinite; }
.scroll-cue .chev svg { width: 11px; height: 11px; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.reduced .scroll-cue { display: none; }
.cin-label {
  position: absolute; left: 50%; bottom: 5.5%; translate: -50% 0; z-index: 5;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  display: grid; place-items: center;
}
.cin-label > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.cin-label .old { color: var(--mist-warm); }
.cin-label .new { color: var(--signal); }
.cin-label .old::before, .cin-label .new::before { content: ""; width: 8px; height: 8px; }
.cin-label .old::before { background: var(--mist-warm); }
.cin-label .new::before { background: var(--signal); }
.cin-badge {
  position: absolute; right: 6%; top: 13%; z-index: 6;
  font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .04em;
  padding: 9px 14px; border-radius: var(--radius);
  background: var(--signal); color: #16140f;
}
.reduced .cin-badge { opacity: 1; }

/* ---------- Sections ---------- */
.section { position: relative; padding: 130px 0; scroll-margin-top: 90px; }
.section--tight { padding: 96px 0; }
.section-head { max-width: 820px; margin-bottom: 64px; }
.section-head h2 { font-size: clamp(38px, 5.6vw, 72px); margin-top: 22px; }
.section-head p { color: var(--ink-60); font-size: 18px; margin-top: 22px; max-width: 640px; }
.lede { color: var(--ink-60); font-size: 19px; line-height: 1.6; }
.seam { position: relative; z-index: 2; }
.seam + .seam::before, .section + .section::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--hair);
  /* track the centred container, or every divider overshoots the grid by 320px at 1920 */
  left:  max(32px, calc((100% - 1280px) / 2 + 32px));
  right: max(32px, calc((100% - 1280px) / 2 + 32px));
}
.bg-orb { display: none; }
.section .container { position: relative; z-index: 2; }
/* editorial section index in the head */
main { counter-reset: secnum; }
.section.seam .section-head { counter-increment: secnum; }
.section.seam .section-head .eyebrow::after {
  content: "/ " counter(secnum, decimal-leading-zero);
  margin-left: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--ink-40);
}
/* oversized parallax word behind sections */
.bg-word {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); z-index: 0;
  font-family: var(--display); font-weight: 600; font-size: clamp(120px, 24vw, 340px);
  letter-spacing: -.02em; line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(22,20,15,.10);
  pointer-events: none; user-select: none;
}

/* ---------- Split-text headline masks ---------- */
.js [data-split] .line { display: block; overflow: hidden; }
.js [data-split] .line-inner { display: block; will-change: transform; }
.reduced [data-split] .line-inner { transform: none !important; }

/* ---------- Platform marquee: big type strip ---------- */

.platform { background: var(--paper); padding-top: 26px; overflow: hidden; }
.platform .container { padding-block: 0 14px; }
.platform .label { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-60); }
.platform .marquee { overflow: hidden; padding-bottom: 26px; }
.marquee-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; }
.platform .chip { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -.02em; color: var(--ink); }

.platform .dotsep { width: 10px; height: 10px; background: var(--signal); flex: none; font-size: 0; }

/* ---------- Stats band ---------- */
.statband { position: relative; padding: 80px 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { position: relative; text-align: left; padding: 8px 28px 8px 0; counter-increment: statn; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--hair); }
.stat::before {
  content: "0" counter(statn);
  font-family: var(--mono); font-size: 11px; color: var(--signal-ink); letter-spacing: .1em;
  display: block; margin-bottom: 14px;
}
.stat-grid { counter-reset: statn; }
.stat-num { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 6vw, 84px); line-height: .95; letter-spacing: -.03em; color: var(--ink); }
.stat-lbl { color: var(--ink-60); font-size: 14.5px; margin-top: 12px; }
@media (max-width: 760px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: 20px 18px 20px 0; }
  .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .stat:nth-child(even) { padding-left: 18px; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
}

/* ---------- Problem: numbered editorial rows ---------- */
.pain-grid { display: grid; grid-template-columns: 1fr; counter-reset: pain; border-top: 1px solid var(--hair); }
.pain {
  counter-increment: pain;
  display: grid; grid-template-columns: 90px 300px 1fr; gap: 28px; align-items: baseline;
  padding: 26px 8px; border-bottom: 1px solid var(--hair);
  background: transparent; border-radius: 0;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.pain::before {
  content: "0" counter(pain);
  font-family: var(--mono); font-size: 13px; color: var(--ink-40); letter-spacing: .08em;
  transition: color .3s;
}
@media (hover: hover) and (pointer: fine) {
  .pain:hover { background: var(--paper-2); box-shadow: inset 3px 0 0 0 var(--signal); }
}
.pain:hover::before { color: var(--signal-ink); }
.pain .ic { display: none; }
.pain h3 { font-size: 22px; font-weight: 600; }
.pain p { color: var(--ink-60); font-size: 15.5px; margin: 0; }
@media (max-width: 860px) {
  .pain { grid-template-columns: 48px 1fr; grid-template-rows: auto auto; gap: 6px 18px; }
  .pain p { grid-column: 2; }
}

/* ---------- Solution ---------- */
.solution-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.feat-list { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.feat { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.feat .check { width: 26px; height: 26px; border-radius: 0; background: var(--signal); display: grid; place-items: center; margin-top: 2px; }
.feat .check svg { width: 14px; height: 14px; color: #16140f; }
.feat h3 { font-size: 17px; font-weight: 600; font-family: var(--sans); }
.feat p { color: var(--ink-60); font-size: 14.5px; margin-top: 4px; }
.solution-panel {
  border: none; border-radius: var(--radius); padding: 36px;
  background: var(--coal); color: var(--paper-on-coal);
  position: relative; overflow: hidden;
}
.solution-panel .ring { display: none; }
.layer-row { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.layer { border: 1px solid var(--hair-light); border-radius: var(--radius); padding: 18px 20px; background: rgba(239,233,221,.04); }
.layer .lt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.layer .ld { font-size: 15px; color: var(--paper-on-coal); margin-top: 6px; font-weight: 600; }
.layer.muted .lt { color: var(--mist-warm); }
.layer.muted { background: transparent; }
.layer-arrow { display: grid; place-items: center; color: var(--mist-warm); }
.layer-arrow svg { width: 20px; height: 20px; }

/* ---------- Before / After compare ---------- */
.compare {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 0 var(--hair);
  --pos: 50%; touch-action: pan-y; user-select: none;
  background: #101010;
}
.cmp-pane { position: absolute; inset: 0; overflow: hidden; }
.cmp-pane .mock { font-size: 11px; will-change: transform; }
.cmp-pane.before { z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* the old page reads old: slightly desaturated, faintly darker at the seam */
.cmp-pane.before { filter: grayscale(.38) contrast(.97); }
/* depth parallax: each page glides subtly while covered, but sits EXACTLY
   flush when fully revealed (shift is zero at its own end stop, so the
   other pane can never peek through at the edges) */
.cmp-pane.before .mock { transform: translateX(calc((var(--pos) - 100%) * 0.04)); }
.cmp-pane.after .mock { transform: translateX(calc(var(--pos) * 0.07)); }
.reduced .cmp-pane .mock { transform: none; }
/* spark canvas (created by main.js) */
.cmp-sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* scanline beam: warm light spills from the seam onto the old page */
.cmp-beam {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 130px; z-index: 4;
  transform: translateX(-99.5%); pointer-events: none; opacity: .7;
  background: linear-gradient(90deg, rgba(255,77,0,0), rgba(255,77,0,.08) 55%, rgba(255,77,0,.26) 92%, rgba(255,138,77,.55));
  transition: opacity .35s var(--ease);
}
.cmp-beam::after {
  content: ""; position: absolute; right: -30px; top: 0; bottom: 0; width: 60px;
  background: radial-gradient(50% 46% at 50% 50%, rgba(255,138,77,.35), transparent 70%);
  filter: blur(6px);
}
.compare.dragging .cmp-beam { opacity: 1; }
.cmp-tag { position: absolute; top: 14px; z-index: 4; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 7px 12px; border-radius: 0; }
.cmp-tag.l { left: 14px; background: var(--paper); color: var(--ink); }
.cmp-tag.r { right: 14px; background: var(--signal); color: #16140f; }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 5;
  width: 2px; background: linear-gradient(180deg, rgba(255,138,77,.9), var(--signal), rgba(255,138,77,.9));
  transform: translateX(-1px); cursor: ew-resize;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.cmp-handle .grip {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 44px; height: 44px; border-radius: 0;
  background: var(--signal); display: grid; place-items: center;
  transition: transform .25s var(--ease);
}
.cmp-handle:hover .grip, .cmp-handle:focus-visible .grip, .compare.dragging .grip { transform: scale(1.14); }
.compare.dragging { cursor: ew-resize; }
.compare.dragging * { cursor: ew-resize; }
.cmp-handle .grip svg { width: 20px; height: 20px; color: #16140f; }
.cmp-hint { text-align: center; color: var(--ink-40); font-size: 12.5px; margin-top: 18px; font-family: var(--mono); letter-spacing: .04em; }

/* ---------- Speed ---------- */
.speed { background: var(--paper); color: var(--ink); overflow: hidden; }
.speed-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; position: relative; z-index: 2; }
.speed h2 { color: var(--ink); font-size: clamp(38px, 5.4vw, 68px); margin-top: 22px; }
.speed .lede { color: var(--ink-60); font-size: 19px; margin-top: 22px; }
.metric { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 8px; }
.metric .num { font-family: var(--display); font-weight: 600; font-size: clamp(88px, 13vw, 168px); line-height: .85; letter-spacing: -.04em; color: var(--ink); }
.metric .x { font-family: var(--display); font-weight: 600; font-size: clamp(44px,7vw,80px); color: var(--signal); }
.metric .cap { font-size: 15.5px; color: var(--ink-60); font-weight: 500; max-width: 200px; line-height: 1.35; }
.metric-note { color: var(--ink-40); font-size: 13.5px; font-family: var(--mono); }
.speed-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; margin-top: 10px; }
.sp { display: flex; align-items: center; gap: 11px; color: var(--ink-60); font-size: 15px; font-weight: 500; }
.sp .d { width: 8px; height: 8px; border-radius: 0; background: var(--signal); flex: none; }
.bars { display: grid; gap: 20px; }
.bar-row .bl { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-60); margin-bottom: 8px; font-weight: 500; font-family: var(--mono); }
.bar-track { height: 20px; border-radius: 0; background: rgba(22,20,15,.14); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 0; width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s var(--ease); }
.bar-fill.old { background: var(--hair-2); }
.bar-fill.new { background: var(--signal); }
.reduced .bar-fill { transition: none; }

/* ---------- VS comparison ---------- */
.vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; max-width: 980px; margin: 0 auto; }
.vs-col { border: 1px solid var(--hair); padding: 32px 34px; border-radius: 0; box-shadow: none; }
.vs-old { background: var(--paper-2); }
.vs-new { background: var(--coal); color: var(--paper-on-coal); border-color: var(--coal); }
.vs-mid { display: grid; place-items: center; padding: 0 6px; }
.vs-mid span { font-family: var(--mono); font-size: 12px; color: var(--ink-60); width: 52px; height: 52px; border-radius: 0; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--hair-2); }
.vs-head { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 19px; margin-bottom: 20px; }
.vs-dot { width: 10px; height: 10px; border-radius: 0; flex: none; }
.vs-old .vs-dot { background: var(--hair-2); }
.vs-new .vs-dot { background: var(--signal); }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.vs-col li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-60); }
.vs-new li { color: var(--paper-on-coal); }
.vs-col li::before { flex: none; width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.vs-col li.x::before { content: "\2715"; color: var(--ink-40); background: rgba(22,20,15,.06); }
.vs-col li.ok::before { content: "\2713"; color: #16140f; background: var(--signal); }
@media (max-width: 720px) {
  .vs-grid { grid-template-columns: 1fr; }
  .vs-mid { padding: 12px; }
}

/* ---------- Services: horizontal rail ---------- */
.svc-rail { position: relative; }
/* sticky-rail mode (set by motion.js): section grows tall, viewport-screen sticks */
#services.is-rail { padding: 0; }
.is-rail .svc-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.is-rail .svc-sticky .container { width: 100%; }
.is-rail .section-head { margin-bottom: 44px; }
.svc-track {
  display: flex; gap: 20px; align-items: stretch;
  will-change: transform;
}
/* graceful fallback: swipeable strip when JS/GSAP is absent or on touch */
.svc-rail.no-pin .svc-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; }
.svc-rail.no-pin .svc { scroll-snap-align: start; }
.svc {
  position: relative; flex: none;
  width: min(430px, 82vw);
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--paper-2); padding: 34px 30px 30px; overflow: hidden;
  display: flex; flex-direction: column;
  counter-increment: svcn;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  min-height: 320px;
}
.svc-track { counter-reset: svcn; }
.svc::before {
  content: "0" counter(svcn);
  font-family: var(--display); font-weight: 600; font-size: 64px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--hair-2);
  display: block; margin-bottom: 26px;
  transition: color .3s var(--ease);
}
.svc:hover { background: var(--paper); border-color: var(--ink); }
.svc:hover::before { color: var(--signal); -webkit-text-stroke: 1px var(--signal); }
.svc .ic, .svc-watermark { display: none; }
.svc h3 { font-size: 25px; font-weight: 600; }
.svc p { color: var(--ink-60); font-size: 15px; margin-top: 12px; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.svc-chips span { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-60); padding: 6px 12px; border: 1px solid var(--hair); border-radius: 0; }
.svc-progress { margin-top: 40px; height: 2px; background: var(--hair); position: relative; overflow: hidden; }
.svc-progress i { position: absolute; inset: 0; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Process: giant numerals ---------- */
.proc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.step { position: relative; padding-top: 0; counter-increment: procn; }
.proc-grid { counter-reset: procn; }
.step::before {
  content: "0" counter(procn);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(88px, 9vw, 150px); line-height: .9; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.2px var(--hair-2);
  display: block; margin-bottom: 22px;
  transition: -webkit-text-stroke .3s, color .3s;
}
.step:hover::before { -webkit-text-stroke: 1.2px var(--signal); }
.step .dot, .step .rail { display: none; }
.step .no { font-family: var(--mono); font-size: 11px; color: var(--signal-ink); letter-spacing: .16em; text-transform: uppercase; }
.step h3 { font-size: 24px; margin-top: 10px; }
.step p { color: var(--ink-60); font-size: 15px; margin-top: 10px; max-width: 260px; }
.timeline .step { padding-top: 0; }
.timeline-track { display: none; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq-list { border-top: 1px solid var(--hair); }
details.faq { border-bottom: 1px solid var(--hair); }
details.faq summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-family: var(--display); font-size: 20px; font-weight: 600; transition: color .2s; }
details.faq summary:hover { color: var(--signal-ink); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .pm { width: 28px; height: 28px; border-radius: 0; border: 1px solid var(--hair-2); display: grid; place-items: center; flex: none; transition: transform .3s var(--ease), background .3s, border-color .3s; color: var(--ink); }
details.faq summary .pm svg { width: 14px; height: 14px; }
details.faq[open] summary .pm { transform: rotate(45deg); background: var(--signal); border-color: var(--signal); color: #16140f; }
details.faq .ans { color: var(--ink-60); font-size: 15.5px; padding: 0 0 26px; max-width: 640px; }

/* ---------- Portal band (dark beat) ---------- */
.portal-band {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center;
  border: none; border-radius: var(--radius); padding: 52px 56px;
  background: var(--coal); color: var(--paper-on-coal);
  box-shadow: none;
}
.portal-band .eyebrow { color: var(--paper-on-coal); }
.portal-band-text h2 { font-size: clamp(30px, 4vw, 48px); margin-top: 18px; }
.portal-band-text p { color: var(--mist-warm); font-size: 17px; margin-top: 16px; max-width: 520px; }
.portal-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 24px; }
.portal-points .sp { display: flex; align-items: center; gap: 10px; color: var(--paper-on-coal); font-size: 14.5px; font-weight: 500; }
.portal-points .d { width: 8px; height: 8px; border-radius: 0; background: var(--signal); flex: none; }
.portal-band-visual { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.pb-mini { background: rgba(239,233,221,.05); border: 1px solid var(--hair-light); border-radius: var(--radius); padding: 20px 22px; }
.pb-row { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; }
.pb-pct { font-family: var(--mono); color: var(--signal); }
.pb-bar { height: 10px; border-radius: 0; background: rgba(239,233,221,.12); overflow: hidden; margin: 12px 0 16px; }
.pb-bar i { display: block; height: 100%; border-radius: 0; background: var(--signal); }
.pb-ms { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--mist-warm); padding: 5px 0; }
.pb-dot { width: 20px; height: 20px; border-radius: 0; display: grid; place-items: center; font-size: 11px; background: rgba(239,233,221,.1); color: var(--mist-warm); }
.pb-dot.done { background: var(--signal); color: #16140f; }
.pb-dot.in { background: rgba(255,77,0,.25); color: var(--signal); }
.portal-band-visual .btn { justify-content: center; }
@media (max-width: 860px) { .portal-band { grid-template-columns: 1fr; gap: 28px; padding: 34px 28px; } .portal-points { grid-template-columns: 1fr; } }

/* ---------- CTA: full-bleed ink ---------- */
#cta { background: var(--coal); color: var(--paper-on-coal); padding: 140px 0; overflow: hidden; }
#cta.seam::before { display: none; }
.cta-panel {
  position: relative; overflow: visible;
  border: none; border-radius: 0; padding: 0; text-align: center;
  background: none; box-shadow: none;
}
.cta-panel .orbit { display: none; }
.cta-panel .eyebrow { color: var(--paper-on-coal); }
.cta-panel h2 { font-size: clamp(40px, 7vw, 96px); position: relative; letter-spacing: -.03em; }
.cta-panel p { color: var(--mist-warm); font-size: 19px; margin: 26px auto 40px; max-width: 540px; position: relative; }
.cta-panel .btn { position: relative; }
#cta .bg-word { color: transparent; -webkit-text-stroke: 1px rgba(239,233,221,.09); top: 50%; }

/* ---------- Footer (continues the ink block) ---------- */
footer { background: var(--coal); color: var(--paper-on-coal); border-top: 1px solid var(--hair-light); padding: 72px 0 44px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot-brand p { color: var(--mist-warm); font-size: 15px; margin-top: 16px; max-width: 320px; }
.foot-col h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist-warm); margin: 0 0 16px; font-weight: 500; }
.foot-col a { display: block; color: var(--mist-warm); font-size: 15px; padding: 5px 0; transition: color .2s; }
.foot-col a:hover { color: var(--signal); }
.foot-bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--hair-light); color: var(--mist-warm); font-size: 12.5px; }
.foot-bottom .disc { max-width: 560px; line-height: 1.5; color: rgba(239,233,221,.62); }

/* ---------- Scroll progress (effects.js) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--signal); z-index: 200;
}
/* neutralize the old cursor-spotlight tilt layer */
.tilt::after { display: none !important; }

/* ---------- Reveals ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .07s; }
.js .reveal.d2 { transition-delay: .14s; }
.js .reveal.d3 { transition-delay: .21s; }
.reduced .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .solution-wrap, .speed-grid, .faq-wrap { grid-template-columns: 1fr; gap: 44px; }
  .proc-grid { grid-template-columns: repeat(2,1fr); gap: 44px 24px; }
  .nav-links { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .container { padding-inline: 20px; }
  .section { padding: 88px 0; }
  .seam + .seam::before, .section + .section::before { left: 20px; right: 20px; }
  .speed-points { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions .btn, .nav-cta .btn { width: auto; }
  .nav .container { gap: 12px; }
  .nav .brand { font-size: 18px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-primary { padding: 9px 12px; font-size: 12.5px; }
  .nav-cta .btn-ghost { display: none; }
}

/* ============ PRESERVED: app depictions (old palette, scoped) ============ */
.mock { position: absolute; inset: 0; }
/* ---------- Mock: old FileMaker layout ---------- */
.mock-fm {
  background: linear-gradient(#e9e9ea, #cfcfd2);
  color: #1c1c1c;
  font-family: Helvetica, Arial, 'Segoe UI', sans-serif;
  font-size: 9px; line-height: 1.35;
  display: flex; flex-direction: column;
}
.fm-toolbar {
  background: linear-gradient(#f4f4f5, #c9c9cd);
  border-bottom: 1px solid #9a9a9e;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
}
.fm-traffic { display: flex; gap: 4px; }
.fm-traffic i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.fm-traffic .r { background: #ed6a5e; } .fm-traffic .y { background: #f4bf4f; } .fm-traffic .g { background: #61c554; }
.fm-tool-btn {
  background: linear-gradient(#fbfbfb, #d6d6da);
  border: 1px solid #8d8d92; border-radius: 3px;
  padding: 2px 7px; font-size: 8px; color: #2a2a2a;
  box-shadow: inset 0 1px 0 #fff;
}
.fm-layoutname { font-weight: 700; color: #333; margin-left: 6px; }
.fm-toolbar .spacer { flex: 1; }
.fm-record { font-size: 8px; color: #555; }
.fm-tabs { display: flex; gap: 2px; padding: 7px 10px 0; background: #d0d0d3; border-bottom: 1px solid #a6a6aa; }
.fm-tab {
  padding: 4px 12px; font-size: 8.5px; color: #3a3a3a;
  background: linear-gradient(#dedee1, #c2c2c6);
  border: 1px solid #9a9a9e; border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.fm-tab.active { background: linear-gradient(#fefefe, #e6e6e9); font-weight: 700; color: #111; box-shadow: 0 -1px 0 #fff inset; }
.fm-body { flex: 1; padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; align-content: start; background: #d9d9dc; }
.fm-field { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 7px; }
.fm-field label { text-align: right; font-weight: 700; color: #3d3d3d; font-size: 8.5px; }
.fm-input {
  background: #fff; border: 1px solid #7c7c82;
  box-shadow: inset 1px 1px 1px rgba(0,0,0,.18);
  padding: 3px 6px; font-size: 8.5px; color: #1c1c1c; min-height: 16px;
}
.fm-portal { grid-column: 1 / -1; background: #fff; border: 1px solid #7c7c82; box-shadow: inset 1px 1px 1px rgba(0,0,0,.18); }
.fm-portal .ph { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr; background: linear-gradient(#e7e7ea, #d2d2d6); border-bottom: 1px solid #9a9a9e; }
.fm-portal .ph span { padding: 3px 6px; font-weight: 700; font-size: 8px; border-right: 1px solid #c2c2c6; color: #3a3a3a; }
.fm-portal .pr { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr; border-bottom: 1px solid #e2e2e4; }
.fm-portal .pr:nth-child(even) { background: #f3f3f5; }
.fm-portal .pr span { padding: 3px 6px; font-size: 8px; border-right: 1px solid #ededf0; color: #2a2a2a; }
.fm-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 2px; }
.fm-btn {
  background: linear-gradient(#fbfbfb, #cfcfd3); border: 1px solid #8a8a90; border-radius: 4px;
  padding: 4px 12px; font-size: 8.5px; color: #2a2a2a; box-shadow: inset 0 1px 0 #fff; font-weight: 600;
}
/* ---------- Mock: modern FMHyper dashboard ---------- */
.mock-app {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,77,0,.16), transparent 50%),
    linear-gradient(160deg, #1a1612, #100d0b);
  color: var(--ink);
  display: grid;
  grid-template-columns: 26% 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "side top" "side main";
  font-size: 9px;
  overflow: hidden;
}
.app-side {
  grid-area: side;
  background: rgba(255,255,255,.03);
  border-right: 1px solid var(--line);
  padding: 10px 9px; display: flex; flex-direction: column; gap: 7px;
  backdrop-filter: blur(8px);
}
.app-logo { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 10px; margin-bottom: 4px; }
.app-logo .dot { width: 16px; height: 16px; border-radius: 5px; background: var(--grad); display: grid; place-items: center; }
.app-logo .dot svg { width: 9px; height: 9px; }
.app-nav { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; color: var(--mist); font-size: 8.5px; }
.app-nav svg { width: 11px; height: 11px; opacity: .8; }
.app-nav.active { background: var(--grad-soft); color: var(--ink); border: 1px solid rgba(255,138,77,.25); }
.app-top {
  grid-area: top; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
}
.app-search { flex: 1; max-width: 200px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--mist-2); font-size: 8.5px; display: flex; align-items: center; gap: 6px; }
.app-search svg { width: 10px; height: 10px; }
.app-top .spacer { flex: 1; }
.app-pill { font-size: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255,138,77,.12); color: var(--cyan); border: 1px solid rgba(255,138,77,.3); font-weight: 600; }
.app-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--grad); }
.app-main { grid-area: main; padding: 11px 12px; display: grid; gap: 9px; grid-template-rows: auto 1fr auto; }
.app-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.kpi { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px; }
.kpi .k-label { color: var(--mist-2); font-size: 7.5px; text-transform: uppercase; letter-spacing: .08em; }
.kpi .k-val { font-size: 15px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; }
.kpi .k-val span { font-size: 8px; color: var(--cyan); margin-left: 4px; font-weight: 600; }
.app-chart { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; position: relative; overflow: hidden; }
.app-chart .c-title { font-size: 8px; color: var(--mist); font-weight: 600; }
.app-chart svg { width: 100%; height: 64px; margin-top: 4px; }
.app-table { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.app-table .t-row { display: grid; grid-template-columns: 1.5fr 1fr .8fr; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--line); font-size: 8px; }
.app-table .t-row.head { color: var(--mist-2); text-transform: uppercase; letter-spacing: .06em; font-size: 7px; }
.app-table .t-row:last-child { border-bottom: none; }
.t-status { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 7px; font-weight: 600; }
.t-status.ok { background: rgba(97,197,84,.16); color: #79e06a; }
.t-status.wait { background: rgba(244,191,79,.16); color: #f4cf6a; }

/* =========================================================
   Interactive dashboard demo
   ========================================================= */
.livedemo { position: relative; }
.livedemo-track { position: relative; height: 210vh; }
.livedemo-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 3vh 24px; z-index: 2; }
.dash {
  position: relative;
  width: min(1180px, 94vw); max-width: none; margin: 0;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(26,22,18,.92), rgba(16,13,11,.96));
  border: 1px solid var(--line-2);
  box-shadow: 0 70px 150px -50px rgba(0,0,0,.92);
}
/* "App launching" entrance — feels like the laptop hands off into the running app */
.js .dash.reveal { opacity: 0; transform: translateY(30px) scale(.97); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.js .dash.reveal.in { opacity: 1; transform: none; }
.reduced .dash.reveal { opacity: 1 !important; transform: none !important; }
.dash-cap { text-align: center; color: var(--mist-2); font-size: 14px; margin-top: 22px; }

/* FileMaker chrome — faithful dark-mode FileMaker Pro window */
.dash-dots { display: flex; gap: 8px; }
.dash-dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.dash-dots i:nth-child(1){ background:#ed6a5e } .dash-dots i:nth-child(2){ background:#f4bf4f } .dash-dots i:nth-child(3){ background:#61c554 }
.dash-spacer { flex: 1; }
.dash-livechip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--cyan); padding: 4px 11px; border-radius: 999px; background: rgba(255,138,77,.12); border: 1px solid rgba(255,138,77,.3); }
/* macOS menu bar */
.fm-menubar { display: flex; align-items: center; height: 30px; padding: 0 12px; background: rgba(18,21,30,.97); border-bottom: 1px solid rgba(0,0,0,.5); color: #e6eaf2; font-size: 13px; white-space: nowrap; overflow: hidden; }
.fm-apple { font-size: 15px; margin-right: 15px; }
.fm-appname { font-weight: 700; margin-right: 18px; }
.fm-menu { margin-right: 16px; color: #d7dce6; }
.fm-tray { display: flex; align-items: center; gap: 14px; color: #d7dce6; margin-right: 16px; }
.fm-batt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.fm-batt-shell { width: 24px; height: 12px; border: 1px solid currentColor; border-radius: 3px; padding: 1.5px; position: relative; }
.fm-batt-shell::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: currentColor; }
.fm-batt-shell i { display: block; height: 100%; background: #79e06a; border-radius: 1px; }
.fm-clock { font-size: 13px; color: #fff; }
/* window title bar */
.fm-titlebar { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: linear-gradient(180deg, #32363f, #2a2e35); border-bottom: 1px solid #1f2229; }
.fm-wintitle { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13.5px; font-weight: 600; color: #d7dce6; pointer-events: none; }
.fm-titlebar .dash-livechip { margin-left: auto; }
/* FileMaker status toolbar */
.dash .fm-toolbar { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 14px; background: linear-gradient(180deg, #3a3f48, #31353d); border-bottom: 1px solid #232730; color: #aeb4bf; white-space: nowrap; overflow: hidden; }
.fm-grp { display: flex; align-items: center; gap: 8px; }
.fm-recgrp { gap: 10px; }
.fm-arrows { display: flex; }
.fm-arrow { width: 30px; height: 27px; background: linear-gradient(#4b515b, #3d424b); border: 1px solid #262a32; color: #d2d7e0; font-size: 15px; line-height: 1; }
.fm-arrow:first-child { border-radius: 7px 0 0 7px; } .fm-arrow:last-child { border-radius: 0 7px 7px 0; border-left: none; }
.fm-slider { width: 64px; height: 5px; border-radius: 3px; background: #262a32; position: relative; }
.fm-slider i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; background: #d2d7e0; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.fm-book { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #6b7280; position: relative; }
.fm-book::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--electric); border-right-color: transparent; border-bottom-color: transparent; transform: rotate(35deg); }
.fm-reccount { font-size: 12px; line-height: 1.1; color: #c3c9d4; }
.fm-reccount b { color: #e6eaf2; font-weight: 600; font-size: 14px; } .fm-reccount span { font-size: 11px; }
.fm-sep { width: 1px; height: 32px; background: #23262d; flex: none; }
.fm-tbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; color: #c3c9d4; font-size: 11.5px; }
.fm-tbtn svg { color: #c6cbd4; }
.fm-tbtn em { font-style: normal; }
.fm-caret em::after { content: " ⌄"; opacity: .8; }
.fm-tsearch { display: inline-flex; align-items: center; gap: 7px; min-width: 160px; padding: 7px 12px; border-radius: 7px; background: #23262d; border: 1px solid #1b1e24; color: #8a909b; font-size: 12.5px; }
/* layout bar */
.fm-layoutbar { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 14px; background: linear-gradient(180deg, #2f333b, #292d34); border-bottom: 1px solid #1f2229; color: #aeb4bf; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.fm-lay { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 7px; background: #3a3f48; border: 1px solid #23262d; }
.fm-lay b { color: #e6eaf2; } .fm-mut { color: #7e8590; }
.fm-viewas { display: inline-flex; align-items: center; gap: 7px; }
.fm-viewas .va { width: 17px; height: 13px; border: 1px solid #6b7280; border-radius: 2px; display: inline-block; }
.fm-viewas .va.on { background: var(--electric); border-color: var(--electric); }
.fm-prev, .fm-edit { padding: 5px 11px; border-radius: 7px; border: 1px solid #3a3f48; color: #c6cbd4; }
.fm-edit { background: #3a3f48; }
.fm-aa { color: #c3c9d4; font-size: 14px; }
.fm-aa sup { font-size: .65em; }
@media (max-width: 860px) { .fm-menu, .fm-tray, .fm-reccount, .fm-tbtn em, .fm-viewas, .fm-aa { display: none; } }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }

.dash-app { display: grid; grid-template-columns: 232px 1fr; min-height: 560px; transition: grid-template-columns .42s cubic-bezier(.2,.7,.2,1); }
.dash.collapsed .dash-app { grid-template-columns: 72px 1fr; }
.dash-side { border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.02); overflow: hidden; }
.dash-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; padding: 4px 8px 14px; white-space: nowrap; }
.dash-brand .dot { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; flex: none; }
.dash-brand .dot svg { width: 15px; height: 15px; color: #16140f; }
.dash-logo { height: 26px; width: auto; display: block; }
.dash-nav-list { display: flex; flex-direction: column; gap: 4px; }
.dash-side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.dash-nav {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: 11px;
  background: transparent; color: var(--mist); font-size: 14.5px; font-weight: 500;
  white-space: nowrap; transition: background .25s, color .25s, border-color .25s;
}
.dash-nav svg { width: 19px; height: 19px; flex: none; opacity: .9; }
.dash-nav .lbl { transition: opacity .25s; }
.dash-nav .dash-badge { margin-left: auto; font-size: 11px; font-weight: 700; background: rgba(255,138,77,.16); color: var(--cyan); padding: 1px 8px; border-radius: 999px; }
.dash-nav:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.dash-nav.active { background: var(--grad-soft); color: var(--ink); border-color: rgba(255,138,77,.28); }
.dash-nav.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 3px; background: var(--grad); }
.dash.collapsed .dash-nav .lbl, .dash.collapsed .dash-nav .dash-badge, .dash.collapsed .dash-brand .lbl { opacity: 0; width: 0; margin: 0; pointer-events: none; }
.dash.collapsed .dash-nav { justify-content: center; gap: 0; }

.dash-main { display: flex; flex-direction: column; min-width: 0; }
.dash-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dash-icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--mist); transition: background .25s, color .25s, border-color .25s; }
.dash-icon-btn:hover { background: rgba(255,138,77,.1); color: var(--ink); border-color: rgba(255,138,77,.4); }
.dash-icon-btn svg { width: 18px; height: 18px; }
.dash-search { flex: 1; max-width: 340px; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--mist-2); }
.dash-search svg { width: 15px; height: 15px; flex: none; }
.dash-search input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font-size: 13.5px; font-family: inherit; }
.dash-search input::placeholder { color: var(--mist-2); }
.dash-spacer { flex: 1; }
.dash-bell-wrap { position: relative; }
.dash-bell { position: relative; }
.dash-bell-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #d63f00; color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: transform .25s; }
.dash-bell-badge.hidden { display: none; }
.dash-bell.ring svg { animation: bell .8s ease; transform-origin: 50% 4px; }
@keyframes bell { 0%,100%{transform:rotate(0)} 20%{transform:rotate(16deg)} 40%{transform:rotate(-13deg)} 60%{transform:rotate(8deg)} 80%{transform:rotate(-5deg)} }
.dash-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-weight: 700; color: #16140f; font-size: 14px; flex: none; }
.dash-notif {
  position: absolute; right: 0; top: 48px; z-index: 20; width: 320px;
  background: rgba(24,20,16,.98); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.9); overflow: hidden;
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.dash-notif.open { opacity: 1; transform: none; pointer-events: auto; }
.dash-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.dash-notif-head button { background: none; border: none; color: var(--cyan); font-size: 12px; font-weight: 600; }
.dash-notif-list { list-style: none; margin: 0; padding: 6px; max-height: 280px; overflow-y: auto; }
.dash-notif-list li { display: flex; gap: 11px; padding: 10px 11px; border-radius: 10px; font-size: 13px; color: var(--mist); transition: background .2s; }
.dash-notif-list li:hover { background: rgba(255,255,255,.04); }
.dash-notif-list li.unread { background: rgba(255,77,0,.08); }
.dash-notif-list .ni { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--grad-soft); color: var(--cyan); font-size: 14px; }
.dash-notif-list .nt { color: var(--ink); font-weight: 600; }
.dash-notif-list .nm { font-size: 11.5px; color: var(--mist-2); margin-top: 2px; }
.dash-notif-empty { padding: 26px; text-align: center; color: var(--mist-2); font-size: 13px; }

.dash-panels { position: relative; flex: 1; padding: 18px; overflow: hidden; }
.dash-panel { display: none; }
.dash-panel.active { display: block; }
.js .dash-panel.active.flyin { animation: panelIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes panelIn { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
.reduced .dash-panel.active.flyin { animation: none; }

.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.dash-kpi { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.dash-kpi:hover { transform: translateY(-3px); border-color: rgba(255,138,77,.4); box-shadow: 0 16px 36px -20px rgba(0,0,0,.7); }
.dash-kpi .kl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mist-2); }
.dash-kpi .kv { font-size: 27px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.dash-kpi .kt { font-size: 12px; font-weight: 600; margin-top: 4px; }
.dash-kpi .kt.up { color: #79e06a; } .dash-kpi .kt.down { color: #ff8a4d; } .dash-kpi .kt.flat { color: var(--mist-2); }
.dash-kpi.bump { animation: kbump .5s ease; }
@keyframes kbump { 0%,100%{transform:none} 35%{transform:translateY(-5px) scale(1.03)} }

.dash-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.dash-card { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.dash-card-tag { font-size: 11px; font-weight: 600; color: var(--cyan); background: rgba(255,138,77,.12); border: 1px solid rgba(255,138,77,.25); padding: 2px 9px; border-radius: 999px; }
.dash-chart { width: 100%; height: 200px; display: block; }
.dash-chart #dashLine, .dash-chart #dashArea { transition: none; }

.dash-activity .dash-card-head { margin-bottom: 8px; }
.dash-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow: hidden; }
.dash-feed li { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; font-size: 12.5px; color: var(--mist); }
.dash-feed li .fi { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; font-size: 12px; }
.dash-feed li .fi.ok { background: rgba(97,197,84,.16); color: #79e06a; } .dash-feed li .fi.eur { background: var(--grad-soft); color: var(--cyan); } .dash-feed li .fi.new { background: rgba(244,191,79,.16); color: #f4cf6a; }
.dash-feed li .ft b { color: var(--ink); font-weight: 600; }
.dash-feed li .fm { font-size: 11px; color: var(--mist-2); }
.dash-feed li .ftime { margin-left: auto; font-size: 11px; color: var(--mist-2); white-space: nowrap; }
.js .dash-feed li.fly { animation: feedIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes feedIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.reduced .dash-feed li.fly { animation: none; }

.dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dash-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mist-2); padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 600; }
.dash-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); color: var(--mist); }
.dash-table tbody tr { transition: background .2s; } .dash-table tbody tr:hover { background: rgba(255,138,77,.06); }
.dash-table td:first-child { color: var(--ink); font-weight: 600; }
.pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.pill.ok { background: rgba(97,197,84,.16); color: #79e06a; } .pill.wait { background: rgba(244,191,79,.16); color: #f4cf6a; } .pill.late { background: rgba(255,94,108,.16); color: #ff8a93; }

.dash-inv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-inv li { display: grid; grid-template-columns: 90px 1.4fr 1fr 90px 72px; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: transform .25s, border-color .25s; }
.dash-inv li:hover { transform: translateX(4px); border-color: rgba(255,138,77,.35); }
.dash-inv .inv-id { font-family: var(--mono); font-size: 12px; color: var(--mist-2); }
.dash-inv .inv-co { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.dash-inv .inv-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.dash-inv .inv-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.dash-inv .inv-bar i.danger { background: linear-gradient(90deg,#ff5e6c,#ff8a3b); }
.dash-inv .inv-amt { font-weight: 700; font-size: 13.5px; text-align: right; }

.dash-kanban { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.kan-col { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.kan-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mist); display: flex; align-items: center; gap: 8px; }
.kan-head .cnt { font-size: 11px; background: rgba(255,255,255,.08); color: var(--mist); padding: 1px 8px; border-radius: 999px; }
.kan-card { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 10px; cursor: grab; transition: transform .25s, border-color .25s, box-shadow .25s; }
.kan-card span { color: var(--cyan); font-weight: 700; }
.kan-card:hover { transform: translateY(-3px); border-color: rgba(255,138,77,.4); box-shadow: 0 14px 30px -18px rgba(0,0,0,.8); }

.dash-donut { --p: 68; width: 150px; height: 150px; border-radius: 50%; margin: 6px auto; display: grid; place-items: center; background: conic-gradient(var(--cyan) calc(var(--p)*1%), rgba(255,255,255,.08) 0); position: relative; }
.dash-donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: #191410; }
.dash-donut span { position: relative; font-size: 26px; font-weight: 800; }
.dash-bars { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding: 8px 4px; }
.dash-bars i { flex: 1; height: var(--h); border-radius: 7px 7px 0 0; background: var(--grad); opacity: .9; transition: transform .8s cubic-bezier(.2,.7,.2,1); }

.dash-set { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.dash-set:last-child { border-bottom: none; }
.dash-switch { width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; cursor: pointer; transition: background .25s; }
.dash-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s; }
.dash-switch.on { background: var(--grad); } .dash-switch.on::after { transform: translateX(18px); }

.dash-toasts { position: absolute; right: 18px; bottom: 18px; z-index: 30; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.dash-toast {
  display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: 320px;
  padding: 12px 14px; border-radius: 13px; pointer-events: auto;
  background: rgba(24,20,16,.98); border: 1px solid var(--line-2);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.9);
  animation: toastIn .5s cubic-bezier(.2,.7,.2,1);
}
.dash-toast.out { animation: toastOut .4s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(120%); } }
.reduced .dash-toast { animation: none; } .reduced .dash-toast.out { animation: none; opacity: 0; }
.dash-toast .ti { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--grad-soft); color: var(--cyan); }
.dash-toast .ti.ok { background: rgba(97,197,84,.16); color: #79e06a; } .dash-toast .ti.warn { background: rgba(244,191,79,.16); color: #f4cf6a; }
.dash-toast .tt { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dash-toast .tm { font-size: 12px; color: var(--mist-2); margin-top: 1px; }

@media (max-width: 860px) {
  .dash-app { grid-template-columns: 64px 1fr; }
  .dash-side .lbl, .dash-brand .lbl, .dash-nav .dash-badge { opacity: 0; width: 0; margin: 0; pointer-events: none; }
  .dash-nav { justify-content: center; gap: 0; }
  .dash.collapsed .dash-app { grid-template-columns: 0 1fr; }
  .dash.collapsed .dash-side { padding-inline: 0; border: none; }
  .dash-kpis { grid-template-columns: repeat(2,1fr); }
  .dash-row { grid-template-columns: 1fr; }
  .dash-kanban { grid-template-columns: 1fr; }
  .dash-inv li { grid-template-columns: 70px 1fr 70px 64px; }
  .dash-inv .inv-bar { display: none; }
  .dash-burger { display: grid; }
}

/* ---------- Dashboard as in-place overlay that dissolves over the 3D screen ---------- */
.dash.dash-overlay {
  visibility: hidden;
  position: absolute; top: 0; left: 0; z-index: 7;
  width: auto; max-width: none; margin: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  will-change: opacity;
}
.dash-overlay .dash-app { flex: 1; min-height: 0; }
.dash-overlay .dash-panels { overflow: hidden; }
/* Fallback (no WebGL): show the dashboard as a normal centered block */
.dash.dash-overlay.dash-static {
  visibility: visible !important;
  position: relative; opacity: 1 !important; pointer-events: auto;
  width: min(1180px, 94vw) !important; margin: 0 auto;
  left: auto !important; top: auto !important; height: auto !important;
}


/* ---------- Skip link ---------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--signal);
  color: #16140f; padding: 12px 18px; font-weight: 600; font-family: var(--sans); }
.skip:focus { left: 0; }

/* ---------- Reduced motion: CSS-level guarantee (not only the JS class) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .scroll-cue, #loader { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ---------- Mobile navigation ---------- */
.nav-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--hair-2);
  background: transparent; padding: 0 11px; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; cursor: pointer; }
.nav-burger span { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1120px) {
  .nav-burger { display: flex; order: 3; }
  .nav-links { display: none; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--coal); border-top: 1px solid var(--hair-light);
    padding: 18px 32px 26px; z-index: 120;
  }
  .nav.open .nav-links a { padding: 12px 0; font-size: 18px; width: 100%; border-bottom: 1px solid rgba(239,233,221,.08); }
  .nav.scrolled.open .nav-links { background: var(--paper); border-top-color: var(--hair); }
}

/* ---------- Portal: responsive (had zero media queries) ---------- */
@media (max-width: 760px) {
  .pnav { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .pwrap { padding-inline: 16px; }
  .ctable { display: block; overflow-x: auto; white-space: nowrap; }
  .inv { grid-template-columns: 1fr; gap: 6px; }
  .dash-notif { width: min(320px, calc(100vw - 32px)); }
}

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price { position: relative; display: flex; flex-direction: column; border: 1px solid var(--hair); padding: 30px 28px 32px; background: var(--paper-2); }
.price--pick { border-color: var(--signal); border-width: 1px; box-shadow: 10px 10px 0 rgba(22,20,15,.06); }
.price-tag { position: absolute; top: -11px; left: 28px; background: var(--signal); color: #16140f;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; font-weight: 600; }
.price h3 { font-size: 22px; }
.price-for { color: var(--ink-60); font-size: 14.5px; margin-top: 8px; min-height: 42px; }
.price-amt { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); }
.price-amt .from { font-family: var(--mono); font-size: 12px; color: var(--ink-40); text-transform: uppercase; letter-spacing: .1em; }
.price-amt b { font-family: var(--display); font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.price-meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-40); margin-top: 8px; }
.price-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.price-list li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--ink-60); line-height: 1.45; }
.price-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 2px; background: var(--signal); }
.price-note { margin-top: 22px; color: var(--ink-60); font-size: 14.5px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } .price-for { min-height: 0; } }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: start;
  border-top: 1px solid var(--hair); padding-top: 44px; }
.founder-portrait { width: 220px; aspect-ratio: 4 / 5; background: var(--coal); display: grid; place-items: center; }
.founder-portrait span { font-family: var(--display); font-size: 62px; font-weight: 600; color: var(--signal); letter-spacing: -0.03em; }
.founder-body h2 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 14px; }
.founder-body p { color: var(--ink-60); font-size: 16.5px; line-height: 1.65; margin-top: 16px; max-width: 62ch; }
.founder-facts { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 26px 0 28px; padding-top: 22px; border-top: 1px solid var(--hair); }
.founder-facts span { font-size: 14px; color: var(--ink-40); }
.founder-facts b { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--ink); }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; gap: 26px; } .founder-portrait { width: 148px; } }

/* ---------- Footer legal line ---------- */
.foot-legal { display: block; font-size: 13px; color: var(--mist-warm); margin-bottom: 6px; }
.foot-legal a { text-decoration: underline; text-underline-offset: 3px; }
.foot-legal a:hover { color: var(--paper-on-coal); }
.rv-consent { font-size: 13px; color: var(--ink-60); margin: 0 0 14px; line-height: 1.5; }
.rv-consent a { text-decoration: underline; text-underline-offset: 3px; }
.p-legal { margin: 16px 0 0; font-size: 12.5px; text-align: center; color: var(--mist-2); }
.p-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Live chat widget
   ============================================================ */
.fmchat { position: fixed; right: 20px; bottom: 20px; z-index: 300; font-family: var(--sans); }
.fmchat-fab {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--signal); color: #16140f; border: none;
  padding: 13px 20px 13px 16px; font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.fmchat-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(0,0,0,.6); }
.fmchat-fab svg { width: 19px; height: 19px; }
.fmchat.open .fmchat-fab { display: none; }
.fmchat-panel {
  width: min(376px, calc(100vw - 32px)); height: min(540px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--coal); border: 1px solid rgba(239,233,221,.14);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.75);
}
.fmchat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 16px 14px; border-bottom: 1px solid rgba(239,233,221,.12); }
.fmchat-title { display: block; color: var(--paper-on-coal); font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.2; }
.fmchat-sub { display: block; color: var(--mist-warm); font-size: 12.5px; margin-top: 3px; }
.fmchat-x { background: none; border: none; color: var(--mist-warm); cursor: pointer; padding: 2px; }
.fmchat-x:hover { color: var(--paper-on-coal); }
.fmchat-x svg { width: 18px; height: 18px; }
.fmchat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.fmchat-note { color: var(--mist-warm); font-size: 13.5px; line-height: 1.55; border-left: 2px solid var(--signal); padding-left: 12px; }
.fmchat-msg { max-width: 84%; }
.fmchat-msg.you { align-self: flex-end; text-align: right; }
.fmchat-who { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mist-warm); margin-bottom: 4px; }
.fmchat-msg p { margin: 0; padding: 10px 13px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.fmchat-msg.you p { background: var(--signal); color: #16140f; }
.fmchat-msg.them p { background: rgba(239,233,221,.08); color: var(--paper-on-coal); }
.fmchat-mailrow { padding: 0 16px 10px; }
.fmchat-mail { width: 100%; background: rgba(239,233,221,.06); border: 1px solid rgba(239,233,221,.16);
  color: var(--paper-on-coal); padding: 10px 12px; font-size: 13.5px; font-family: inherit; }
.fmchat-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 12px 14px;
  border-top: 1px solid rgba(239,233,221,.12); }
.fmchat-in { flex: 1; resize: none; background: rgba(239,233,221,.06); border: 1px solid rgba(239,233,221,.16);
  color: var(--paper-on-coal); padding: 11px 12px; font-size: 14.5px; font-family: inherit; line-height: 1.4; max-height: 110px; }
.fmchat-in:focus, .fmchat-mail:focus { outline: none; border-color: var(--signal); }
.fmchat-send { flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--signal); color: #16140f; border: none; cursor: pointer; }
.fmchat-send svg { width: 18px; height: 18px; }
@media (max-width: 620px) {
  .fmchat { right: 14px; bottom: 14px; }
  .fmchat-fab-t { display: none; }
  .fmchat-fab { padding: 15px; border-radius: 0; }
  .fmchat-panel { height: min(70vh, calc(100vh - 100px)); }
}
/* portal chat inbox */
.tabdot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--signal); margin-left:7px; vertical-align:middle; }
.chat-wrap { display:grid; grid-template-columns:260px 1fr; gap:16px; margin-top:14px; min-height:420px; }
.chat-list { border:1px solid var(--line); overflow-y:auto; max-height:520px; }
.chat-item { padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .2s; }
.chat-item:hover { background:rgba(242,236,225,.04); }
.chat-item.on { background:var(--grad-soft); border-left:2px solid var(--signal); }
.chat-item b { display:block; font-size:13.5px; }
.chat-item span { display:block; font-size:12px; color:var(--mist-2); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item .un { display:inline-block; background:var(--signal); color:#16140f; font-size:10.5px; font-weight:700; padding:1px 6px; margin-left:6px; }
.chat-view { display:flex; flex-direction:column; border:1px solid var(--line); }
.chat-head { padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--mist); }
.chat-view .thread { flex:1; max-height:400px; }
.chat-view .composer { padding:12px; border-top:1px solid var(--line); }
@media (max-width:760px){ .chat-wrap { grid-template-columns:1fr; } .chat-list { max-height:220px; } }

/* The HTML `hidden` attribute must always win. Any element with an author
   `display` rule (the chat panel, the unread dot) would otherwise ignore it. */
[hidden] { display: none !important; }

/* ============================================================
   MOBILE — the phone gets a static hero, a legible before/after,
   a nav that fits, and 44px touch targets.
   ============================================================ */

/* iOS zooms the whole page when an input is under 16px */
.dash-search input, .fmchat-in, .fmchat-mail { font-size: 16px; }
@media (min-width: 901px) {
  .dash-search input { font-size: 13.5px; }
  .fmchat-in { font-size: 14.5px; }
  .fmchat-mail { font-size: 13.5px; }
}

/* ---- Hero: no canvas, no pin, no 8 MB model ---- */
@media (max-width: 900px) {
  #stage { height: auto; min-height: 0; padding: calc(var(--nav-h) + 44px) 0 60px; perspective: none; overflow: visible; }
  #heroCanvas, .cin-label, .cin-badge, .stage-glow,
  #dash.dash-overlay, .scroll-cue { display: none !important; }
  .hero-copy { position: relative; inset: auto; z-index: 2; display: block; padding-inline: 20px; opacity: 1 !important; pointer-events: auto; }
  .hero-copy .inner { max-width: none; }
  .hero-copy .inner::before { display: none; }
  .hero-copy .wordmark { font-size: clamp(44px, 13vw, 78px); margin: 0; }
  .hero-copy .tagline { font-size: 17px; margin-top: 18px; max-width: none; }
  .hero-actions { margin-top: 28px; gap: 10px; width: 100%; }
  .cmp-pane .mock { will-change: auto; transform: none !important; }
  .dash.dash-overlay { will-change: auto; }
}
/* No 3D pipeline (phone, tablet, blocked CDN, no WebGL, data saver).
   The stage still has to be a finished hero, not an empty dark rectangle. */
html.no3d #heroCanvas,
html.no3d .cin-label, html.no3d .cin-badge, html.no3d .scroll-cue,
html.no3d .stage-glow { display: none !important; }
html.no3d #stage {
  height: auto; min-height: 0; perspective: none; overflow: visible;
  padding: calc(var(--nav-h) + 44px) 0 60px;
}
html.no3d .hero-copy {
  position: relative; inset: auto; z-index: 2; display: block;
  opacity: 1 !important; pointer-events: auto;
}
html.no3d .hero-copy .inner::before { display: none; }
html.no3d #dash.dash-overlay { display: none !important; }
/* Phones get the copy-only hero. Anything wider gets the dashboard under it,
   which is the whole reason a visitor scrolled here. */
@media (min-width: 901px) {
  /* #dash precedes .hero-copy in the DOM; without an explicit order the fallback
     opened with an unlabelled screenshot above the company name and the pitch */
  html.no3d #stage { display: flex; flex-direction: column; }
  html.no3d .hero-copy { order: 1; }
  html.no3d #dash.dash-overlay.dash-static { order: 2; display: block !important; margin-top: 56px; }
}
/* On a touch device there is no 3D to fall back from — the fake app is just
   700px of someone else's software above the fold. */
@media (pointer: coarse) {
  html.no3d #dash.dash-overlay.dash-static { display: none !important; }
}

/* ---- Before/after: crop at readable size instead of scaling to a smear ---- */
@media (max-width: 900px) {
  .compare { aspect-ratio: 5 / 6; }
  .cmp-tag { top: 10px; font-size: 10px; padding: 6px 9px; }
  .cmp-tag.l { left: 10px; } .cmp-tag.r { right: 10px; }
  .cmp-pane.before .mock-fm { font-size: 11px; }
  .cmp-pane.before .fm-tool-btn, .cmp-pane.before .fm-record { font-size: 10px; }
  .cmp-pane.before .fm-tab { font-size: 11px; padding: 6px 14px; }
  .cmp-pane.before .fm-body { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .cmp-pane.before .fm-field { grid-template-columns: 62px 1fr; }
  .cmp-pane.before .fm-field label, .cmp-pane.before .fm-input,
  .cmp-pane.before .fm-portal .ph span, .cmp-pane.before .fm-portal .pr span,
  .cmp-pane.before .fm-btn { font-size: 11px; }
  .cmp-pane.before .fm-input { min-height: 22px; padding: 4px 7px; }
  .cmp-pane.before .fm-portal .pr:nth-child(n+5) { display: none; }
  .cmp-pane.after .crm-search, .cmp-pane.after .crm-avstack,
  .cmp-pane.after .crm-div, .cmp-pane.after .crm-seg { display: none; }
  .cmp-pane.after .crm-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cmp-pane.after .crm-kpi:nth-child(n+3) { display: none; }
  .cmp-pane.after .crm-main { grid-template-rows: auto auto minmax(120px, 1fr); }
  .cmp-pane.after .crm-tbody { grid-template-rows: repeat(4, minmax(0,1fr)); }
  /* the grip must be grabbable, and the page must still scroll past it */
  .cmp-handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 120px; transform: translate(-50%, -50%); }
}
@media (pointer: coarse) { .cmp-handle, .cmp-handle .grip { touch-action: none; } }
@media (pointer: coarse) {
  .cmp-handle .grip { width: 52px; height: 52px; }
  .cmp-handle .grip svg { width: 24px; height: 24px; }
}
/* The single-column structure must reach the whole 0-900 band, not stop at 760,
   or the rail + side panel squeeze the main column to zero between 761 and 900. */
@media (max-width: 900px) {
  .cmp-pane.after .crm { grid-template-columns: minmax(0, 1fr); }
  .cmp-pane.after .crm-rail, .cmp-pane.after .crm-side, .cmp-pane.after .crm-card { display: none; }
  .cmp-pane.after .crm-body { grid-template-columns: minmax(0,1fr); grid-template-areas: "top" "main"; }
  .cmp-pane.after .crm-tbody .crm-tr:nth-child(n+5) { display: none; }
}

/* ---- Nav + CTAs: nothing may shrink, the Dutch labels must fit ---- */
@media (max-width: 620px) {
  .nav .container { gap: 10px; }
  .nav .brand { font-size: 18px; flex: none; padding-block: 8px; }
  .nav-burger { flex: none; width: 44px; height: 44px; }
  .nav-cta { flex: none; gap: 6px; }
  .nav-cta > .lang-toggle:not(.nav-links .lang-toggle) { display: none; }
  .nav-cta .btn-primary { flex: none; padding: 13px 12px; font-size: 12px; min-height: 44px; width: auto; white-space: nowrap; }
  .nav-links > .lang-toggle { display: inline-flex; align-self: flex-start; margin-top: 16px; }

  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.25; }
  .bg-word { display: none; }
  .cmp-hint, .metric-note, .foot-bottom, .foot-legal { font-size: 14px; }
  .foot-bottom .disc { opacity: 1; color: rgba(239,233,221,.72); font-size: 13px; }
}

/* ---- Touch targets ---- */
@media (pointer: coarse) {
  .nav-burger { width: 44px; height: 44px; }
  .lang-toggle button { min-height: 44px; min-width: 46px; padding: 0 13px; }
  .nav-cta .btn-primary, .nav-cta .btn-ghost { min-height: 44px; }
  .fmchat-x { padding: 13px; margin: -13px -13px -13px 0; }
  .fmchat-send { width: 44px; height: 44px; }
  .dash-icon-btn { width: 44px; height: 44px; }
}
@media (max-width: 900px) {
  .foot-col a { padding: 12px 0; }
  .foot-legal { line-height: 1; }
  .foot-legal a { display: inline-block; padding: 12px 6px; }
  .foot-bottom { gap: 8px 18px; }
}

/* ---- Chat: keyboard-aware, safe-area aware ---- */
@media (max-width: 620px) {
  .fmchat { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .fmchat-panel { height: min(70svh, calc(var(--vvh, 100svh) - 88px)); }
}
.fmchat-log { overscroll-behavior: contain; }

/* ---- Services rail: swipeable by default on touch, no 2019px ghost layer ---- */
@media (max-width: 860px) {
  .svc-track {
    overflow-x: auto; scroll-snap-type: x mandatory; will-change: auto;
    padding-bottom: 18px; padding-inline: 20px; margin-inline: -20px; scrollbar-width: none;
  }
  .svc-track::-webkit-scrollbar { display: none; }
  .svc { scroll-snap-align: start; min-height: 0; }
}


/* Landscape phones are ~844px WIDE, so a max-width query never catches them. */
@media (max-width: 1120px) and (max-height: 560px), (max-width: 620px) {
  .nav.open .nav-links {
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  }
}
/* Tablets keep the full-height stage but never got showFallback(), so the
   3D-only chrome was left orphaned on top of the hero. */
html.no3d .cin-label, html.no3d .cin-badge, html.no3d .scroll-cue, html.no3d .stage-glow { display: none !important; }
/* viewport-fit=cover exposes the notch: keep content out of it in landscape too. */
@supports (padding: env(safe-area-inset-left)) {
  .container, .rnav, .pnav, .rv-wrap, .lg-wrap, .pwrap {
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
  }
  @media (max-width: 620px) {
    .container, .rnav, .pnav, .rv-wrap, .lg-wrap, .pwrap {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
  }
  /* .hero-copy sits outside .container, so it needs the inset separately.
     Scoped by width, or the 32px floor beats the 20px mobile gutter and the
     headline sits 12px further in than every section below it. */
  @media (min-width: 901px) {
    .hero-copy {
      padding-left: max(32px, calc((100% - 1280px) / 2 + 32px), env(safe-area-inset-left));
      padding-right: max(32px, env(safe-area-inset-right));
    }
  }
  @media (max-width: 900px) {
    .hero-copy { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  }
  .seam + .seam::before, .section + .section::before {
    left:  max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
  }
  @media (min-width: 621px) {
    .seam + .seam::before, .section + .section::before {
      left:  max(32px, calc((100% - 1280px) / 2 + 32px), env(safe-area-inset-left));
      right: max(32px, calc((100% - 1280px) / 2 + 32px), env(safe-area-inset-right));
    }
  }
  footer { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  footer.rfoot { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) {
  .fmchat { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .tab-btn { min-height: 44px; }
  .lg-toc a { display: block; padding: 9px 0; }
}
@media (max-width: 860px) { .hero-copy h1.tagline { font-weight: 500; }
.hero-copy .tagline { max-width: 60ch; } }
@media (max-width: 340px) { .cmp-pane.before .fm-portal .pr:nth-child(n+4) { display: none; } }


/* ============================================================
   Round 3 — mobile corrections
   Everything below is measured at 375 x 667 unless stated.
   ============================================================ */

/* Reading text. Every component set its own px size, so raising body{}
   alone changed nothing: on a phone the whole page ran at 14.5-15.5px. */
@media (max-width: 620px) {
  .pain p, .feat p, .svc p, .step p, details.faq .ans,
  .price-for, .price-list li, .price-note, .vs-col li, .sp,
  .portal-points .sp, .stat-lbl, .foot-brand p, .foot-col a,
  .founder-facts span { font-size: 16px; }
  .section-head p, .lede { font-size: 17px; }

  /* clamp() floors were tuned for desktop; at 375px they orphan every heading */
  .section-head h2, .speed h2 { font-size: 32px; }
  .cta-panel h2 { font-size: 34px; }
  .section-head h2, .speed h2, .cta-panel h2, .hero-copy .wordmark { text-wrap: balance; }

  /* measure: these caps were px values that leave a quarter of the column empty */
  .metric { flex-wrap: wrap; }
  .metric .cap { max-width: none; }
  .step p { max-width: none; }
  .foot-brand p { max-width: none; }

  /* the id beat the .section rule, so the closing CTA kept 280px of dead padding */
  #cta { padding: 88px 0; }

  /* 38px tall, under the 44px floor */
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  .foot-col a { min-height: 44px; display: flex; align-items: center; }
}

/* The chat bubble is fixed over the bottom-right corner of every full-width
   button and of the footer. Reserve the space instead of overlapping it. */
@media (pointer: coarse) {
  /* reserve room for the fixed chat bubble on the footer, not on <body>:
     body padding paints the paper background below the coal footer */
  footer { padding-bottom: calc(44px + 76px + env(safe-area-inset-bottom, 0px)); }
  footer.rfoot { padding-bottom: calc(26px + 76px + env(safe-area-inset-bottom, 0px)); }
  .lang-toggle { gap: 0; }
  .lang-toggle button + button { border-left: 1px solid currentColor; }
  .linkbtn { min-height: 44px; padding: 0 8px; }
  .composer .btn { min-height: 44px; }
}

/* Chat panel. The old rule keyed off width, so landscape phones fell through to
   a 100vh calculation and the header — with the only close button — was pushed
   155px above the top of the screen once the keyboard opened. */
@media (pointer: coarse) {
  .fmchat-panel {
    height: min(70svh, calc(var(--vvh, 100svh) - 28px));
    max-height: calc(var(--vvh, 100svh) - 28px);
  }
}
@media (max-height: 520px) {
  .fmchat-sub { display: none; }
  .fmchat-head { padding: 10px 12px; }
  .fmchat-form { padding: 8px 10px 10px; }
  .fmchat-log { padding: 10px 12px; }
}
.fmchat-mail { padding: 12px; }

/* The old FileMaker toolbar wraps both of its labels onto second lines at 375px. */
@media (max-width: 620px) {
  .cmp-pane.before .fm-layoutname, .cmp-pane.before .fm-record { display: none; }
}

/* The services rail is driven by a pinned horizontal scroll. On a touch screen
   that is 2.5 extra screens of vertical swiping to move cards sideways, so every
   coarse pointer gets the native swipe rail instead — including iPads at 1180px. */
@media (pointer: coarse) {
  /* motion.js adds `no-pin`, not `is-rail`, when it refuses to pin on touch */
  #services { height: auto !important; }
  .svc-sticky { position: static; height: auto; display: block; }
  .svc-track { overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .svc { scroll-snap-align: start; }
  .svc-progress { display: none; }
}

/* The hero backdrop is sliced, so on a phone 228px is cut from each side and the
   annotations land off-screen. Fit it instead. */
@media (max-width: 900px) { .stage-bg { opacity: .5; } }

/* Three price cards and no way to act on any of them. */
.price-cta { margin-top: auto; }
.price-list { margin-bottom: 22px; }
@media (max-width: 620px) { .price-cta { width: 100%; } }

/* 901-1023px: mobile styles have ended, desktop assumes more room. */
@media (max-width: 1120px) and (min-width: 901px) {
  .price-for { min-height: 63px; }
}

/* Restored hero eyebrow: the element motion.js animates and i18n translates. */
.hero-copy .eyebrow { color: rgba(239,233,221,.72); margin-bottom: 18px; }
@media (max-width: 620px) { .hero-copy .eyebrow { margin-bottom: 12px; } }


/* ============================================================
   Round 4 — before/after compare
   ============================================================ */

/* The CRM row is an 8-track grid whose fixed tracks alone need 410px inside a
   301px box at 375px. The three fr tracks collapsed to 0 and the deal name,
   owner and next step disappeared while their avatars overflowed the row.
   Show three columns on a phone instead of eight. */
@media (max-width: 900px) {
  .cmp-pane.after .crm-tr {
    grid-template-columns: calc(16 * var(--px)) minmax(0, 1fr) auto;
    gap: var(--sp8);
  }
  .cmp-pane.after .crm-tr > *:nth-child(n+4) { display: none; }
  .cmp-pane.after .crm-chip,
  .cmp-pane.after .crm-icobtn { display: none; }
  .cmp-pane.after .crm-crumb > *:not(:last-child) { display: none; }
  .cmp-pane.after .crm-crumb { min-width: 0; }
}
/* 901-1000px still ran the full desktop top bar in a two-thirds-width pane. */
@media (min-width: 901px) and (max-width: 1180px) {
  .cmp-pane.after .crm-side { display: none; }
  .cmp-pane.after .crm-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "main";
  }
  .cmp-pane.after .crm-search { width: calc(150 * var(--px)); }
}

/* The old FileMaker pane sized itself in absolute px, so it shrank to 8px on a
   1440 desktop while the phone got 11px. Invert that back. */
@media (min-width: 901px) {
  .cmp-pane.before .mock-fm { font-size: 12px; line-height: 1.45; }
  .cmp-pane.before .fm-tool-btn, .cmp-pane.before .fm-record,
  .cmp-pane.before .fm-portal .ph span, .cmp-pane.before .fm-portal .pr span { font-size: 11px; }
  .cmp-pane.before .fm-tab, .cmp-pane.before .fm-field label,
  .cmp-pane.before .fm-input, .cmp-pane.before .fm-btn { font-size: 11.5px; }
  .cmp-pane.before .fm-input { min-height: 24px; padding: 5px 8px; }
  .cmp-pane.before .fm-body { padding: 22px 26px; gap: 13px 24px; }
}

/* Landscape phones got a 5:6 box 936px tall in a 390px viewport, which put the
   drag handle below the fold on the one control the section is built around. */
@media (max-width: 900px) and (orientation: landscape) {
  .compare { aspect-ratio: 16 / 10; }
}

/* Round 3 raised body copy but missed these four. */
@media (max-width: 620px) {
  .metric .cap, .bar-row .bl { font-size: 16px; }
  .founder-body h2, .portal-band-text h2 { text-wrap: balance; }
  .stat-num { font-size: clamp(36px, 9vw, 84px); }
}
@media (max-width: 900px) {
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
}

/* measure: 97ch in the problem rows, 83ch in the FAQ, 35ch in the process steps */
@media (min-width: 901px) {
  .pain { grid-template-columns: 90px 300px minmax(0, 62ch); }
  details.faq .ans { max-width: 68ch; }
  .step p { max-width: none; }
  .foot-brand p { max-width: 42ch; }
}

/* A message that was never stored must not look identical to one that was. */
.fmchat-msg.failed p {
  background: transparent;
  border: 1px dashed rgba(255,77,0,.55);
  color: var(--mist-warm, rgba(239,233,221,.7));
}