@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root {
  color-scheme:dark;
  --bg:#050505;
  --panel:#0e0e0f;
  --raised:#19191b;
  --border:#29292d;
  --text:#f2f3f5;
  --muted:#b3bbc5;
  --quiet:#929da9;
  --brand:#b8323c;
  --brand-hover:#cd3a46;
  --long:#91c7b2;
  --short:#ef9a9e;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
}

h1,h2,h3,h4,p,figure {
  margin:0;
}

a {
  color:inherit;
  text-decoration:none;
}

a:hover {
  color:var(--text);
}

button,input {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

img {
  display:block;
  max-width:100%;
}

a:focus-visible,button:focus-visible,input:focus-visible {
  outline:2px solid var(--text);
  outline-offset:5px;
}

section[id],article[id] {
  scroll-margin-top:24px;
}

.container {
  width:min(1320px,100% - 96px);
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  padding:12px;
  background:var(--panel);
}

.skip-link:focus {
  top:12px;
}

.site-header {
  border-bottom:1px solid var(--border);
}

.nav {
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand {
  flex-shrink:0;
}

.brand img {
  width:150px;
  height:auto;
}

.nav-links,.nav-actions {
  display:flex;
  align-items:center;
  gap:28px;
}

.nav-links a,.nav-signin {
  font-size:.875rem;
  color:var(--muted);
}

.nav-links a:hover,.text-link:hover,.doc-links a:hover {
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:5px;
}

.nav-actions {
  gap:22px;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 22px;
  border:1px solid transparent;
  border-radius:5px;
  font-size:.875rem;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  transition:background .15s;
}

.btn-primary {
  background:var(--brand);
  color:var(--text);
}

.btn-primary:hover {
  background:var(--brand-hover);
}

.btn-ghost {
  border-color:var(--border);
  background:transparent;
  color:var(--text);
}

.btn-ghost:hover {
  background:var(--raised);
}

.nav-toggle {
  display:none;
}

.hero {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:56px;
  align-items:center;
  padding-block:54px 48px;
}

.intro-label {
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:22px;
}

h1 {
  font-size:clamp(3.5rem,5.5vw,5rem);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.06em;
}

h2 {
  font-size:clamp(1.9rem,3vw,2.6rem);
  font-weight:500;
  line-height:1.17;
  letter-spacing:-.04em;
}

h3 {
  font-size:1.13rem;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.02em;
}

.lead {
  font-size:1.0625rem;
  color:var(--muted);
  max-width:470px;
  margin-top:26px;
  line-height:1.75;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.hero-note {
  font-size:.8125rem;
  color:var(--quiet);
  margin-top:22px;
  max-width:370px;
}

.workspace-preview {
  min-width:0;
  border:1px solid #3a424e;
  border-radius:9px;
  background:var(--panel);
  box-shadow:0 24px 70px #0005;
  overflow:hidden;
}

.workspace-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:17px 20px;
  border-bottom:1px solid var(--border);
  font-size:.8125rem;
}

.workspace-wordmark {
  font-weight:700;
}

.workspace-wordmark span {
  color:var(--quiet);
  font-weight:400;
  margin-left:8px;
}

.preview-label {
  color:var(--muted);
  font-size:.75rem;
}

.workspace-tabs {
  display:flex;
  gap:24px;
  padding:0 20px;
  font-size:.75rem;
  color:var(--quiet);
  border-bottom:1px solid var(--border);
}

.workspace-tabs span {
  padding:12px 0;
}

.workspace-tabs .selected {
  color:var(--text);
  border-bottom:2px solid var(--brand);
}

.workspace-body {
  padding:20px;
}

.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:.8125rem;
}

.panel-label,.small-label {
  color:var(--quiet);
  font-size:.75rem;
}

.panel-heading h2 {
  font-size:1.25rem;
  letter-spacing:-.02em;
  margin-top:3px;
}

.workspace-chart svg {
  display:block;
  width:100%;
  height:auto;
  max-height:165px;
  margin-top:16px;
}

.chart-rules {
  stroke:var(--border);
  stroke-width:1;
  fill:none;
}

.chart-band {
  fill:#91c7b207;
}

.chart-threshold {
  stroke:var(--quiet);
  stroke-dasharray:4 6;
  opacity:.6;
  fill:none;
}

.chart-zero {
  stroke:var(--quiet);
  opacity:.5;
  fill:none;
}

.chart-line {
  fill:none;
  stroke:var(--long);
  stroke-width:2;
  stroke-linejoin:round;
}

.chart-labels {
  fill:var(--quiet);
  font:12px ui-monospace,monospace;
}

.preview-legs {
  margin-top:12px;
  border-top:1px solid var(--border);
  padding-top:14px;
}

.leg-row {
  display:grid;
  grid-template-columns:48px 1.2fr 1fr .5fr;
  align-items:center;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  font-size:.75rem;
}

.leg-row strong {
  font-weight:500;
}

.leg-row>span:nth-last-child(-n+2) {
  color:var(--quiet);
}

.side-long {
  color:var(--long);
}

.side-short {
  color:var(--short);
}

.preview-controls {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  font-size:.75rem;
  color:var(--muted);
}

.preview-controls>span:first-child {
  align-self:center;
  margin-right:4px;
}

.preview-controls>span:not(:first-child) {
  border:1px solid var(--border);
  border-radius:3px;
  padding:4px 8px;
}

.workspace-preview figcaption {
  padding:10px 20px;
  background:var(--bg);
  border-top:1px solid var(--border);
  font-size:.75rem;
  color:var(--quiet);
}

.market-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-block:25px;
  border-block:1px solid var(--border);
  font-size:.8125rem;
}

.market-strip p {
  color:var(--quiet);
  line-height:1.5;
}

.market-strip>div {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  color:var(--muted);
}

.market-strip>a {
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:5px;
}

.section {
  padding-block:76px;
}

.section-head {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:flex-end;
  margin-bottom:38px;
}

.section-tag {
  color:var(--quiet);
  font-size:.875rem;
  margin-bottom:13px;
}

.section-head>p {
  color:var(--muted);
  max-width:375px;
  font-size:1rem;
}

.strategy-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
}

.workflow {
  min-width:0;
}

.workflow>p:first-of-type {
  color:var(--muted);
  font-size:.9375rem;
  margin-top:12px;
  min-height:75px;
}

.workflow-visual {
  margin-top:24px;
  padding:20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
}

.instrument-line {
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:8px;
  align-items:center;
  font-size:.8125rem;
}

.instrument-line strong {
  font-size:.875rem;
  font-weight:500;
}

.instrument-line>span:last-child {
  color:var(--quiet);
  font-size:.75rem;
}

.leg-connector {
  border-left:1px solid var(--border);
  margin:10px 0 10px 20px;
  padding:4px 0 4px 16px;
  color:var(--quiet);
  font-size:.75rem;
}

.workflow-detail {
  font-size:.8125rem;
  color:var(--quiet);
  margin-top:17px;
}

.basket-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:.8125rem;
  min-height:22px;
}

.basket-row>div {
  display:flex;
  gap:4px;
  width:46%;
}

.basket-row i {
  height:10px;
  flex:3;
  background:var(--long);
  opacity:.6;
}

.basket-row i:nth-child(2) {
  flex:2;
  opacity:.8;
}

.basket-row i:nth-child(3) {
  flex:1;
  opacity:1;
}

.basket-row:last-child i {
  background:var(--short);
}

.section-footnote {
  font-size:.8125rem;
  color:var(--quiet);
  margin-top:26px;
}

.platform-section {
  background:var(--panel);
  border-block:1px solid var(--border);
}

.capability-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:46px;
  row-gap:30px;
}

.capability-grid article {
  border-top:1px solid var(--border);
  padding-top:20px;
}

.capability-grid p {
  margin-top:10px;
  color:var(--muted);
  font-size:.9375rem;
  max-width:360px;
}

.market-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px;
}

.market-card {
  padding:24px 0;
  border-top:1px solid var(--border);
}

.market-card>p {
  font-size:.875rem;
  color:var(--quiet);
  margin-top:4px;
}

.venue-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin-top:19px;
  font-size:1rem;
  font-weight:500;
}

.resources-section {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  padding-block:52px 64px;
  border-top:1px solid var(--border);
}

.resources-section h2 {
  font-size:1.8rem;
  max-width:420px;
}

.resources-section article>p:not(.section-tag) {
  font-size:.9375rem;
  color:var(--muted);
  margin-top:18px;
  max-width:440px;
}

.insight .text-link {
  display:inline-block;
  margin-top:24px;
}

.text-link {
  font-size:.875rem;
  text-decoration:underline;
  text-underline-offset:5px;
}

.documentation {
  border-left:1px solid var(--border);
  padding-left:50px;
}

.doc-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  margin-top:24px;
  font-size:.875rem;
}

.doc-links a {
  text-decoration:underline;
  text-underline-offset:5px;
}

.cta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding:48px;
  background:var(--panel);
  border-top:2px solid var(--brand);
  margin-bottom:72px;
}

.cta p {
  color:var(--muted);
  font-size:.9375rem;
  margin-top:16px;
}

.cta-actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.footer {
  border-top:1px solid var(--border);
  padding:46px 0;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.65fr 1fr 1fr 1fr;
  gap:45px;
  font-size:.8125rem;
}

.footer-logo {
  width:120px;
  opacity:.8;
  margin-bottom:18px;
}

.footer-brand p {
  max-width:300px;
  color:var(--quiet);
  margin-bottom:20px;
}

.footer-brand span,.footer-brand small {
  display:block;
  color:var(--quiet);
  font-size:.75rem;
}

.footer h4 {
  font-size:.875rem;
  font-weight:500;
  margin-bottom:14px;
}

.footer a {
  display:block;
  color:var(--muted);
  margin-bottom:7px;
}

.footer a:hover {
  text-decoration:underline;
}

.footer-subhead {
  color:var(--quiet);
  margin-top:14px;
  margin-bottom:7px;
}

.cookie-banner {
  position:fixed;
  left:24px;
  bottom:20px;
  width:min(620px,calc(100% - 48px));
  padding:18px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:7px;
  display:none;
  flex-direction:column;
  gap:12px;
  z-index:50;
  box-shadow:0 12px 40px #0006;
}

.cookie-banner.is-visible {
  display:flex;
}

.cookie-title {
  font-size:.875rem;
  font-weight:600;
}

.cookie-text {
  font-size:.8125rem;
  color:var(--muted);
  order:1;
}

.cookie-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  order:2;
}

.cookie-actions .btn {
  font-size:.8125rem;
  padding:8px 12px;
  min-height:40px;
}

.cookie-modal {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#000b;
  z-index:60;
  padding:24px;
}

.cookie-modal.is-open {
  display:flex;
}

.cookie-modal-card {
  width:min(520px,100%);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:7px;
  padding:24px;
}

.cookie-modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.cookie-close {
  color:var(--text);
  background:transparent;
  border:1px solid var(--border);
  border-radius:4px;
  width:40px;
  height:40px;
}

.cookie-modal-section {
  padding:16px 0;
  border-top:1px solid var(--border);
}

.cookie-modal-section h4 {
  font-size:1rem;
}

.cookie-modal-section p {
  font-size:.875rem;
  color:var(--muted);
  margin:8px 0 12px;
}

.cookie-toggle {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.875rem;
}

.cookie-toggle input {
  accent-color:var(--brand);
  width:18px;
  height:18px;
}

.cookie-modal-actions {
  margin-top:18px;
}

@media(min-width:1600px) {
  .hero {
    gap:80px;
    padding-block:100px 88px;
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px);
  }
  .nav {
    gap:20px;
  }
  .nav-links {
    gap:18px;
  }
  .nav-actions {
    gap:16px;
  }
  .nav-actions .btn {
    padding-inline:14px;
  }
  .brand img {
    width:130px;
  }
  .hero {
    gap:30px;
  }
  .hero h1 {
    font-size:3.6rem;
  }
  .workspace-bar {
    padding-inline:14px;
  }
  .workspace-wordmark span {
    display:none;
  }
  .workspace-body {
    padding:14px;
  }
  .strategy-grid {
    gap:22px;
  }
  .workflow-visual {
    padding:14px;
  }
  .market-strip>div {
    gap:16px;
  }
  .instrument-line {
    grid-template-columns:40px 1fr;
  }
  .instrument-line>span:last-child {
    grid-column:2;
  }
  .resources-section {
    gap:35px;
  }
  .documentation {
    padding-left:35px;
  }
}

@media(max-width:900px) {
  .nav {
    flex-wrap:wrap;
    min-height:78px;
    padding-block:18px;
  }
  .nav-toggle {
    display:block;
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
    border-radius:4px;
    padding:8px 14px;
    min-height:42px;
    margin-left:auto;
  }
  .nav-links {
    display:none;
    order:4;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding-top:12px;
    border-top:1px solid var(--border);
  }
  .nav-links.is-open {
    display:flex;
  }
  .nav-links a {
    padding:10px 0;
  }
  .nav-actions .btn {
    display:none;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:50px;
    gap:36px;
  }
  .hero-copy {
    max-width:650px;
  }
  .hero h1 {
    font-size:4rem;
  }
  .hero h1 br {
    display:none;
  }
  .lead {
    max-width:590px;
  }
  .hero-note {
    max-width:none;
  }
  .workspace-preview {
    width:100%;
    max-width:700px;
  }
  .workspace-wordmark span {
    display:inline;
  }
  .workspace-body {
    padding:20px;
  }
  .market-strip {
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
  }
  .market-strip>div {
    flex-direction:column;
    gap:8px;
  }
  .section-head {
    align-items:flex-start;
    gap:22px;
  }
  .section-head>p {
    max-width:300px;
  }
  .strategy-grid {
    gap:18px;
  }
  .workflow>p:first-of-type {
    min-height:115px;
  }
  .instrument-line {
    grid-template-columns:1fr 1fr;
  }
  .instrument-line>span:last-child {
    grid-column:1 / -1;
  }
  .capability-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
  }
  .footer-grid {
    grid-template-columns:repeat(3,1fr);
    gap:35px;
  }
  .footer-brand {
    grid-column:1/-1;
  }
  .footer-brand p {
    max-width:470px;
  }
  .cta {
    padding:32px;
  }
  .basket-row {
    flex-direction:column;
    align-items:flex-start;
  }
  .basket-row>div {
    width:100%;
  }
}

@media(max-width:600px) {
  .container {
    width:calc(100% - 40px);
  }
  .nav {
    gap:14px;
  }
  .brand img {
    width:126px;
  }
  .nav-actions {
    gap:0;
  }
  .hero {
    padding-top:38px;
  }
  .intro-label {
    font-size:.8125rem;
    margin-bottom:20px;
  }
  .hero h1 {
    font-size:3.25rem;
    max-width:360px;
  }
  .hero h1 br {
    display:block;
  }
  .lead {
    font-size:1rem;
    margin-top:22px;
  }
  .hero-actions {
    gap:10px;
  }
  .hero-actions .btn {
    padding-inline:17px;
  }
  .hero-note {
    font-size:.8125rem;
  }
  .workspace-bar {
    padding:13px 12px;
    gap:8px;
  }
  .workspace-wordmark span {
    display:none;
  }
  .workspace-tabs {
    padding-inline:12px;
  }
  .workspace-body {
    padding:14px 12px;
  }
  .panel-heading {
    gap:8px;
  }
  .leg-row {
    grid-template-columns:40px 1.1fr 1fr .5fr;
    gap:6px;
  }
  .preview-controls {
    gap:6px;
  }
  .preview-controls>span:not(:first-child) {
    padding-inline:6px;
  }
  .workspace-preview figcaption {
    padding:10px 12px;
  }
  .market-strip {
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:16px;
    font-size:.8125rem;
  }
  .market-strip>a {
    grid-column:2;
  }
  .section {
    padding-block:48px;
  }
  .section-head {
    flex-direction:column;
    gap:18px;
    margin-bottom:28px;
  }
  .section-head>p {
    max-width:100%;
  }
  h2 {
    font-size:2rem;
  }
  .strategy-grid {
    grid-template-columns:1fr;
    gap:32px;
  }
  .workflow>p:first-of-type {
    min-height:0;
  }
  .workflow-visual {
    margin-top:18px;
    padding:20px;
  }
  .instrument-line {
    grid-template-columns:48px 1fr auto;
  }
  .instrument-line>span:last-child {
    grid-column:auto;
  }
  .basket-row {
    flex-direction:row;
    align-items:center;
  }
  .basket-row>div {
    width:46%;
  }
  .capability-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .market-grid {
    grid-template-columns:1fr;
  }
  .market-card {
    padding-block:22px;
  }
  .resources-section {
    grid-template-columns:1fr;
    padding-block:40px;
    gap:32px;
  }
  .documentation {
    border-left:0;
    border-top:1px solid var(--border);
    padding:30px 0 0;
  }
  .cta {
    padding:28px 22px;
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
    margin-bottom:48px;
  }
  .cta-actions {
    align-items:flex-start;
  }
  .footer {
    padding-block:34px;
  }
  .footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
  }
  .cookie-banner {
    left:12px;
    bottom:12px;
    width:calc(100% - 24px);
    padding:14px;
  }
  .cookie-actions {
    gap:6px;
  }
  .cookie-actions .btn {
    white-space:normal;
  }
  .cookie-modal {
    padding:16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}


.hero.hero-gallery {
  grid-template-columns: minmax(0, 1fr);
  gap: 38px;
}
.hero-gallery .hero-copy {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0 60px;
  max-width: none;
  align-items: start;
}
.hero-gallery .intro-label { grid-column: 1 / -1; }
.hero-gallery h1 { grid-column: 1; grid-row: 2 / 5; }
.hero-gallery .lead { grid-column: 2; margin-top: 0; max-width: 520px; }
.hero-gallery .hero-actions { grid-column: 2; margin-top: 24px; }
.hero-gallery .hero-note { grid-column: 2; max-width: none; margin-top: 16px; }
.product-gallery { min-width: 0; }
.gallery-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.gallery-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 12px 0;
  min-height: 46px;
  font-size: .9375rem;
}
.gallery-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); }
.gallery-panel[hidden] { display: none; }
.gallery-image-button {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  cursor: zoom-in;
  aspect-ratio: 1.9;
}
.gallery-image-button img { width: 100%; height: 100%; object-fit: contain; }
.gallery-enlarge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  padding: 7px 12px;
  font-size: .8125rem;
}
.gallery-caption { margin-top: 12px; color: var(--quiet); font-size: .8125rem; }
.image-viewer {
  width: min(1800px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
}
.image-viewer::backdrop { background: #000d; }
.image-viewer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 12px; font-size: .875rem; }
.image-viewer-scroll { overflow: auto; max-height: calc(100dvh - 175px); }
.image-viewer-scroll img { width: 100%; min-width: 1100px; max-width: none; }
.image-viewer p { font-size: .8125rem; color: var(--muted); margin-top: 12px; }
body:has(.image-viewer[open]) { overflow: hidden; }
@media (max-width: 900px) {
  .hero-gallery .hero-copy { display: block; }
  .hero-gallery h1 br { display: block; }
  .hero-gallery .lead { margin-top: 24px; max-width: 650px; }
}
@media (max-width: 600px) {
  .gallery-tabs { gap: 20px; }
  .gallery-tabs button { font-size: .8125rem; }
  .gallery-enlarge { right: 6px; bottom: 6px; padding: 4px 7px; font-size: .75rem; }
  .image-viewer { padding: 10px; width: calc(100% - 16px); }
}

/* Demonstration surfaces use the same data and styling in the hero and detail sections. */
.demo-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); }
.demo-terminal { min-width: 760px; color: var(--text); background: #080809; font-size: .8125rem; }
.demo-topbar { display: flex; align-items: center; gap: 24px; padding: 15px 18px; background: #101011; border-bottom: 1px solid var(--border); }
.demo-topbar img { width: 98px; height: auto; }
.demo-topbar > span:first-of-type { color: var(--muted); }
.demo-badge { margin-left: auto; padding: 3px 9px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font-size: .75rem; }
.demo-summary { display: flex; align-items: center; gap: 30px; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--quiet); }
.demo-summary b { font-weight: 500; color: var(--text); margin-left: 8px; }
.demo-summary b.side-long { color: var(--long); }
.demo-execution-grid { display: grid; grid-template-columns: .8fr 1.1fr 1.2fr; gap: 8px; padding: 8px; }
.demo-panel { min-width: 0; border: 1px solid var(--border); background: #0c0c0d; }
.demo-panel-title { padding: 9px 12px; background: #161617; border-bottom: 1px solid var(--border); font-size: .8125rem; font-weight: 500; letter-spacing: 0; }
.demo-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-table th { text-align: left; color: var(--quiet); font-size: .75rem; font-weight: 500; background: #101011; }
.demo-table :is(th,td) { padding: 11px 12px; border-bottom: 1px solid #202023; }
.demo-table td { font-size: .8125rem; }
.demo-table th:not(:first-child), .demo-table td:not(:first-child) { text-align: right; }
.demo-table strong { font-weight: 500; }
.demo-state { font-size: .75rem; color: var(--muted); }
.demo-orders { grid-column: 2 / 4; }
.demo-watchlist { grid-row: 1 / 3; }
.demo-strategies { grid-column: 2; }
.demo-spread { grid-column: 3; display: flex; flex-direction: column; }
.demo-chart { display: block; width: 100%; height: auto; margin: auto 0; }
.demo-grid { stroke: #252528; stroke-width: 1; fill: none; }
.demo-reference { stroke: var(--quiet); stroke-dasharray: 4 5; fill: none; }
.demo-series { stroke: var(--long); fill: none; stroke-width: 2; stroke-linejoin: round; }
.demo-axis { fill: var(--quiet); font: 12px ui-monospace, monospace; }
.demo-status { display: flex; justify-content: space-between; gap: 20px; color: var(--quiet); font-size: .75rem; padding: 10px 18px; border-top: 1px solid var(--border); }
.demo-research-grid { display: grid; grid-template-columns: .8fr 1.5fr; gap: 8px; padding: 8px; }
/* Options illustration: fitted curve (teal) vs market quotes (amber); pair validated for CVD separation on the panel. */
.demo-options-grid { display: grid; grid-template-columns: .8fr 1.5fr; gap: 8px; padding: 8px; }
.demo-options-grid .demo-options-signals { grid-column: 1 / -1; }
.demo-fit { stroke: #2fa98c; fill: none; stroke-width: 2; stroke-linejoin: round; }
.demo-term-point { fill: #2fa98c; stroke: var(--panel); stroke-width: 2; }
.demo-quote { fill: #c2813a; stroke: var(--panel); stroke-width: 2; }
.demo-quote-whisker { stroke: #c2813a; stroke-width: 1.5; opacity: .6; }
.demo-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .75rem; }
.demo-legend i { display: inline-block; width: 12px; height: 2px; margin-left: 6px; background: #2fa98c; }
.demo-legend i.is-quote { width: 8px; height: 8px; border-radius: 50%; background: #c2813a; }
.smile-detail .demo-chart { max-height: 225px; }
.basket-select { border: 0; background: transparent; padding: 8px 10px; margin: -6px 0 -6px -8px; color: var(--muted); font-size: .8125rem; text-align: left; border-left: 2px solid transparent; }
.basket-select[aria-pressed="true"] { color: var(--text); border-left-color: var(--brand); background: #222225; }
.basket-select:hover { color: var(--text); }
.demo-detail-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 0; }
.demo-detail-head h4 { font-size: 1.25rem; font-weight: 500; margin-top: 5px; }
.demo-muted { color: var(--quiet); font-size: .75rem; }
.demo-score { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.basket-detail .demo-chart { max-height: 225px; }
.demo-metrics { display: flex; justify-content: space-between; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--border); }
.demo-metrics span { color: var(--quiet); }
.demo-metrics b { display: block; color: var(--text); font-size: 1rem; font-weight: 500; margin-top: 3px; }
.demo-explanation, .demo-hint { font-size: .8125rem; color: var(--muted); padding: 12px 20px; }
.demo-hint { padding: 18px 12px; }
.demo-accounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 8px; }
.demo-account { border: 1px solid var(--border); padding: 14px 18px; display: grid; gap: 7px; }
.demo-account strong { font-size: .875rem; font-weight: 500; margin-bottom: 4px; }
.demo-account span { display: flex; justify-content: space-between; gap: 20px; color: var(--quiet); }
.demo-account b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-account .side-long { color: var(--long); }
.demo-risk-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; padding: 0 8px 8px; }
.demo-limit { padding: 20px; }
.demo-limit > div { display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.demo-limit strong { color: var(--text); font-size: 1.25rem; font-weight: 500; }
.demo-limit meter { display: block; width: 100%; height: 10px; margin-top: 18px; background: #242426; border: 0; }
.demo-limit meter::-webkit-meter-bar { background: #242426; border: 0; }
.demo-limit meter::-webkit-meter-optimum-value { background: var(--long); }
.demo-limit meter::-moz-meter-bar { background: var(--long); }
.demo-limit p { color: var(--quiet); margin-top: 8px; font-size: .75rem; }
.demo-settings { display: grid; gap: 10px; padding: 0 20px 20px; }
.demo-settings span { display: flex; justify-content: space-between; color: var(--quiet); }
.demo-settings b { font-weight: 500; color: var(--text); }
.demo-events { padding: 6px 18px; }
.demo-events details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.demo-events summary { cursor: pointer; min-height: 32px; }
.demo-events summary time { color: var(--quiet); font-size: .75rem; margin-inline: 4px 12px; }
.demo-events summary strong { font-weight: 500; }
.demo-events summary > span { display: block; margin-left: 20px; color: var(--muted); font-size: .75rem; }
.demo-events p { color: var(--muted); padding: 10px 0 0 20px; max-width: 440px; }
.gallery-panel .demo-terminal { min-height: 515px; }
.gallery-panel .demo-scroll { min-height: 517px; }
.demo-feature + .demo-feature { border-top: 1px solid var(--border); }
.pair-mini-chart { margin-top: 12px; max-width: 300px; }
.pair-mini-chart .demo-chart { max-height: 90px; }
.connectivity-map { padding: 30px; margin-bottom: 28px; border: 1px solid var(--border); background: var(--panel); display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 60px; }
.connectivity-origin { display: flex; flex-direction: column; gap: 16px; position: relative; }
.connectivity-origin > span { color: var(--muted); font-size: .8125rem; }
.connectivity-origin::after { content: ''; position: absolute; width: 60px; height: 1px; background: var(--border); left: 100%; top: 50%; }
.connectivity-branches { border-left: 1px solid var(--border); display: grid; gap: 12px; }
.connectivity-branches > div { padding: 12px 20px; border-left: 2px solid var(--brand); margin-left: -1px; display: flex; justify-content: space-between; gap: 20px; background: #141415; }
.connectivity-branches strong { font-size: .875rem; font-weight: 500; }
.connectivity-branches span { color: var(--muted); font-size: .8125rem; }
@media (max-width: 1100px) {
  .demo-terminal { min-width: 900px; }
  .demo-execution-grid { grid-template-columns: .8fr 1.25fr 1fr; }
  .demo-table :is(th,td) { padding: 10px 9px; }
  .connectivity-branches > div { flex-direction: column; gap: 4px; }
}
@media (max-width: 600px) {
  .demo-terminal { min-width: 820px; }
  .demo-scroll::before { content: 'Scroll to explore the workspace'; display: block; padding: 8px 12px; color: var(--muted); font-size: .75rem; border-bottom: 1px solid var(--border); }
  .connectivity-map { padding: 24px; grid-template-columns: 1fr; gap: 24px; }
  .connectivity-origin::after { display: none; }
  .connectivity-branches { margin-left: 8px; }
}
.gallery-panel .demo-scroll { height: 650px; }
.gallery-panel .demo-terminal { min-height: 648px; }
.demo-events summary:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }