/* Self-hosted IBM Plex, latin subset, ~80KB for four files.
   Self-hosted rather than linked because this site makes no external requests
   -- and because the previous stack was Segoe-first, which meant a Windows
   buyer and everyone else were looking at two different websites. Plex has no
   weight above 700: asking for 800 gets a synthesised, smeared bold, so the
   few places that did now ask for 700. */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/plex-mono-600.woff2") format("woff2");
}

/* =========================================================================
   Knurlsoft · Datasource Auth — landing page
   Dark, premium, industrial-tech. Warm Ignition accent + cool Azure duotone.
   Self-contained: no external fonts, scripts, or assets.
   ========================================================================= */

:root {
  /* base surfaces */
  --bg:        #090c14;
  --bg-2:      #0c1019;
  --panel:     #111725;
  --panel-2:   #151d2e;
  --line:      rgba(150, 170, 205, 0.12);
  --line-2:    rgba(150, 170, 205, 0.20);

  /* text */
  --fg:        #e8eef8;
  --fg-soft:   #aab6c9;
  --fg-mute:   #79879d;

  /* Ignition line accent. Warm because the line is Ignition. The original ramp
     ended in magenta (#d6409f),
     which read consumer-SaaS and clashed with every other logo on an
     integrator's partner page. Amber to burnt orange sits next to Inductive's
     own colour instead. Scoped to product surfaces; the company hub has no
     chromatic accent at all. */
  --ign-1: #ffb347;
  --ign-2: #ff7a3d;
  --ign-3: #e04f2a;
  /* Semantic only: informational states and live verdicts, never decoration. */
  --a1: #38bdf8;
  --a2: #22d3ee;

  --accent-grad: linear-gradient(100deg, var(--ign-1), var(--ign-2) 55%, var(--ign-3));
  --duo-grad:   linear-gradient(100deg, var(--ign-1), var(--ign-3) 90%);

  /* gateway product-surface mockups: light, form-oriented chrome that evokes the
     Ignition gateway config UI, framed inside the page's dark glass language */
  --gw-bg:          #eef1f6;
  --gw-surface:     #ffffff;
  --gw-border:      #dbe1ea;
  --gw-border-2:    #c5cdda;
  --gw-text:        #1b2331;
  --gw-text-soft:   #576274;
  --gw-text-mute:   #8892a3;
  --gw-accent:      #1568c4;
  --gw-green:       #1f9d67;
  --gw-green-soft:  #e5f7ee;
  --gw-green-line:  #3ecf8e;
  --gw-red:         #b23a3a;
  --gw-red-soft:    #fdeceb;

  --radius:   16px;
  --radius-s: 11px;
  --wrap:     1160px;
  --shadow:   0 24px 60px -24px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 0 1px var(--line), 0 20px 50px -20px rgba(224,79,42,0.28);

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
/* The header is sticky at 69px, so an anchor jump would otherwise land with the
   section heading underneath it. Matters most on phones, where the mobile nav is the
   only nav and every one of its links is an in-page anchor. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* knurl cross-hatch texture, painted behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.014) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 9px),
    radial-gradient(1200px 700px at 78% -8%, rgba(224,79,42,0.10), transparent 60%),
    radial-gradient(1000px 700px at 6% 4%, rgba(56,189,248,0.09), transparent 55%),
    var(--bg);
}

#hero-canvas { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.9; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.grad-text {
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------ buttons ------------------------------ */
.btn {
  --pad-y: 11px; --pad-x: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-lg { --pad-y: 15px; --pad-x: 26px; font-size: 16px; }
.btn.block { display: flex; width: 100%; justify-content: center; }

.btn-accent {
  background: var(--accent-grad); color: #1a0f13; font-weight: 700;
  box-shadow: 0 10px 30px -10px rgba(255,122,61,0.6);
}
.btn-accent:hover { box-shadow: 0 16px 40px -12px rgba(224,79,42,0.7); }
.btn-ghost {
  background: rgba(255,255,255,0.03); color: var(--fg);
  border-color: var(--line-2); backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--a1); color: #fff; background: rgba(56,189,248,0.08); }

/* icons */
.ic { width: 22px; height: 22px; display: inline-block; flex: 0 0 auto; }
.ic-lg { width: 30px; height: 30px; }

/* ------------------------------ header ------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled {
  background: rgba(9,12,20,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-name { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.brand-soft { color: var(--fg-mute); font-weight: 700; }
.site-nav { display: flex; gap: 26px; margin-left: 8px; }
.site-nav a { color: var(--fg-soft); font-size: 15px; font-weight: 500; transition: color .2s; }
.site-nav a:hover { color: #fff; }
.header-cta { display: flex; gap: 10px; margin-left: auto; }

.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03); border-radius: 10px; flex-direction: column; gap: 4px; justify-content: center; align-items: center; cursor: pointer; }
.nav-toggle span { width: 18px; height: 2px; background: var(--fg); border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav { display: none; }

/* ------------------------------ layout rhythm ------------------------------ */
.section { padding: 96px 0; position: relative; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.kicker {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a2); margin-bottom: 16px;
}
.section-head h2 { font-size: clamp(28px, 4vw, 44px); }
.lead { color: var(--fg-soft); font-size: 18px; margin-top: 16px; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ------------------------------ hero ------------------------------ */
.hero { position: relative; padding: 78px 0 84px; overflow: hidden; }
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; z-index: -1; pointer-events: none; }
.aurora-1 { width: 620px; height: 620px; top: -180px; right: -140px; background: radial-gradient(circle, rgba(224,79,42,0.55), transparent 62%); animation: drift 22s ease-in-out infinite; }
.aurora-2 { width: 560px; height: 560px; bottom: -220px; left: -160px; background: radial-gradient(circle, rgba(56,189,248,0.42), transparent 62%); animation: drift 26s ease-in-out infinite reverse; }
.aurora-3 { width: 700px; height: 700px; top: -160px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(255,122,61,0.28), transparent 60%); }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-30px, 26px) scale(1.08);} }
@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
/* Grid items default to min-width:auto, i.e. they refuse to shrink below their
   content-based minimum — which Firefox clamps to a definite max-width when one is
   set. .hero-visual's 440px cap therefore became a 440px FLOOR, holding the whole
   hero column at ~436px on any phone narrower than ~484px. body has overflow-x:hidden
   (it contains the aurora blobs), so the excess was clipped in silence rather than
   scrollable: roughly 100px of headline and body copy was cut off the right edge on a
   360px viewport. minmax(0,…) plus min-width:0 removes that floor; the mock's long
   URL still ellipsises, which is what .gw-url was always written to do. */
.hero-copy, .hero-visual { min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--line-2);
  border-radius: 999px; font-size: 13.5px; color: var(--fg-soft); background: rgba(255,255,255,0.025); margin-bottom: 22px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 12px var(--a2); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.hero-title { font-size: clamp(38px, 5.6vw, 66px); letter-spacing: -0.015em; }
.hero-sub { color: var(--fg-soft); font-size: 19px; margin-top: 22px; max-width: 560px; }
.hero-sub strong { color: var(--fg); }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-actions.center { justify-content: center; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 34px 0 0; }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-soft); font-size: 14.5px; font-weight: 500; }
.hero-trust .ic { width: 18px; height: 18px; color: var(--a2); }

/* hero visual */
.hero-visual { position: relative; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 0 rgba(62,207,142,.6); animation: pulse 2s infinite; flex: 0 0 auto; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(62,207,142,.5);} 70%{box-shadow:0 0 0 10px rgba(62,207,142,0);} 100%{box-shadow:0 0 0 0 rgba(62,207,142,0);} }

/* ------------------------------ gateway product-surface mockups ------------------------------
   The recurring motif for depicting Datasource Auth's own UI: a neutral, form-oriented "gateway panel"
   (light chrome, labeled fields, left-border status banners, a solid action button) — the visual
   language of the Ignition gateway config pages these buyers work in every day — instead of a
   generic dark terminal. `.gw-frame` adds a browser-style window (title bar + URL pill, no
   terminal traffic-light dots) around the flagship hero mockup; `.gw-panel` is the same surface
   used standalone as a smaller card elsewhere on the page. */
.gw-frame {
  position: relative; z-index: 3; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(30,40,60,0.72), rgba(16,22,36,0.72));
  border: 1px solid var(--line-2); backdrop-filter: blur(16px);
  box-shadow: var(--shadow); overflow: hidden;
}
.gw-titlebar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.gw-titlebar-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.22); flex: 0 0 auto; }
.gw-url { display: flex; align-items: center; gap: 6px; margin-left: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px;
  color: var(--fg-mute); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gw-url-ic { width: 12px; height: 12px; color: #6fbf8e; flex: 0 0 auto; }

.gw-screen { background: var(--gw-bg); padding: 18px 18px 20px; display: grid; gap: 13px; }
.gw-panel { background: var(--gw-surface); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gw-panel-head { padding: 14px 20px; border-bottom: 1px solid var(--gw-border); background: var(--gw-bg); }
.gw-panel-body { padding: 20px; display: grid; gap: 14px; }
.gw-panel-foot { padding: 0 20px 20px; color: var(--gw-text-mute); font-size: 13px; }
.gw-panel-foot .mono { color: var(--gw-text-soft); }
.gw-panel-foot-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gw-panel-compact { max-width: 640px; margin: 42px auto 0; }

.gw-crumb { font-size: 12px; font-weight: 600; color: var(--gw-text-mute); }
.gw-crumb strong { color: var(--gw-text); }
.gw-crumb-sep { margin: 0 5px; color: var(--gw-border-2); }

.gw-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 8px;
  background: var(--gw-surface); border: 1px solid var(--gw-border); border-left: 4px solid var(--gw-border-2); }
.gw-banner .ic { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.gw-banner-title { font-weight: 700; font-size: 14.5px; color: var(--gw-text); }
.gw-banner-sub { font-size: 12px; color: var(--gw-text-soft); margin-top: 2px; }
.gw-banner-ready { border-left-color: var(--gw-green-line); background: var(--gw-green-soft); }
.gw-banner-ready .ic { color: var(--gw-green); }
.gw-banner-ready .gw-banner-title { color: var(--gw-green); }

.gw-field { display: grid; gap: 5px; }
.gw-field label { font-size: 11px; font-weight: 600; color: var(--gw-text-mute); text-transform: uppercase; letter-spacing: .04em; }
.gw-select, .gw-input { background: var(--gw-surface); border: 1px solid var(--gw-border-2); border-radius: 7px;
  padding: 9px 11px; font-size: 13px; color: var(--gw-text); }
.gw-select { display: flex; justify-content: space-between; align-items: center; }
.gw-select .chev { color: var(--gw-text-mute); font-size: 11px; }
.gw-code { font-family: var(--mono); font-size: 12px; color: var(--gw-accent); word-break: break-all; }
.gw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gw-field-inline { display: flex; align-items: center; gap: 10px; }
.gw-field-inline .gw-input { flex: 1; min-width: 0; }
.gw-input-strike { text-decoration: line-through; color: var(--gw-text-mute); background: #f3f5f8; }

.gw-tag { align-self: center; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; flex: 0 0 auto; }
.gw-tag-removed { color: var(--gw-red); background: var(--gw-red-soft); }
.gw-tag-added, .gw-tag-ready { color: var(--gw-green); background: var(--gw-green-soft); }

.gw-status-row { display: flex; align-items: center; gap: 9px; padding-top: 4px; margin-top: 2px;
  border-top: 1px dashed var(--gw-border); font-size: 13px; color: var(--gw-text); font-weight: 600; }
.gw-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gw-green-line); box-shadow: 0 0 0 3px var(--gw-green-soft); flex: 0 0 auto; }

.gw-table { gap: 0; }
.gw-table-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--gw-border); font-size: 13px; color: var(--gw-text); }
.gw-table-row:last-child { border-bottom: none; }
.gw-table-k { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.gw-table-file { font-size: 11.5px; color: var(--gw-text-mute); font-weight: 500; }

.gw-test-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gw-test-result { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gw-green); font-weight: 600; }
.gw-btn { display: inline-flex; align-items: center; font-weight: 700; font-size: 12.5px; color: #fff;
  background: var(--gw-accent); border: 1px solid var(--gw-accent); border-radius: 6px; padding: 8px 14px; }
.gw-btn-sm { padding: 7px 12px; font-size: 12px; }
.gw-btn-ghost { background: var(--gw-surface); color: var(--gw-accent); }

/* ------------------------------ strip ------------------------------ */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.014); }
.strip-inner { padding: 26px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.strip-inner p { color: var(--fg-mute); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.strip-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.badge { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.02);
  font-size: 13.5px; color: var(--fg-soft); font-weight: 500; }

/* ------------------------------ cards ------------------------------ */
.cards { display: grid; gap: 22px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-glow); }
.card h3 { font-size: 20px; margin-top: 4px; }
.card p { color: var(--fg-soft); font-size: 15.5px; margin-top: 10px; }
.card .ic-lg { color: var(--ign-2); margin-bottom: 6px; }

.pain .ic-lg { color: var(--ign-3); }

.feature .feat-ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,122,61,0.16), rgba(56,189,248,0.12)); border: 1px solid var(--line-2); margin-bottom: 16px; }
.feature .feat-ic .ic { color: #ffd0a6; width: 24px; height: 24px; }

/* ------------------------------ solution ------------------------------ */
.section-solution { border-top: 1px solid var(--line); }
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.section-solution h2 { font-size: clamp(26px, 3.4vw, 40px); }
.check-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--fg-soft); font-size: 16px; }
.check-list .ic { color: var(--a2); flex: 0 0 auto; margin-top: 1px; }

/* solution mockup uses .gw-panel (see "gateway product-surface mockups" above) */

/* ------------------------------ how / steps ------------------------------ */
.section-how { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 40%); }
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch; }
.step { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.step-n { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 18px;
  background: var(--accent-grad); color: #1a0f13; margin-bottom: 16px; }
.step h3 { font-size: 19px; } .step p { color: var(--fg-soft); font-size: 15px; margin-top: 9px; }
.step-arrow { display: grid; place-items: center; color: var(--fg-mute); font-size: 24px; }

.flow { margin-top: 42px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
  padding: 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: rgba(255,255,255,0.014); }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 18px; min-width: 128px;
  border-radius: 12px; background: rgba(14,20,34,0.7); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; text-align: center; }
.flow-node .ic { width: 24px; height: 24px; color: var(--fg-soft); }
.flow-node.accent { border-color: rgba(224,79,42,0.4); box-shadow: 0 0 30px -10px rgba(224,79,42,0.5); }
.flow-node.accent .ic { color: var(--ign-2); }
.flow-link { flex: 1; min-width: 30px; height: 2px; background: linear-gradient(90deg, var(--a1), var(--ign-2)); position: relative; border-radius: 2px; opacity: .5; }
.flow-dot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #ffd27a; transform: translateY(-50%);
  animation: flowmove 2.4s linear infinite; box-shadow: 0 0 10px #ffd27a; }
@keyframes flowmove { from { left: -4px; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .flow-dot { display: none; } }

/* The flow reads left-to-right until the four 128px nodes and their connectors stop
   fitting (~650px of viewport). Below that, flex-wrap broke it into a stagger with
   connector lines dangling off the right edge pointing at nothing. Stack it instead
   and stand the connectors up, the same move .step-arrow makes at 940px. */
@media (max-width: 700px) {
  .flow { flex-direction: column; align-items: center; gap: 0; padding: 24px 18px; }
  .flow-node { width: 100%; max-width: 300px; flex-direction: row; justify-content: center; gap: 10px; }
  .flow-link { flex: 0 0 auto; width: 2px; min-width: 0; height: 28px; margin: 9px 0;
    background: linear-gradient(180deg, var(--a1), var(--ign-2)); }
  .flow-dot { top: 0; left: 50%; transform: translateX(-50%); animation-name: flowdrop; }
  @keyframes flowdrop { from { top: -4px; } to { top: 100%; } }
}

/* ------------------------------ methods ------------------------------ */
.method { position: relative; display: flex; flex-direction: column; }
.method-tag { position: absolute; top: -11px; right: 20px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--accent-grad); color: #1a0f13; }
.mini-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.mini-list li { position: relative; padding-left: 18px; color: var(--fg-soft); font-size: 14px; }
.mini-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--a2); }

/* ------------------------------ security ------------------------------ */
.section-security { border-top: 1px solid var(--line); }
.security-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: start; }
.section-security h2 { font-size: clamp(26px, 3.4vw, 40px); }
.section-security .lead { margin-bottom: 24px; }
.sec-list { display: grid; gap: 14px; }
.sec-item { display: flex; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); transition: border-color .25s, transform .25s; }
.sec-item:hover { border-color: var(--line-2); transform: translateX(3px); }
.sec-item .ic { width: 26px; height: 26px; color: var(--a2); flex: 0 0 auto; margin-top: 2px; }
.sec-item h4 { font-size: 16.5px; }
.sec-item p { color: var(--fg-soft); font-size: 14.5px; margin-top: 5px; }

/* ------------------------------ specs ------------------------------ */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spec { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-s); background: rgba(255,255,255,0.015); }
.spec-k { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--a2); font-weight: 700; margin-bottom: 7px; }
.spec-v { font-size: 16px; font-weight: 600; }
.spec-v em { color: var(--fg-mute); font-style: normal; font-weight: 500; font-size: 14px; }

/* ------------------------------ pricing ------------------------------ */
.section-pricing { border-top: 1px solid var(--line); overflow: hidden; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 32px 26px;
  border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--bg-2)); }
.price-card.featured { border-color: transparent; background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--accent-grad) border-box; box-shadow: 0 30px 70px -30px rgba(224,79,42,0.5); transform: translateY(-6px); }
.price-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--accent-grad); color: #1a0f13; white-space: nowrap; }
.price-name { font-size: 15px; font-weight: 700; color: var(--fg-soft); text-transform: uppercase; letter-spacing: .08em; }
.price-amt { display: flex; align-items: baseline; gap: 3px; margin: 14px 0 4px; }
.price-cur { font-size: 24px; font-weight: 700; color: var(--fg-soft); }
.price-big { font-size: 46px; font-weight: 700; letter-spacing: -0.015em; }
.price-per { font-size: 15px; color: var(--fg-mute); margin-left: 4px; }
.price-sub { color: var(--fg-mute); font-size: 14px; min-height: 20px; }
.price-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 12px; flex: 1; }
.price-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--fg-soft); }
.price-list .ic { width: 19px; height: 19px; color: var(--a2); flex: 0 0 auto; margin-top: 1px; }
.featured .price-list .ic { color: var(--ign-1); }
.price-foot { text-align: center; color: var(--fg-mute); font-size: 13.5px; margin-top: 26px; }

/* ------------------------------ corporate hub ------------------------------ */
.corp-hero { max-width: 760px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card.line { display: flex; flex-direction: column; }
.line-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.line .feat-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin: 0;
  background: linear-gradient(150deg, rgba(255,122,61,0.18), rgba(56,189,248,0.12)); border: 1px solid var(--line-2); }
.line .feat-ic .ic { color: #ffd0a6; width: 26px; height: 26px; }
.line .feat-ic.muted { background: rgba(255,255,255,0.04); }
.line .feat-ic.muted .ic { color: var(--fg-mute); }
.line-status { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.line-status.available { color: #7ef0be; border: 1px solid rgba(62,207,142,0.4); background: rgba(62,207,142,0.08); }
.line-status.soon { color: var(--fg-mute); border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); }
.line-status.dev { color: var(--ign-1); border: 1px solid rgba(255,179,71,0.4); background: rgba(255,179,71,0.08); }
.line h3 { font-size: 22px; }
.line p { color: var(--fg-soft); font-size: 15.5px; margin-top: 10px; }
.line p strong { color: var(--fg); }
.line-links { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.line-links .soon-cta { padding-top: 0; }
.line-alt { color: var(--fg-mute); font-size: 14px; font-weight: 500; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.line-alt:hover { color: var(--a2); border-bottom-color: var(--a2); }

/* ------------------------------ roadmap / suite ------------------------------ */
.section-roadmap { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(56,189,248,0.03), transparent 45%); }
.card.soon { position: relative; display: flex; flex-direction: column; }
.card.soon .feat-ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,179,71,0.16), rgba(224,79,42,0.12)); border: 1px solid var(--line-2); margin-bottom: 16px; }
.card.soon .feat-ic .ic { color: #a9d8ff; width: 24px; height: 24px; }
.soon-tag { position: absolute; top: 18px; right: 18px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--a2); border: 1px solid rgba(56,189,248,0.4); background: rgba(56,189,248,0.08); }
.card.soon h3 { padding-right: 96px; }
.soon-cta { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px;
  color: var(--a2); transition: gap .2s ease; }
.soon-cta .arrow { transition: transform .2s ease; }
.soon-cta:hover .arrow { transform: translateX(4px); }
.roadmap-foot { text-align: center; color: var(--fg-soft); font-size: 15.5px; margin-top: 30px; max-width: 720px; margin-left: auto; margin-right: auto; }
.roadmap-foot strong { color: var(--fg); }
.roadmap-foot a { color: var(--a2); font-weight: 600; white-space: nowrap; }

/* ------------------------------ faq ------------------------------ */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-s); background: linear-gradient(180deg, var(--panel), var(--bg-2)); overflow: hidden; transition: border-color .2s; }
.faq details[open] { border-color: var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16.5px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--a2); font-weight: 400; transition: transform .2s; flex: 0 0 auto; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--fg-soft); font-size: 15px; }
.faq a { color: var(--a2); }

/* ------------------------------ cta band ------------------------------ */
.cta-band { text-align: center; }
.cta-inner { max-width: 720px; margin: 0 auto; padding: 56px 40px; border-radius: 24px;
  background: linear-gradient(120deg, rgba(224,79,42,0.14), rgba(255,179,71,0.12));
  border: 1px solid var(--line-2); position: relative; overflow: hidden; }
.cta-inner h2 { font-size: clamp(28px, 4vw, 42px); }
.cta-inner p { color: var(--fg-soft); font-size: 18px; margin-top: 14px; margin-bottom: 30px; }

/* ------------------------------ footer ------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding: 60px 0 34px; background: rgba(255,255,255,0.012); margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-tag { color: var(--fg-mute); font-size: 14px; margin-top: 16px; max-width: 320px; }
.footer-col h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-soft); margin-bottom: 14px; }
.footer-col a { display: block; color: var(--fg-mute); font-size: 14.5px; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: var(--a2); }
.footer-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--fg-mute); font-size: 12.5px; }
.legal-note { max-width: 560px; text-align: right; opacity: .8; }

/* ------------------------------ responsive ------------------------------ */
/* The header is one flex row -- wordmark, seven section links, two buttons --
   and it runs out of room a long way before the page layout does. It used to
   just fit at 940px; renaming the product widened the primary button and it
   stopped fitting, which is what broke the menu. Give the header its own,
   earlier breakpoint so it folds into the hamburger while the page below it
   keeps its desktop layout down to 940px. */
@media (max-width: 1180px) {
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 20px; border-bottom: 1px solid var(--line); background: rgba(9,12,20,0.96); backdrop-filter: blur(14px); }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { padding: 12px 4px; color: var(--fg-soft); border-bottom: 1px solid var(--line); }
  .mobile-nav .btn { margin-top: 10px; }
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { width: 100%; max-width: 440px; margin: 0 auto; }
  .solution-grid, .security-grid { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: 1fr; }
  .step-arrow { transform: rotate(90deg); }
  .cards-3, .cards-2, .spec-grid, .price-grid { grid-template-columns: 1fr; }
  .gw-field-row { grid-template-columns: 1fr; }
  .gw-panel-foot-action { flex-direction: column; align-items: flex-start; }
  .price-card.featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .legal-note { text-align: left; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .section { padding: 68px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
  .legal-note { text-align: left; }
  .cta-inner { padding: 40px 22px; }
  .gw-field-inline { flex-wrap: wrap; }
  .gw-panel-body, .gw-screen { padding-left: 16px; padding-right: 16px; }
}

/* =========================================================================
   Legal documents — footer links, full-screen overlay reader, standalone pages
   Progressive enhancement: the footer links are real anchors to real pages at
   /legal/*.html (stable URLs, crawlable, work with JS off). app.js intercepts
   the click and opens the same document in the overlay below.
   ========================================================================= */

/* ---- footer link row (deliberately quiet) ---- */
.footer-legal-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-legal-links { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-legal-links a {
  color: var(--fg-mute); font-size: 12.5px; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}
.footer-legal-links a:hover { color: var(--fg-soft); border-bottom-color: var(--line-2); }
.footer-legal-links .sep { color: var(--line-2); font-size: 11px; user-select: none; }

/* ---- overlay ---- */
.legal-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 7, 12, 0.74);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vh, 44px) clamp(12px, 4vw, 40px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.legal-scrim.open { opacity: 1; pointer-events: auto; }

.legal-modal {
  position: relative;
  width: min(920px, 100%);
  height: min(92vh, 1000px);
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(150,170,205,0.06);
  overflow: hidden;
  transform: translateY(10px) scale(.985);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2,.8,.25,1), opacity .22s ease;
}
.legal-scrim.open .legal-modal { transform: none; opacity: 1; }

/* warm hairline along the top edge — the page's duotone signature */
.legal-modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--duo-grad); opacity: .7;
}

.legal-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  flex: 0 0 auto;
}
.legal-modal-head .eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mute); margin: 0 0 6px;
}
.legal-modal-head h2 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.legal-modal-head .legal-meta { margin: 7px 0 0; font-size: 12.5px; color: var(--fg-mute); }

.legal-close {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(150,170,205,0.07);
  border: 1px solid var(--line);
  color: var(--fg-soft);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.legal-close:hover { background: rgba(150,170,205,0.14); color: var(--fg); border-color: var(--line-2); }
.legal-close:active { transform: scale(.94); }
.legal-close svg { width: 16px; height: 16px; }

.legal-modal-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 26px 40px;
  -webkit-overflow-scrolling: touch;
}
/* soft fade at the bottom so long documents read as continuing */
.legal-modal-fade {
  position: absolute; left: 1px; right: 1px; bottom: 1px; height: 56px;
  pointer-events: none; border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(180deg, rgba(17,23,37,0), var(--panel) 92%);
}

/* scrollbar, matched to the surface */
.legal-modal-body::-webkit-scrollbar { width: 11px; }
.legal-modal-body::-webkit-scrollbar-track { background: transparent; }
.legal-modal-body::-webkit-scrollbar-thumb {
  background: rgba(150,170,205,0.18); border-radius: 99px;
  border: 3px solid var(--panel);
}
.legal-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(150,170,205,0.30); }
.legal-modal-body { scrollbar-width: thin; scrollbar-color: rgba(150,170,205,0.22) transparent; }

/* ---- document typography (shared by overlay and standalone page) ---- */
.legal-body { max-width: 68ch; color: var(--fg-soft); font-size: 15.5px; line-height: 1.72; }
.legal-body > *:first-child { margin-top: 0; }
.legal-body h2 {
  color: var(--fg); font-size: 17px; letter-spacing: -0.005em;
  margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--line);
}
.legal-body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.legal-body h3 { color: var(--fg); font-size: 14.5px; margin: 22px 0 6px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 20px; }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--fg-mute); }
.legal-body strong { color: var(--fg); font-weight: 600; }
.legal-body a { color: var(--a1); text-decoration: none; border-bottom: 1px solid rgba(56,189,248,.3); }
.legal-body a:hover { border-bottom-color: var(--a1); }
.legal-body code { font-family: var(--mono); font-size: .89em; color: var(--fg); background: rgba(150,170,205,0.09); padding: 1px 5px; border-radius: 5px; }
.legal-body hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
.legal-body .lead { color: var(--fg); font-size: 16.5px; }

/* draft notice — remove the element when counsel signs the text off */
.legal-draft {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 26px; padding: 14px 16px;
  border: 1px solid rgba(255,179,71,0.28); border-left-width: 3px;
  border-radius: var(--radius-s);
  background: rgba(255,179,71,0.06);
  color: var(--fg-soft); font-size: 13.5px; line-height: 1.6;
}
.legal-draft strong { color: var(--ign-1); }

/* The EULA's click-to-accept block is binding text, not a provisional notice, so it must not
   borrow the amber interim-banner styling it used to share. Neutral panel, same rhythm. */
.legal-assent {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 26px; padding: 14px 16px;
  border: 1px solid var(--line-2); border-left-width: 3px;
  border-radius: var(--radius-s);
  background: rgba(255,255,255,0.03);
  color: var(--fg-soft); font-size: 13.5px; line-height: 1.6;
}
.legal-assent strong { color: var(--fg); }

/* ---- standalone page shell (deep links, JS-off fallback) ---- */
.legal-page { max-width: 780px; margin: 0 auto; padding: 56px 24px 96px; }
.legal-page-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-mute); font-size: 13px; text-decoration: none; margin-bottom: 30px;
}
.legal-page-back:hover { color: var(--fg-soft); }
.legal-page-back svg { width: 14px; height: 14px; }
.legal-page h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 8px; }
.legal-page .legal-meta { color: var(--fg-mute); font-size: 13px; margin: 0 0 8px; }

@media (max-width: 720px) {
  .legal-scrim { padding: 0; }
  .legal-modal { height: 100%; width: 100%; border-radius: 0; border-left: 0; border-right: 0; }
  .legal-modal-fade { border-radius: 0; }
  .legal-modal-head { padding: 18px 18px 15px; }
  .legal-modal-body { padding: 22px 18px 36px; }
  .legal-body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-scrim, .legal-modal { transition: opacity .01ms; }
  .legal-modal { transform: none; }
}

/* the page behind the overlay must not scroll */
body.legal-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Company tier (.corp on the hub's <body>)

   The hub used to wear Datasource Auth's skin: the ember canvas, the aurora blobs and
   the product gradient are the PRODUCT's colour, and promoting them to company
   identity left no way to tell where the product ended and the company began —
   with Amoxtli, a developer runtime, introduced inside a SCADA module's
   marketing wrapper.

   So the company tier is steel and carries no chromatic accent of its own.
   Each product line owns exactly one hue; Datasource Auth keeps the product gradient on
   product surfaces, where it means something.
--------------------------------------------------------------------------- */
.corp .btn-accent {
  background: var(--panel, #141b26);
  border: 1px solid #39435420;
  border-color: rgba(197, 208, 224, 0.28);
  color: #e8eef6;
  box-shadow: none;
}
.corp .btn-accent:hover {
  border-color: rgba(197, 208, 224, 0.55);
  background: #1a2230;
  box-shadow: none;
}
.corp .grad-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #e8eef6;
}
/* No blink on the company tier. A pulsing dot is a status light, and nothing
   here has a status. */
.corp .eyebrow .dot {
  background: #7a879b;
  box-shadow: none;
  animation: none;
}
.corp .feat-ic { color: #aab6c6; }
.corp .footer-who {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #7a879b;
  max-width: 34ch;
}