/* juron.ai v3: cinematic industrial. Dark bands with full-bleed photography, heavy wide grotesk display,
   mono micro-labels, dense product UI, light grey statement sections. */
:root {
  --night: #07090A;
  --night-2: #0E1113;
  --night-3: #15191C;
  --night-rule: #242A2E;
  --on-night: #F2F5F6;
  --on-night-2: #A7B0B5;
  --on-night-3: #6E787E;
  --paper: #ECEEEF;
  --paper-2: #F6F7F8;
  --paper-card: #FFFFFF;
  --ink: #0A0D0F;
  --ink-2: #3A4247;
  --ink-3: #7A848A;
  --rule: #D5DADD;
  --aqua: #00D4C5;
  --aqua-ink: #007F76;
  --amber: #E8913A;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1360px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101315; --paper-2: #0B0E10; --paper-card: #161A1D; --ink: #F2F5F6; --ink-2: #BAC3C8; --ink-3: #7E888E; --rule: #252B2F; --aqua-ink: #2BD9CB; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #101315; --paper-2: #0B0E10; --paper-card: #161A1D; --ink: #F2F5F6; --ink-2: #BAC3C8; --ink-3: #7E888E; --rule: #252B2F; --aqua-ink: #2BD9CB; color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--on-night); font: 400 16px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--night); }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
@media (max-width: 640px) { .wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 60; background: var(--aqua); color: var(--night); padding: 8px 12px; }

.mono { font: 500 0.72rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.disp { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; }
.disp .a { color: var(--aqua); }
.d1 { font-size: clamp(3.2rem, 8.4vw, 8.6rem); }
.d2 { font-size: clamp(2.5rem, 5.6vw, 5.4rem); }
.d3 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; }

/* Buttons: square, C3-like */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 52px; padding: 0 18px 0 20px; font: 600 0.95rem var(--f-sans); text-decoration: none; border: 1px solid transparent; transition: background 160ms, color 160ms, border-color 160ms; white-space: nowrap; }
.btn .arr { font-family: var(--f-mono); font-size: 1rem; transition: transform 160ms; }
.btn:hover .arr { transform: translate(2px, -2px); }
.btn-aqua { background: var(--aqua); color: #04110F; }
.btn-aqua:hover { background: #3BE3D6; }
.btn-ghost { border-color: rgba(242, 245, 246, 0.35); color: var(--on-night); }
.btn-ghost:hover { border-color: var(--on-night); }
.btn-ink { background: var(--ink); color: var(--paper-2); }

/* Header */
.top { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 30; padding-top: 14px; }
.bar { display: flex; align-items: stretch; gap: 8px; }
.bar-main { flex: 1; display: flex; align-items: center; gap: 36px; height: 54px; padding: 0 18px; background: rgba(7, 9, 10, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(242, 245, 246, 0.12); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.15rem var(--f-display); letter-spacing: -0.02em; color: var(--on-night); }
.brand .ai { color: var(--aqua); }
.nav { display: flex; gap: 28px; }
.nav a { text-decoration: none; font: 500 0.88rem var(--f-sans); color: var(--on-night-2); }
.nav a:hover { color: var(--on-night); }
.bar-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; background: transparent; border: 1px solid rgba(242, 245, 246, 0.18); color: var(--on-night-2); cursor: pointer; }
.icon-btn:hover { color: var(--on-night); }
.icon-btn .i-moon, .is-dark .icon-btn .i-sun { display: none; }
.is-dark .icon-btn .i-moon { display: block; }
.bar-cta { display: inline-flex; align-items: center; gap: 22px; height: 54px; padding: 0 18px; background: var(--aqua); color: #04110F; text-decoration: none; font: 600 0.9rem var(--f-sans); white-space: nowrap; }
.menu-btn { display: none; }
@media (max-width: 960px) {
  .nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--night-2); border: 1px solid var(--night-rule); padding: 6px 18px 12px; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--night-rule); font-size: 1rem; }
  .menu-btn { display: inline-grid; }
  .bar-cta { display: none; }
  .bar-main { position: relative; }
}

/* Hero */
.hero { position: relative; min-height: min(100svh, 980px); display: grid; align-items: end; overflow: hidden; background: var(--night); isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; background: radial-gradient(80% 70% at 75% 30%, #1B2A2E 0%, #0B1012 55%, var(--night) 100%); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(0.55) contrast(1.05) brightness(0.62); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,9,10,0.55) 0%, rgba(7,9,10,0.05) 35%, rgba(7,9,10,0.55) 68%, rgba(7,9,10,0.96) 100%); }
#signal { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.55; pointer-events: none; }
.hero-inner { padding-top: 150px; padding-bottom: 36px; display: grid; gap: 30px; }
.hero h1 { max-width: 13ch; }
.hero-row { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: end; justify-content: space-between; }
.hero-sub { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--on-night-2); max-width: 46ch; }
.hero-sub b { color: var(--on-night); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.promo { width: 330px; max-width: 100%; padding: 20px; background: linear-gradient(135deg, rgba(0,212,197,0.22), rgba(0,212,197,0.05)), var(--night-2); border: 1px solid rgba(0,212,197,0.45); display: grid; gap: 10px; text-decoration: none; position: relative; overflow: hidden; }
.promo::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; background: repeating-radial-gradient(circle at 100% 100%, rgba(0,212,197,0.35) 0 1px, transparent 1px 9px); pointer-events: none; }
.promo .mono { color: var(--aqua); }
.promo b { font: 700 1.25rem/1.15 var(--f-display); font-stretch: 108%; letter-spacing: -0.02em; }
.promo span.go { font: 500 0.8rem var(--f-mono); color: var(--on-night-2); }
.hero-strip { border-top: 1px solid rgba(242,245,246,0.16); padding-block: 18px 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--on-night-3); }
.hero-strip b { color: var(--on-night-2); font-weight: 500; }

/* Section shells */
.sec { padding-block: clamp(84px, 10vw, 140px); }
.night { background: var(--night); color: var(--on-night); }
.night-2 { background: var(--night-2); color: var(--on-night); }
.paper { background: var(--paper); color: var(--ink); }
.paper-2 { background: var(--paper-2); color: var(--ink); }
.head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 64px); }
.head .mono { color: var(--aqua); }
.paper .head .mono, .paper-2 .head .mono { color: var(--aqua-ink); }
.head p.lede { font-size: 1.15rem; color: var(--on-night-2); max-width: 60ch; }
.paper .head p.lede, .paper-2 .head p.lede { color: var(--ink-2); }
.head-row { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: end; justify-content: space-between; }

/* App replica */
.app { border: 1px solid var(--night-rule); background: var(--night-2); box-shadow: 0 60px 120px -60px rgba(0, 212, 197, 0.25), 0 40px 80px -40px rgba(0,0,0,0.9); font-size: 13px; line-height: 1.45; color: var(--on-night-2); overflow: hidden; }
.app-top { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--night-rule); background: var(--night); }
.app-top .dots { display: flex; gap: 6px; }
.app-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--night-rule); display: block; }
.app-top .crumb { font-family: var(--f-mono); font-size: 11px; color: var(--on-night-3); letter-spacing: 0.04em; }
.app-top .crumb b { color: var(--on-night); font-weight: 500; }
.app-top .who { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.app-top .who i { width: 22px; height: 22px; border-radius: 50%; background: #23363A; display: grid; place-items: center; font: 600 9px var(--f-sans); color: var(--aqua); font-style: normal; }
.app-body { display: grid; grid-template-columns: 196px minmax(0, 1fr) 340px; min-height: 520px; }
.app-side { border-right: 1px solid var(--night-rule); padding: 14px 10px; display: grid; gap: 2px; align-content: start; }
.app-side .grp { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-night-3); padding: 14px 10px 6px; }
.app-side a { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; text-decoration: none; color: var(--on-night-2); border-radius: 3px; }
.app-side a.on { background: var(--night-3); color: var(--on-night); }
.app-side a em { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: var(--on-night-3); }
.app-main { padding: 18px 20px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.app-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.app-h h4 { font: 600 17px var(--f-sans); color: var(--on-night); letter-spacing: -0.01em; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters span { border: 1px solid var(--night-rule); padding: 3px 9px; font-size: 11.5px; border-radius: 3px; }
.filters span.on { border-color: rgba(0,212,197,0.5); color: var(--aqua); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--night-rule); border: 1px solid var(--night-rule); }
.kpis div { background: var(--night-2); padding: 12px 14px; display: grid; gap: 2px; }
.kpis small { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-night-3); }
.kpis b { font: 600 20px var(--f-sans); color: var(--on-night); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpis b em { font-style: normal; font-size: 12px; color: var(--aqua); margin-left: 6px; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font: 500 10px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-night-3); padding: 8px 10px; border-bottom: 1px solid var(--night-rule); white-space: nowrap; }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--night-rule); vertical-align: middle; }
.tbl tr.sel td { background: rgba(0, 212, 197, 0.06); }
.tbl tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--aqua); }
.tbl .nm { color: var(--on-night); font-weight: 500; }
.tbl .ar { color: var(--on-night-3); font-size: 11.5px; }
.delta { display: inline-flex; align-items: center; gap: 8px; }
.delta i { display: block; height: 6px; background: var(--aqua); border-radius: 1px; }
.delta.neg i { background: var(--on-night-3); }
.delta b { font-weight: 500; color: var(--on-night); font-family: var(--f-mono); font-size: 12px; }
.delta.neg b { color: var(--on-night-2); }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.live { color: var(--aqua); }
.st.kept { color: var(--on-night-2); }
.st.test { color: var(--amber); }
.app-drawer { border-left: 1px solid var(--night-rule); background: var(--night); padding: 18px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.app-drawer h5 { margin: 0; font: 600 14px var(--f-sans); color: var(--on-night); }
.app-drawer .mono { font-size: 10px; color: var(--on-night-3); }
.chart { border: 1px solid var(--night-rule); padding: 12px 12px 6px; }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 14px; font-size: 11px; margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 2px; display: block; }
.kv2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; font-size: 12px; }
.kv2 dt, .kv2 dd { padding: 7px 0; border-bottom: 1px solid var(--night-rule); }
.kv2 dt { color: var(--on-night-3); }
.kv2 dd { text-align: right; color: var(--on-night); }
.decision { padding: 10px 12px; background: rgba(0, 212, 197, 0.08); border: 1px solid rgba(0, 212, 197, 0.3); color: var(--on-night); font-size: 12px; }
.decision b { color: var(--aqua); font-weight: 600; }
.app-note { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--on-night-3); }
@media (max-width: 1180px) { .app-body { grid-template-columns: 170px minmax(0, 1fr); } .app-drawer { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--night-rule); grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-drawer > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .app-body { grid-template-columns: 1fr; } .app-side { display: none; } .app-drawer { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tbl .hide-s { display: none; } }
.tbl-wrap { overflow-x: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .delta i { animation: dgrow 900ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
  @keyframes dgrow { from { width: 4px; } }
  .js .chart .ln { stroke-dasharray: 600; animation: draw 1600ms ease-out both 400ms; }
  @keyframes draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
}

/* Two-tone statement (Palantir-like) */
.statement { font: 500 clamp(1.9rem, 4.2vw, 3.9rem)/1.12 var(--f-sans); letter-spacing: -0.03em; max-width: 24ch; color: var(--ink); }
.statement .dim { color: var(--ink-3); }
.statement-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; }
@media (max-width: 900px) { .statement-row { grid-template-columns: 1fr; } }
.stat-stack { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.stat-stack div { padding: 16px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.stat-stack .mono { color: var(--ink-3); }
.stat-stack b { font: 600 1.05rem var(--f-sans); color: var(--ink); }

/* Industries: tabs + full-bleed photo panel (C3-like) */
.tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; border-bottom: 1px solid var(--night-rule); margin-bottom: 0; }
.tab { background: none; border: 0; padding: 14px 0; font: 500 0.92rem var(--f-sans); color: var(--on-night-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab[aria-selected="true"] { color: var(--on-night); border-bottom-color: var(--aqua); }
.tab:hover { color: var(--on-night); }
.ind-panel { position: relative; min-height: 560px; display: grid; align-items: end; overflow: hidden; isolation: isolate; background: radial-gradient(70% 80% at 70% 20%, #1A2629, var(--night-2)); }
.ind-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(0.6) brightness(0.7); }
.ind-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,9,10,0.92) 0%, rgba(7,9,10,0.55) 50%, rgba(7,9,10,0.15) 100%), linear-gradient(0deg, rgba(7,9,10,0.7), transparent 50%); }
.ind-content { padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; align-items: end; }
@media (max-width: 900px) { .ind-content { grid-template-columns: 1fr; } .ind-panel { min-height: 620px; } }
.ind-content h3 { max-width: 14ch; }
.ind-content p { color: var(--on-night-2); max-width: 46ch; margin-top: 18px; font-size: 1.05rem; }
.ind-card { background: rgba(7,9,10,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--night-rule); padding: 20px; display: grid; gap: 12px; }
.ind-card .mono { color: var(--aqua); }
.ind-card li { padding: 9px 0; border-bottom: 1px solid var(--night-rule); color: var(--on-night); }
.ind-card li:last-child { border-bottom: 0; }
.ind-card .meas { color: var(--on-night-2); font-size: 0.92rem; border-top: 1px solid var(--night-rule); padding-top: 12px; }
.ind-card .meas b { color: var(--on-night); font-weight: 500; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 28px 28px 8px 0; display: grid; gap: 16px; align-content: start; min-width: 0; }
.step + .step { padding-left: 28px; border-left: 1px solid var(--rule); }
@media (max-width: 960px) { .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } .step { padding-right: 0; padding-bottom: 28px; } }
.step .num { font: 700 3.4rem/1 var(--f-display); font-stretch: 112%; color: var(--aqua-ink); letter-spacing: -0.04em; }
.step h3 { font: 600 1.35rem/1.2 var(--f-sans); letter-spacing: -0.015em; color: var(--ink); }
.step p { color: var(--ink-2); }
.frag { background: var(--paper-card); border: 1px solid var(--rule); padding: 16px; font-size: 13px; display: grid; gap: 10px; min-height: 190px; align-content: start; color: var(--ink-2); }
.frag .who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.frag .who i { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font: 600 9px var(--f-sans); font-style: normal; color: var(--ink-2); }
.frag .msg { font-size: 14.5px; line-height: 1.45; color: var(--ink); background: var(--paper); padding: 12px 14px; }
.frag .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.frag .chips span { font-size: 11.5px; border: 1px solid var(--rule); padding: 2px 8px; }
.frag .fh { display: flex; justify-content: space-between; color: var(--ink); font-weight: 600; font-size: 13px; }
.frag .fh span { font: 500 11px var(--f-mono); color: var(--ink-3); }
.frag ul li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.frag ul li:last-child { border-bottom: 0; }
.pill { font-size: 11px; font-weight: 600; padding: 1px 8px; }
.pill.hi { background: rgba(232,145,58,0.16); color: #B5651D; }
.pill.md { background: var(--paper); color: var(--ink-2); }
.pill.lo { background: rgba(0,212,197,0.14); color: var(--aqua-ink); }

/* Report band */
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
@media (max-width: 1000px) { .report-grid { grid-template-columns: 1fr; gap: 44px; } }
.pts { border-top: 1px solid var(--night-rule); margin-top: 34px; }
.pts li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--night-rule); }
.pts .mono { color: var(--aqua); padding-top: 3px; }
.pts b { display: block; font-weight: 600; font-size: 1.08rem; color: var(--on-night); margin-bottom: 4px; }
.pts span { color: var(--on-night-2); }
.rc { border: 1px solid var(--night-rule); background: var(--night-2); }
.rc header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--night-rule); }
.rc header b { font-weight: 600; }
.rc dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 24px; padding: 6px 22px; }
.rc dt, .rc dd { padding: 14px 0; border-bottom: 1px solid var(--night-rule); }
.rc dt { color: var(--on-night-3); }
.rc dd { text-align: right; color: var(--on-night); }
.rc dl > :nth-last-child(-n+2) { border-bottom: 0; }
.rc .big { font: 700 2.6rem/1 var(--f-display); font-stretch: 112%; color: var(--aqua); letter-spacing: -0.03em; }
.rc footer { padding: 14px 22px; border-top: 1px solid var(--night-rule); color: var(--on-night-3); }

/* Engagement */
.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
@media (max-width: 900px) { .path { grid-template-columns: 1fr; } }
.path li { border-top: 2px solid var(--rule); padding: 22px 28px 0 0; display: grid; gap: 12px; align-content: start; }
.path li:first-child { border-top-color: var(--aqua-ink); }
.path .mono { color: var(--ink-3); }
.path h3 { font: 700 1.9rem/1 var(--f-display); font-stretch: 110%; letter-spacing: -0.03em; color: var(--ink); }
.path p { color: var(--ink-2); max-width: 36ch; }
@media (max-width: 900px) { .path li { padding-bottom: 28px; padding-right: 0; } }

/* Closing */
.closing { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(110px, 14vw, 200px); background: radial-gradient(60% 80% at 80% 30%, #16262A, var(--night)); }
.closing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(0.5) brightness(0.5); }
.closing::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,9,10,0.95), rgba(7,9,10,0.4)); }
.closing .wrap { display: grid; gap: 34px; justify-items: start; }

/* Footer */
.foot { background: var(--night); border-top: 1px solid var(--night-rule); padding-block: 64px 36px; color: var(--on-night-3); font-size: 0.92rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }
.foot h4 { margin: 0 0 14px; font: 500 0.7rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-2); }
.foot a { display: block; text-decoration: none; padding: 4px 0; }
.foot a:hover { color: var(--on-night); }
.foot-big { margin-top: 64px; font: 700 clamp(4rem, 17vw, 15rem)/0.8 var(--f-display); font-stretch: 118%; letter-spacing: -0.05em; color: var(--night-3); user-select: none; overflow: hidden; white-space: nowrap; }
.foot-legal { margin-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 0.82rem; }
.tbc { font: 500 0.7rem var(--f-mono); color: var(--amber); border: 1px dashed var(--amber); padding: 1px 6px; }
[hidden] { display: none !important; }
@media (max-width: 560px) {
  .rc dl { grid-template-columns: 1fr; }
  .rc dt { border-bottom: 0; padding-bottom: 2px; }
  .rc dd { text-align: left; padding-top: 2px; }
}

/* Product tour */
.tour-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--night-rule); border-bottom: 0; width: fit-content; max-width: 100%; }
.tour-tabs .tab { display: inline-flex; gap: 10px; align-items: baseline; padding: 14px 20px; border: 0; border-right: 1px solid var(--night-rule); margin: 0; color: var(--on-night-3); background: var(--night); }
.tour-tabs .tab:last-child { border-right: 0; }
.tour-tabs .tab .mono { color: var(--on-night-3); }
.tour-tabs .tab[aria-selected="true"] { background: var(--night-2); color: var(--on-night); box-shadow: inset 0 2px 0 var(--aqua); }
.tour-tabs .tab[aria-selected="true"] .mono { color: var(--aqua); }
@media (max-width: 640px) { .tour-tabs { width: 100%; } .tour-tabs .tab { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--night-rule); } }
.tour-cap { border: 1px solid var(--night-rule); border-bottom: 0; background: var(--night-2); padding: 14px 18px; color: var(--on-night-2); font-size: 0.98rem; }
.run-chip { font: 500 10.5px var(--f-mono); color: var(--on-night-2); border: 1px solid var(--night-rule); padding: 3px 8px; }
.canvas-body, .appview { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 520px; }
.canvas { background: var(--night); padding: 10px; display: grid; align-items: center; min-width: 0; }
.canvas svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .canvas .edge { stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
  .js .canvas .edge.ret { animation-direction: reverse; }
  @keyframes flow { to { stroke-dashoffset: -20; } }
}
.chat { border-left: 1px solid var(--night-rule); background: var(--night-2); display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.chat-h { padding: 14px 16px; border-bottom: 1px solid var(--night-rule); display: grid; gap: 2px; }
.chat-h b { color: var(--on-night); font-weight: 600; font-size: 14px; }
.chat-h span { font-size: 11.5px; color: var(--on-night-3); }
.chat > .bubble-j, .chat > .bubble-u { margin: 14px 16px 0; }
.bubble-u { justify-self: end; background: #1B2A2C; color: var(--on-night); padding: 9px 12px; font-size: 13px; max-width: 85%; align-self: start; }
.bubble-j { border: 1px solid var(--night-rule); background: var(--night); padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--on-night-2); display: grid; gap: 8px; align-self: start; }
.bubble-j b { color: var(--on-night); font-weight: 600; }
.bubble-j ul { display: grid; gap: 4px; }
.bubble-j li { padding-left: 12px; position: relative; }
.bubble-j li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 1px; background: var(--aqua); }
.chat-actions { display: flex; gap: 6px; margin-top: 4px; }
.chat-actions span { font-size: 12px; font-weight: 600; padding: 6px 12px; }
.chat-actions .b1 { background: var(--aqua); color: #04110F; }
.chat-actions .b2 { border: 1px solid var(--night-rule); color: var(--on-night); }
.chat-in { margin: 14px 16px 16px; border: 1px solid var(--night-rule); padding: 12px; font-size: 12.5px; color: var(--on-night-3); }
.appview-main { padding: 18px 20px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chart-box { border: 1px solid var(--night-rule); padding: 14px; display: grid; gap: 10px; }
.chart-box svg { width: 100%; height: auto; display: block; }
@media (max-width: 960px) { .canvas-body, .appview { grid-template-columns: 1fr; } .chat { border-left: 0; border-top: 1px solid var(--night-rule); } }
@media (max-width: 560px) { .kpis-3 { grid-template-columns: 1fr; } }
.chat { display: flex; flex-direction: column; }
.chat .chat-in { margin-top: auto; }
.chat > .bubble-j + .chat-in, .chat > .bubble-u + .bubble-j { margin-top: 10px; }
.chat > .bubble-j { margin-bottom: 14px; }
.bubble-u { align-self: flex-end; }