/* ORBIT Marketing Website
   Aligned to the TRAMM design language so ORBIT reads as part of the same suite:
   Raleway throughout, white ground, deep navy ink, brand-blue accent with a
   mustard highlight, pill CTAs in uppercase.

   Tokens below mirror TRAMM's own CSS variables 1:1 where they exist:
     brand-dark-blue #001626 · brand-blue #0080c7 · light-blue #19afff
     medium-blue #00507a · mustard #c7c214 · light-grey #d9d9d9
   (#19afff is already ORBIT's product icon blue, which is what made the two
   palettes converge so cleanly.)

   The variable names are unchanged — --serif is now simply the display face —
   so the whole page re-skins from here rather than through hundreds of edits.
*/

:root {
  --bg:        #ffffff;   /* TRAMM ground is white, not warm paper */
  --surface:   #f2f6f9;   /* alt sections — the faintest blue-grey */
  --card:      #ffffff;
  --border:    #dde5ec;   /* cool hairline */
  --border-hi: #c3d2de;
  --accent:    #0080c7;   /* --color--brand-blue */
  --accent-br: #19afff;   /* --color--light-blue */
  --accent-dk: #00507a;   /* --color--medium-blue */
  --mustard:   #c7c214;   /* --color--mustard — TRAMM's primary CTA fill */
  --mustard-br:#d8d31c;   /* hover lift on the mustard */
  --a-pale:    rgba(0,128,199,0.07);
  --a-glow:    rgba(0,128,199,0.18);
  --ink:       #001626;   /* --color--brand-dark-blue */
  --text:      #001626;
  --text-2:    #42596b;   /* body — navy-grey */
  --text-3:    #7b93a5;   /* muted labels */
  --green:     #0f9d74;
  --blue:      #0080c7;
  --purple:    #5b6fd6;
  --amber:     #a89a10;
  --serif:     'Raleway', system-ui, sans-serif;   /* display face */
  --sans:      'Raleway', system-ui, sans-serif;
  --mono:      'DM Mono', 'Fira Mono', monospace;  /* data labels in product shots */
  --r:         8px;
  --r-lg:      15px;
  --r-pill:    100px;
  /* The single rounded corner on a CTA — top-left. Measured off TRAMM's button
     at ~0.20 of its height; these hold that ratio at both of ORBIT's sizes. */
  --r-cut:     9px;
  --r-cut-lg:  11px;
  --shadow-sm: 0 1px 2px rgba(0,22,38,0.04), 0 2px 8px rgba(0,22,38,0.05);
  --shadow-md: 0 2px 6px rgba(0,22,38,0.06), 0 14px 40px rgba(0,22,38,0.09);
  --shadow-shot: 0 4px 12px rgba(0,22,38,0.12), 0 28px 68px rgba(0,22,38,0.20);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--bg); color:var(--text-2); line-height:1.68; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img, svg { display:block; max-width:100%; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:rgba(0,128,199,0.16); color:var(--ink); }

.container { max-width:1160px; margin:0 auto; padding:0 32px; }
section { padding:120px 0; }
section.alt { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ── Type scale ── */
h1,h2,h3 { font-family:var(--serif); color:var(--ink); text-wrap:balance; }
h1 { font-size:clamp(2.5rem,5.4vw,4.5rem); font-weight:800; line-height:1.12; letter-spacing:-0.015em; }
h2 { font-size:clamp(1.85rem,3.7vw,3rem); font-weight:700; line-height:1.17; letter-spacing:-0.012em; }
h3 { font-size:1.125rem; font-weight:700; line-height:1.34; }
p { color:var(--text-2); }
strong { color:var(--ink); font-weight:600; }

/* ── Section eyebrow ─────────────────────────────────────────────────────────
   TRAMM has no pill component: their labels are plain uppercase Raleway with
   letter-spacing:1.54px. The rounded capsule with a leading dot read as stock
   template furniture, so it's gone — replaced by that letter-spaced label and a
   short rule, which also picks up the straight-edged geometry of the CTAs. */
.pill {
  display:inline-flex; align-items:center; gap:13px;
  background:none; border:none; padding:0; border-radius:0;
  color:var(--accent);
  font-size:0.8125rem; font-weight:700; letter-spacing:1.54px;
  text-transform:uppercase; margin-bottom:20px;
}
.pill::before {
  content:''; display:block; width:30px; height:2px;
  background:var(--accent-br); flex-shrink:0;
}
/* Centred section headers: the rule reads better centred under nothing, so it
   sits inline to the left of the label and the pair is centred as a unit. */
.sh .pill { margin-bottom:18px; }

.sh { text-align:center; margin-bottom:74px; }
.sh h2 { margin-bottom:15px; }
.sh p { max-width:540px; margin:0 auto; font-size:1.05rem; line-height:1.72; }

/* ── Buttons ────────────────────────────────────────────────────────────────
   TRAMM's CTA: a rectangle with only the TOP-LEFT corner rounded. Measured off
   their button — 2px #19afff border, white fill, #001626 text, radius ~0.20 of
   the button height, other three corners square. Their utility classes carry the
   same idea (.rounded-tl-12, .rounded-tl-16, .rounded-tl-30).

   The outline is the house button. Primary fills with the brand blue so a page
   still has one clear first action; everything else about the two is identical. */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 26px; border-radius:var(--r-cut) 0 0 0;
  font-family:var(--sans); font-size:0.79rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.07em;
  cursor:pointer; border:2px solid transparent; text-decoration:none;
  transition:all 0.18s ease; white-space:nowrap;
}
.btn-primary {
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.btn-primary:hover {
  background:var(--accent-br); border-color:var(--accent-br);
  color:#fff; text-decoration:none;
}
/* The reference button, exactly: white ground, light-blue rule, navy label. */
.btn-ghost {
  background:#fff; color:var(--ink); border-color:var(--accent-br);
}
.btn-ghost:hover {
  background:var(--a-pale); border-color:var(--accent);
  color:var(--ink); text-decoration:none;
}
.btn-lg { padding:14px 32px; font-size:0.84rem; border-radius:var(--r-cut-lg) 0 0 0; }


/* ── Nav ── */
nav {
  position:sticky; top:0; z-index:100;
  height:66px; background:rgba(255,255,255,0.82);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid transparent; transition:border-color 0.28s, box-shadow 0.28s;
}
nav.up { border-bottom-color:var(--border); box-shadow:0 1px 20px rgba(0,22,38,0.06); }
.nav-in { max-width:1160px; margin:0 auto; padding:0 32px; height:100%; display:flex; align-items:center; }
.logo {
  display:flex; align-items:center; gap:9px;
  font-family:var(--serif); font-size:1.2rem; font-weight:700;
  color:var(--ink); letter-spacing:0.05em; flex-shrink:0; margin-right:28px;
}
.logo:hover { text-decoration:none; color:var(--ink); }
/* The header mark is drawn larger than the footer one so it holds its own
   against the wordmark. */
nav .logo svg { width:40px; height:40px; }
nav .logo { gap:11px; font-size:1.55rem; }
/* Nine one-word-ish labels, centred in the space between the wordmark and the
   button. Labels are kept short on purpose: two-word labels wrapped onto a
   second line and broke the bar's baseline. */
.nav-links { display:flex; justify-content:center; list-style:none; gap:0; flex:1; min-width:0; }
.nav-links a {
  position:relative; display:block; padding:8px 10px;
  color:var(--text-2); font-size:0.84rem; font-weight:500; line-height:1;
  white-space:nowrap; transition:color 0.15s;
}
/* A short brand-blue rule grows in under the hovered label, rather than a pill. */
.nav-links a::after {
  content:''; position:absolute; left:10px; right:10px; bottom:2px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform 0.2s ease;
}
.nav-links a:hover { color:var(--accent); text-decoration:none; }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-right { margin-left:auto; padding-left:20px; flex-shrink:0; }
/* The bar is 66px tall; the full-size button looked heavy in it. */
.btn-nav { padding:9px 18px; font-size:0.72rem; }

/* ── Hero ── */
#hero { padding:104px 0 92px; position:relative; overflow:hidden; }
#hero::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(0,22,38,0.055) 1px, transparent 1px);
  background-size:30px 30px; pointer-events:none;
}
#hero::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 78% 92% at 38% 52%, transparent 30%, var(--bg) 82%);
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1fr 0.9fr; gap:60px; align-items:center; position:relative; z-index:1; }
/* The product name on its own line above the proposition. Letter-spaced so it
   reads as the wordmark rather than the first word of the sentence — the same
   device the video title cards use. Left in navy: the eyebrow above and "run"
   below are already blue, and a third blue element competes with both. */
.hero-brand {
  display:block; letter-spacing:0.07em; margin-bottom:0.06em;
}
.hero-em {
  font-style:italic;
  background:linear-gradient(115deg,var(--accent) 0%,var(--accent-br) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-lead { font-size:1.12rem; line-height:1.76; max-width:495px; margin:24px 0 40px; color:var(--text-2); }
.hero-ctas { display:flex; gap:13px; flex-wrap:wrap; }
.hero-stats { display:flex; margin-top:58px; padding-top:42px; border-top:1px solid var(--border); }
.hstat { flex:1; }
.hstat+.hstat { border-left:1px solid var(--border); padding-left:32px; }
.hstat-num { display:block; font-family:var(--mono); font-size:1.95rem; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-0.02em; }
.hstat-lbl { display:block; font-size:0.75rem; color:var(--text-3); margin-top:9px; line-height:1.45; }

/* Framed product shot (dark app screenshot on the light page) */
.hero-map-wrap {
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-hi);
  background:#001626;
  box-shadow:var(--shadow-shot);
}
.chrome { background:#0d1521; padding:11px 16px; border-bottom:1px solid #1c2a3f; display:flex; align-items:center; gap:6px; }
.cd { width:10px; height:10px; border-radius:50%; }
.cr { background:#ff5f57; } .cy { background:#febc2e; } .cg { background:#28c840; }
.ct { margin-left:10px; font-family:var(--mono); font-size:0.7rem; color:#5b718c; flex:1; }
.ct span { color:#8ea6c2; }

/* ── How it works ── */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; }
.steps::before {
  content:''; position:absolute; top:24px;
  left:calc(33.33% + 10px); right:calc(33.33% + 10px); height:1px;
  background:linear-gradient(90deg,var(--accent),var(--blue)); opacity:0.28;
}
.step {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px 30px;
  box-shadow:var(--shadow-sm);
  transition:transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.step:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-hi); }
.step-n { width:46px; height:46px; border-radius:var(--r); background:var(--a-pale); border:1px solid rgba(0,128,199,0.2); color:var(--accent); font-family:var(--mono); font-size:1rem; font-weight:500; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.step h3 { margin-bottom:11px; }
.step p { font-size:0.885rem; line-height:1.66; }

/* ── Features ── */
.feat-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.feat-item {
  display:flex; gap:18px; align-items:flex-start;
  padding:26px 28px; background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.feat-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-hi); }
.feat-icon-wrap { width:42px; height:42px; flex-shrink:0; border-radius:var(--r); background:var(--a-pale); display:flex; align-items:center; justify-content:center; color:var(--accent); }

/* ── Icons ───────────────────────────────────────────────────────────────────
   Custom ORBIT set, defined once as an inline <symbol> sprite at the top of the
   page and referenced with <use>. These replaced emoji, which rendered in each
   platform's own font — the site looked materially different on Windows, macOS
   and Android, and none of the three matched the brand.
   Colour comes from the chip's `color` and reaches the icon through
   `currentColor`. That indirection is load-bearing: <use> clones into a shadow
   tree that this stylesheet cannot select into, so inherited properties are the
   only way in. Stroke widths and fills therefore live on the symbols
   themselves, not here. */
.ico { width:22px; height:22px; display:block; }
.feat-item h3 { font-size:1rem; margin-bottom:6px; }
.feat-item p { font-size:0.86rem; line-height:1.62; }

/* ── Spotlights ── */
.spot { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.spot.flip { direction:rtl; }
.spot.flip > * { direction:ltr; }
.spot-text h2 { margin-bottom:16px; }
.spot-text > p { margin-bottom:28px; font-size:1.02rem; }
/* A footnote under a checks list: smaller and quieter than the lead paragraph. */
.spot-text > p.spot-note { margin:22px 0 0; font-size:0.82rem; color:var(--text-3); line-height:1.6; }
.spot-text > p.spot-note b { color:var(--text-2); }
/* ── Sample documents ────────────────────────────────────────────────────────
   Two real PDFs, each fronted by a preview drawn in the same way as every other
   mockup on this page. The preview is white paper on the page's own ground
   rather than the dark product chrome, because that is what the file actually
   looks like when it lands in someone's inbox. */
.doc-block { margin-top:104px; }
.doc-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:44px; }
.doc-card {
  display:flex; flex-direction:column; gap:22px;
  padding:26px 26px 24px; border-radius:calc(var(--r) * 2);
  background:var(--bg); border:1px solid var(--border);
  color:inherit; text-decoration:none;
  transition:border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.doc-card:hover {
  text-decoration:none; transform:translateY(-3px);
  border-color:rgba(0,128,199,0.38); box-shadow:0 18px 38px -22px rgba(0,22,38,0.42);
}
/* The paper itself: a real drop shadow, and a top edge that keeps the orange
   division band visible even when the preview is scaled right down. */
.doc-paper {
  border-radius:4px; overflow:hidden; background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 26px -14px rgba(0,22,38,0.34);
}
.doc-paper svg { display:block; width:100%; height:auto; }
.doc-kind {
  display:inline-block; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--accent); margin-bottom:9px;
}
.doc-card h3 { font-size:1.16rem; margin-bottom:9px; }
.doc-card p { font-size:0.88rem; color:var(--text-2); line-height:1.62; margin-bottom:14px; }
.doc-dl { font-size:0.85rem; font-weight:600; color:var(--accent); }
.doc-card:hover .doc-dl { text-decoration:underline; }
.doc-note { margin-top:30px; text-align:center; font-size:0.82rem; color:var(--text-3); }

.checks { list-style:none; display:flex; flex-direction:column; gap:11px; }
/* The tick is absolutely positioned rather than a flex sibling. As a flex row, any
   inline <strong> in the text became its own flex item and broke the bullet into
   two columns — geometry below is identical to the old 19px tick + 12px gap. */
.checks li { position:relative; padding-left:31px; font-size:0.9rem; color:var(--text-2); line-height:1.58; }
.checks li::before {
  content:'✓'; position:absolute; left:0; top:1px;
  width:19px; height:19px; border-radius:50%;
  background:rgba(15,157,116,0.12); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:0.64rem; font-weight:900;
}
.mockup { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border-hi); background:#001626; box-shadow:var(--shadow-shot); }

/* ── Editions (two modes) ── */
.ed-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ed-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:42px 38px; box-shadow:var(--shadow-sm);
  transition:transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.ed-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-hi); }
.ed-card.ed-pop { border-color:rgba(0,128,199,0.28); box-shadow:0 4px 14px rgba(0,128,199,0.10), 0 20px 50px rgba(0,128,199,0.12); }
.ed-tag { font-family:var(--mono); font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.13em; color:var(--accent); margin-bottom:13px; }
.ed-card h3 { font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--ink); margin-bottom:12px; letter-spacing:-0.01em; line-height:1.18; }
.ed-card > p { font-size:0.95rem; line-height:1.68; margin-bottom:24px; }
.ed-arrow { text-align:center; margin-top:40px; font-family:var(--mono); font-size:0.8rem; color:var(--text-3); }
.ed-arrow b { color:var(--accent); }

/* Framed real product screenshots reuse .mockup; give the image a clean edge */
.mockup img { display:block; width:100%; }

/* ── Industries ── */
.ind-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ind-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 26px; display:flex; gap:15px; align-items:flex-start; box-shadow:var(--shadow-sm); transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.ind-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-hi); }
.ind-em { line-height:1; flex-shrink:0; color:var(--accent); }
.ind-em .ico { width:27px; height:27px; }
.ind-card h3 { font-size:0.94rem; margin-bottom:5px; }
.ind-card p { font-size:0.82rem; line-height:1.58; }

.stat-bar {
  background:var(--ink); color:#fff;
  border-radius:var(--r-lg); padding:50px;
  display:flex; align-items:center; justify-content:center; gap:64px; flex-wrap:wrap;
  box-shadow:var(--shadow-md);
}
/* Light blue, not the brand blue: this sits on the navy bar, where #0080c7 is
   too close to the ground to read. The same choice the product shots make. */
.stat-val { font-family:var(--mono); font-size:3rem; font-weight:500; color:var(--accent-br); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.stat-lbl { font-size:0.82rem; color:rgba(255,255,255,0.6); margin-top:9px; }
.stat-div { width:1px; height:58px; background:rgba(255,255,255,0.16); }

/* ── Roadmap ── */
.road-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.road-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:30px; display:flex; gap:18px;
  align-items:flex-start; box-shadow:var(--shadow-sm);
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.road-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-hi); }
.road-ic { width:46px; height:46px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.road-ic .ico { width:24px; height:24px; }
/* Each tint carries the matching stroke colour, which the icon picks up. */
.ic-blue { background:rgba(47,127,224,0.12); color:var(--blue); }
.ic-purple { background:rgba(125,91,230,0.12); color:var(--purple); }
.ic-green { background:rgba(15,157,116,0.12); color:var(--green); }
.ic-amber { background:rgba(201,138,18,0.14); color:var(--amber); }
.rtag { display:inline-flex; align-items:center; padding:2px 9px; border-radius:5px; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:9px; }
.t-soon { background:rgba(47,127,224,0.12); color:var(--blue); }
.t-dev  { background:rgba(201,138,18,0.15); color:var(--amber); }
.road-h { font-size:1.02rem; font-weight:600; margin-bottom:7px; font-family:var(--serif); color:var(--ink); letter-spacing:-0.005em; }
.road-p { font-size:0.86rem; line-height:1.62; }

/* ── Pricing ── */
.p-intro { text-align:center; margin-bottom:50px; }
.p-intro h2 { margin-bottom:14px; }
.p-intro > p { max-width:520px; margin:0 auto; }
.p-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:24px; }
/* Two-up variant. This lived in an inline style, which outranks the mobile media
   query below — so the grid stayed 2-up at 390px and pushed the whole page into a
   horizontal scroll. As a class it can be overridden, but note the breakpoint has
   to name `.p-grid.two` explicitly: two classes outrank one whatever the order. */
.p-grid.two { grid-template-columns:repeat(2,1fr); max-width:840px; margin-left:auto; margin-right:auto; }
.p-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:34px;
  box-shadow:var(--shadow-sm);
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.p-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-hi); }
.p-card.pop {
  border-color:rgba(0,128,199,0.3);
  box-shadow:0 4px 14px rgba(0,128,199,0.10), 0 20px 50px rgba(0,128,199,0.12);
  position:relative;
}
.p-card.pop::before { content:'Most Popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-family:var(--mono); font-size:0.64rem; font-weight:500; text-transform:uppercase; letter-spacing:0.09em; padding:4px 14px; border-radius:var(--r-pill); white-space:nowrap; box-shadow:0 4px 12px rgba(0,128,199,0.3); }
.p-tier { font-size:0.66rem; font-weight:700; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.13em; color:var(--text-3); margin-bottom:9px; }
.p-scale { font-family:var(--serif); font-size:1.4rem; font-weight:700; color:var(--ink); margin-bottom:5px; line-height:1.2; letter-spacing:-0.01em; }
.p-sub { font-size:0.85rem; color:var(--text-3); margin-bottom:26px; }
.p-feats { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.p-feats li { display:flex; gap:10px; font-size:0.85rem; color:var(--text-2); }
.p-feats li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; }
.p-note { text-align:center; font-size:0.82rem; color:var(--text-3); }

/* ── Demo ── */
.demo-wrap { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.demo-txt h2 { margin-bottom:16px; }
.demo-txt > p { margin-bottom:28px; font-size:1.02rem; }
.demo-pts { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.demo-pts li { display:flex; gap:12px; font-size:0.9rem; color:var(--text-2); line-height:1.58; }
.demo-pts li::before { content:'→'; color:var(--accent); font-weight:700; flex-shrink:0; }
.demo-note { font-size:0.84rem; color:var(--text-3); }
.demo-note a { color:var(--accent); }
.form-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:38px; box-shadow:var(--shadow-md); }
.form-card h3 { margin-bottom:26px; }
.fg { margin-bottom:16px; }
.fg label { display:block; font-size:0.77rem; font-weight:600; color:var(--text-2); margin-bottom:6px; letter-spacing:0.02em; }
.fg input,.fg select,.fg textarea { width:100%; background:var(--bg); border:1px solid var(--border-hi); border-radius:var(--r); color:var(--ink); font-family:var(--sans); font-size:0.88rem; padding:11px 14px; transition:border-color 0.18s, box-shadow 0.18s, background 0.18s; }
.fg input::placeholder,.fg textarea::placeholder { color:var(--text-3); }
.fg input:focus,.fg select:focus,.fg textarea:focus { outline:none; background:var(--card); border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,128,199,0.1); }
.fg textarea { min-height:80px; resize:vertical; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-ok { display:none; text-align:center; padding:28px 0; }
.ok-ico { margin-bottom:12px; color:var(--green); }
.ok-ico .ico { width:38px; height:38px; margin:0 auto; }
.ok-head { font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--green); margin-bottom:10px; }

/* ── Footer ── */
footer { background:var(--surface); border-top:1px solid var(--border); padding:66px 0 30px; }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:52px; margin-bottom:52px; }
.ft-brand .logo { margin-bottom:16px; }
.ft-brand p { font-size:0.86rem; line-height:1.7; max-width:255px; margin-bottom:14px; }
.ft-opsi { font-size:0.79rem; color:var(--text-3); }
.ft-opsi a { color:var(--accent); transition:color 0.18s; }
.ft-opsi a:hover { color:var(--accent); }
.ft-col h4 { font-size:0.65rem; font-family:var(--mono); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; }
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.ft-col ul a { color:var(--text-2); font-size:0.86rem; transition:color 0.18s; }
.ft-col ul a:hover { color:var(--ink); text-decoration:none; }
.ft-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border); font-size:0.79rem; color:var(--text-3); flex-wrap:wrap; gap:10px; }
.ft-legal { display:flex; gap:20px; }
.ft-legal a { color:var(--text-3); transition:color 0.18s; }
.ft-legal a:hover { color:var(--text-2); text-decoration:none; }

/* ── Scroll reveal ── */
.f { opacity:0; transform:translateY(18px); transition:opacity 0.52s ease, transform 0.52s ease; }
.f.in { opacity:1; transform:none; }
.f.d1 { transition-delay:0.08s; }
.f.d2 { transition-delay:0.16s; }
.f.d3 { transition-delay:0.24s; }
.f.d4 { transition-delay:0.32s; }

/* ── Hero route animations ── */
@keyframes route-draw { to { stroke-dashoffset:0; } }
@keyframes dot-in { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { 0%,100% { opacity:0.7; } 50% { opacity:0.15; } }

.anim-t1 { stroke-dasharray:525; stroke-dashoffset:525; animation:route-draw 2.0s cubic-bezier(0.4,0,0.2,1) 0.5s forwards; }
.anim-t2 { stroke-dasharray:610; stroke-dashoffset:610; animation:route-draw 2.0s cubic-bezier(0.4,0,0.2,1) 1.0s forwards; }
.anim-t3 { stroke-dasharray:675; stroke-dashoffset:675; animation:route-draw 2.0s cubic-bezier(0.4,0,0.2,1) 1.5s forwards; }
.anim-t4 { stroke-dasharray:720; stroke-dashoffset:720; animation:route-draw 2.0s cubic-bezier(0.4,0,0.2,1) 2.0s forwards; }
.anim-t5 { stroke-dasharray:565; stroke-dashoffset:565; animation:route-draw 2.0s cubic-bezier(0.4,0,0.2,1) 2.5s forwards; }

.r-dot { opacity:0; animation:dot-in 0.3s ease forwards; }
.r-pulse { animation:pulse 2s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce) {
  .anim-t1,.anim-t2,.anim-t3,.anim-t4,.anim-t5 { animation:none; stroke-dashoffset:0; }
  .r-dot { opacity:1; animation:none; }
  .r-pulse { animation:none; }
  .f { opacity:1; transform:none; transition:none; }
}

/* ── Responsive ── */
@media (max-width:960px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-map-wrap { display:none; }
  .hero-lead { max-width:100%; }
  .steps { grid-template-columns:1fr; }
  .steps::before { display:none; }
  .feat-cols { grid-template-columns:1fr; }
  .doc-grid { grid-template-columns:1fr; gap:26px; }
  .spot,.spot.flip { grid-template-columns:1fr; direction:ltr; }
  .ed-grid { grid-template-columns:1fr; }
  /* Mockups carry small UI text that is unreadable at phone width, so they drop
     out and the prose carries the section. (This was :not(:has(img)) while the SFA
     section used screenshots; every mockup is SVG now, so the exception is gone.) */
  .mockup { display:none; }
  .ind-grid { grid-template-columns:repeat(2,1fr); }
  .road-grid { grid-template-columns:1fr; }
  .p-grid, .p-grid.two { grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto; }
  .demo-wrap { grid-template-columns:1fr; }
  .ft-grid { grid-template-columns:1fr 1fr; }
  .stat-bar { gap:40px; }
}
/* The nav has no hamburger by design: below the width where logo + links + the
   demo button stop fitting, the links drop and the button stays. That threshold
   was 580px, which was too low — the bar overflowed the viewport from ~900px down
   and pushed both pages into a horizontal scroll. */
@media (max-width:1100px) {
  .nav-links { display:none; }
}
@media (max-width:580px) {
  section { padding:76px 0; }
  .hero-stats { flex-direction:column; gap:20px; }
  .hstat+.hstat { border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:20px; }
  .ind-grid { grid-template-columns:1fr; }
  .ft-grid { grid-template-columns:1fr; }
  .stat-bar { flex-direction:column; gap:28px; padding:40px; }
  .stat-div { display:none; }
  .fg-row { grid-template-columns:1fr; }
}

/* ── VIDEO SHOWCASE ─────────────────────────────────────────────────────────
   Real product footage, framed the same way as the SVG mockups so the two sit
   together. Nothing preloads: four videos of page weight on first paint would
   undo the point of the rest of this stylesheet. */
.vid-hero { max-width:900px; margin:0 auto 60px; }
.vid-frame {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-hi); background:#001626; box-shadow:var(--shadow-shot);
}
.vid-frame video { display:block; width:100%; aspect-ratio:16/9; background:#001626; }
.vid-cap { margin-top:14px; text-align:center; font-size:.93rem; color:var(--text-3); }

.vid-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.vid-card { display:flex; flex-direction:column; }
.vid-card .vid-frame { margin-bottom:16px; }
.vid-meta { display:flex; align-items:baseline; gap:9px; margin-bottom:7px; }
.vid-num {
  font-family:var(--mono); font-size:.74rem; font-weight:500; color:var(--accent);
  border:1px solid var(--a-glow); background:var(--a-pale);
  border-radius:var(--r-pill); padding:1px 8px; white-space:nowrap;
}
.vid-len { font-family:var(--mono); font-size:.74rem; color:var(--text-3); }
.vid-card h3 { font-family:var(--serif); font-size:1.16rem; font-weight:600; color:var(--ink);
               line-height:1.34; margin-bottom:7px; }
.vid-card p { font-size:.93rem; line-height:1.62; }

@media (max-width:980px) {
  .vid-grid { grid-template-columns:1fr; gap:40px; }
}

/* ── ASSISTANT ANSWER MOCKUP ────────────────────────────────────────────── */
.asst-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.asst-chip {
  font-size:.84rem; color:var(--text-2); background:var(--card);
  border:1px solid var(--border-hi); border-radius:var(--r-pill); padding:5px 13px;
}
.asst-chip::before { content:'“'; color:var(--text-3); }
.asst-chip::after  { content:'”'; color:var(--text-3); }

/* Netlify Forms honeypot — must exist in the DOM but never be seen or focusable. */
.hidden-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Submission failure. Deliberately not styled as a toast: it has to stay on
   screen next to the form the visitor is about to retry. */
.form-err {
  margin-top:14px; padding:12px 14px; border-radius:var(--r);
  background:#fdecea; border:1px solid #f5c2bd; color:#8c2f26; font-size:0.88rem;
}
.form-err a { color:#8c2f26; font-weight:600; text-decoration:underline; }