/* ============================================================
   ThresholdStack — site stylesheet
   Every building. Living Data.
   ============================================================ */

:root {
  /* palette — sharpened 2026-07-22.
     Every value used to carry a blue tint (#080b11, #111823, #93a2b6...), which is
     what made the site read soft. These are neutral on true black instead, with
     roughly double the border contrast, so panels are defined by their EDGE rather
     than by a lighter fill. Surfaces stay opaque on purpose: .logocell sits on a
     .logowall whose background IS var(--border), so a translucent surface would let
     the grid colour bleed through the cells.
     The accent gradient below is deliberately untouched. */
  --bg:        #000000;
  --bg-2:      #08080a;
  --surface:   #0d0d0f;
  --surface-2: #17171a;
  --border:    rgba(255, 255, 255, 0.15);
  --border-2:  rgba(255, 255, 255, 0.24);

  --text:      #ffffff;
  --heading:   #ffffff;
  --muted:     rgba(255, 255, 255, 0.62);
  --muted-2:   rgba(255, 255, 255, 0.42);

  --accent:      #4ade80;   /* living-data green */
  --accent-2:    #22d3ee;   /* data cyan */
  --accent-soft: rgba(74, 222, 128, 0.12);
  --grad:      linear-gradient(120deg, #4ade80 0%, #22d3ee 100%);
  --grad-text: linear-gradient(120deg, #7cf0a3 0%, #6ee7f5 100%);

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1160px;
  --shadow:    0 24px 60px -20px rgba(0, 0, 0, 0.6);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.center { text-align: center; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

/* ---------- typography ---------- */
/* text-wrap:balance evens out heading line lengths. The preview has always had it
   and this file did not, so every heading wrapped differently in the client
   preview than on the live site. Keep the two in step. */
h1, h2, h3, h4 { color: var(--heading); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; }
p  { color: var(--muted); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text); line-height: 1.55; }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head p { margin-top: 14px; font-size: 1.1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  font-weight: 600; font-size: 0.98rem; cursor: pointer;
  border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--grad); color: #05201a;
  box-shadow: 0 10px 30px -10px rgba(74, 222, 128, 0.5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(74, 222, 128, 0.6); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-secondary:hover { border-color: var(--accent); color: #fff; }
.btn-ghost { padding: 10px 0; color: var(--accent); font-weight: 600; }
.btn-ghost:hover { color: #fff; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.cta-arrow::after { content: "→"; transition: transform .18s ease; }
.cta-arrow:hover::after { transform: translateX(4px); }

/* ---------- brand logo image ---------- */
.logo-img { height: 30px; width: auto; display: block; }
.footer .logo-img { height: 34px; margin-bottom: 4px; }

/* ---------- hero media ---------- */
.hero-media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-2); background: radial-gradient(120% 120% at 70% 0%, #1d1d21 0%, #0b0b0d 55%, #060608 100%); box-shadow: var(--shadow); padding: 28px; }
.hero-media img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.hero-media .cap { position: absolute; left: 22px; bottom: 18px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); background: rgba(0,0,0,.6); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); }
.media-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-2); background: radial-gradient(120% 120% at 70% 0%, #1d1d21 0%, #0b0b0d 60%); box-shadow: var(--shadow); }
.media-frame img { width: 100%; height: auto; display: block; }

/* ---------- coverage ---------- */
.cov-stats { display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap; }
.cov-stats .num { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cov-stats .lbl { font-size: 0.78rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 8px; }
.cov-list { margin-top: 26px; font-size: 0.9rem; line-height: 1.9; color: var(--muted-2); max-width: 44ch; }
.cov-map { border: 1px solid var(--border-2); border-radius: var(--radius); background: radial-gradient(120% 120% at 72% 18%, #1a1a1f 0%, #0d0d10 55%, #060608 100%); padding: 22px; overflow: hidden; box-shadow: var(--shadow); }
.cov-map svg { width: 100%; height: auto; display: block; }
.cov-map .grid-dot { fill: rgba(255,255,255,0.05); }
.cov-map .link { stroke: rgba(74,222,128,0.28); stroke-width: 1; }
.cov-map .node { fill: #4ade80; }
.cov-map .node-hq { fill: #7cf0a3; }
.cov-map .ring { fill: none; stroke: #4ade80; transform-box: fill-box; transform-origin: center; }
.cov-map .pulse { animation: covPulse 2.8s ease-out infinite; }
.cov-map .tw { animation: covTw 3.4s ease-in-out infinite; }
.cov-map .tw2 { animation: covTw 4.2s ease-in-out infinite; animation-delay: 1.1s; }
@keyframes covPulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes covTw { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cov-map .pulse { animation: none; opacity: 0; } .cov-map .tw, .cov-map .tw2 { animation: none; } }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- estimator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.calc-controls { padding: 34px; border-right: 1px solid var(--border); }
.calc-results { padding: 34px; background: var(--bg-2); display: flex; flex-direction: column; }
.calc .fld { margin-bottom: 26px; }
.calc label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 12px; letter-spacing: 0.02em; }
.calc label .val { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.calc input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.calc select { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 0.98rem; }
.calc select:focus { outline: none; border-color: var(--accent); }
.calc-metric { margin-bottom: 24px; }
.calc-metric .k { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.calc-metric .v { font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-metric .v.exposure { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.calc-metric .v.plat { color: #fff; }
.calc-note { font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 16px; margin-top: auto; }
.calc-disc { font-size: 0.72rem; color: var(--muted-2); margin-top: 16px; font-style: italic; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } .calc-controls { border-right: 0; border-bottom: 1px solid var(--border); } }

/* ---------- pull quote ---------- */
.pullquote { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.32; text-wrap: balance; }
.pq-by { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; text-align: left; }
.pq-by img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-2); }
.pq-by strong { display: block; color: #fff; font-size: 0.95rem; }
.pq-by span { color: var(--muted); font-size: 0.85rem; }

/* ---------- logo wall ---------- */
.logowall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.logowall.cols-5 { grid-template-columns: repeat(5, 1fr); }
.logowall.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* The wall had no responsive rule, so it held its column count down to phone
   widths. Reflow it instead of letting cells crush. */
@media (max-width: 960px) { .logowall, .logowall.cols-5, .logowall.cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .logowall, .logowall.cols-5, .logowall.cols-4 { grid-template-columns: repeat(2, 1fr); } }
.logocell { background: var(--surface); display: grid; place-items: center; padding: 26px 16px; min-height: 104px; text-align: center; transition: background .2s; }
.logocell:hover { background: var(--surface-2); }
.logocell .wm { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.12; transition: color .2s; }
.logocell:hover .wm { color: #fff; }
.logocell .wm small { font-weight: 600; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.logocell img { max-height: 44px; max-width: 100%; width: auto; opacity: .85; filter: grayscale(1) brightness(1.7); transition: opacity .2s, filter .2s; }
.logocell:hover img { opacity: 1; filter: grayscale(0); }
/* Stacked square lockups (e.g. Ruddy) are illegible at the shared 44px cap. */
.logocell img.logo-tall { max-height: 66px; }
/* Marks whose brand colors have too little contrast against --surface keep the
   normalized treatment on hover; a full-color reveal would reduce legibility. */
.logocell:hover img.logo-mono { filter: grayscale(1) brightness(1.7); }

/* ---------- product UI mockup ---------- */
.mock { background: linear-gradient(180deg, #141417, #0a0a0c); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #33333a; }
.mock-bar .title { margin-left: 8px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.mock-bar .chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: #05201a; background: var(--grad); padding: 4px 11px; border-radius: 999px; }
.mock-body { padding: 20px; }
.mock-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.mock-head .b-name { font-size: 1rem; font-weight: 700; color: #fff; }
.mock-head .b-sub { font-size: 0.76rem; color: var(--muted-2); margin-top: 3px; }
.score { text-align: center; flex: none; }
.score .n { font-size: 1.7rem; font-weight: 800; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.score .l { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.kpi .v { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .k { font-size: 0.66rem; color: var(--muted-2); margin-top: 3px; }
.kpi .d { font-size: 0.66rem; font-weight: 700; margin-top: 7px; color: var(--accent); }
.chartcard { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 14px 8px; margin-bottom: 14px; }
.chartcard .ct { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted-2); margin-bottom: 6px; }
.upgrades { display: flex; flex-direction: column; gap: 8px; }
.upg { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.upg .ico { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 0.85rem; flex: none; }
.upg .nm { font-size: 0.8rem; color: var(--text); font-weight: 600; }
.upg .mt { font-size: 0.66rem; color: var(--muted-2); margin-top: 1px; }
.upg .rt { margin-left: auto; text-align: right; }
.upg .rt .a { font-size: 0.82rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.upg .rt .p { font-size: 0.64rem; color: var(--accent); }
.sensor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.sensor { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 13px; }
.sensor .st { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; color: var(--muted-2); }
.sensor .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.sensor .sv { font-size: 1.05rem; font-weight: 800; color: #fff; margin-top: 8px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sensor .sk { font-size: 0.66rem; color: var(--muted-2); margin-top: 2px; }
.progress { margin-top: 4px; }
.progress .pt { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-bottom: 7px; }
.progress .bar { height: 7px; border-radius: 999px; background: var(--bg); overflow: hidden; border: 1px solid var(--border); }
.progress .bar span { display: block; height: 100%; width: 78%; background: var(--grad); border-radius: 999px; }

/* ---------- nvidia partner pill ---------- */
.nvidia-pill { display: inline-flex; align-items: center; background: transparent; padding: 0; }
.nvidia-pill img, .nvidia-pill svg { height: 46px; width: auto; display: block; }
/* Home page: the badge stands alone in its row, so it carries a larger size.
   Note the SVG carries ~11.5% transparent padding inside its own viewBox, so the
   visible mark is only ~77% of this height. 104px renders a 241x104 box with a
   232x80 visible mark, on par with the widest client logo (Paradigm, 208x44). */
.nvidia-pill.lg img, .nvidia-pill.lg svg { height: 104px; }
@media (max-width: 680px) { .nvidia-pill.lg img, .nvidia-pill.lg svg { height: 72px; } }
.partner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: center; margin-top: 22px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; letter-spacing: -0.02em; font-size: 1.12rem; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--muted); font-size: 0.95rem; font-weight: 500; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
/* Login sits left of the demo CTA and stays subordinate to it: secondary
   (transparent + border), slightly smaller. It points at the app, which is a
   different host, so it must not read as a section of this site. */
.btn-login { padding: 11px 21px; font-size: 0.93rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 96px 0 84px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(34, 211, 238, 0.14), transparent 60%),
    radial-gradient(760px 520px at 8% 10%, rgba(74, 222, 128, 0.13), transparent 58%);
}

/* ---------- hero circuit ----------
   Ambient current-flow field behind the hero. Pure CSS + inline SVG, no canvas
   and no library: it must not compete with the LCP headline.
     .hcw   full-bleed wrapper, sits behind content and ignores pointer events
     .ht    trace       static conductor lines, barely visible
     .hp    pulse       a short dash travelling that trace via stroke-dashoffset
     .hj    junction    node dot where traces meet
     .hj-a  active      junction that brightens in time with a passing pulse
   Traces are drawn in a 1200x600 viewBox and scaled with preserveAspectRatio
   slice, so the field crops rather than distorts on narrow screens.
   Everything stops under prefers-reduced-motion. */
.hero-circuit {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 30%, #000 35%, transparent 78%);
          mask-image: radial-gradient(120% 95% at 50% 30%, #000 35%, transparent 78%);
}
.hero-circuit svg { width: 100%; height: 100%; display: block; }
.hero-circuit .ht { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.hero-circuit .hp {
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 26 1100; stroke-dashoffset: 1126;
  animation: hcFlow 9s linear infinite;
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.7));
}
.hero-circuit .hp.c2 { stroke: var(--accent-2); filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.7)); }
.hero-circuit .hp.d1 { animation-delay: -1.4s; }
.hero-circuit .hp.d2 { animation-delay: -3.2s; }
.hero-circuit .hp.d3 { animation-delay: -5.1s; }
.hero-circuit .hp.d4 { animation-delay: -6.8s; }
.hero-circuit .hp.s1 { animation-duration: 11s; }
.hero-circuit .hp.s2 { animation-duration: 7.5s; }
.hero-circuit .hj { fill: rgba(255, 255, 255, 0.22); }
.hero-circuit .hj-a { fill: var(--accent); animation: hcJunction 9s ease-in-out infinite; }
.hero-circuit .hj-a.d2 { animation-delay: -3.2s; }
.hero-circuit .hj-a.d3 { animation-delay: -5.1s; }
@keyframes hcFlow { to { stroke-dashoffset: 0; } }
@keyframes hcJunction {
  0%, 62%, 100% { opacity: 0.28; r: 2; }
  70%           { opacity: 1;    r: 3.4; }
}
@media (max-width: 760px) { .hero-circuit { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
  /* Freeze the pulses, do NOT unset stroke-dasharray. Clearing it turns every
     pulse into a full-length glowing trace across the headline, which is far
     louder than the animation it is meant to replace. Keeping the dash leaves
     a short static spark partway along each trace. */
  .hero-circuit .hp { animation: none; opacity: 0.7; }
  .hero-circuit .hp.d1 { stroke-dashoffset: 900; }
  .hero-circuit .hp.d2 { stroke-dashoffset: 560; }
  .hero-circuit .hp.d3 { stroke-dashoffset: 320; }
  .hero-circuit .hp.d4 { stroke-dashoffset: 140; }
  .hero-circuit .hj-a { animation: none; opacity: 0.6; }
}
.hero .lead { max-width: 620px; margin-top: 22px; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.page-hero { padding: 84px 0 40px; }
.page-hero .eyebrow { color: var(--accent-2); }

/* ---------- stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stats.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--surface); padding: 30px 26px; }
.stat .num { font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .lbl { margin-top: 8px; font-size: 0.95rem; color: var(--muted); }

/* ---------- logo / badge strip ---------- */
.strip { text-align: center; }
.strip .kicker { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 20px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; align-items: center; }
.logos span { color: var(--muted); font-weight: 600; font-size: 1.02rem; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border: 1px solid var(--border-2); border-radius: 999px; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip { padding: 10px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 0.95rem; color: var(--text); }
.chip.accent { border-color: rgba(74,222,128,0.4); background: var(--accent-soft); }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; position: relative; transition: border-color .2s, transform .2s; }
.step:hover { border-color: var(--border-2); transform: translateY(-3px); }
.step .idx { font-size: 0.85rem; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; }
.step h3 { margin: 14px 0 10px; font-size: 1.15rem; }
.step p { font-size: 0.96rem; }

/* ---------- cards / feature grid ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--border-2); transform: translateY(-3px); }
.card .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 18px; color: var(--accent); }
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { font-size: 0.98rem; }

/* product triad */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.triad .card { display: flex; flex-direction: column; }
.triad .tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }
.triad h3 { margin: 10px 0 12px; }
.triad .btn-ghost { margin-top: auto; padding-top: 18px; }

/* ---------- split panels ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; }
.panel h2 { font-size: 1.7rem; }
.checklist li { display: flex; gap: 12px; padding: 9px 0; align-items: flex-start; color: var(--text); font-size: 0.98rem; }
.checklist li::before { content: "✓"; color: var(--accent); font-weight: 800; flex: none; margin-top: 1px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 0.96rem; }
th { color: var(--muted-2); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg-2); }
td { color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }
.src-line { margin-top: 16px; font-size: 0.85rem; color: var(--muted-2); font-style: italic; }

/* ---------- architecture ---------- */
.arch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.arch .card h4 { color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; margin-bottom: 14px; }
.arch .card p { font-size: 0.96rem; }

/* ---------- traction ---------- */
.traction-band { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 30px; text-align: center; font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 36px; }
.traction-band .grad-text { font-weight: 800; }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 30px; display: flex; flex-direction: column; position: relative; }
.tier.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.tier .flag { position: absolute; top: -12px; left: 30px; background: var(--grad); color: #05201a; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; padding: 5px 14px; border-radius: 999px; }
.tier .name { font-size: 1.25rem; font-weight: 700; color: #fff; }
.tier .price { font-size: 2rem; font-weight: 800; margin: 10px 0 4px; letter-spacing: -0.02em; }
.tier .per { color: var(--muted-2); font-size: 0.9rem; }
.tier .desc { margin: 14px 0 20px; font-size: 0.95rem; }
.tier ul { flex: 1; margin-bottom: 26px; }
.tier .btn { width: 100%; justify-content: center; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 4px; font-weight: 600; color: #fff; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; font-weight: 400; transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 4px 24px; color: var(--muted); font-size: 0.98rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; border-radius: var(--radius); padding: 64px 48px; text-align: center; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(600px 300px at 50% 0%, rgba(74,222,128,0.16), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { max-width: 520px; margin: 0 auto 28px; font-size: 1.08rem; }

/* ---------- team ---------- */
/* 4 columns for 4 people, one clean row. Was repeat(3,...) when the team was 5.
   Keep the column count equal to the head count or the last row orphans. */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.member { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.member .av { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #05201a; font-weight: 800; font-size: 1.1rem; margin-bottom: 16px; }
.member .photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; border: 2px solid var(--border-2); }
.member .role { color: var(--accent); font-size: 0.85rem; font-weight: 600; margin: 4px 0 8px; }
.member p { font-size: 0.92rem; }

/* ---------- contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; padding: 13px 15px; background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 0.98rem;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { margin-top: 14px; font-size: 0.82rem; color: var(--muted-2); text-align: center; }
/* Honeypot: off-screen rather than display:none, which more bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-size: 0.86rem; text-align: center; line-height: 1.45; }
.form-status.is-ok { color: var(--accent); }
.form-status.is-error { color: #fca5a5; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 56px 0 34px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer h5 { color: #fff; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: var(--muted); font-size: 0.94rem; }
.footer ul a:hover { color: #fff; }
.footer .blurb { color: var(--muted); font-size: 0.94rem; max-width: 280px; margin-top: 14px; }
/* Social. Sized as a proper tap target (38px) rather than a bare glyph. The SVG
   uses fill:currentColor so the colour transition carries the icon with it. */
.social { display: flex; gap: 10px; margin-top: 20px; }
.social-link {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--muted); transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.social-link:hover { color: #fff; border-color: var(--border-2); background: var(--surface-2); }
.social-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.social-link svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 26px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.footer-bottom p { font-size: 0.86rem; color: var(--muted-2); }
.footer-tag { font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.footer-tag .grad-text { font-weight: 800; }

/* ---------- misc ---------- */
.divider { border: 0; border-top: 1px solid var(--border); margin: 0; }
.note { background: var(--accent-soft); border: 1px solid rgba(74,222,128,0.3); border-radius: var(--radius-sm); padding: 18px 22px; color: var(--text); font-size: 0.96rem; }
.mt-0 { margin-top: 0; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .steps, .grid-3, .triad, .arch, .team, .pricing { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    position: absolute; top: 68px; left: 0; right: 0; padding: 24px;
    background: var(--bg-2); border-bottom: 1px solid var(--border);
  }
  .nav-toggle { display: block; }
  /* All nav buttons hide on mobile to make room for the hamburger, EXCEPT Login.
     Book a Demo still appears in the hero and in every CTA band, but an existing
     customer has no other way into the app from here, so Login stays. */
  .nav-cta .btn { display: none; }
  .nav-cta .btn-login { display: inline-flex; padding: 8px 15px; font-size: 0.84rem; }
  .steps, .grid-2, .grid-3, .triad, .arch, .team, .pricing, .stats { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-band { padding: 48px 24px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
}

/* Legal long-form pages (privacy.html, terms.html). The global reset zeroes all
   margins, so prose needs its own rhythm restored. Not mirrored into
   preview/build.py: the preview covers the 8 marketing pages only. */
.legal h2 { margin: 44px 0 14px; font-size: 1.4rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-bottom: 16px; }
.legal p:last-child { margin-bottom: 0; }
.legal .src-line { margin-bottom: 36px; }
.legal ul.checklist { margin-bottom: 20px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: #fff; }
.footer-bottom a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: #fff; }