/* Detections site styles: brand tokens (Thermal palette, Red Hat type) followed by page styles. Fonts are self-hosted (SIL OFL, see ../fonts/OFL.txt and ../fonts/Geist-OFL.txt). */

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display-latin-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("../fonts/red-hat-text-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("../fonts/red-hat-mono-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable-1.7.2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable-1.7.2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Detections · Thermal brand colours */
:root {
  /* Core five */
  --thermal-ink: #140B24;        /* Infrared Ink: bands, headings, buttons on light */
  --thermal-phosphor: #F4ECFF;   /* text on Ink, buttons on Ink */
  --thermal-magenta: #FF3D7F;    /* logo iris, hero CTA ONLY, accents */
  --thermal-orange: #FF9A2E;     /* poster shapes, eyebrows on Ink */
  --thermal-yellow: #FFE45C;     /* poster shapes, highlights */

  /* Magenta support */
  --magenta-ink: #1A0710;        /* text on magenta */
  --magenta-700: #BF0F4D;        /* links and eyebrows on white */
  --magenta-800: #8F0A3A;        /* link hover */
  --magenta-300: #FF9DBE;        /* links on Ink */

  /* Violet neutrals (derived from Ink) */
  --violet-25: #F8F4FE;
  --violet-100: #E6DFF0;
  --violet-200: #D6C9EB;
  --violet-300: #C9BEDD;
  --violet-400: #8A7DA6;
  --violet-500: #5E5079;
  --violet-600: #4E406B;
  --violet-700: #362B4F;
  --violet-800: #33264A;
  --violet-850: #2A1F3F;
  --violet-900: #1B1230;

  /* Semantic: white page */
  --page: #FFFFFF;
  --page-tint: var(--violet-25);
  --border: var(--violet-100);
  --text-heading: var(--thermal-ink);
  --text-body: var(--violet-700);
  --text-muted: var(--violet-500);
  --link: var(--magenta-700);
  --link-hover: var(--magenta-800);

  /* Semantic: Ink band */
  --band: var(--thermal-ink);
  --band-surface: var(--violet-900);
  --band-border: var(--violet-800);
  --band-text: var(--thermal-phosphor);
  --band-muted: var(--violet-200);
  --band-eyebrow: var(--thermal-orange);
  --band-link: var(--magenta-300);

  /* Buttons: magenta is reserved for ONE hero CTA per page */
  --btn-hero-bg: var(--thermal-magenta);
  --btn-hero-fg: var(--magenta-ink);
  --btn-bg: var(--thermal-ink);
  --btn-bg-hover: var(--violet-850);
  --btn-fg: var(--thermal-phosphor);
  --btn-on-ink-bg: var(--thermal-phosphor);
  --btn-on-ink-fg: var(--thermal-ink);
  --focus: #E61E63;
}

:root {
  --font-display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, monospace;

  /* Headlines: weight 800, never 900; tracking never tighter than -0.025em */
  --type-display-size: 64px;  --type-display-lh: 1.06;  --type-display-track: -0.022em;  --type-display-weight: 800;
  --type-h2-size: 44px;       --type-h2-lh: 1.08;       --type-h2-track: -0.02em;        --type-h2-weight: 800;
  --type-h3-size: 21px;       --type-h3-lh: 1.2;        --type-h3-track: -0.01em;        --type-h3-weight: 700;
  --type-lede-size: 19px;     --type-lede-lh: 1.55;
  --type-body-size: 18px;     --type-body-lh: 1.6;
  --type-small-size: 15px;    --type-small-lh: 1.55;
  --type-eyebrow-size: 13px;  --type-eyebrow-track: 0.1em;
  --type-button-size: 15px;   --type-button-weight: 700;
}

:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 104px;
  --container: 1312px;
  --gutter: 64px;
  --section-y: 104px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-window: 0 0 0 1px var(--band-border), 0 50px 90px -30px rgb(20 11 36 / 0.85);
  --shadow-page: 0 40px 80px -48px rgb(20 11 36 / 0.45);
}

html { background: var(--page); color: var(--text-body); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); font-family: var(--font-body); color: var(--text-body); font-size: 18px; line-height: 1.6; }
button { font: inherit; }
code { font-family: var(--font-mono); font-size: .92em; }
img, svg { display: block; }
.wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-700); margin: 0 0 18px; }
.band .eyebrow { color: var(--band-eyebrow); }
h1, h2, h3 { font-family: var(--font-display); color: var(--text-heading); margin: 0; }
.band h1, .band h2, .band h3 { color: var(--band-text); }
h1 { font-weight: 800; font-size: 64px; line-height: 1.06; letter-spacing: -.022em; }
h2 { font-weight: 800; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; }
h3 { font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
em.hot { font-style: normal; color: var(--thermal-magenta); }
.lede { font-size: 19px; line-height: 1.55; margin: 22px 0 0; max-width: 620px; }
.band .lede { color: var(--band-muted); }
.muted { color: var(--text-muted); }

.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; font-weight: 700; font-size: 15px; padding: 12px 20px; white-space: nowrap; cursor: pointer; transition: background-color .18s ease-out, color .18s ease-out, box-shadow .18s ease-out; }
.btn-lg { font-size: 16px; padding: 15px 24px; }
.btn-hero { background: var(--btn-hero-bg); color: var(--btn-hero-fg); }
.btn-hero:hover { background: #ff5a93; color: var(--btn-hero-fg); }
.btn-ink { background: var(--btn-bg); color: var(--btn-fg); }
.btn-ink:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn-ghost-ink { background: transparent; color: var(--band-text); box-shadow: inset 0 0 0 1.5px rgb(244 236 255 / .5); }
.btn-ghost-ink:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--thermal-phosphor); }
.tlink { font-weight: 600; font-size: 15.5px; }
.band .tlink { color: var(--band-link); }
.band .tlink:hover { color: #fff; }

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; }
.strip { background: var(--thermal-ink); color: var(--band-muted); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; }
.strip .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 9px; padding-bottom: 9px; }
.strip .live { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; }
.strip .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--thermal-magenta); }
.strip .live a { color: var(--band-link); text-transform: none; letter-spacing: .02em; }
.strip .live a:hover { color: #fff; }
.strip .conv { display: inline-flex; align-items: center; gap: 8px; }
.strip .conv .src { color: var(--thermal-phosphor); }
.strip .conv .arrow { color: var(--violet-500); }
.rot { position: relative; display: inline-block; width: 60px; height: 1.3em; }
.rot span { position: absolute; left: 0; top: 0; color: var(--thermal-orange); opacity: 0; transition: opacity .2s ease-out; }
.rot span.on { opacity: 1; }
.bar { border-bottom: 1px solid var(--border); }
.bar .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.bar .btn { justify-self: end; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--thermal-ink); justify-self: start; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo .lid { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.logo .iris { fill: var(--thermal-magenta); }
.logo .word { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; line-height: 1; }
.logo:hover { color: var(--thermal-ink); }
.menu { display: flex; align-items: center; gap: 6px; }
.trig { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; color: var(--violet-600); font-weight: 500; font-size: 15px; padding: 9px 12px; border-radius: 999px; transition: color .18s ease-out, background-color .18s ease-out; }
.trig svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease-out; }
.trig[aria-expanded="true"] svg { transform: rotate(180deg); }
.trig:hover, .trig[aria-expanded="true"] { color: var(--text-heading); }
.trig.cur { color: var(--text-heading); font-weight: 600; box-shadow: inset 0 -2px 0 var(--thermal-magenta); border-radius: 0; padding-left: 2px; padding-right: 2px; margin: 0 10px; }
.trig[aria-expanded="true"]:not(.cur) { background: var(--violet-25); }
.menu-btn { display: none; }

.panel { --p-line: var(--border); --p-head: var(--thermal-ink); --p-text: var(--violet-600); --p-mono: var(--magenta-700); --p-link: var(--magenta-700); --p-link-h: var(--magenta-800); --p-hover: var(--violet-25);
  position: absolute; top: 100%; z-index: 5; display: none; padding: 24px; border: 1px solid var(--p-line); border-top: 0; border-radius: 0 0 16px 16px; background: #fff; color: var(--p-text); box-shadow: var(--shadow-page); font-size: 15px; line-height: 1.5; }
.panel.show { display: block; }
.panel .mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-mono); }
.panel .lnk { color: var(--p-link); font-weight: 600; font-size: 14px; }
.panel .lnk:hover { color: var(--p-link-h); }
.m-feat { width: 300px; padding: 14px; }
.m-feat .list { display: flex; flex-direction: column; gap: 2px; }
.m-feat .list.more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--p-line); }
.m-feat .all { display: inline-block; margin: 10px 12px 4px; }
.fn { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; border-radius: 12px; transition: background-color .15s ease-out; }
.fn:hover { background: var(--p-hover); }
.fn::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--rail); }
[data-s="Plan"] { --rail: var(--thermal-magenta); }
[data-s="Build"] { --rail: var(--thermal-orange); }
[data-s="Ship"] { --rail: var(--thermal-yellow); }
[data-s="Measure"] { --rail: var(--thermal-ink); }
.fn strong { display: block; color: var(--p-head); font-size: 15px; font-weight: 600; line-height: 1.25; }
.fn small { display: block; font-size: 12.5px; color: var(--p-text); }
.m-who { width: 380px; flex-direction: column; gap: 2px; padding: 12px; }
.m-who.show { display: flex; }
.itm { display: block; padding: 11px 12px; border-radius: 12px; transition: background-color .15s ease-out; }
.itm:hover { background: var(--p-hover); }
.itm strong { display: block; color: var(--p-head); font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.itm span { display: block; color: var(--p-text); font-size: 13.5px; line-height: 1.45; }
.i-fans { width: 760px; padding: 22px 24px; }
.i-fans .two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.i-fans .lane + .lane { padding-left: 28px; border-left: 1px solid var(--p-line); }
.i-fans .lane > .mono { display: block; margin-bottom: 4px; }
.i-fans .lane > p { margin: 0 0 12px; font-size: 13.5px; color: var(--p-text); }
.fan { display: grid; grid-template-columns: auto 40px 1fr; align-items: center; }
.fan .src { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--thermal-phosphor); background: var(--thermal-ink); padding: 8px 13px; border-radius: 999px; }
.fan svg { width: 40px; height: auto; color: var(--violet-200); }
.fan svg path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.fan .outs { display: flex; flex-direction: column; gap: 4px; }
.fan .outs a { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 10px; border-radius: 12px; transition: background-color .15s ease-out; }
.fan .outs a:hover { background: var(--p-hover); }
.fan .outs strong { color: var(--p-head); font-size: 14.5px; font-weight: 600; }
.fan .outs code { font-size: 12px; color: var(--p-mono); }
.fan .outs a.soon strong { color: var(--violet-500); }
.fan .outs a.soon code { color: var(--violet-500); }
.ifoot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--p-line); display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.ifoot b { color: var(--p-head); font-weight: 600; }

.band { position: relative; overflow: hidden; background: var(--band); color: var(--band-text); }
.shape { position: absolute; pointer-events: none; }
.sec { padding: var(--section-y) 0; }
.tint { background: var(--page-tint); }
.sec-head { max-width: 760px; margin-bottom: 56px; }

.hero { min-height: 600px; display: flex; align-items: center; }
.hero .wrap { position: relative; width: 100%; padding-top: 104px; padding-bottom: 112px; }
.hero .copy { max-width: 640px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero .tiles { position: absolute; right: -22px; top: -22px; display: grid; grid-template-columns: repeat(8, 46px); gap: 10px; }
.hero .tiles i { width: 46px; height: 46px; border-radius: 12px; }
.hero .tiles .t0 { background: var(--violet-900); box-shadow: inset 0 0 0 1px var(--band-border); }
.hero .tiles .t1 { background: var(--violet-800); }
.hero .tiles .t2 { background: var(--thermal-yellow); }
.hero .tiles .t3 { background: var(--thermal-orange); }
.hero .tiles .t4 { background: var(--thermal-magenta); }
.hero .tiles .ring { box-shadow: 0 0 0 2px var(--thermal-phosphor); }
.hero .tiles .e { visibility: hidden; }

.problem .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; }
.problem p { margin: 6px 0 22px; }
.qs { list-style: none; margin: 0; padding: 0; }
.qs li { display: flex; align-items: baseline; gap: 22px; padding: 18px 0; border-top: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: -.015em; color: var(--text-heading); }
.qs li:last-child { border-bottom: 1px solid var(--border); }
.qs li span { font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .04em; color: var(--magenta-700); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.step { position: relative; background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--border); padding: 28px 24px 26px; }
.step::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--rail); }
.step .meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.step .meta b { font-weight: 500; color: var(--violet-300); }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--violet-600); }
.step .ea { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--magenta-700); }

.deploy .grid { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; padding-top: var(--section-y); padding-bottom: 72px; }
.deploy .s1 { width: 150px; height: 150px; border-radius: 36px; background: var(--thermal-yellow); right: -30px; top: 60px; }
.modes { margin: 32px 0 0; padding: 0; list-style: none; }
.modes li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--band-border); font-size: 16px; line-height: 1.5; color: var(--band-muted); }
.modes li:last-child { border-bottom: 1px solid var(--band-border); }
.modes b { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--thermal-phosphor); padding-top: 2px; }
.deploy .tlink { display: inline-block; margin-top: 26px; }
.stats-wrap { position: relative; padding-bottom: 8px; }
.stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--band-border); }
.stats div { padding: 30px 24px 40px 0; }
.stats strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--thermal-phosphor); }
.stats span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--band-muted); max-width: 220px; }

.win { position: relative; border-radius: 16px; overflow: hidden; font-size: 13.5px; line-height: 1.4; }
.win.dark { background: var(--violet-900); color: var(--band-muted); box-shadow: var(--shadow-window); }
.win.light { background: #fff; color: var(--violet-600); box-shadow: 0 0 0 1px var(--border); }
.win .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.win.dark .top { border-bottom: 1px solid var(--band-border); color: var(--violet-200); }
.win.light .top { border-bottom: 1px solid var(--border); color: var(--text-muted); background: var(--page-tint); }
.win .top b { font-weight: 500; }
.win.dark .top b { color: var(--thermal-phosphor); }
.win.light .top b { color: var(--text-heading); }
.win .tabs { display: flex; gap: 22px; padding: 0 18px; font-size: 13px; font-weight: 600; }
.win.dark .tabs { border-bottom: 1px solid var(--band-border); }
.win .tabs span { padding: 12px 0 11px; }
.win.dark .tabs span.on { color: var(--thermal-phosphor); box-shadow: inset 0 -2px 0 var(--thermal-magenta); }
.win .body { padding: 8px 18px 16px; }
.trow { display: grid; grid-template-columns: 1.5fr 1.1fr auto; gap: 14px; align-items: center; padding: 12px 0; }
.win.dark .trow + .trow { border-top: 1px solid var(--band-border); }
.trow .t strong { display: block; font-size: 14px; font-weight: 600; color: var(--thermal-phosphor); }
.trow .t small { display: block; font-size: 12px; color: var(--violet-300); margin-top: 2px; }
.trow .m { font-family: var(--font-mono); font-size: 11.5px; color: var(--violet-200); }
.trow.head { padding: 10px 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-500); }
.st { justify-self: end; font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.st.live { background: var(--thermal-yellow); color: var(--thermal-ink); }
.st.mon { background: transparent; color: var(--thermal-phosphor); box-shadow: inset 0 0 0 1px var(--violet-500); }
.st.soak { background: var(--thermal-orange); color: var(--thermal-ink); }
.st.wait { background: transparent; color: var(--magenta-300); box-shadow: inset 0 0 0 1px var(--magenta-300); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--band-border); background: var(--thermal-ink); }
.acts span { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; color: var(--thermal-phosphor); box-shadow: inset 0 0 0 1px var(--band-border); }
.acts span.pri { background: var(--thermal-phosphor); color: var(--thermal-ink); box-shadow: none; }
.drift { display: flex; justify-content: space-between; padding: 10px 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--violet-300); background: var(--thermal-ink); border-top: 1px solid var(--band-border); }

.split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: center; }
.split.rev { grid-template-columns: 1.25fr 1fr; }
.points { margin: 30px 0 0; padding: 0; list-style: none; }
.points li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--border); font-size: 16px; line-height: 1.5; }
.points li:last-child { border-bottom: 1px solid var(--border); }
.points li::before { content: ""; position: absolute; left: 2px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--rail, var(--thermal-ink)); }
.points b { color: var(--text-heading); font-weight: 600; }

.matrix { padding: 16px 18px 18px; }
.mx-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.mx-head strong { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; color: var(--text-heading); }
.mx-head span { font-size: 12.5px; }
.mx { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.mx .col { display: flex; flex-direction: column; gap: 3px; }
.mx .col > b { display: block; height: 30px; font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; line-height: 1.15; color: var(--text-muted); overflow: hidden; }
.mx i { display: block; height: 13px; border-radius: 3px; }
.matrix i[data-t="0"] { background: var(--violet-100); }
.matrix i[data-t="1"] { background: var(--thermal-magenta); }
.matrix i[data-t="2"] { background: var(--thermal-orange); }
.matrix i[data-t="3"] { background: var(--thermal-yellow); box-shadow: inset 0 0 0 1px rgb(20 11 36 / .06); }
.mx i.pick { outline: 2px solid var(--thermal-ink); outline-offset: 1px; }
.legend { display: flex; gap: 16px; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.tip { position: absolute; right: 22px; bottom: 62px; width: 250px; background: var(--thermal-ink); color: var(--band-muted); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; box-shadow: 0 20px 40px -20px rgb(20 11 36 / .6); }
.tip strong { display: block; color: var(--thermal-phosphor); font-size: 13px; margin-bottom: 6px; }
.tip div { display: flex; justify-content: space-between; padding: 3px 0; }
.tip code { color: var(--thermal-orange); font-size: 11px; }

.lib .body { padding: 6px 18px 12px; }
.lrow { display: grid; grid-template-columns: 1.5fr 1.2fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.lrow:first-child { border-top: 0; }
.lrow.head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 0 6px; }
.lrow .t strong { display: block; color: var(--text-heading); font-weight: 600; font-size: 14px; }
.lrow .t small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lrow .uc { font-size: 13px; }
.lrow .uc code { color: var(--magenta-700); font-size: 11.5px; }
.lb { justify-self: end; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.lb.adopt { background: var(--thermal-ink); color: var(--thermal-phosphor); }
.lb.dup { color: var(--magenta-700); box-shadow: inset 0 0 0 1px var(--magenta-300); }
.lb.done { color: var(--violet-600); box-shadow: inset 0 0 0 1px var(--border); }
.pulled { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pulled span { padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-heading); font-weight: 600; }
.pulled span.on { background: var(--thermal-ink); color: var(--thermal-phosphor); box-shadow: none; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--border); padding: 32px 28px 28px; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--rail); }
.card .who { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.card h3 { font-size: 24px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin-bottom: 20px; }
.card ul { margin: 0 0 24px; padding: 0; list-style: none; }
.card li { padding: 9px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.45; }
.card li small { color: var(--magenta-700); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-left: 6px; }
.card a { margin-top: auto; font-weight: 600; font-size: 15px; }

.works { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.works .wrap { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.works .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.works .names { display: flex; flex-wrap: wrap; gap: 14px 36px; font-weight: 600; font-size: 16px; color: var(--violet-600); }
.works .names i { width: 1px; background: var(--border); }

.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-top: 96px; padding-bottom: 96px; }
.cta h2 { max-width: 640px; }
.cta p { margin: 14px 0 0; color: var(--text-muted); }

.site-footer { background: var(--band); color: var(--band-muted); }
.site-footer .logo { color: var(--thermal-phosphor); }
.site-footer .logo:hover { color: var(--thermal-phosphor); }
.foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-top: 72px; padding-bottom: 48px; }
.foot p { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--band-muted); max-width: 420px; }
.foot h4 { margin: 4px 0 14px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--band-eyebrow); }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { padding: 4px 0; font-size: 15px; }
.foot li a { color: var(--band-muted); transition: color .18s ease-out; }
.foot li a:hover { color: #fff; }
.legal { border-top: 1px solid var(--band-border); }
.legal .wrap { display: flex; justify-content: space-between; padding-top: 22px; padding-bottom: 28px; font-size: 14px; color: var(--violet-300); }
.legal .heart { color: var(--thermal-magenta); }

@media (max-width: 1180px) {
  :root { --gutter: 40px; --section-y: 88px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .deploy .grid, .split, .split.rev, .problem .wrap { grid-template-columns: 1fr; gap: 48px; }
  .hero .tiles { grid-template-columns: repeat(8, 34px); gap: 8px; right: -16px; top: -16px; }
  .hero .tiles i { width: 34px; height: 34px; border-radius: 9px; }
}
@media (max-width: 900px) {
  :root { --gutter: 16px; --section-y: 72px; }
  h1 { font-size: 44px; }
  h2 { font-size: 34px; }
  .bar .wrap { grid-template-columns: 1fr auto; }
  .bar .menu, .bar .btn { display: none; }
  .menu-btn { display: inline-flex; justify-self: end; border: 0; background: var(--violet-25); color: var(--text-heading); font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 999px; }
  .strip .conv { display: none; }
  .hero { min-height: 0; }
  .hero-art { display: none; }
  .steps, .cards, .stats { grid-template-columns: 1fr; }
  .cta .wrap { flex-direction: column; align-items: flex-start; }
  .foot .wrap { grid-template-columns: 1fr; }
  .qs li { font-size: 22px; }
  .win { font-size: 12.5px; }
  .trow, .lrow { grid-template-columns: 1fr auto; }
  .trow .m, .lrow .uc { display: none; }
  .tip { display: none; }
  .matrix { overflow-x: auto; }
  .deploy .s1 { display: none; }
  .trow.head span:nth-child(2) { display: none; }
  .stats div { padding: 22px 0 26px; }
  .mx { min-width: 560px; }
  .mx-head { flex-direction: column; gap: 4px; }
}

/* How it works: interactive lifecycle driving a product window in the portal's light theme (tokens from the app's theme.css, scoped to .pw) */
.life { padding: var(--section-y) 0 calc(var(--section-y) + 8px); text-align: center; }
.life .sec-head { margin: 0 auto; }
.life .lede { margin-left: auto; margin-right: auto; }
.life .s1 { width: 300px; height: 300px; border-radius: 50%; background: var(--thermal-magenta); right: -120px; top: -110px; }
.steps-h { position: relative; display: flex; justify-content: center; gap: 0; margin: 48px auto 22px; max-width: 900px; }
.steps-h::before { content: ""; position: absolute; left: 8%; right: 8%; top: 15px; height: 2px; background: var(--band-border); }
.steps-h .st { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; line-height: 1.3; color: var(--violet-300); font-weight: 600; font-size: 14px; padding: 0 4px; transition: color .18s ease-out; }
.steps-h .st i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--band); box-shadow: inset 0 0 0 2px var(--band-border); font-style: normal; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--violet-300); transition: background-color .18s ease-out, box-shadow .18s ease-out, color .18s ease-out; }
.steps-h .st:hover { color: var(--thermal-phosphor); }
.steps-h .st.done i { box-shadow: inset 0 0 0 2px var(--violet-500); color: var(--thermal-phosphor); }
.steps-h .st.on { color: var(--thermal-phosphor); }
.steps-h .st.on i { background: var(--thermal-phosphor); box-shadow: none; color: var(--thermal-ink); }
.steps-h .st p { margin: 0; }
.steps-h .st-s { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .04em; color: var(--violet-500); }
.step-cap { position: relative; min-height: 28px; margin: 0 auto 26px; max-width: 760px; font-size: 16px; color: var(--band-muted); }
.step-cap b { color: var(--thermal-phosphor); font-weight: 600; }
.step-cap p { margin: 0; }
.step-cap .cap:not(.on) { display: none; }

.life .win-wrap { position: relative; max-width: 1140px; margin: 0 auto; }
.life .demo-note { margin: 22px auto 0; max-width: 760px; font-size: 13px; line-height: 1.5; color: var(--violet-400); }
.life .pw { box-shadow: 0 0 0 1px rgb(244 236 255 / .22), 0 50px 90px -30px rgb(0 0 0 / .85); }
.pw { --ink: #140B24; --ink-raised: #241838; --ink-border: #3B2E55; --phos: #F4ECFF; --phos-m: #B9ACD2;
  --frame: #EEEEF1; --canvas: #FFFFFF; --card: #FFFFFF; --raised: #F2F2F4; --thead: #FAFAFB; --input: #FFFFFF; --track: #ECECEF;
  --ring: #E3E3E7; --ln: #E7E7EA; --strong: #D4D4D8; --row: #F2F2F4;
  --tx: #18181B; --mu: #62626B; --sub: #B4B4BB; --nav: #3F3F46; --navm: #73737C;
  --pri: #140B24; --pri-fg: #F4ECFF; --acc: #FF3D7F; --link: #BF0F4D;
  --ok: #0F7A52; --ok-bg: #E1F5EC; --inf: #1D4ED8; --inf-bg: #E0EAFF; --wrn: #8A5A00; --wrn-bg: #FFF1C2; --dng: #B42318; --dng-bg: #FDE8E8; --neu: #52525B; --neu-bg: #F1F1F3;
  --code: #FAFAFB; --code-key: #7A1238; --code-str: #8A5A00;
  position: relative; display: flex; flex-direction: column; height: 540px; overflow: hidden; border-radius: 14px; background: var(--frame); color: var(--tx); text-align: left;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.pw[data-theme="dim"] {
  --frame: #0F1020; --canvas: #151729; --card: #1C1F33; --raised: #252840; --thead: #181A2E; --input: #111324; --track: #2C2F48;
  --ring: #21243B; --ln: #252840; --strong: #383C58; --row: #1E2136;
  --tx: #EEF0FA; --mu: #A6AAC4; --sub: #5E627E; --nav: #D8DBEE; --navm: #9599B5;
  --pri: #F4ECFF; --pri-fg: #140B24; --acc: #C9B8F5; --link: #D6C9FA;
  --ok: #5BE3A6; --ok-bg: rgb(91 227 166 / .13); --inf: #A9C4FF; --inf-bg: rgb(169 196 255 / .13); --wrn: #FFE45C; --wrn-bg: rgb(255 228 92 / .12); --dng: #FFA3A3; --dng-bg: rgb(255 163 163 / .13); --neu: #CACDE0; --neu-bg: rgb(202 205 224 / .11);
  --code: #111324; --code-key: #D6C9FA; --code-str: #FFE45C; }
.pw h4, .pw h5 { font-family: inherit; letter-spacing: -.01em; color: var(--tx); margin: 0; }
.pw .top { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; background: var(--ink); color: var(--phos); flex: none; }
.pw .lg { display: inline-flex; align-items: center; gap: 8px; width: 150px; font-weight: 600; font-size: 13px; letter-spacing: -.01em; }
.pw .lg svg { width: 20px; height: 20px; }
.pw .ws { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 8px; background: var(--ink-raised); font-size: 11.5px; font-weight: 500; }
.pw .ws b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #FF9A2E; color: #2A1300; font-size: 9px; font-weight: 700; }
.pw .ws em, .pw .srch { font-style: normal; color: var(--phos-m); }
.pw .srch { display: flex; align-items: center; margin-left: auto; width: 240px; padding: 5px 9px; border-radius: 8px; background: var(--ink-raised); font-size: 11.5px; }
.pw .srch kbd { margin-left: auto; font-family: "Geist Mono", monospace; font-size: 10px; padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ink-border); }
.pw .me { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--phos); color: var(--ink); font-size: 9.5px; font-weight: 700; }
.pw .shell { display: grid; grid-template-columns: 168px 1fr; flex: 1; min-height: 0; }
.pw .side { display: flex; flex-direction: column; gap: 1px; padding: 12px 8px; color: var(--nav); }
.pw .nl { padding: 4px 8px 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--navm); }
.pw .nl + .ni { margin-top: 0; }
.pw .ni { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 12px; }
.pw .ni svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pw .ni.on { background: var(--canvas); color: var(--tx); font-weight: 500; box-shadow: inset 2px 0 0 var(--acc), 0 0 0 1px var(--ring); }
.pw .ni .ct { margin-left: auto; font-size: 10.5px; color: var(--navm); }
.pw .gap { height: 10px; }
.pw .canvas { position: relative; margin: 8px 8px 8px 0; min-width: 0; border-radius: 12px; background: var(--canvas); box-shadow: 0 0 0 1px var(--ring); overflow: hidden; }
.pw .inner { padding: 14px 20px; }
.pw .crumb { font-size: 11px; color: var(--mu); margin-bottom: 5px; }
.pw .mono { font-family: "Geist Mono", monospace; }
.pw .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pw .hd h4 { font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.pw .hd h4 .mono { font-size: 14px; font-weight: 500; color: var(--mu); margin-right: 6px; }
.pw .metar { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 11px; color: var(--mu); }
.pw .btns { display: flex; gap: 6px; flex: none; }
.pw .b { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--card); color: var(--tx); box-shadow: inset 0 0 0 1px var(--strong); }
.pw .b small { color: var(--mu); font-size: 10.5px; }
.pw .b.pri { background: var(--pri); color: var(--pri-fg); box-shadow: none; }
.pw .b.ghost { background: transparent; box-shadow: none; color: var(--mu); }
.pw .b.dg { color: var(--dng); }
.pw .b.wn { color: var(--wrn); }
.pw .btns.ops { flex-wrap: wrap; }
.pw .tabs { display: flex; gap: 18px; margin-top: 12px; border-bottom: 1px solid var(--ln); font-size: 12px; color: var(--mu); }
.pw .tabs span { display: inline-flex; align-items: center; gap: 5px; padding-bottom: 9px; white-space: nowrap; }
.pw .tabs span.on { color: var(--tx); font-weight: 500; box-shadow: inset 0 -2px 0 var(--acc); }
.pw .tabs em { font-style: normal; font-size: 10px; padding: 0 6px; border-radius: 999px; background: var(--raised); color: var(--mu); }
.pw .pane { display: grid; gap: 12px; margin-top: 12px; }
.pw .g2 { grid-template-columns: 1.25fr 1fr; }
.pw .g2e { grid-template-columns: 1fr 1fr; }
.pw .gt { grid-template-columns: 240px 1fr; gap: 16px; }
.pw .col { display: grid; gap: 12px; align-content: start; }
.pw .cd { padding: 12px 13px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ln); }
.pw .cd h5 { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.pw .lbl { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mu); }
.pw .kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--row); font-size: 11.5px; }
.pw .kv:first-of-type { border-top: 0; }
.pw .kv dt { color: var(--mu); }
.pw .kv dd { margin: 0; }
.pw .code { margin: 0; padding: 10px 11px; border-radius: 8px; background: var(--code); box-shadow: inset 0 0 0 1px var(--ln); font-family: "Geist Mono", monospace; font-size: 10.5px; line-height: 1.65; color: var(--tx); white-space: pre; overflow: hidden; }
.pw .code b { font-weight: 500; color: var(--code-key); }
.pw .code u { text-decoration: none; color: var(--code-str); }
.pw .okt { color: var(--ok); }
.pw .mut { color: var(--mu); }
.pw .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.pw .pill.dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pw .pill.ok { color: var(--ok); background: var(--ok-bg); }
.pw .pill.inf { color: var(--inf); background: var(--inf-bg); }
.pw .pill.wrn { color: var(--wrn); background: var(--wrn-bg); }
.pw .pill.dng { color: var(--dng); background: var(--dng-bg); }
.pw .pill.neu { color: var(--neu); background: var(--neu-bg); }
.pw .pill.plat { color: var(--tx); background: var(--raised); }
.pw .chk { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--row); font-size: 11.5px; }
.pw .chk:first-of-type { border-top: 0; }
.pw .vote { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 11.5px; }
.pw .vote i { width: 7px; height: 7px; border-radius: 50%; background: var(--sub); }
.pw .vote i.y { background: var(--ok); }
.pw .vote span:last-child { margin-left: auto; color: var(--mu); }
.pw .trn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: var(--raised); color: var(--mu); }
.pw .note { margin: 6px 0 0; font-size: 11px; color: var(--mu); }
.pw .tg { display: grid; gap: 2px; align-content: start; }
.pw .tg .lbl { padding: 0 8px 6px; }
.pw .tgt { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 9px 8px 12px; border-radius: 8px; }
.pw .tgt.on { background: var(--raised); }
.pw .tgt.on::before { content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--acc); }
.pw .tgt strong { font-size: 11.5px; font-weight: 600; }
.pw .tgt small { grid-column: 1; font-size: 10.5px; color: var(--mu); }
.pw .tgt small em { font-style: normal; color: var(--wrn); }
.pw .tgt .pill { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.pw .th .row { display: flex; justify-content: space-between; align-items: flex-start; }
.pw .th h5 { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pw .th .sub { margin: 4px 0 10px; font-size: 10.5px; color: var(--mu); }
.pw .stats { display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ln); }
.pw .stats div { padding: 8px 10px; }
.pw .stats div + div { border-left: 1px solid var(--ln); }
.pw .stats dd { margin: 3px 0 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw .maint { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ln); font-size: 11px; color: var(--mu); }
.pw .maint > span:first-child { margin-right: 6px; }
.pw .bars { display: flex; align-items: flex-end; gap: 3px; height: 100px; padding-top: 6px; }
.pw .bars i { flex: 1; border-radius: 2px 2px 0 0; background: var(--strong); }
.pw .bars i.hi { background: var(--acc); }
.pw .axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9.5px; color: var(--mu); }
.pw .fb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pw .fb div { padding: 8px; border-radius: 8px; background: var(--raised); text-align: center; }
.pw .fb strong { display: block; font-size: 16px; font-weight: 600; }
.pw .fb small { font-size: 10px; color: var(--mu); }
.pw .warn { margin-bottom: 8px; padding: 9px 11px; border-radius: 8px; background: var(--wrn-bg); color: var(--wrn); font-size: 11.5px; font-weight: 500; }
.pw .warn small { display: block; margin-top: 2px; font-weight: 400; color: var(--mu); }
.pw .act { list-style: none; margin: 0; padding: 0; }
.pw .act li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--row); font-size: 11.5px; }
.pw .act li:first-child { border-top: 0; }
.pw .av { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pri); color: var(--pri-fg); font-size: 8.5px; font-weight: 700; }
.pw .av.sys { background: var(--raised); color: var(--mu); }
.pw .act small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--mu); }
.pw .act time { font-size: 10.5px; color: var(--mu); white-space: nowrap; }
.pw .dim { position: absolute; inset: 0; background: rgb(15 16 32 / .45); }
.pw .slide { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; padding: 16px; background: var(--card); box-shadow: -1px 0 0 var(--ln), -24px 0 40px -24px rgb(0 0 0 / .4); }
.pw .slide h5 { font-size: 13px; margin-bottom: 10px; }
.pw .slide .sl2 { margin: 12px 0 4px; }
.pw .done { margin-top: 12px; padding: 9px 11px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); font-size: 11.5px; font-weight: 500; }
.pw .done small { display: block; margin-top: 2px; font-weight: 400; color: var(--mu); }
.pw .fade { animation: pfade .12s ease-out; }
@keyframes pfade { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pw .fade { animation: none; } }
@media (max-width: 1180px) { .pw .shell { grid-template-columns: 1fr; } .pw .side { display: none; } .pw .canvas { margin-left: 8px; } }
@media (max-width: 900px) { .steps-h .st { font-size: 12px; } .steps-h .st-s { display: none; } .pw { height: auto; min-height: 560px; } .pw .g2, .pw .g2e, .pw .gt { grid-template-columns: 1fr; } .pw .btns, .pw .srch, .pw .ws { display: none; } .pw .slide { width: 86%; } .pw .stats { grid-template-columns: repeat(2, 1fr); } }

/* How it works, step 01: the use case record (header and tabs swap in when .pw has .is-uc) */
.pw .uc-only { display: none; }
.pw.is-uc .uc-only { display: block; }
.pw.is-uc .hd.uc-only { display: flex; }
.pw.is-uc .tabs.uc-only { display: flex; }
.pw.is-uc .crumb:not(.uc-only), .pw.is-uc .hd:not(.uc-only), .pw.is-uc [data-tabs] { display: none; }
.pw .uc-pane { grid-template-columns: 1.1fr 1.1fr .9fr; align-items: start; }
.pw .uc-pane .cd { padding: 10px 12px; }
.pw .uc-pane .cd h5 { margin-bottom: 6px; }
.pw .uc-pane .kv { align-items: center; padding: 3px 0; }
.pw .uc-pane .kv dd { text-align: right; }
.pw .uc-pane .lbl { display: block; margin: 7px 0 3px; }
.pw .uc-pane .chip.mono { color: var(--mu); }
.pw .uc-pane .bj { margin-bottom: 6px; }
.pw .uc-pane .chips { gap: 4px; }
.pw .tlp { padding: 1px 7px; border-radius: 6px; font-family: "Geist Mono", monospace; font-size: 10px; font-weight: 500; color: var(--wrn); background: var(--wrn-bg); }
.pw .rk { display: inline-flex; align-items: center; gap: 7px; }
.pw .rk i { position: relative; width: 54px; height: 5px; border-radius: 3px; background: var(--track); }
.pw .rk i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 72%; border-radius: 3px; background: var(--acc); }
.pw .dets { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 900px) { .pw .uc-pane { grid-template-columns: 1fr; } }

/* What it does: the five pillars (rows) */
[data-s="Run"] { --rail: var(--violet-500); }
.pillars .sec-head { margin-bottom: 48px; }
.pl { list-style: none; margin: 0; padding: 0; }
.pl > li { position: relative; display: grid; grid-template-columns: 320px 1fr 320px; gap: 48px; align-items: start; padding: 34px 0 34px 28px; border-top: 1px solid var(--border); scroll-margin-top: 140px; }
.pl > li:last-child { border-bottom: 1px solid var(--border); }
.pl > li::before { content: ""; position: absolute; left: 0; top: 38px; bottom: 38px; width: 4px; border-radius: 4px; background: var(--rail); }
.pl-name { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px; }
.pl-n { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.pl-name h3 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.pl-k { grid-column: 2; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-700); margin-top: 6px; }
.pl-say { margin: 4px 0 0; font-size: 19px; line-height: 1.55; color: var(--text-body); }
.pl-say b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--text-heading); }
.pl-proof { list-style: none; margin: 6px 0 0; padding: 0; }
.pl-proof li { padding: 8px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.45; color: var(--violet-600); }
.pl-proof li:first-child { border-top: 0; padding-top: 0; }

@media (max-width: 1180px) { .pl > li { grid-template-columns: 1fr; gap: 14px; } }

/* Features page: intro, pillar sections with product windows, import, MSSP, security, coming next */
.fhero .wrap { position: relative; padding-top: 88px; padding-bottom: 72px; }
.fhero .copy { max-width: 760px; }
.fhero h1 { font-size: 56px; }
.fhero .hero-art .tiles { transform: scale(.78); transform-origin: top right; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.jump a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px; border-radius: 999px; color: var(--band-text); font-weight: 600; font-size: 14.5px; box-shadow: inset 0 0 0 1px var(--band-border); transition: box-shadow .18s ease-out, color .18s ease-out; }
.jump a::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--rail, var(--thermal-phosphor)); }
.jump a:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--violet-500); }
[data-s="Run"] { --rail: var(--violet-500); }
.band [data-s="Measure"], .jump [data-s="Measure"] { --rail: var(--thermal-phosphor); }
[data-s="Extra"] { --rail: var(--violet-300); }

.feat { scroll-margin-top: 110px; }
.feat .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.feat.flip .wrap { grid-template-columns: 1.1fr .9fr; }
.feat.flip .feat-copy { order: 2; }
.feat .eyebrow { display: flex; align-items: center; gap: 10px; }
.feat .eyebrow::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--rail); }
.feat .points { margin-top: 26px; }
.feat .points li::before { background: var(--rail); }
.band .points li { border-color: var(--band-border); color: var(--band-muted); }
.band .points b { color: var(--thermal-phosphor); }
.ea { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--magenta-700); white-space: nowrap; }
.band .ea { color: var(--magenta-300); }
.feat-win { position: relative; }
.feat .pw { height: auto; }
.sec.feat .pw[data-theme="dim"] { box-shadow: 0 0 0 1px rgb(20 11 36 / .2), 0 40px 80px -40px rgb(20 11 36 / .65); }
.band.feat .pw { box-shadow: 0 0 0 1px rgb(244 236 255 / .22), 0 50px 90px -30px rgb(0 0 0 / .85); }
.band.feat .wrap { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.pw.nosb .shell { grid-template-columns: 1fr; }
.pw.nosb .side { display: none; }
.pw.nosb .canvas { margin-left: 8px; }
.pw .inner.tight { padding-bottom: 16px; }

.pw .chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.pw .chip { padding: 1px 7px; border-radius: 6px; background: var(--raised); color: var(--tx); font-size: 10.5px; white-space: nowrap; }
.pw .chip.mono { font-family: "Geist Mono", monospace; }
.pw .dl4 { display: grid; gap: 0; }
.pw .dl4 > div { display: grid; grid-template-columns: 82px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--row); font-size: 11.5px; }
.pw .dl4 > div:first-child { border-top: 0; }
.pw .dl4 code { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--mu); }
.pw .ptxt { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--mu); }
.pw .ptxt li { margin: 2px 0; }
.pw .ptxt ol { margin: 0; padding-left: 16px; }
.pw .outs4 { display: grid; gap: 7px; }
.pw .out { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: center; }
.pw .out .lbl { font-size: 9.5px; }
.pw .out .code { padding: 6px 9px; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.pw .vl { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--raised); font-size: 11px; }
.pw .vl code { font-family: "Geist Mono", monospace; color: var(--link); }

.pw .form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 10px; }
.pw .fld { display: grid; gap: 4px; }
.pw .fld label { font-size: 10.5px; font-weight: 500; color: var(--mu); }
.pw .in { display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 9px; border-radius: 8px; background: var(--input); box-shadow: inset 0 0 0 1px var(--strong); font-size: 11.5px; }
.pw .in span { color: var(--mu); font-size: 10px; }
.pw .tog { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 11.5px; }
.pw .tog i { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--pri); }
.pw .tog i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--pri-fg); }
.pw .native { margin-top: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; }
.pw .native .nh { display: flex; justify-content: space-between; padding: 7px 10px; background: var(--thead); border-bottom: 1px solid var(--row); font-size: 10.5px; color: var(--mu); }
.pw .native .code { border-radius: 0; box-shadow: none; }
.pw .stats4 { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ln); }
.pw .stats4 div { padding: 8px 10px; }
.pw .stats4 div + div { border-left: 1px solid var(--ln); }
.pw .stats4 dd { margin: 3px 0 0; font-size: 12px; font-weight: 600; }

.pw .dm { margin-top: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; }
.pw .dmr { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); align-items: center; border-top: 1px solid var(--row); }
.pw .dmr:first-child { border-top: 0; }
.pw .dmr > * { padding: 8px 10px; }
.pw .dmr.th { background: var(--thead); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mu); }
.pw .dmr strong { display: block; font-size: 11.5px; font-weight: 600; }
.pw .dmr small { font-family: "Geist Mono", monospace; font-size: 10px; color: var(--mu); }
.pw .dmr .na { color: var(--sub); }
.pw .legend2 { display: flex; gap: 14px; margin-top: 10px; font-size: 10.5px; color: var(--mu); }

.pw .heat { --h0: #FFFFFF; --h1: #EDEDF0; --h2: #FFF1B0; --h3: #FFCFA0; --h4: #FF9EBE; --h5: #FF3D7F; --hr: #DCDCE1; }
.pw[data-theme="dim"] .heat { --h0: #151729; --h1: #33374F; --h2: #D5BD52; --h3: #DC852D; --h4: #DC3671; --h5: #FF3D7F; --hr: #2F3352; }
.pw .heatg { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.pw .heatg .col { display: grid; gap: 3px; align-content: start; }
.pw .heatg b { height: 26px; font-size: 9px; font-weight: 500; line-height: 1.15; color: var(--mu); overflow: hidden; }
.pw .heatg i { display: block; height: 14px; border-radius: 3px; }
.pw .heatg i[data-h="0"] { background: var(--h0); box-shadow: inset 0 0 0 1px var(--hr); }
.pw .heatg i[data-h="1"] { background: var(--h1); }
.pw .heatg i[data-h="2"] { background: var(--h2); }
.pw .heatg i[data-h="3"] { background: var(--h3); }
.pw .heatg i[data-h="4"] { background: var(--h4); }
.pw .heatg i[data-h="5"] { background: var(--h5); }
.pw .vis { display: grid; grid-template-columns: 1fr 190px; gap: 12px; margin-top: 12px; }
.pw .big { font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.pw .bar2 { height: 6px; margin: 8px 0 4px; border-radius: 3px; background: var(--track); overflow: hidden; }
.pw .bar2 i { display: block; width: 54.8%; height: 100%; background: #FF3D7F; }
.pw .gp { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--row); font-size: 11px; }
.pw .gp code { font-family: "Geist Mono", monospace; font-size: 10.5px; color: var(--mu); }

.pw .lrow { display: grid; grid-template-columns: 1.4fr 1.2fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--row); font-size: 11.5px; }
.pw .lrow.th { border-top: 0; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mu); padding-top: 0; }
.pw .lrow strong { display: block; font-weight: 600; }
.pw .lrow small { font-size: 10.5px; color: var(--mu); }
.pw .lrow code { font-family: "Geist Mono", monospace; font-size: 10.5px; color: var(--link); margin-right: 4px; }
.pw .src { display: flex; gap: 6px; margin: 12px 0 10px; }
.pw .src span { padding: 3px 9px; border-radius: 8px; font-size: 11px; box-shadow: inset 0 0 0 1px var(--strong); }
.pw .src span.on { background: var(--pri); color: var(--pri-fg); box-shadow: none; }

.mssp .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.tenants { position: relative; display: grid; gap: 16px; }
.tn { padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.tn.master { background: var(--thermal-ink); color: var(--band-text); box-shadow: none; }
.tn .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.tn.master .k { color: var(--thermal-orange); }
.tn strong { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-heading); }
.tn.master strong { color: var(--thermal-phosphor); }
.tn p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--violet-600); }
.tn.master p { color: var(--band-muted); }
.clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.flow { display: flex; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: .06em; }

.trust .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust .t { position: relative; padding: 26px 22px 22px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.trust .t::before { content: ""; position: absolute; left: 22px; top: 0; width: 36px; height: 4px; border-radius: 0 0 4px 4px; background: var(--thermal-ink); }
.trust .t h3 { font-size: 18px; margin-bottom: 8px; }
.trust .t p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--violet-600); }

.next .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.next ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.next li { break-inside: avoid; padding: 11px 0; border-top: 1px solid var(--border); font-size: 16px; line-height: 1.45; }
.next .note { margin-top: 18px; font-size: 15px; color: var(--text-muted); }

@media (max-width: 1180px) {
  .feat .wrap, .mssp .wrap, .next .wrap { grid-template-columns: 1fr; gap: 40px; }
  .feat.flip .wrap { grid-template-columns: 1fr; }
  .feat.flip .feat-copy { order: 0; }
  .trust .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .fhero h1 { font-size: 40px; }
  .trust .grid, .clients { grid-template-columns: 1fr; }
  .next ul { columns: 1; }
  .pw .form, .pw .vis { grid-template-columns: 1fr; }
  .pw .dmr { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .pw .dmr > :nth-child(n+4) { display: none; }
  .pw .heatg { grid-template-columns: repeat(6, 1fr); }
  .pw .heatg .col:nth-child(n+7) { display: none; }
}

/* Integrations page: SIEM cards, same-actions table, Git modes and repo, standards, API, ask */
.ihero { min-height: 0; }
.ihero h1 { font-size: 56px; }
.ihero .jump { margin-top: 32px; }

.siems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.siem { position: relative; display: flex; flex-direction: column; padding: 30px 24px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); scroll-margin-top: 120px; overflow: hidden; }
.siem::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); }
.siem:nth-child(1) { --c: var(--thermal-magenta); }
.siem:nth-child(2) { --c: var(--thermal-orange); }
.siem:nth-child(3) { --c: var(--thermal-yellow); }
.siem:nth-child(4) { --c: var(--thermal-ink); }
.siem .lang { font-family: var(--font-mono); font-size: 13px; color: var(--magenta-700); }
.siem h3 { font-size: 24px; font-weight: 800; letter-spacing: -.015em; margin: 6px 0 4px; }
.siem .ed { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.siem dl { margin: 0 0 16px; }
.siem dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14.5px; }
.siem dt { color: var(--violet-600); }
.siem dd { margin: 0; font-weight: 600; color: var(--text-heading); white-space: nowrap; }
.siem dd.ea2 { color: var(--magenta-700); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.siem dd.no { color: var(--text-muted); font-weight: 500; }
.siem p.note2 { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--violet-600); }

.acts-t { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.acts-t th, .acts-t td { padding: 15px 20px; text-align: left; border-top: 1px solid var(--border); font-size: 15.5px; }
.acts-t thead th { border-top: 0; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: var(--page-tint); }
.acts-t tbody th { font-weight: 600; color: var(--text-heading); }
.acts-t tbody th small { display: block; margin-top: 2px; font-weight: 400; font-size: 13.5px; color: var(--text-muted); }
.acts-t td { color: var(--text-heading); text-align: center; vertical-align: middle; }
.acts-t thead th:not(:first-child) { text-align: center; }
.acts-t tbody th { vertical-align: middle; }
.acts-t td i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--thermal-ink); color: var(--thermal-phosphor); font-style: normal; font-size: 12px; }
.acts-t tbody tr.grp th { padding: 10px 20px; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: var(--page-tint); }
.acts-t td i.no { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-muted); }
.acts-t td small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--text-muted); }
.acts-t td.txt { font-size: 14px; line-height: 1.35; }
.acts-note { margin-top: 18px; font-size: 16px; color: var(--text-body); }
.acts-note b { color: var(--text-heading); }

.git .wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: start; }
.modes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.mode { padding: 22px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.mode .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-700); }
.mode h3 { font-size: 20px; margin: 6px 0 8px; }
.mode p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--violet-600); }
.providers { list-style: none; margin: 26px 0 0; padding: 0; }
.providers li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid var(--border); font-size: 16px; }
.providers li:last-child { border-bottom: 1px solid var(--border); }
.providers strong { color: var(--text-heading); }
.providers span { font-size: 14.5px; color: var(--text-muted); text-align: right; }
.providers li.soon strong { color: var(--text-muted); }
.repo { border-radius: 16px; background: var(--thermal-ink); color: var(--band-muted); overflow: hidden; box-shadow: 0 40px 80px -40px rgb(20 11 36 / .55); }
.repo .rh { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--band-border); font-family: var(--font-mono); font-size: 12.5px; color: var(--violet-200); }
.repo .rh b { font-weight: 500; color: var(--thermal-phosphor); }
.repo pre { margin: 0; padding: 16px 18px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; white-space: pre; color: var(--band-muted); }
.repo pre b { font-weight: 500; color: var(--thermal-phosphor); }
.repo pre i { font-style: normal; color: var(--violet-500); }
.pr { margin: 0 18px 18px; padding: 14px 16px; border-radius: 12px; background: var(--violet-900); box-shadow: inset 0 0 0 1px var(--band-border); }
.pr .t { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--thermal-phosphor); font-weight: 600; }
.pr .t span:last-child { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--thermal-orange); }
.pr ul { margin: 10px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; }
.pr li b { font-weight: 500; color: var(--thermal-yellow); }
.repo .cap2 { padding: 0 18px 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--violet-500); }

.stds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.std { padding: 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.std strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-heading); }
.std span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }

.api .wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.api pre { margin: 0; padding: 20px 22px; border-radius: 16px; background: var(--thermal-ink); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--band-muted); white-space: pre; overflow: hidden; }
.api pre b { font-weight: 500; color: var(--thermal-phosphor); }
.api pre i { font-style: normal; color: var(--thermal-orange); }
.api pre u { text-decoration: none; color: var(--violet-500); }

.ask .wrap { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-top: 96px; padding-bottom: 96px; }
.ask h2 { max-width: 640px; }
.ask p { margin: 14px 0 0; color: var(--text-muted); max-width: 640px; }
.ask .ctas { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.btn-line { background: transparent; color: var(--text-heading); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn-line:hover { color: var(--text-heading); box-shadow: inset 0 0 0 1.5px var(--violet-300); }

@media (max-width: 1180px) {
  .git .wrap, .api .wrap { grid-template-columns: 1fr; }
  .siems { grid-template-columns: repeat(2, 1fr); }
  .stds { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .ihero h1 { font-size: 40px; }
  .siems, .modes2 { grid-template-columns: 1fr; }
  .stds { grid-template-columns: repeat(2, 1fr); }
  .acts-t th, .acts-t td { padding: 12px 10px; font-size: 14px; }
  .acts-t tbody tr.grp th { padding: 8px 10px; }
  .acts-t td.txt { font-size: 13px; }
  .ask .wrap { flex-direction: column; align-items: flex-start; }
}

/* Early access page: what to expect, request form (submits to Formspree) */
.eahero { min-height: 0; }
.eahero .wrap { position: relative; padding-top: 80px; padding-bottom: 72px; }
.eahero .copy { max-width: 720px; }
.eahero h1 { font-size: 56px; }

.eareq .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.expect { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: ex; }
.expect li { position: relative; padding: 18px 0 18px 52px; border-top: 1px solid var(--border); counter-increment: ex; }
.expect li:last-child { border-bottom: 1px solid var(--border); }
.expect li::before { content: counter(ex, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--magenta-700); }
.expect strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-heading); }
.expect span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--violet-600); }
.ea-aside { margin-top: 26px; font-size: 15px; color: var(--text-muted); }

.ea-card { padding: 36px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--border), var(--shadow-page); }
.ea-card h2 { font-size: 28px; letter-spacing: -.015em; }
.ea-card > p { margin: 8px 0 26px; font-size: 15.5px; color: var(--text-muted); }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.f-full { grid-column: 1 / -1; }
.f-field { display: grid; gap: 7px; align-content: start; }
.f-field > label, .f-set legend { font-size: 14px; font-weight: 600; color: var(--text-heading); }
.f-field > label small, .f-set legend small { font-weight: 400; color: var(--text-muted); }
.f-in { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--border); font: inherit; font-size: 15.5px; color: var(--text-heading); transition: box-shadow .15s ease-out; }
textarea.f-in { height: 104px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.f-in { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5079' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.f-in::placeholder { color: var(--violet-300); }
.f-in:hover { box-shadow: inset 0 0 0 1.5px var(--violet-300); }
.f-in:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--focus), 0 0 0 4px rgb(230 30 99 / .14); }
.f-in[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--magenta-700); }
.f-set { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.f-set legend { padding: 0; margin-bottom: 10px; }
.f-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.f-opt { position: relative; }
.f-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-opt span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--border); font-size: 14.5px; font-weight: 600; color: var(--violet-600); cursor: pointer; transition: box-shadow .15s ease-out, background-color .15s ease-out, color .15s ease-out; }
.f-opt span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--violet-300); background: #fff; }
.f-opt input[type="radio"] + span::before { border-radius: 50%; }
.f-opt span:hover { box-shadow: inset 0 0 0 1.5px var(--violet-300); color: var(--text-heading); }
.f-opt input:checked + span { background: var(--thermal-ink); color: var(--thermal-phosphor); box-shadow: none; }
.f-opt input:checked + span::before { background: var(--thermal-magenta); box-shadow: none; }
.f-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.f-set[aria-invalid="true"] .f-opt span { box-shadow: inset 0 0 0 1.5px var(--magenta-700); }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-err { min-height: 0; margin: 0; font-size: 13.5px; color: var(--magenta-700); }
.f-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.f-foot p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); max-width: 340px; }
.f-foot .btn[disabled] { opacity: .6; cursor: progress; }
.f-status { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.f-status:empty { display: none; }
.f-status.err { background: #FFF0F5; color: var(--magenta-800); }
.f-status.info { background: var(--page-tint); color: var(--text-body); }
.f-done { display: none; text-align: left; }
.f-done:focus { outline: none; }
.f-done .k { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-700); }
.f-done h2 { margin: 10px 0 10px; }
.f-done p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.ea-card.sent form, .ea-card.sent > h2, .ea-card.sent > p { display: none; }
.ea-card.sent .f-done { display: block; }

@media (max-width: 1180px) { .eareq .wrap { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 900px) {
  .eahero h1 { font-size: 40px; }
  .ea-card { padding: 24px; }
  .f-grid { grid-template-columns: 1fr; }
  .f-foot { flex-direction: column; align-items: flex-start; }
}

/* Home: the problem, and five tools braided into one record (stage colours from [data-s]) */
.onerec .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.or-copy > p:not(.eyebrow) { margin: 22px 0 0; }
.or-copy .ans { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.or-copy .ans b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.015em; color: var(--text-heading); }
.or-copy .go { display: inline-block; margin-top: 22px; font-weight: 600; font-size: 16px; }
.or-fig { display: grid; grid-template-columns: 140px 110px 1fr; align-items: center; }
.or-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.or-src li { position: relative; display: flex; align-items: center; height: 44px; padding: 0 14px 0 22px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--violet-200); font-size: 14.5px; font-weight: 500; color: var(--violet-500); }
.or-src li::before { content: ""; position: absolute; left: 10px; top: 13px; bottom: 13px; width: 3px; border-radius: 3px; background: var(--rail); }
.or-fig svg { width: 110px; height: 268px; overflow: visible; }
.or-fig svg path { fill: none; stroke: var(--rail); stroke-width: 3; stroke-linecap: round; }
.or-rec { position: relative; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--border), var(--shadow-page); padding: 22px 22px 10px; }
.or-rec::before { content: ""; position: absolute; left: -2px; top: 50%; width: 5px; height: 34px; margin-top: -17px; border-radius: 3px; background: var(--thermal-ink); }
.or-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.or-head p { margin: 0; }
.or-id { font-family: var(--font-mono); font-size: 12px; color: var(--magenta-700); }
.or-head .or-title { margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--text-heading); }
.or-rec ul { list-style: none; margin: 0; padding: 0; }
.or-rec li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; padding: 11px 0 11px 16px; border-top: 1px solid var(--border); font-size: 14.5px; line-height: 1.4; color: var(--text-body); }
.or-rec li:first-child { border-top: 0; }
.or-rec li::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--rail); }
.or-rec li span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

@media (max-width: 1180px) { .onerec .wrap { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 600px) {
  .or-fig { grid-template-columns: 1fr; gap: 16px; }
  .or-fig svg, .or-rec::before { display: none; }
  .or-src { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .or-src li { height: 36px; }
}

/* Integrations: how it connects (inputs, Detections, the two routes, the same four SIEMs) */
.cxb { display: grid; grid-template-columns: 220px 64px auto 72px 290px 150px 190px; justify-content: center; align-items: center; }
.cx svg path { fill: none; stroke: var(--violet-200); stroke-width: 1.5; }
.cxb .t0 { width: 64px; height: 276px; }
.cxb .t1 { width: 72px; height: 276px; }
.cxb .t2 { width: 150px; height: 276px; }
.cxb .t2 .dir { stroke: var(--thermal-ink); }
.cxb .t2 .git { stroke: var(--violet-300); stroke-dasharray: 5 5; }
.cx-hub { display: flex; justify-content: center; padding: 22px 26px; border-radius: 20px; background: var(--thermal-ink); }
.cx-hub .logo, .cx-hub .logo:hover { color: var(--thermal-phosphor); }
.cx .mono { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.cx-ins, .cx-routes { display: flex; flex-direction: column; gap: 40px; }
.cx-routes { gap: 36px; }
.cx-in, .cx-route { display: flex; flex-direction: column; justify-content: center; border-radius: 16px; }
.cx-in { height: 118px; padding: 0 18px; background: var(--page-tint); }
.cx-route { height: 120px; padding: 0 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.cx-in .mono { color: var(--text-muted); }
.cx-route .mono { color: var(--magenta-700); }
.cx-in h3, .cx-route h3 { margin-top: 2px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.cx-route h3 { font-size: 18px; }
.cx-in h3 + p, .cx-route h3 + p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--violet-600); }
.cx-in h3 + p { font-size: 13px; }
.cx-siems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cx-siems li { display: flex; align-items: center; height: 60px; padding: 0 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); font-size: 15px; font-weight: 600; color: var(--text-heading); }
.cx-key { display: flex; justify-content: center; gap: 22px; margin-top: 18px; font-size: 13.5px; color: var(--text-muted); }
.cx-key span { display: inline-flex; align-items: center; gap: 8px; }
.cx-key i { width: 24px; height: 0; border-top: 1.5px solid var(--thermal-ink); }
.cx-key i.git { border-top: 1.5px dashed var(--violet-300); }
.cx-foot { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--border); font-size: 16px; color: var(--text-body); }
.cx-foot b { color: var(--text-heading); }

@media (max-width: 1180px) {
  .cxb { grid-template-columns: 1fr; gap: 24px; }
  .cxb .t0, .cxb .t1, .cxb .t2 { display: none; }
  .cx-hub { justify-self: start; }
  .cx-ins, .cx-routes { flex-direction: row; gap: 16px; }
  .cx-in, .cx-route { flex: 1; height: auto; padding: 18px 20px; }
  .cx-siems { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .cx-ins, .cx-routes { flex-direction: column; }
  .cx-siems { grid-template-columns: 1fr; }
  .cx-key { flex-direction: column; align-items: center; gap: 8px; }
}
@media (max-width: 600px) {
  .acts-t th, .acts-t td { padding: 10px 6px; font-size: 13px; }
  .acts-t tbody tr.grp th { padding: 7px 6px; font-size: 10px; }
  .acts-t td.txt { font-size: 12px; }
  .acts-t td small { font-size: 11px; }
  .acts-t thead th { font-size: 10px; letter-spacing: .04em; }
  .acts-t tbody th small { font-size: 12px; }
}