/* ═══════════════════════════════════════════════════════════════
   AIRMEP — Real-time retail management
   Design system codified in DESIGN.md.

   Order: webfonts → tokens → reset → shared elements → nav → hero →
   sections (features, dashboard, pricing, contact) → toast → footer →
   legal pages → reduced motion.
   ═══════════════════════════════════════════════════════════════ */

/* ─── SELF-HOSTED WEBFONTS ─────────────────────────────────────
   Geist + Geist Mono, SIL OFL — self-hosting needs no consent.
   Variable 100–900: one file per family+subset covers every weight.
   Regenerate from the Google Fonts css2 response if the subsets change. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ─── TOKENS ─── */
:root {
  --navy:        #243091;
  --navy-deep:   #1A2470;
  --navy-ink:    #131A4D;

  --g1-start:    #FF7C6E;
  --g1-end:      #F5317F;
  --g2-start:    #009999;
  --g2-end:      #00CC99;

  /* Lightened gradient-1 ramp — the shipped coral fails contrast as text on
     navy. These clear 4.4:1 at both ends. Text use only (see DESIGN.md §2.1). */
  --g1-text-start: #FF9A8E;
  --g1-text-end:   #FF6B94;

  --white:  #FFFFFF;
  --paper:  #F6F7FB;

  --on-dark:        rgba(255,255,255,0.96);
  --on-dark-muted:  rgba(255,255,255,0.76);
  --on-dark-soft:   rgba(255,255,255,0.56);
  --line-dark:      rgba(255,255,255,0.16);
  --line-dark-soft: rgba(255,255,255,0.08);
  --fill-dark:      rgba(255,255,255,0.035);
  --fill-dark-2:    rgba(255,255,255,0.06);

  /* Form error — a light red kept clear of the coral gradient so an invalid
     field still reads as an error, not a brand accent. */
  --danger:      #FF8B8B;
  --danger-ring: rgba(255,139,139,0.18);

  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(22px, 5vw, 76px);
  --maxw:   1200px;
  --nav-h:  62px;

  --r-sm:    8px;
  --r-btn:   10px;
  --r-chip:  12px;
  --r-panel: 14px;
  --r-pill:  999px;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  0.32s;
  --dur-fast: 0.18s;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) { :root { --nav-h: 74px; } }


/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--navy-ink);
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.nav-open { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--g1-text-start); text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: rgba(245,49,127,0.3); color: #fff; }


/* ─── A11Y ─── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 300;
  padding: 11px 18px; border-radius: var(--r-sm);
  background: var(--white); color: var(--navy);
  font: 600 14px/1 var(--font-sans); text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 12px; }

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


/* ─── SHARED: SECTIONS ─── */
.section {
  position: relative;
  padding: clamp(76px, 10vw, 120px) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.section--deep { background: var(--navy-deep); }
.section--ink  { background: var(--navy-ink); }

/* grain, carried across every section so the page reads as one surface */
.section::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: var(--grain);
  background-size: 200px 200px;
}
/* the gradient-1 seam as a section divider — the hairline fades at the gutters
   on its own (transparent stops at both ends), no mask needed */
.section::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 4%, rgba(255,124,110,0.5) 30%,
    rgba(245,49,127,0.5) 70%, transparent 96%);
}

.section-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; }

.section-head { max-width: 620px; margin: 0 0 clamp(40px, 6vw, 68px); }
.section-title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
.section-sub {
  margin: 18px 0 0;
  max-width: 48ch;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}


/* ─── SHARED: BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font: 500 15px/1 var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur) var(--ease);
}
.btn-arrow { width: 16px; height: 16px; flex: none; transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* White at rest / navy label; gradient-1 on hover. White text on the coral end
   of gradient 1 is 2.6:1 and cannot pass at any size — so the gradient only
   arrives on hover, which is exempt from the contrast rule. */
.btn--primary {
  background: var(--white); color: var(--navy);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55);
}
.btn--primary:hover {
  background: linear-gradient(96deg, var(--g1-start), var(--g1-end));
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -14px rgba(245,49,127,0.75);
}

.btn--ghost { border-color: var(--line-dark); color: var(--on-dark); }
.btn--ghost:hover { border-color: var(--on-dark-soft); background: var(--fill-dark-2); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }


/* ─── SHARED: SCROLL REVEAL ───
   Two per section: the heading block, then the body block a beat later
   (.reveal--lag). No per-item stagger below that. Scoped to .js so content
   isn't stranded invisible if the reveal script doesn't run.
   Same rise gesture as the hero [data-rise]: 16px / 0.65s. */
.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal--lag { transition-delay: 0.12s; }

/* Hero load choreography — the one orchestrated moment. Pure CSS animation:
   fires on parse, no JS gate, so a stalled script can't strand the fold and the
   hero paints on its own timeline. [data-rise] is the default. [data-fade] is
   the h1 only — Chrome excludes fully-transparent elements from LCP and the h1
   is the mobile LCP element, so it starts visible at 0.15 and fades in place
   with no transform (no offset position to expose). 16px / 0.65s / 90ms tuning
   so it matches .reveal. */
[data-rise], [data-fade] {
  animation-duration: 0.65s;
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
  animation-delay: calc(var(--d, 0) * 90ms);
}
[data-rise] { opacity: 0; animation-name: hero-rise; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
[data-fade] { opacity: 1; animation-name: hero-fade; }
@keyframes hero-fade {
  from { opacity: 0.15; }
  to   { opacity: 1; }
}


/* ═══════════ NAV ═══════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  color: var(--on-dark);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: 24px;
}

.nav--dark {
  background: rgba(19, 26, 77, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}
.nav--solid {
  background: rgba(19, 26, 77, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line-dark-soft);
}

.nav-brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand-logo { width: 128px; height: auto; }

.nav-links { display: none; align-items: center; gap: 28px; }
.nav-link {
  position: relative;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--on-dark-muted);
  transition: color var(--dur-fast) var(--ease);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-cta {
  display: none;
  font: 600 13.5px/1 var(--font-sans);
  padding: 10px 18px;
  border-radius: var(--r-btn);
  background: var(--white); color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-cta:hover {
  background: linear-gradient(96deg, var(--g1-start), var(--g1-end));
  color: var(--white);
  transform: translateY(-1px);
}

.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 20px; height: 1.5px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
  background: var(--navy-ink);
  padding: 28px var(--gutter) 48px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.nav-drawer.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear 0s;
}
.nav-drawer a:not(.btn) {
  font: 560 clamp(24px, 6vw, 30px)/1.1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--white);
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark-soft);
}
.nav-drawer a:not(.btn):hover { color: var(--g1-text-start); }
.nav-drawer .btn { margin-top: 28px; }
.nav-drawer-meta {
  margin-top: auto; padding-top: 40px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark-soft);
}

body.nav-open .nav {
  background: var(--navy-ink);
  border-bottom-color: var(--line-dark-soft);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

@media (min-width: 900px) {
  .nav-links, .nav-cta { display: inline-flex; }
  .nav-toggle, .nav-drawer { display: none; }
}
@media (max-width: 560px) { .brand-logo { width: 112px; } }


/* ═══════════ HERO ═══════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + clamp(40px, 8vh, 76px)) var(--gutter) 72px;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-ink);
}

/* Full-bleed photo. object-position leans right so the busier half of the
   frame shows on the right and the calmer half sits under the type. */
.hero-photo {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 50%;
}

/* Hard navy wedge from the left for type legibility, a softer top band so the
   nav reads, a low vignette so the lower chip separates from the floor. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg,
      rgba(19,26,77,0.9) 0%, rgba(19,26,77,0.68) 24%,
      rgba(19,26,77,0.26) 50%, rgba(19,26,77,0.04) 70%, transparent 86%),
    linear-gradient(180deg,
      rgba(19,26,77,0.5) 0%, transparent 22%,
      transparent 66%, rgba(19,26,77,0.46) 100%);
}

.hero-grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: var(--grain);
  background-size: 200px 200px;
}

.hero-inner { position: relative; width: 100%; min-width: 0; max-width: var(--maxw); margin: 0 auto; }
.hero-copy { min-width: 0; max-width: min(39rem, 100%); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 24px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-muted);
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--g1-end);
  animation: dot-pulse 2.4s var(--ease) infinite;
}
@keyframes dot-pulse {
  0%        { box-shadow: 0 0 0 0   rgba(245,49,127,0.6); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(245,49,127,0);   }
}

.hero-headline {
  margin: 0 0 20px;
  font-weight: 560;
  font-size: clamp(33px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--white);
  text-shadow: 0 1px 24px rgba(10,12,40,0.45);
  text-wrap: balance;
  overflow-wrap: break-word;
  /* Keeps the accent phrase off the lit half of the photo. The .hero-scrim
     wedge below is measured in viewport percent, but .hero-copy is a fixed
     39rem — so the narrower the window, the larger a share of it the copy
     column takes, and the further right the headline's last line runs. Between
     861px and 1104px that pushed "A tailored retail management" onto one line
     ending at ~61% of the viewport, where the wedge has decayed to ~0.13 and
     the lit shelving reads straight through the gradient (worst case 1.2:1).
     At >=1105px the headline already re-wraps so "management" starts a line at
     the gutter, back over the dark end of the wedge, which is why desktop
     looks right. Capping in em rather than px reproduces that same wrap across
     the whole band without a breakpoint: the cap scales with the font, so the
     phrase never fits on line one. Deliberately 12em — at >=1200px the column
     is still its full 624px, so desktop is untouched. */
  max-width: 12em;
}
/* The one accent phrase on the page — the lightened ramp, hero only. */
.hero-headline-accent {
  background: linear-gradient(96deg, var(--g1-text-start), var(--g1-text-end));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero-sub {
  margin: 0 0 32px;
  max-width: 42ch;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--on-dark-muted);
  text-shadow: 0 1px 16px rgba(10,12,40,0.4);
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.hero-actions .btn--ghost {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-color: rgba(255,255,255,0.34);
}

.trust {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 28px 0 0;
  font: 400 13px/1.4 var(--font-sans);
  letter-spacing: -0.006em;
  color: rgba(255,255,255,0.66);
  text-shadow: 0 1px 12px rgba(10,12,40,0.5);
}
.trust li { display: flex; align-items: center; gap: 10px; }
.trust li + li::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.55; flex: none;
}

/* Telemetry chips — diegetic UI pinned into the scene. Demo figures are fine
   here because the chip reads as "software reading the floor", not the page
   stating AIRMEP's own numbers. */
.chip {
  position: absolute; z-index: 2;
  max-width: min(260px, 44vw);
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 16px 12px 13px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-chip);
  background: rgba(17,22,64,0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 34px -20px rgba(0,0,0,0.8);
}
.chip .dot { margin-top: 4px; flex: none; }
.chip-1 { top: 19%; right: clamp(20px, 5vw, 84px); }
.chip-2 { bottom: 14%; right: clamp(24px, 9vw, 150px); }

.chip-label {
  display: block;
  font: 400 9.5px/1 var(--font-mono);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--white);
}
.chip-meta {
  display: block; margin-top: 7px;
  font: 450 12.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--on-dark-muted);
}
.chip-2 .chip-body { display: flex; flex-direction: column; gap: 8px; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.spark span {
  width: 5px; border-radius: 1px;
  background: linear-gradient(180deg, var(--g2-end), rgba(0,204,153,0.35));
}
.chip-value {
  display: flex; align-items: baseline; gap: 6px;
  font: 500 14px/1 var(--font-sans);
  color: var(--white);
}
.chip-value .up { font: 400 11px/1 var(--font-mono); color: var(--g2-end); }

@media (max-width: 1100px) {
  .chip-1 { right: 4%; }
  .chip-2 { right: 6%; }
}
@media (max-width: 860px) {
  .hero { align-items: flex-end; padding: calc(var(--nav-h) + 56px) var(--gutter) 48px; }
  .hero-photo { object-position: 58% 42%; }
  /* The old wedge dipped to ~0.1 opacity through the middle band, so on
     phones where the copy block's top (eyebrow, first headline line) lands
     there, the lit wood shelving showed through almost unmasked. Floor is
     now ~0.5 everywhere so legibility doesn't depend on which part of the
     photo happens to sit behind the text. */
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(19,26,77,0.64) 0%, rgba(19,26,77,0.48) 20%,
      rgba(19,26,77,0.52) 42%, rgba(19,26,77,0.66) 62%,
      rgba(19,26,77,0.9) 85%, rgba(19,26,77,0.97) 100%);
  }
  .hero-copy { max-width: none; }
  /* Desktop's 1.06 is tight enough that the pink highlight box (below) on
     "management" touches the lines above/below it when the accent phrase
     wraps. More room only needed here, where the box exists.
     The 12em cap is dropped with it: it exists to keep the accent phrase off
     the lit half of the photo, and down here the highlight box carries that
     job instead — leaving the cap on would only wrap the headline early. */
  .hero-headline { line-height: 1.3; max-width: none; }
  /* The eyebrow's desktop background (rgba(0,0,0,0.2)) leans on the
     horizontal wedge already darkening what's behind it; that wedge doesn't
     exist here, so the pill needs to carry more of its own contrast. */
  .eyebrow { background: rgba(9,13,42,0.62); border-color: rgba(255,255,255,0.22); }
  /* The lightened ramp is 4.4–5.8:1 against solid navy-ink, but on mobile
     this phrase sits on photo+scrim, not solid navy — plain white replaced
     it at first, but that read as flat. Reuses the brand's pink (already
     the eyebrow dot / chip accent color) as a highlight behind the phrase
     instead, at 0.85 alpha so a hint of the photo still shows through
     rather than a flat sticker. That's safe here specifically because the
     mobile .hero-scrim floor (above) already keeps this whole area darker
     than the pink itself — blending in any amount of that backdrop only
     pulls the composite color further from white, so contrast holds at
     ~3.9–4.4:1 across sampled real backgrounds (better than the ~3.7:1 the
     fully solid fill gave). Padding stays deliberately tight:
     .hero-headline's line-height (1.06) leaves almost no gap between
     wrapped lines, so a spacious pill would collide with the line
     above/below — this hugs the glyphs like a highlighter pen instead.
     background-clip resets to border-box because the desktop rule clips
     its gradient to the text shape. box-decoration-break: clone gives each
     wrapped line its own full padding + rounded corners — without it
     (the default, "slice") only the true start/end of the run get padding,
     so a line-wrap wouldn't have any breathing room on that inner edge (the
     last letter of "retail" sat flush against the box edge when it broke
     before "management"). Two independently-rounded chips reads slightly
     less "one continuous run" than slice does, but doesn't crowd the type. */
  .hero-headline-accent {
    background: rgba(245,49,127,0.85);
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: var(--white); color: var(--white);
    padding: 0.03em 0.22em;
    border-radius: 0.22em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  /* Both telemetry chips are hidden below 860px — on a narrow crop the top
     chip is the first thing on screen, ahead of the headline, and reads as
     more important than it is. The chips are diegetic decoration, not copy. */
  .chip-1, .chip-2 { display: none; }
}
@media (max-width: 560px) {
  .hero-headline { font-size: clamp(26px, 7.2vw, 34px); letter-spacing: -0.028em; text-wrap: pretty; }
  .hero-sub { max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .trust { flex-direction: column; gap: 9px; }
  .trust li + li::before { display: none; }
}


/* ═══════════ FEATURES ═══════════
   "Business Intelligence On-The-Go" — three parallel capabilities, not a
   sequence, so no numbered markers. A hairline-separated spec-sheet: the
   capability name as a strong term on the left, the description on the right,
   each term flagged with the short gradient-1 rule from the brand. Paired,
   from 900px, with the mobile-app mockup — the one place "on-the-go" is shown
   rather than stated. */
.features-body { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 52px); }
.features-visual { justify-self: center; max-width: 300px; }
.features-visual picture { display: block; }
.features-visual img { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  .features-body {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .features-visual { justify-self: start; max-width: 430px; }
}

.features-list { border-top: 1px solid var(--line-dark); }
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--line-dark);
}
.feature-title {
  position: relative;
  padding-top: 16px;
  font-size: 20px; font-weight: 560;
  letter-spacing: -0.02em; color: var(--white);
}
.feature-title::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 34px; height: 2px;
  background: linear-gradient(90deg, var(--g1-start), var(--g1-end));
}
.feature-text {
  max-width: 60ch;
  font-size: 15px; line-height: 1.65;
  letter-spacing: -0.006em;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

@media (min-width: 760px) {
  .feature-row { grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); gap: 48px; align-items: start; }
  .feature-text { padding-top: 16px; }
}


/* ═══════════ DASHBOARD ═══════════
   "One Dashboard to Rule It All" — tabs switch the copy; the screenshot is
   context. The capture is a self-contained mockup (laptop bezel, shadow and
   the charts crop baked into the PNG — see .dash-figure). minmax(0,1fr) keeps
   that wide image from blowing the single-column grid out on mobile. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 60px); align-items: start; }
.dash-copy, .dash-visual { min-width: 0; }
@media (min-width: 900px) {
  .dash-grid { grid-template-columns: minmax(0, 32ch) minmax(0, 1fr); gap: 60px; }
}

.dash-tabs { display: flex; flex-direction: column; border-left: 1px solid var(--line-dark); }
.dash-tab {
  position: relative;
  text-align: left;
  background: none; border: 0;
  padding: 15px 0 15px 20px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--on-dark-soft);
  font: 500 clamp(16px, 1.7vw, 19px)/1.25 var(--font-sans);
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dash-tab:hover { color: var(--on-dark); }
.dash-tab[aria-selected="true"] { color: var(--white); border-left-color: var(--g1-end); }

.dash-panel { margin-top: 24px; }
.dash-panel p {
  max-width: 42ch;
  font-size: 15px; line-height: 1.7;
  letter-spacing: -0.006em;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

/* The capture ships as a self-contained mockup: the laptop bezel, a soft
   drop-shadow, and the crop to charts + KPI tiles + donut breakdowns (not the
   ranking tables below) are all baked into the PNG. The figure only sizes it. */
.dash-figure {
  margin: 0;
}
.dash-figure img {
  display: block;
  width: 100%;
  height: auto;
}


/* ═══════════ PRICING ═══════════
   The one card grid on the page — a tier comparison is the one place cards
   are the right form. */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.pricing-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-panel);
  background: var(--fill-dark);
}
/* Featured tier: a real gradient-1 border via the padding-box / border-box
   layering trick — the ring is the gradient, the fill is an OPAQUE navy so
   the gradient shows only in the 1px border (a translucent fill would let it
   bleed through the whole card). ~= a lifted card on --navy-deep. */
.pricing-card--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(#232D76, #232D76) padding-box,
    linear-gradient(120deg, var(--g1-start), var(--g1-end)) border-box;
}
.pricing-badge {
  position: absolute; top: -12px; left: 24px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--white);
  font: 600 11px/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--navy);
}
.pricing-term {
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
.pricing-price {
  display: flex; align-items: baseline; gap: 4px;
  margin: 14px 0 4px;
  font: 500 clamp(30px, 3vw, 40px)/1 var(--font-mono);
  letter-spacing: -0.01em;
  color: var(--white);
}
/* The /user unit rides the figure's baseline in SANS, not mono — so it reads as
   a label beside the number rather than a second figure (cf. .chip-meta under
   .chip-label). Smaller and muted; the em-dash of .pricing-unit carries the
   rest of the detail. */
.pricing-price .per {
  font: 450 13px/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--on-dark-muted);
}
/* .was (struck anchor) is unused for now — kept for a future "$30 → $24" treatment. */
.pricing-price .was {
  font: 400 14px/1 var(--font-mono);
  color: var(--on-dark-soft);
  text-decoration: line-through;
}
.pricing-unit {
  font-size: 13.5px; line-height: 1.5;
  color: var(--on-dark-muted);
}
/* Only the two committed-term cards carry this — the saving vs the
   month-to-month rate. Green = the "positive" gradient end (cf. .guarantees svg). */
.pricing-save {
  margin-top: 12px;
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--g2-end);
}
/* One CTA for the whole grid — the tiers have no per-card action (all roads
   lead to the same contact form), so per-card buttons were just noise. */
.pricing-cta {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin-top: 32px;
  text-align: center;
}
.pricing-cta-text {
  font-size: 14px; letter-spacing: -0.006em;
  color: var(--on-dark-muted);
}

.guarantees {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.guarantees li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; letter-spacing: -0.006em;
  color: var(--on-dark-muted);
}
.guarantees svg { width: 16px; height: 16px; flex: none; color: var(--g2-end); }


/* ═══════════ CONTACT ═══════════ */
.contact-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(36px, 6vw, 64px); align-items: start;
  max-width: var(--maxw); margin: 0 auto;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 560; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
.contact-body {
  margin: 16px 0 0; max-width: 40ch;
  font-size: 16px; line-height: 1.6;
  color: var(--on-dark-muted);
}
.contact-ticks { margin: 28px 0 0; display: grid; gap: 12px; }
.contact-ticks li {
  position: relative; padding-left: 26px;
  font-size: 14px; color: var(--on-dark);
}
.contact-ticks li::before {
  content: ''; position: absolute; left: 2px; top: 5px;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--g1-text-start);
  border-bottom: 1.5px solid var(--g1-text-start);
  transform: rotate(-45deg);
}
.contact-mail {
  display: inline-block; margin-top: 28px;
  font: 500 14.5px/1 var(--font-sans);
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 4px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.contact-mail:hover { color: var(--white); border-color: var(--g1-text-end); }

.contact-form {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-panel);
  background: var(--fill-dark);
  padding: clamp(22px, 3vw, 30px);
}
.form-title {
  margin: 0; padding-bottom: 16px;
  border-bottom: 1px solid var(--line-dark-soft);
  font-size: 17px; font-weight: 560; letter-spacing: -0.015em;
  color: var(--white);
}

.field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.field label {
  font: 400 9.5px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-sans); font-size: 15px;
  padding: 12px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.04);
  color: var(--white);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-soft); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--g1-text-start);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(255,124,110,0.16);
}
.field textarea { resize: vertical; min-height: 100px; }

.field-error { display: none; font-size: 12.5px; color: var(--danger); }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field.has-error input:focus, .field.has-error textarea:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-ring);
}

/* Anti-spam decoy field — off-screen rather than display:none or .sr-only;
   .sr-only would let screen-reader users fill it and be silently rejected. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Turnstile renders in a cross-origin iframe — only this wrapper is styleable.
   size:'flexible' tracks the container but has a 300px floor; the clip is a
   last-resort guard against a sideways-scrolling page on a very narrow screen. */
.field--turnstile { gap: 0; max-width: 100%; overflow: hidden; }
.field--turnstile .field-error { margin-top: 7px; }

.contact-form .btn--block { margin-top: 22px; }
.form-status { margin-top: 14px; font-size: 13px; min-height: 1.2em; color: var(--on-dark-muted); }
.form-status.is-ok  { color: var(--g2-end); }
.form-status.is-err { color: var(--danger); }
.form-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--on-dark-soft); }


/* ─── TOAST ─── */
.toast {
  position: fixed; left: 50%; bottom: clamp(20px, 4vw, 32px);
  z-index: 250;
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 420px);
  padding: 14px 16px;
  border-radius: var(--r-btn);
  background: var(--navy);
  color: var(--white);
  font-size: 14px; line-height: 1.4;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
  opacity: 0; transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.is-ok  { background: #0E6B53; }
.toast.is-err { background: #8E2740; }
.toast-msg { flex: 1; margin: 0; }
.toast-close {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: inherit; opacity: 0.7;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.toast-close:hover { opacity: 1; background: rgba(255,255,255,0.12); }


/* ═══════════ FOOTER ═══════════ */
.footer {
  position: relative;
  background: var(--navy-ink);
  border-top: 1px solid var(--line-dark);
  padding: clamp(52px, 6vw, 76px) var(--gutter) 30px;
}
.footer-inner { max-width: var(--maxw); margin: 0 auto; }
.footer-top {
  display: grid; gap: 36px;
  padding-bottom: 32px; border-bottom: 1px solid var(--line-dark-soft);
}
.footer-brand { display: inline-flex; }
.footer-tag {
  margin-top: 14px; max-width: 34ch;
  font-size: 13.5px; line-height: 1.6;
  color: var(--on-dark-muted);
}
.footer-col-title {
  margin: 0 0 14px;
  font: 400 9.5px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
.footer-links { display: grid; gap: 11px; }
.footer-links a {
  font-size: 14px; color: var(--on-dark-muted);
  transition: color var(--dur-fast) var(--ease);
}
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px;
  padding-top: 24px;
  font-size: 12.5px; color: var(--on-dark-soft);
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal a {
  font-size: 12.5px; color: var(--on-dark-soft);
  transition: color var(--dur-fast) var(--ease);
}
.footer-legal a:hover { color: var(--white); }

@media (min-width: 760px) {
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
}


/* ═══════════ LEGAL PAGES ═══════════
   privacy-policy.html and any future legal page. No .hero, so js/script.js
   pins the nav solid from load (the `if (!hero)` branch). */
.legal-page {
  background: var(--navy-ink);
  padding-top: var(--nav-h);
  min-height: 100svh;
}
.legal-container {
  max-width: 720px; margin: 0 auto;
  padding: clamp(48px, 7vw, 76px) var(--gutter) clamp(64px, 8vw, 96px);
}
.legal-title {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 560; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--white);
}
.legal-updated {
  margin-top: 12px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.06em; color: var(--on-dark-soft);
}
.legal-container > p:first-of-type { margin-top: 32px; }
.legal-container p {
  font-size: 15px; line-height: 1.75;
  color: var(--on-dark-muted);
  margin-top: 16px;
}
.legal-container strong { color: var(--white); font-weight: 600; }
.legal-container a {
  color: var(--g1-text-start);
  border-bottom: 1px solid var(--line-dark);
  transition: border-color var(--dur-fast) var(--ease);
}
.legal-container a:hover { border-color: var(--g1-text-end); }
.legal-container h2 {
  font-size: clamp(19px, 2.6vw, 23px);
  font-weight: 560; letter-spacing: -0.02em;
  color: var(--white);
  margin-top: 44px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-dark-soft);
}
.legal-container h3 {
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--g1-text-start);
  margin-top: 26px;
}
.legal-container ul { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.legal-container ul li {
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.65;
  color: var(--on-dark-muted);
}
.legal-container ul li::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--g1-text-start); }


/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-rise], [data-fade] { opacity: 1 !important; animation: none !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}